/**
* Responsive Styles for Dr. Ankit Parakh Custom Theme
* Breakpoints: 1200px (Desktop), 1024px (Small Desktop/Tablet), 768px (Tablet/Mobile), 480px (Small Mobile)
*/
/* =========================================================
1. LAPTOPS & SMALL SCREENS (<= 1200px)
========================================================= */
/* Below 1200px the full desktop nav (7 items + logo + Book Appointment CTA)
no longer has room to stay on one line and starts wrapping ugly — switch
to the hamburger drawer here. Kept as its own query (not folded into the
1200px block below) so this nav-switch rule stays easy to find. */
@media (max-width: 1200px) {
.hide-mobile {
display: none !important;
}
.mobile-toggle {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 10px;
cursor: pointer;
width: 44px;
height: 44px;
}
}
@media (max-width: 1200px) {
.site-container {
padding-left: 20px;
padding-right: 20px;
}
.hero-title {
font-size: 3rem;
}
.appointment-grid-4 {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.services-grid-6 {
grid-template-columns: repeat(2, 1fr);
}
.conditions-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.reviews-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.instagram-grid-5 {
grid-template-columns: repeat(3, 1fr);
}
}
/* =========================================================
2. TABLETS (<= 992px)
========================================================= */
@media (max-width: 992px) {
.hide-mobile {
display: none !important;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.hero-content {
text-align: center;
}
.hero-subtitle {
margin-left: auto;
margin-right: auto;
}
.hero-photo-frame {
width: 280px;
height: 320px;
}
.hero-cta-group {
justify-content: center;
}
.hero-video-cta {
margin: 0 auto;
}
.hero-stats-bar {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* Photo moves up between the qualifications and the bio paragraphs —
the name/degrees establish who he is, the photo puts a face to it,
then the paragraphs and CTA follow. */
.specialist-grid {
grid-template-columns: 1fr;
grid-template-areas:
"top"
"visual"
"bottom";
gap: 24px;
}
.specialist-metrics-bar {
grid-template-columns: repeat(3, 1fr);
}
.clinic-feature-box,
.youtube-banner-card {
grid-template-columns: 1fr;
}
.feature-left,
.yb-content {
padding: 30px 24px;
}
.feature-right,
.yb-visual {
height: 280px;
}
.articles-mixed-grid {
grid-template-columns: 1fr;
}
.articles-grid-3 {
grid-template-columns: repeat(2, 1fr);
}
.blog-layout-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.feat-card-grid {
grid-template-columns: 1fr;
gap: 0;
}
.feat-card-media {
height: 260px;
}
.feat-card-info {
padding: 24px;
}
.blog-banner-box {
grid-template-columns: 1fr;
padding: 32px 24px;
text-align: center;
}
.bb-buttons-group {
justify-content: center;
}
.bb-visual {
display: none;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
/* Mobile Hamburger Trigger */
.mobile-toggle {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 10px;
cursor: pointer;
width: 44px;
height: 44px;
}
}
/* Not media-gated: this only styles the inside of .mobile-toggle, which is
display:none by default and only switched on inside the media queries
above — safe to define once, unconditionally. */
.hamburger-icon {
display: flex;
flex-direction: column;
gap: 5px;
width: 20px;
}
.hamburger-icon span {
display: block;
height: 2px;
width: 100%;
background-color: var(--color-primary);
border-radius: 2px;
}
/* =========================================================
3. MOBILE PHONES (<= 768px)
========================================================= */
@media (max-width: 768px) {
.py-section {
padding-top: 50px;
padding-bottom: 50px;
}
/* The bottom bar already carries WhatsApp, and this bubble sat behind it
at bottom:28px — two entry points to the same chat in the same corner.
It stays on desktop, where there is no bar. */
.floating-whatsapp-btn {
display: none !important;
}
/* Footer columns collapse on a phone: five open columns made the footer
about two screens tall, so each is a tappable row that expands. */
summary.footer-col-title {
pointer-events: auto;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0;
padding: 14px 0;
min-height: 24px;
}
summary.footer-col-title::after {
display: none; /* the teal underline dash belongs to a column heading, not a row */
}
.footer-col-plus {
display: block;
position: relative;
width: 14px;
height: 14px;
flex-shrink: 0;
}
.footer-col-plus::before,
.footer-col-plus::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 14px;
height: 2px;
margin-top: -1px;
background: var(--color-teal);
border-radius: 1px;
transition: transform 0.2s ease;
}
.footer-col-plus::after {
transform: rotate(90deg); /* the upright of the +; rotates away when open */
}
details.footer-col[open] .footer-col-plus::after {
transform: rotate(0deg);
}
details.footer-col {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
details.footer-col > .footer-links,
details.footer-col > .footer-clinic-list,
details.footer-col > .footer-col-subtitle {
padding-bottom: 6px;
}
/* The "Latest Articles" header keeps its heading block and its "View
More" button side by side at every width, so on a phone the left
column collapsed to ~147px: the eyebrow badge broke over four lines
and the subtitle became a narrow ribbon. Stack them instead. */
.section-header-flex {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.hero-section {
padding: 36px 0 40px;
}
.hero-title {
font-size: 2.35rem;
}
.hero-subtitle {
font-size: var(--text-base);
margin-bottom: 20px;
}
.hero-photo-frame {
width: 220px;
height: 260px;
}
.hero-floating-card {
right: 0;
bottom: 0;
min-width: 150px;
padding: 12px;
}
.hero-stats-bar {
margin-top: 28px;
}
.hero-stats-bar,
.specialist-metrics-bar {
grid-template-columns: 1fr 1fr;
padding: 18px;
}
.hero-stat-card {
border-right: none;
}
.appointment-grid-4,
.services-grid-6,
.conditions-grid-4,
.reviews-grid-4,
.instagram-grid-5,
.articles-grid-3,
.blog-cards-grid {
grid-template-columns: 1fr;
}
.blog-hero-title {
font-size: 2.1rem;
}
.search-input-group {
flex-direction: column;
border-radius: var(--radius-lg);
padding: 14px;
gap: 10px;
}
.search-field {
width: 100%;
text-align: center;
}
.search-submit-btn {
width: 100%;
}
.feat-card-title {
font-size: var(--text-lg);
}
/* Stacked, these read as six 356px cards — 2,266px of scrolling for one
section, with the picture stranded below its own "Learn More". As a
row (thumbnail left, text right) the same six fit in about a third of
that and scan like a list. The image is placed in column 1 rather than
reordered in the markup, so the heading still comes first in the DOM. */
.service-card {
grid-template-columns: 92px 1fr;
gap: 14px;
padding: 14px;
align-items: center;
}
.service-img-wrap {
grid-column: 1;
grid-row: 1;
width: 92px;
height: 92px;
}
.service-content-left {
grid-column: 2;
grid-row: 1;
}
.service-title {
font-size: var(--text-base);
margin-bottom: 4px;
}
.service-desc {
font-size: var(--text-xs);
line-height: 1.45;
margin-bottom: 6px;
}
.appointment-trust-bar,
.service-bottom-banner,
.google-trust-bar,
.insta-cta-bar,
.clinic-services-strip,
.yb-highlights-strip,
.articles-topic-strip {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 20px;
}
.trust-badges-list {
flex-wrap: wrap;
gap: 12px;
}
.article-side-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-cta-strip {
flex-direction: column;
align-items: flex-start;
padding: 22px 20px;
}
.footer-cta-buttons {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
/* `flex: 1` set flex-basis to 0, so all three buttons claimed a third of
335px each and never wrapped — the phone number and the two labels
overran their pills and printed over one another. Stacked, each button
gets the full width it needs. */
.footer-cta-buttons .btn {
width: 100%;
justify-content: center;
}
.conditions-header {
flex-direction: column;
align-items: center;
}
.conditions-header .section-header {
text-align: center;
max-width: 100%;
}
.conditions-header .title-underline-accent {
margin-left: auto;
margin-right: auto;
}
.conditions-header-art {
max-width: 60%;
margin: 0 auto;
}
.bottom-bar-inner {
flex-direction: column;
gap: 10px;
text-align: center;
}
.mobile-bottom-actions {
display: grid;
}
body {
padding-bottom: 60px; /* Space for mobile sticky footer bar */
}
}
/* =========================================================
4. MOBILE DRAWER NAVIGATION
========================================================= */
.mobile-drawer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Above the chat launcher (9998) and the bottom action bar (9999), which
at 2000 used to float over the open menu and cover its own Book
Appointment button. Both are also hidden while the drawer is open —
see body.drawer-open in main.css. */
z-index: 10000;
visibility: hidden;
transition: visibility 0.3s;
}
.mobile-drawer.is-open {
visibility: visible;
}
.mobile-drawer-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 37, 64, 0.6);
opacity: 0;
transition: opacity 0.3s;
}
.mobile-drawer.is-open .mobile-drawer-overlay {
opacity: 1;
}
.mobile-drawer-panel {
position: absolute;
top: 0;
right: 0;
width: 320px;
max-width: 85%;
height: 100%;
background: var(--color-bg-white);
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.mobile-drawer.is-open .mobile-drawer-panel {
transform: translateX(0);
}
.mobile-drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid var(--color-border);
}
.drawer-close-btn {
background: transparent;
border: none;
cursor: pointer;
color: var(--color-primary);
}
.mobile-drawer-body {
padding: 20px 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.mobile-nav-list li {
border-bottom: 1px solid var(--color-border-light);
}
.mobile-nav-list li a {
display: block;
padding: 12px 0;
font-weight: 600;
font-size: var(--text-base);
color: var(--color-primary);
}
.mobile-accordion-toggle {
display: flex;
align-items: center;
justify-content: space-between;
}
.acc-arrow-btn {
background: transparent;
border: none;
cursor: pointer;
padding: 10px;
color: var(--color-text-muted);
}
.mobile-submenu {
display: none;
padding-left: 14px;
padding-bottom: 10px;
}
.mobile-submenu li a {
font-size: var(--text-sm);
color: var(--color-text-muted);
font-weight: 500;
padding: 8px 0;
}
.mobile-submenu-heading {
font-size: var(--text-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-teal);
margin-top: 14px;
padding-bottom: 4px;
}
.mobile-submenu-heading:first-of-type {
margin-top: 6px;
}
.mobile-accordion-item.is-expanded .mobile-submenu {
display: block;
}
.mobile-accordion-item.is-expanded .acc-arrow-btn {
transform: rotate(180deg);
}
.mobile-drawer-cta {
margin-top: auto;
padding-top: 24px;
}
/* Social row reuses the footer's dark-background icon styling, but the
drawer body is white — override colors here rather than fork the markup. */
.mobile-drawer-social {
justify-content: center;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--color-border-light);
}
.mobile-drawer-social .footer-social-icon {
background: var(--color-bg-alt);
border-color: var(--color-border);
color: var(--color-primary);
}
.mobile-drawer-social .footer-social-icon:hover,
.mobile-drawer-social .footer-social-icon:active {
background: var(--color-teal-dark);
border-color: var(--color-teal);
color: var(--color-bg-white);
}
/* =========================================================================
DETAIL TEMPLATE MOBILE FIXES
-------------------------------------------------------------------------
The condition and service templates collapsed to one column correctly at
1024px, but their grid children kept the default `min-width: auto`, so a
child refused to shrink below its content's intrinsic width: the content
column measured 872px inside a 335px track on a 375px screen. Because
`body` sets `overflow-x: hidden`, the page did not scroll sideways — it
simply clipped the overflow, hiding text and images off-screen.
`min-width: 0` lets the grid track govern its child, which is what makes
these pages readable on a phone at all.
====================================================================== */
.cdd-layout-grid > *,
.sdp-layout-grid > * {
min-width: 0;
}
/* Anything pasted into the page content — wide media, tables, embeds — is
held inside the column rather than stretching it. */
.cdd-page-content img,
.sdp-page-content img,
.cdd-page-content iframe,
.sdp-page-content iframe,
.cdd-page-content video,
.sdp-page-content video {
max-width: 100%;
height: auto;
}
/* Iframes have no intrinsic ratio the way img/video do, so height:auto alone
makes the browser fall back to its ~150px replaced-element default instead
of scaling proportionally — an embedded YouTube video rendered squashed
and tiny. aspect-ratio solves it without JS. */
.cdd-page-content iframe,
.sdp-page-content iframe {
aspect-ratio: 16 / 9;
}
.cdd-page-content table,
.sdp-page-content table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.cdd-page-content pre,
.sdp-page-content pre {
overflow-x: auto;
}
/* Long unbroken strings (URLs, test names) must wrap rather than push the
column wider than the screen. */
.cdd-page-content,
.sdp-page-content {
overflow-wrap: break-word;
}
/* -------------------------------------------------------------------------
HOMEPAGE HORIZONTAL OVERFLOW
The YouTube banner's two columns carried the same `min-width: auto`, so
they held a 401px intrinsic width inside a 375px screen, and the hero's
decorative blob is a fixed 380px. Together they pushed the homepage
sideways by 382px.
---------------------------------------------------------------------- */
.youtube-banner-card > * {
min-width: 0;
}
.yb-img {
max-width: 100%;
height: auto;
}
.hero-bg-blob {
max-width: 100%;
}
/* -------------------------------------------------------------------------
TOUCH TARGETS
Between 44 and 68 controls per page measured under 44px. Icon-only and
inline links inside running text are deliberately excluded — padding them
out would break the line box — so this covers buttons, cards and nav.
---------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
.btn,
button,
.nav-menu > li > a,
.mobile-drawer a,
.cond-card-link,
.sdp-faq-btn,
.cdd-accordion-header,
.footer-menu a {
min-height: 44px;
}
.btn,
button {
min-width: 44px;
}
}
/* -------------------------------------------------------------------------
SIX-UP STRIPS ON SMALL SCREENS
`.clinic-services-strip` and `.yb-highlights-strip` are six-column grids
with a fixed track count, so on a 375px screen their items ran out to
753px and were clipped away by `body{overflow-x:hidden}` — invisible, not
scrollable. Letting the tracks reflow keeps all six readable.
---------------------------------------------------------------------- */
@media (max-width: 900px) {
.clinic-services-strip,
.yb-highlights-strip {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
}
@media (max-width: 420px) {
.clinic-services-strip,
.yb-highlights-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* The mobile drawer is parked off-screen with a transform; clipping it here
stops that parked panel counting toward the page's scroll width. */
.mobile-drawer {
overflow-x: hidden;
}
/* -------------------------------------------------------------------------
GOOGLE TRUST BAR + CHATBOT CHIPS
The trust bar is a fixed four-track grid whose tracks totalled ~432px
inside a 335px container, and the chatbot's suggestion chips sat in a
nowrap flex row. Both pushed the homepage's scroll width to 504px.
---------------------------------------------------------------------- */
@media (max-width: 720px) {
.google-trust-bar {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
row-gap: 12px;
}
.gt-col-btn {
width: 100%;
}
.gt-col-btn .btn {
width: 100%;
justify-content: center;
}
}
/* Chips are a horizontal shelf: let them scroll inside the chat window
rather than widen the page behind it. */
.chatbot-chips-bar {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.chatbot-chips-bar::-webkit-scrollbar {
display: none;
}
.chat-chip-btn {
flex: 0 0 auto;
}
/* A wide call-to-action must never be wider than the column holding it —
the YouTube button measured 353px starting at x=105, which alone kept the
homepage's scroll width at 458px. */
.btn {
max-width: 100%;
}
@media (max-width: 560px) {
.yb-content .btn,
.yb-content .btn-lg {
width: 100%;
justify-content: center;
}
}
/* The off-canvas navigation parks a 306px panel to the right of the viewport
while closed. Every real content overflow is fixed above, so containing the
document is now the correct pattern for that parked panel rather than a way
of hiding clipped text — `body` alone was not enough, the html element needs
it too. */
html {
overflow-x: clip;
}
/* =========================================================================
TEXT CONTRAST — WCAG AA
-------------------------------------------------------------------------
The brand palette is tuned for fills, not for type. Measured on the real
pages, the brand teal scored 2.98:1 as text and the cyan 1.97:1, and white
labels on a teal button were 2.98:1 — the primary call to action across the
whole site failed the standard.
The brand colours are NOT abandoned: every value below is a darker sibling
used only where a colour carries TEXT. Fills, icons, dots, rules and accent
bars keep the original bright palette, which is what the identity actually
lives in. Each value was checked against both white and its own pale tint.
====================================================================== */
:root {
--text-teal: var(--color-teal-dark); /* 5.32:1 on white, 4.81:1 on its tint */
--text-blue: var(--color-blue); /* 5.93 / 5.28 */
--text-cyan: #0E7490; /* 5.36 / 4.95 */
--text-purple: #5B4BD6; /* 6.14 / 5.33 */
--text-pink: #A21D5E; /* 7.31 / 6.26 */
--text-gold: #B45309; /* 5.02 / 4.51 */
--text-mint: #047857; /* 5.48 / 5.21 */
--text-orange: #C2410C; /* 5.18 / 4.77 */
--text-quiet: #5A6B80; /* 5.46 on white, 4.93 on a tint */
}
/* The .color-* utilities only ever set type, so they take the text values. */
.color-teal, .link-teal { color: var(--text-teal); }
.color-blue, .link-blue { color: var(--text-blue); }
.color-cyan, .link-cyan { color: var(--text-cyan); }
.color-purple, .link-purple { color: var(--text-purple); }
.color-pink, .link-pink { color: var(--text-pink); }
.color-gold, .link-gold { color: var(--text-gold); }
.color-mint, .link-mint { color: var(--text-mint); }
.color-orange, .link-orange { color: var(--text-orange); }
/* Components measured as failing on light grounds. */
.trust-highlight,
.insta-swipe-tag,
.feat-cat-name,
.card-read-more-btn,
.feed-count-badge,
.badge-pill.badge-teal-tint { color: var(--text-teal); }
.qual-tag,
.meta-cat { color: var(--text-blue); }
/* .bb-tag is not in this group: it sits on the navy video banner, where this
cyan was 2.3:1. Its light cyan is set in main.css. */
.label-sub,
.avail-status { color: var(--text-cyan); }
.doc-badge-pill { color: var(--text-purple); }
.card-date,
.card-read-time,
.avail-time,
.teddy-tagline,
.section-subtitle { color: var(--text-quiet); }
/* Dark surfaces are the opposite case: there the BRIGHT values are the
legible ones and a darkened sibling would fail, so they are left alone. */
/* Stragglers found by measuring the rendered pages rather than reading CSS. */
/* Every colour utility, including the variants that carry !important and the
red/green pair missed on the first pass. These classes only ever set type,
so each takes the text-safe sibling of its hue. */
:root { --text-red: #BE123C; } /* 6.29:1 on white, 5.38:1 on a pink tint */
.color-teal, .link-teal { color: var(--text-teal) !important; }
.color-blue, .link-blue { color: var(--text-blue) !important; }
.color-sky, .link-sky { color: var(--text-blue) !important; }
.color-cyan, .link-cyan { color: var(--text-cyan) !important; }
.color-purple, .link-purple { color: var(--text-purple) !important; }
.color-pink, .link-pink { color: var(--text-pink) !important; }
.color-red, .link-red { color: var(--text-red) !important; }
.color-green, .link-green { color: var(--text-mint) !important; }
.color-mint, .link-mint { color: var(--text-mint) !important; }
.color-gold, .link-gold { color: var(--text-gold) !important; }
.color-orange, .link-orange { color: var(--text-orange) !important; }
/* Stragglers found by measuring the rendered pages rather than reading CSS. */
.btn-teal-pill { background: var(--color-teal-dark); }
.spotlight-date { color: var(--text-quiet); }
/* Build credit in the footer's bottom bar. Sits on the dark navy ground, so
it takes the light muted value — the darkened text tokens above would fail
there, which is the whole reason those two families are kept separate. */
.bottom-credit {
margin-top: 6px;
font-size: var(--text-xs);
color: var(--color-text-light);
}
.bottom-credit a {
color: #CBD5E1;
text-decoration: underline;
text-underline-offset: 2px;
}
.bottom-credit a:hover,
.bottom-credit a:focus-visible {
color: var(--color-bg-white);
}
/* =========================================================================
PAGE CONTENT TYPOGRAPHY
-------------------------------------------------------------------------
Both detail templates fall back to the page's own content, which is
imported HTML carrying no classes of its own — bare p, h2, ul, img and a
great many
. The theme had no styles for it at all, and its global
`ul, ol { list-style: none }` reset (meant for nav and cards) stripped the
bullets out of every imported list. The result read as an unstyled wall of
text on all 68 pages. This gives that content real typography.
====================================================================== */
.cdd-page-content,
.sdp-page-content {
font-size: var(--text-base);
line-height: 1.75;
color: var(--color-text-main, var(--color-text-main));
}
/* Keep running text at a comfortable measure without boxing in media. */
.cdd-page-content > *,
.sdp-page-content > *,
.cdd-page-content .cdd-overview-content > *,
.sdp-page-content .sdp-rich-text > * {
max-width: 72ch;
}
.cdd-page-content img,
.sdp-page-content img,
.cdd-page-content figure,
.sdp-page-content figure,
.cdd-page-content table,
.sdp-page-content table,
.cdd-page-content iframe,
.sdp-page-content iframe {
max-width: 100%;
}
/* ---- Paragraph rhythm ---- */
.cdd-page-content p,
.sdp-page-content p {
margin: 0 0 1.15em;
}
.cdd-page-content p:empty,
.sdp-page-content p:empty {
display: none;
}
/* ---- Headings: more space above than below, so sections read as groups ---- */
.cdd-page-content h2,
.sdp-page-content h2,
.cdd-page-content h3,
.sdp-page-content h3,
.cdd-page-content h4,
.sdp-page-content h4,
.cdd-page-content h5,
.sdp-page-content h5 {
font-family: var(--font-heading);
color: var(--color-dark, var(--color-primary));
line-height: 1.3;
text-wrap: balance;
margin: 1.9em 0 .6em;
}
.cdd-page-content > :first-child,
.sdp-page-content > :first-child,
.cdd-page-content h2:first-child,
.sdp-page-content h2:first-child {
margin-top: 0;
}
.cdd-page-content h2, .sdp-page-content h2 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.01em; }
.cdd-page-content h3, .sdp-page-content h3 { font-size: var(--text-lg); font-weight: 600; }
.cdd-page-content h4, .sdp-page-content h4 { font-size: var(--text-base); font-weight: 600; }
.cdd-page-content h5, .sdp-page-content h5 { font-size: var(--text-base); font-weight: 600; }
/* ---- Lists: undo the global reset for authored content ---- */
.cdd-page-content ul,
.sdp-page-content ul,
.cdd-page-content ol,
.sdp-page-content ol {
margin: 0 0 1.15em;
padding-left: 1.35em;
}
.cdd-page-content ul,
.sdp-page-content ul { list-style: disc; }
.cdd-page-content ol,
.sdp-page-content ol { list-style: decimal; }
.cdd-page-content li,
.sdp-page-content li {
margin: 0 0 .45em;
padding-left: .2em;
}
.cdd-page-content li::marker,
.sdp-page-content li::marker {
color: var(--text-teal, var(--color-teal-dark));
}
.cdd-page-content li > ul,
.sdp-page-content li > ul,
.cdd-page-content li > ol,
.sdp-page-content li > ol {
margin: .45em 0 .2em;
}
/* ---- Emphasis, links, quotes ---- */
.cdd-page-content strong, .sdp-page-content strong,
.cdd-page-content b, .sdp-page-content b {
color: var(--color-dark, var(--color-primary));
font-weight: 600;
}
.cdd-page-content a,
.sdp-page-content a {
color: var(--text-teal, var(--color-teal-dark));
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.cdd-page-content a:hover,
.sdp-page-content a:hover {
text-decoration-thickness: 2px;
}
.cdd-page-content blockquote,
.sdp-page-content blockquote {
margin: 1.5em 0;
padding: 2px 0 2px 18px;
border-left: 3px solid var(--text-teal, var(--color-teal-dark));
color: var(--color-text-muted, var(--color-text-muted));
}
/* ---- Media ---- */
.cdd-page-content img,
.sdp-page-content img {
height: auto;
border-radius: 12px;
margin: 1.4em 0;
}
/* ---- Tables scroll rather than stretch the column ---- */
.cdd-page-content table,
.sdp-page-content table {
border-collapse: collapse;
width: 100%;
font-size: var(--text-sm);
margin: 1.4em 0;
}
.cdd-page-content th, .sdp-page-content th,
.cdd-page-content td, .sdp-page-content td {
border: 1px solid var(--color-border, var(--color-border));
padding: 9px 12px;
text-align: left;
}
.cdd-page-content th, .sdp-page-content th {
background: var(--color-bg-alt, var(--color-bg-alt));
font-weight: 600;
color: var(--color-dark, var(--color-primary));
}
/* A run of
is how this content was spaced; stop it opening big holes. */
.cdd-page-content br + br,
.sdp-page-content br + br {
display: none;
}
@media (max-width: 560px) {
.cdd-page-content, .sdp-page-content { font-size: var(--text-base); }
.cdd-page-content h2, .sdp-page-content h2 { font-size: var(--text-lg); }
.cdd-page-content h3, .sdp-page-content h3 { font-size: var(--text-md); }
.cdd-page-content img, .sdp-page-content img { margin: 1.1em 0; }
}
/* =========================================================================
CONDITION HERO — compact
It was centred, very tall, and ended in a fixed illustration cropped into
a circle: the asthma infographic appeared on every condition page with its
own text cut off. Now left-aligned, roughly half the height, and it only
carries a picture when that page has one of its own.
====================================================================== */
.cdd-hero-section { padding: 26px 0 30px; }
.cdd-hero-grid {
grid-template-columns: 1fr;
gap: 26px;
align-items: center;
text-align: left;
}
.cdd-hero-left { text-align: left; }
.cdd-hero-title {
font-size: clamp(28px, 4.4vw, 40px);
line-height: 1.12;
letter-spacing: -.02em;
margin: 10px 0 10px;
}
.cdd-hero-desc {
font-size: var(--text-base);
line-height: 1.6;
max-width: 60ch;
margin: 0 0 16px;
}
.cdd-tag-badge { margin: 0; }
.cdd-feature-pills-row {
justify-content: flex-start;
gap: 8px;
margin: 0;
}
.cdd-pill-badge {
padding: 6px 12px;
font-size: var(--text-xs);
}
/* A page that has its own image gets a proper frame, not a circle. */
.cdd-hero-grid:has(.cdd-hero-right) {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 34px;
}
.cdd-hero-media {
border-radius: 16px;
overflow: hidden;
line-height: 0;
}
.cdd-hero-media img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 4 / 3;
object-fit: cover;
}
@media (max-width: 860px) {
.cdd-hero-grid:has(.cdd-hero-right) { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
.cdd-hero-section { padding: 18px 0 22px; }
.cdd-hero-title { font-size: clamp(25px, 7.4vw, 31px); }
.cdd-hero-desc { font-size: var(--text-base); }
.cdd-pill-badge { font-size: var(--text-2xs); padding: 6px 10px; }
}
/* General touch targets also driven by width, not only pointer type — a
coarse-pointer query alone is untestable in this browser and misses touch
laptops that report a fine pointer. */
@media (max-width: 640px) {
.btn,
button,
.cond-card-link,
.sdp-faq-btn,
.cdd-accordion-header { min-height: 44px; }
}
/* =========================================================================
CONTENT SECTIONS — mockup-matched: Overview card + icon-badged accordion
-------------------------------------------------------------------------
docs/conditions-treated-detail.png is the design target: an Overview card,
then each remaining heading as its OWN rounded card with a colour-tinted
icon badge, a title, and — where the heading matches a known clinical
category — a short grey subtitle. These pages were not authored in that
fixed 8-category shape, so headings are not forced into Symptoms/Causes/
etc; each keeps its own title but gets the same colour-coded badge
treatment, so a page with fifteen headings still reads as designed.
Collapsed by default (first item open), so every title is visible before
anything is clicked — exactly what the mockup shows.
====================================================================== */
.ap-sections {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
max-width: 100% !important;
}
.cdd-overview-card.cdd-page-content,
.cdd-fallback-section {
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
margin-bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.cdd-page-content .cdd-overview-content,
.sdp-page-content .sdp-rich-text {
width: 100% !important;
max-width: 100% !important;
}
/* ---- Icon badges: shared by the Overview head and every accordion row ---- */
.ap-item-icon {
flex: none;
width: 40px;
height: 40px;
border-radius: 12px;
display: inline-grid;
place-items: center;
}
.ap-icon-blue { background: #E0F2FE; color: var(--color-blue); }
.ap-icon-green { background: #DCFCE7; color: #15803D; }
.ap-icon-purple { background: #F3E8FF; color: #6D28D9; }
.ap-icon-orange { background: #FFEDD5; color: #C2410C; }
.ap-icon-pink { background: #FCE7F3; color: #A21D5E; }
.ap-icon-teal { background: #CCFBF1; color: var(--color-teal-dark); }
.ap-icon-gold { background: var(--color-gold-light); color: #B45309; }
/* ---- Overview card ---- */
.ap-lead {
background: linear-gradient(180deg, #F3FAF9 0%, var(--color-bg-white) 100%);
border: 1px solid #D8EDE9;
border-radius: 16px;
padding: 18px 22px;
box-shadow: 0 4px 18px rgba(14, 35, 66, 0.04);
}
.ap-lead-head {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 16px;
}
.ap-lead-head .ap-item-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ap-lead-head .ap-item-icon svg {
width: 18px;
height: 18px;
display: block;
}
.ap-lead-title {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 700;
line-height: 1;
color: var(--color-primary);
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
}
/* .cdd-page-content h2 / .sdp-page-content h2 (below) is a class+tag
selector, which outranks the plain-class .ap-lead-title / .ap-related-title
above it — its 1.9em top margin was winning and pushing these two headings
down inside their own box while the icon beside "Overview" stayed centred,
throwing the two out of alignment. Re-declared here with matching
specificity so the intended zero margin actually wins. */
.cdd-page-content .ap-lead-title,
.sdp-page-content .ap-lead-title {
margin: 0;
}
.cdd-page-content .ap-related-title,
.sdp-page-content .ap-related-title {
margin: 0 0 16px;
}
.ap-lead-body {
font-size: var(--text-base);
line-height: 1.65;
color: var(--color-text-body, #334155);
}
.ap-lead-body > :first-child { margin-top: 0; }
.ap-lead-body > :last-child { margin-bottom: 0; }
.ap-lead-body img {
display: block;
max-width: 100%;
width: auto;
height: auto;
margin: 0 auto;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(14, 35, 66, 0.07);
}
/* ---- Accordion: each item is its own card ---- */
.ap-accordion {
display: flex;
flex-direction: column;
gap: 10px;
}
.ap-item {
background: #fff;
border: 1px solid var(--color-border, var(--color-border));
border-radius: 14px;
overflow: hidden;
}
.ap-item[open] {
border-color: #D8EDE9;
}
.ap-item-head {
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
list-style: none;
padding: 16px 18px;
}
.ap-item-head::-webkit-details-marker { display: none; }
.ap-item-head:hover { background: var(--color-bg-alt, var(--color-bg-alt)); }
.ap-item-head:focus-visible {
outline: 2px solid var(--text-teal, var(--color-teal-dark));
outline-offset: -2px;
}
.ap-item-text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ap-item-title {
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: 700;
line-height: 1.35;
color: var(--color-dark, var(--color-primary));
text-wrap: balance;
}
.ap-item-sub {
font-size: var(--text-xs);
color: var(--text-quiet, #5A6B80);
line-height: 1.3;
}
/* Chevron, drawn rather than shipped as an icon file. */
.ap-item-chevron {
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-bg-alt, var(--color-bg-alt));
border: 1px solid var(--color-border, var(--color-border));
position: relative;
transition: transform .18s ease;
}
.ap-item-chevron::before {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 7px;
height: 7px;
border-right: 2px solid var(--text-quiet, #5A6B80);
border-bottom: 2px solid var(--text-quiet, #5A6B80);
transform: translateY(-2px) rotate(45deg);
}
.ap-item[open] > .ap-item-head .ap-item-chevron { transform: rotate(180deg); }
.ap-item[open] > .ap-item-head .ap-item-chevron::before { border-color: var(--text-teal, var(--color-teal-dark)); }
.ap-item-body {
padding: 0 18px 20px 72px;
border-top: 1px solid var(--color-border-light, var(--color-border-light));
margin-top: 2px;
padding-top: 14px;
}
.ap-item-body > :first-child { margin-top: 0; }
.ap-item-body > :last-child { margin-bottom: 0; }
/* ---- Labelled rows: "Preparation: before the test we will..." ---- */
.ap-row,
.ap-row-li {
display: grid;
grid-template-columns: minmax(130px, 200px) 1fr;
gap: 3px 20px;
align-items: baseline;
margin: 0;
padding: 10px 0;
border-bottom: 1px solid var(--color-border-light, var(--color-border-light));
}
.ap-row:last-child,
.ap-row-li:last-child { border-bottom: 0; padding-bottom: 0; }
.ap-row-label { font-weight: 650; color: var(--color-dark, var(--color-primary)); }
.ap-row-text { color: var(--color-text-main, var(--color-text-strong)); }
.ap-row-li { list-style: none; margin-left: -1.35em; padding-left: 0; }
@media (prefers-reduced-motion: reduce) {
.ap-item-chevron { transition: none; }
}
@media (max-width: 640px) {
.ap-sections { gap: 10px; }
.ap-lead { padding: 18px 16px; border-radius: 14px; }
.ap-lead-title { font-size: var(--text-md); }
.ap-item-icon { width: 34px; height: 34px; border-radius: 10px; }
.ap-item-icon svg { width: 17px; height: 17px; }
.ap-item-head { padding: 13px 14px; gap: 11px; min-height: 44px; }
.ap-item-title { font-size: var(--text-sm); }
.ap-item-sub { font-size: var(--text-2xs); }
.ap-item-body { padding: 12px 14px 16px 14px; }
.ap-row, .ap-row-li { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
}
/* =========================================================================
EXPLORE RELATED TOPICS
The page's own "browse the sub-conditions" links (written in the source as
a heading-that-is-just-a-link, followed by "Read More") used to render as
accordion rows with an empty body once opened. Pulled out into their own
card grid with a proper heading instead.
====================================================================== */
.ap-related { margin-top: 28px; }
.ap-related-title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-dark, var(--color-primary));
margin: 0 0 16px;
}
.ap-related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
/* Soft gradient cards, one palette per position so a row of seven reads as a
set rather than a list. Text stays dark navy on the light end of each
gradient for contrast; the arrow sits in a white disc. */
.ap-related-card {
--rel-from: #E0F2FE;
--rel-to: #CCFBF1;
--rel-accent: #0E7490;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 84px;
padding: 18px 16px 18px 20px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.7);
background: linear-gradient(135deg, var(--rel-from) 0%, var(--rel-to) 100%);
box-shadow: 0 6px 18px rgba(14, 35, 66, 0.07);
overflow: hidden;
isolation: isolate;
text-decoration: none !important;
transition: transform .22s ease, box-shadow .22s ease;
}
/* A faint highlight circle in the corner for depth. */
.ap-related-card::before {
content: "";
position: absolute;
right: -28px;
top: -28px;
width: 96px;
height: 96px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
z-index: -1;
transition: transform .3s ease;
}
.ap-related-card:nth-child(6n+2) { --rel-from: #EDE9FE; --rel-to: #FCE7F3; --rel-accent: #7C3AED; }
.ap-related-card:nth-child(6n+3) { --rel-from: #FEF3C7; --rel-to: #FFE4E6; --rel-accent: #C2410C; }
.ap-related-card:nth-child(6n+4) { --rel-from: #DCFCE7; --rel-to: #E0F2FE; --rel-accent: #15803D; }
.ap-related-card:nth-child(6n+5) { --rel-from: #FCE7F3; --rel-to: #E0E7FF; --rel-accent: #BE185D; }
.ap-related-card:nth-child(6n+6) { --rel-from: #E0E7FF; --rel-to: #CFFAFE; --rel-accent: #4338CA; }
.ap-related-name {
font-size: var(--text-base);
font-weight: 700;
color: var(--color-primary);
line-height: 1.35;
text-decoration: none;
}
.ap-related-arrow {
flex: none;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
color: var(--rel-accent);
font-size: var(--text-base);
font-weight: 700;
text-decoration: none;
box-shadow: 0 3px 10px rgba(14, 35, 66, 0.10);
transition: transform .22s ease, background .22s ease, color .22s ease;
}
.ap-related-card:hover,
.ap-related-card:focus-visible {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(14, 35, 66, 0.13);
}
.ap-related-card:hover::before,
.ap-related-card:focus-visible::before {
transform: scale(1.25);
}
.ap-related-card:hover .ap-related-arrow,
.ap-related-card:focus-visible .ap-related-arrow {
background: var(--rel-accent);
color: #fff;
transform: translateX(3px);
}
.ap-related-card:focus-visible {
outline: 3px solid var(--rel-accent);
outline-offset: 2px;
}
@media (max-width: 640px) {
.ap-related-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-related-card { min-height: 76px; padding: 14px 12px 14px 14px; border-radius: 16px; }
.ap-related-name { font-size: var(--text-sm); }
.ap-related-arrow { width: 30px; height: 30px; }
}
@media (max-width: 420px) {
.ap-related-grid { grid-template-columns: 1fr; }
}
/* =========================================================
SINGLE POST — responsive
responsive.css carried no rule for the article template at
all, so a blog post kept its desktop shape on a phone: the
two-column grid stayed at 1.9fr/0.9fr (measured 658px +
233px inside a 375px viewport, with the overflow clipped),
the body card kept 48px of side padding out of 375, and the
title stayed at 2.3rem.
========================================================= */
@media (max-width: 991px) {
.article-layout-grid {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
/* The sidebar is a set of standing CTAs, not part of the
argument — below the article on a narrow screen. */
.sidebar-sticky-wrapper {
position: static;
}
}
@media (max-width: 768px) {
.single-article-header {
padding: 24px 20px;
}
.single-article-title {
font-size: var(--text-2xl);
}
.article-main-body {
padding: 26px 20px;
font-size: var(--text-base);
}
.article-main-body h2 {
font-size: var(--text-lg);
margin-top: 32px;
padding-top: 16px;
}
.article-main-body h3 {
font-size: var(--text-md);
margin-top: 22px;
}
.article-toc {
padding: 16px 18px;
}
/* Wide imported tables scroll inside their own box rather
than pushing the page sideways. */
.article-main-body table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
.author-bio-grid {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 16px;
}
.post-nav-links {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.single-article-title {
font-size: var(--text-xl);
}
.article-main-body {
padding: 22px 16px;
}
.article-breadcrumb {
font-size: var(--text-xs);
}
.medical-disclaimer-card {
flex-direction: column;
gap: 10px;
}
}
/* =========================================================
MOBILE TYPOGRAPHY & DENSITY
-----------------------------------------------------------------
The mobile pass had been done per component, so the hero and a few
grids were handled but the section headings were not: on a 375px
screen "For Appointment" rendered at 40px, the home page's
.specialist-title at 36px over 328px of height, and
.about-sec-heading at 36.8px over five lines. Those are desktop
sizes on a phone.
This block sets one scale for every page hero and section heading
at phone widths, and tightens the vertical rhythm to match — the
sections were built on a 64px desktop rhythm that reads as empty
bands once the type comes down. Loaded after main.css, so it wins
over the per-component values there.
========================================================= */
@media (max-width: 768px) {
/* --- Page hero H1s --- */
.hero-title,
.about-hero-title,
.blog-hero-title,
.cdd-hero-title,
.cond-hero-title,
.contact-hero-title,
.media-hero-title,
.pg-hero-title,
.sdp-hero-h1,
.sdp-hero-title,
.svc-hero-h1,
.svc-hero-title,
.team-hero-title,
.vg-hero-title {
font-size: 2rem; /* 32px */
line-height: 1.2;
letter-spacing: -0.02em;
}
/* --- Section H2s --- */
.section-title,
.about-sec-heading,
.ap-page-articles-title,
.bb-title,
.cond-section-heading,
.contact-section-title,
.feature-title,
.feed-section-heading,
.pg-sec-title,
.sdp-sec-title,
.specialist-title,
.svc-section-heading,
.team-section-title,
.vg-sec-title,
.yb-title {
font-size: 1.625rem; /* 26px */
line-height: 1.25;
letter-spacing: -0.015em;
}
.feat-card-title {
font-size: 1.25rem; /* 20px — a card title, not a section heading */
line-height: 1.3;
}
/* --- Hero sub-headings --- */
.about-hero-subtitle {
font-size: var(--text-md);
line-height: 1.45;
}
/* --- Density --- */
.py-section {
padding-top: 36px;
padding-bottom: 36px;
}
.py-5 {
padding-top: 36px;
padding-bottom: 36px;
}
.section-header-flex,
.section-header-center,
.about-cred-header {
margin-bottom: 24px;
}
.section-subtitle,
.about-cred-sub {
font-size: var(--text-sm);
line-height: 1.55;
}
/* The title underline/dash accents were sized for a 36px heading. */
.title-underline-accent,
.title-dash-accent {
margin-top: 10px;
margin-bottom: 14px;
}
}
@media (max-width: 480px) {
.hero-title,
.about-hero-title,
.blog-hero-title,
.cdd-hero-title,
.cond-hero-title,
.contact-hero-title,
.media-hero-title,
.pg-hero-title,
.sdp-hero-h1,
.sdp-hero-title,
.svc-hero-h1,
.svc-hero-title,
.team-hero-title,
.vg-hero-title {
font-size: 1.75rem; /* 28px */
}
.section-title,
.about-sec-heading,
.ap-page-articles-title,
.bb-title,
.cond-section-heading,
.contact-section-title,
.feature-title,
.feed-section-heading,
.pg-sec-title,
.sdp-sec-title,
.specialist-title,
.svc-section-heading,
.team-section-title,
.vg-sec-title,
.yb-title {
font-size: 1.5rem; /* 24px */
}
}
/* =========================================================
CLINIC FEATURE BOX & SERVICES STRIP — MOBILE
-----------------------------------------------------------------
The box kept its desktop `padding: 50px 60px` at every width, so on a
335px card 120px of that was padding and the copy was left wrapping
inside a 166px column — three or four words a line down 396px of
height. The strip under it was two columns, which broke every label
("Comprehensive / Care Under One / Roof") over two and three lines.
========================================================= */
@media (max-width: 768px) {
.clinic-feature-box {
padding: 0;
gap: 0;
margin-bottom: 20px;
}
.feature-left {
padding: 24px 20px;
}
/* clinic-illus.svg — a placeholder-looking stock illustration, not a
real clinic photo — reads worse than empty space on a phone. Hidden
here; the real content (name, description, services strip) carries
the section without it. */
.feature-right {
display: none;
}
/* The 30px bottom margin (main.css) existed to space the copy from the
image beside it — with .feature-right hidden on mobile it just left
dead air at the bottom of the card. */
.feature-desc {
font-size: var(--text-sm);
line-height: 1.55;
margin-bottom: 0;
}
.feature-left {
padding-bottom: 20px;
}
/* One item per row: each label then reads on a single line. */
.clinic-services-strip {
grid-template-columns: 1fr;
gap: 2px;
padding: 8px 16px;
margin-bottom: 20px;
}
.cs-item {
font-size: var(--text-xs);
padding: 9px 0;
min-height: 24px;
}
.cs-item + .cs-item {
border-top: 1px solid var(--color-border-light);
}
}
/* The 420px rule above put the strip back to two columns; this keeps the
single column all the way down. */
@media (max-width: 420px) {
.clinic-services-strip,
.yb-highlights-strip {
grid-template-columns: 1fr;
}
}
/* =========================================================
CARD STACKS — MOBILE ROWS
-----------------------------------------------------------------
Stacked full-width, these grids ran to whole screens of scrolling for
one section: conditions 4x451px = 1,877px, home articles 3x531px =
1,618px, the blog feed 11x543px = 6,203px and contact 3x497px =
1,557px. Re-laid as thumbnail-left rows they scan like an app list
and take roughly a third of the height. The image is placed into
column 1 rather than moved in the markup, so headings keep their
reading order.
========================================================= */
@media (max-width: 768px) {
/* --- Conditions (home) --- */
.condition-card {
display: grid;
grid-template-columns: 104px 1fr;
align-items: center;
text-align: left;
gap: 0;
}
.cond-media {
grid-column: 1;
grid-row: 1;
aspect-ratio: 1 / 1;
height: 100%;
}
.cond-body {
grid-column: 2;
grid-row: 1;
align-items: flex-start;
text-align: left;
padding: 12px 14px;
}
.cond-body .dots-accent {
display: none; /* a decorative flourish that only cost a row of height */
}
.cond-title {
font-size: var(--text-base);
margin-bottom: 4px;
}
.cond-desc {
font-size: var(--text-xs);
line-height: 1.45;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.conditions-grid-4 {
gap: 12px;
margin-bottom: 20px;
}
}
@media (max-width: 768px) {
/* --- Latest Articles (home) --- */
.article-card {
display: grid;
grid-template-columns: 108px 1fr;
align-items: center;
gap: 0;
}
.article-card-media {
grid-column: 1;
grid-row: 1;
aspect-ratio: 1 / 1;
}
.article-card-body {
grid-column: 2;
grid-row: 1;
padding: 12px 14px;
}
.article-card-title {
font-size: var(--text-sm);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-card-excerpt {
display: none; /* the title already carries it at this size */
}
.articles-grid-3 {
gap: 12px;
}
/* --- Blog feed --- */
.blog-article-card {
display: grid;
grid-template-columns: 116px 1fr;
align-items: stretch;
gap: 0;
}
.card-thumb-wrap {
grid-column: 1;
grid-row: 1;
aspect-ratio: 1 / 1;
height: 100%;
}
.card-tag-pill {
display: none; /* no room for it over a 116px thumbnail */
}
.card-body-wrap {
grid-column: 2;
grid-row: 1;
padding: 12px 14px;
}
.card-article-title {
font-size: var(--text-sm);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-excerpt-text,
.verified-tag {
display: none;
}
.card-footer-line {
justify-content: flex-start;
}
.blog-cards-grid {
gap: 12px;
}
}
@media (max-width: 768px) {
/* --- Contact: clinic location cards ---
The three thumbnails are 205x70 source files drawn at 334x155 — upscaled
1.6x wide and 2.2x tall, so on a phone they are 465px of visibly soft
filler above the information people actually came for (OPD room,
timings, phone). Hidden until real photographs of the three locations
exist; the pin badge still marks each card. */
.contact-loc-thumb-wrap {
display: none;
}
.contact-loc-badge-floating {
position: static;
margin: 14px 0 0 16px;
}
.contact-loc-body {
padding-top: 8px;
}
.contact-locations-grid {
gap: 14px;
}
}
/* =========================================================
TAP TARGETS (WCAG 2.5.8 — 24px minimum)
-----------------------------------------------------------------
The footer columns were given this treatment already; these are the
inline and card links that were missed — 16px to 22px tall, which a
mouse handles and a thumb does not. Padding is spent vertically and
pulled back with an equal negative margin, so nothing moves.
========================================================= */
@media (max-width: 768px) {
.service-link,
.article-card-link,
.card-read-more-btn,
.ap-page-articles-all,
.contact-loc-btn-link,
.footer-bottom .bottom-credit a,
.bottom-credit a {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 4px 0;
margin: -4px 0;
}
/* Prose links inside article and page copy. */
.entry-content a,
.article-main-body a,
.page-content a,
.ap-item-body a,
.doc-name-link,
.contact-loc-facts a {
padding: 3px 0;
display: inline-block;
min-height: 22px;
}
/* The table-of-contents rows on a post. */
.article-toc-title {
min-height: 32px;
padding: 5px 0;
}
.article-toc-list li a {
display: inline-block;
padding: 5px 0;
min-height: 24px;
}
}
/* =========================================================
CARD PADDING ON PHONES
-----------------------------------------------------------------
These containers kept their desktop inset at every width. On a 335px
card, 30px or 36px a side leaves 263-275px for the copy — and once an
inner body (14px) and a blockquote (18px) take their own share, a
paragraph on the asthma page was reading 224px wide, about 25
characters a line over 308px of height. The panels below are the ones
measured at >=48px of combined horizontal padding at 375px.
========================================================= */
@media (max-width: 768px) {
.cdd-overview-card,
.cdd-expert-care-banner,
.about-metrics-bar,
.about-hospital-card,
.team-stats-strip,
.team-doctor-card,
.team-mascot-banner-card,
.team-modal-card,
.sdp-hero-card,
.sdp-video-explainer-card,
.cond-teddy-cta-banner,
.feat-card-info,
.sidebar-card,
.blog-banner-box,
.follow-bar {
padding-left: 16px;
padding-right: 16px;
}
/* The two panels that also carried a tall vertical inset. */
.cdd-overview-card,
.team-doctor-card {
padding-top: 18px;
padding-bottom: 18px;
}
.ap-item-body {
padding-left: 12px;
padding-right: 12px;
}
.ap-item-body blockquote {
padding-left: 12px;
}
.mobile-drawer-header,
.mobile-drawer-body {
padding-left: 18px;
padding-right: 18px;
}
}
/* =========================================================
MOBILE DRAWER — MOTION & POLISH
-----------------------------------------------------------------
The panel slid in, but everything inside it snapped: the submenus
flipped between display:none and block with no transition, and the
chevron jumped 180deg untweened. The toggle button had no pressed
state either. Submenu height is animated with grid-template-rows
(0fr -> 1fr) because `display` cannot be transitioned.
========================================================= */
.mobile-toggle {
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
-webkit-tap-highlight-color: transparent;
}
.mobile-toggle:active {
transform: scale(0.94);
background: var(--color-border-light);
}
.hamburger-icon span {
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.mobile-drawer-overlay {
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.mobile-drawer-panel {
transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Submenus: animate the height instead of toggling display.
max-height rather than the grid 0fr/1fr trick — that one only collapses a
single grid child, and these lists hold 20-odd , so every row past the
first kept its natural height and the menu stood permanently open. */
.mobile-submenu {
display: block;
max-height: 0;
overflow: hidden;
padding-bottom: 0;
opacity: 0;
transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.24s ease,
padding-bottom 0.3s ease;
}
.mobile-accordion-item.is-expanded .mobile-submenu {
max-height: 1400px;
opacity: 1;
padding-bottom: 10px;
}
.acc-arrow-btn {
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}
.mobile-accordion-item.is-expanded .acc-arrow-btn {
color: var(--color-teal);
}
/* Nav rows get a pressed state and a full-width tap area. */
.mobile-nav-list li a,
.mobile-submenu li a {
transition: color 0.18s ease, padding-left 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.mobile-nav-list li a:active,
.mobile-submenu li a:active {
color: var(--color-teal);
padding-left: 4px;
}
.drawer-close-btn {
transition: transform 0.2s ease, color 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.drawer-close-btn:active {
transform: rotate(90deg) scale(0.92);
}
@media (prefers-reduced-motion: reduce) {
.mobile-drawer-panel,
.mobile-submenu,
.acc-arrow-btn,
.mobile-toggle,
.drawer-close-btn,
.hamburger-icon span {
transition: none !important;
}
}
/* =========================================================
DECORATIVE ART ON PHONES
-----------------------------------------------------------------
These illustrations all carry alt="" — they are decoration, not
content. On a 375px screen the conditions header spent 124px on its
illustration plus ~80px of gap before the first card, and the hero's
floating doodles sit behind live text at that width. Hidden on phones
and untouched on desktop, where there is room for them.
========================================================= */
@media (max-width: 768px) {
.conditions-header-art,
.doodle-cloud-top,
.doodle-heart-top,
.doodle-heart-outline,
.soft-plus-icon {
display: none;
}
.conditions-header {
gap: 0;
margin-bottom: 4px;
}
/* Third condition card runs a line longer than its neighbours; clamping
the title keeps the four rows the same height. */
.cond-title {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
@media (max-width: 768px) {
/* Two of the six service rows ran a line longer than the rest (167px vs
148px). Clamping the title and the blurb makes the list even. */
.service-title {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.service-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Section headers: badge, title, rule and blurb were stacked on a desktop
rhythm, costing 168px before any content. */
.section-header {
margin-bottom: 20px;
}
.section-header .badge-pill {
margin-bottom: 10px;
}
.section-subtitle {
margin-bottom: 0;
}
}
/* =========================================================
HERO — PHONES
-----------------------------------------------------------------
Two stacked full-width CTAs, then a play link, then the portrait, then
five stat rows: the hero ran 1,140px on an 812px screen before anyone
saw a word of the page. WhatsApp goes, because the sticky bar at the
bottom of every screen already carries it — leaving one unambiguous
primary action. The stat labels were wrapping ("Years / Experience",
"Awards & / Honors"), so the icons shrink and the type comes down to
let each label hold its line.
========================================================= */
@media (max-width: 768px) {
/* One primary action. WhatsApp lives in the sticky bottom bar. */
.hero-cta-group .btn-whatsapp-pill {
display: none;
}
.hero-cta-group {
display: block;
}
.hero-cta-group .btn-navy-pill {
width: 100%;
justify-content: center;
}
/* Watch Video link removed on phones — the doctor photo and CTA already
carry the hero, and the video is one tap away on the YouTube channel
link elsewhere on the page. */
.hero-video-cta {
display: none;
}
/* Stats: tighter card, smaller icon, labels that fit on one line. */
.hero-stats-bar {
margin-top: 24px;
padding: 6px 14px;
gap: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 14px;
}
.hero-stat-card {
gap: 10px;
padding: 11px 0;
min-width: 0;
}
.hero-stat-card:nth-child(odd):not(:last-child),
.hero-stat-card:nth-child(even) {
border-bottom: 1px solid var(--color-border-light);
}
.hero-stat-card:nth-last-child(-n+1) {
border-bottom: none;
}
.stat-icon-box {
width: 34px;
height: 34px;
flex-shrink: 0;
}
.stat-icon-box svg {
width: 17px;
height: 17px;
}
.stat-info {
min-width: 0;
}
.stat-number {
font-size: var(--text-base);
}
.stat-text {
font-size: var(--text-3xs);
line-height: 1.25;
display: block;
}
/* The rating card is absolutely positioned over the portrait — fine on a
desktop hero, but at 375px it covered the doctor's face, and taken out
of the overlay it just became a tall empty panel beside him. The 4.9/5
Google rating is still on the contact page and in the review section,
so the hero does without it on a phone. */
.hero-floating-card {
display: none;
}
}
/* =========================================================
BOTTOM CTA BANNERS — PHONES
-----------------------------------------------------------------
The teddy banners stack to a centred column on a phone, but the two
buttons kept their content widths, so the WhatsApp pill sat visibly
narrower than the Book pill under it, and the mascot sat off the
heading's optical centre. WhatsApp is dropped here for the same
reason as in the hero: the sticky bar carries it on every screen.
========================================================= */
@media (max-width: 768px) {
.service-bottom-banner,
.cond-teddy-cta-banner {
padding: 16px;
gap: 14px;
}
/* The mascot centred over left-aligned copy read as two different
alignments in one card. Kept on the same line as the text instead. */
.banner-left-content,
.teddy-banner-left {
flex-direction: row;
align-items: center;
gap: 12px;
text-align: left;
}
.banner-icon-teddy,
.teddy-icon-wrap {
flex-shrink: 0;
}
.banner-icon-teddy img,
.teddy-icon-wrap .teddy-img {
width: 40px !important;
height: 40px !important;
}
.banner-title,
.teddy-heading {
font-size: var(--text-md);
line-height: 1.3;
display: block;
}
.banner-tag,
.teddy-desc {
font-size: var(--text-xs);
}
/* One action, full width — matching the hero. */
.banner-right-btns .btn-whatsapp-pill,
.teddy-banner-right .btn-hero-whatsapp {
display: none;
}
.banner-right-btns,
.teddy-banner-right {
display: block;
width: 100%;
}
.banner-right-btns .btn,
.teddy-banner-right .btn {
width: 100%;
justify-content: center;
}
}
/* =========================================================
FOLLOW BAR
========================================================= */
.follow-handle {
display: inline-block;
margin-top: 4px;
font-weight: 700;
color: var(--color-teal-dark, #00796B);
}
@media (max-width: 768px) {
/* The two buttons sized to their labels, so YouTube (175px) sat visibly
wider than Instagram (128px). Equal width reads as one pair. */
.follow-bar {
flex-direction: column;
align-items: stretch;
text-align: left;
gap: 14px;
}
.follow-bar-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
width: 100%;
}
.follow-bar-actions .btn {
width: 100%;
justify-content: center;
}
.follow-bar-copy strong {
font-size: var(--text-md);
line-height: 1.3;
}
.follow-bar-copy span {
font-size: var(--text-xs);
line-height: 1.5;
}
}
@media (max-width: 420px) {
.follow-bar-actions {
grid-template-columns: 1fr; /* both labels stop fitting side by side */
}
}
@media (max-width: 768px) {
/* "Congenital Lung Diseases" takes a second line where the other three
titles take one, so that row stood 26px taller. A floor on the card
levels all four for the cost of a little padding on the short ones. */
.condition-card {
min-height: 152px;
}
}
/* =========================================================
APPOINTMENT SECTION — PHONES
========================================================= */
@media (max-width: 768px) {
/* --- Clinic location cards ---
Icon, name, address, a timings chip and a button each on their own
band made every card ~290px tall. Putting the name beside the icon,
trimming the chip and the padding takes roughly a third off without
dropping anything a patient needs. */
.clinic-card-content {
padding: 14px 14px 14px;
}
.clinic-card-head {
gap: 10px;
margin-bottom: 8px;
}
.clinic-badge-icon {
width: 32px;
height: 32px;
}
.clinic-badge-icon svg {
width: 17px;
height: 17px;
}
.clinic-name {
font-size: var(--text-base);
min-height: 0; /* the desktop rule reserved two lines to align a row */
}
.clinic-location {
min-height: 0;
margin-bottom: 10px;
font-size: var(--text-xs);
}
.clinic-availability-tag {
min-height: 0;
padding: 8px 10px;
margin-bottom: 10px;
}
.appointment-grid-4 {
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 20px;
}
/* --- Trust bar ---
The shield sat centred against a two-line heading, and the four
badges made a ragged two-column block. Icon to the top line, badges
on an even 2x2 grid. */
.appointment-trust-bar {
padding: 16px;
gap: 14px;
flex-direction: column;
align-items: stretch;
}
.trust-message {
align-items: flex-start;
gap: 10px;
}
.trust-message svg {
flex-shrink: 0;
margin-top: 2px;
}
.trust-message strong {
font-size: var(--text-sm);
line-height: 1.35;
}
.trust-message p {
margin-top: 2px;
}
.trust-badges-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 12px;
padding-top: 12px;
border-top: 1px solid var(--color-border-light);
}
.trust-badge-item {
font-size: var(--text-xs);
min-width: 0;
}
.trust-badge-item svg {
flex-shrink: 0;
}
}
/* =========================================================
GALLERIES ON PHONES
-----------------------------------------------------------------
The photo gallery dropped to a single column below 480px, so its 122
photos ran 33,181px — about forty screens. The video gallery was one
column too, at 21,704px. Two columns each is the usual phone gallery
shape and roughly halves both.
========================================================= */
@media (max-width: 480px) {
.pg-photos-grid {
columns: 2;
column-gap: 10px;
}
.photo-card-item {
margin-bottom: 10px;
}
}
@media (max-width: 768px) {
.vg-videos-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.vg-video-card .vg-video-title,
.vg-video-card [class*=title] {
font-size: var(--text-xs);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
@media (max-width: 480px) {
/* In two masonry columns a caption is ~163px wide, so a long one ran
many short lines and made its tile much taller than its photo. */
.photo-card-caption {
font-size: var(--text-2xs);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* =========================================================
KNOW YOUR DOCTOR — PHONES
========================================================= */
@media (max-width: 768px) {
/* Five stats and four dividers in one wrapping flex row: at 302px the
columns broke into ragged rows and the dividers wrapped with them,
leaving hairlines floating in empty space. A grid places the five
evenly; the dividers only ever made sense on a single line. */
.hosp-center-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 12px;
justify-items: center;
text-align: center;
}
.hosp-stat-divider {
display: none;
}
.hosp-stat-col {
width: 100%;
}
.hosp-center-stats .hosp-stat-col:last-child {
grid-column: 1 / -1; /* the fifth, centred across both columns */
}
.hosp-stat-num {
font-size: var(--text-xl);
}
/* The value cards carried both a 10px row gap and an 8px title margin
between heading and copy, inside 24px of padding — the heading read as
detached from its own description. */
.about-why-card {
padding: 16px;
gap: 6px 12px;
}
.about-why-title {
margin-bottom: 0;
font-size: var(--text-base);
}
.about-why-desc {
font-size: var(--text-xs);
line-height: 1.5;
}
.about-why-icon-badge {
width: 40px;
height: 40px;
}
.about-why-grid {
gap: 12px;
}
}
/* =========================================================
HAMBURGER — MODERN MORPH-TO-X
-----------------------------------------------------------------
The icon was three static bars with no feedback on open/close beyond
the drawer itself sliding in. `aria-expanded` on the button (already
set by main.js) is used as the CSS hook, so no script change is
needed: the three bars morph into an X, the middle bar fades out, and
the button gets an active tint — the same signal every native app menu
gives.
========================================================= */
.hamburger-icon {
position: relative;
height: 16px;
}
.hamburger-icon span {
position: absolute;
left: 0;
width: 100%;
transform-origin: center;
}
.hamburger-icon span:nth-child(1) { top: 0; }
.hamburger-icon span:nth-child(2) { top: 7px; }
.hamburger-icon span:nth-child(3) { top: 14px; }
/* Graduated bar widths (100% / 70% / 45%) read as a lighter, more modern
mark than three equal bars — the classic "hamburger" clone every site
used through the 2010s. Widths transition back to 100% on open so the
X still forms from full-length bars. */
.hamburger-icon span:nth-child(1) { width: 100%; }
.hamburger-icon span:nth-child(2) { width: 70%; }
.hamburger-icon span:nth-child(3) { width: 45%; }
.hamburger-icon span {
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-toggle[aria-expanded="true"] {
background: var(--color-teal-light, #E6F7F5);
border-color: var(--color-teal);
}
.mobile-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
top: 7px;
width: 100%;
transform: rotate(45deg);
}
.mobile-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
width: 100%;
opacity: 0;
transform: scaleX(0);
}
.mobile-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
top: 7px;
width: 100%;
transform: rotate(-45deg);
}
.mobile-toggle[aria-expanded="true"] .hamburger-icon span {
background-color: var(--color-teal-dark, #00796B);
}
@media (prefers-reduced-motion: reduce) {
.hamburger-icon span { transition: none !important; }
}