/* =========================================================
Sardar Trust Eye Hospital — Stylesheet
Brand primary: #2C7198 (electric royal blue)
Palette (modern premium healthcare — blue lead, teal accent, mono text):
--primary: #2C7198 (brand blue — links, link-hover, focus, hero)
--deep: #024B78 (deep royal navy — banners, panels)
--deep-2: #023757 (darkest navy — topbar, footer, dark sections)
--accent: #245E80 (deep brand blue — CTAs, highlights)
--sand: #F7FAFC (cool near-white page background)
--ink: #313131 (near-black text on light surfaces)
--white: #FFFFFF (text on dark surfaces)
--mist: #EEF4F9 (pale blue tint for section backgrounds)
Type:
Display: "Montserrat" (geometric sans, confident heading weight)
Body/UI: "Inter"
Signature element: the "eye-line" divider — a thin rule that blinks
into a lens shape at section breaks (see .eye-divider) referencing
the hospital's core subject: vision.
========================================================= */
/* Webfonts are loaded from a in each page's (with preconnect)
rather than an @import here: an @import forces the browser to download
this stylesheet before it can even start on the fonts, which delays first
paint on every page. */
:root{
/* ---- Brand ---- */
--primary:#2C7198;
--primary-600:#245E80;
--primary-300:#7FB0CC;
--deep:#024B78;
--deep-2:#023757;
--brand:#023757; /* alias for --deep-2, used by the profile/blog modules */
--teal:#2C7198;
--teal-light:#4E93BD;
/* The accent tokens used to hold a second, competing green hue. The site
now runs on a single blue family plus neutrals, so these resolve to the
brand blue. Every existing rule that references them still works. To
reintroduce a green accent later, change only these three values. */
--accent:#245E80;
--accent-dark:#023757;
--accent-light:#2C7198;
/* ---- Surfaces ----
--page is the pure-white page canvas. --sand is no longer the page
background: it is now the secondary "inset" surface (wells, panels,
drop zones) that has to read as recessed against pure white. */
--page:#FFFFFF;
--white:#FFFFFF;
--sand:#F6F9FB;
--sand-2:#E2EDF5;
--mist:#F1F6FA;
/* ---- Text ---- */
--ink:#313131;
--muted:#5C6B76;
/* ---- Hairlines ----
--line defines card and divider edges; --line-strong is for controls
(inputs, selects, secondary buttons) which need a visible boundary
against a white page. */
--line: rgba(16,46,72,0.11);
--line-strong: rgba(16,46,72,0.20);
/* ---- Radius scale ----
One scale for the whole site: controls, insets, cards, panels.
--radius is kept as an alias so existing rules stay valid. */
--r-xs:6px; /* counters, tiny badges */
--r-sm:8px; /* buttons, inputs, tabs, chips */
--r-md:12px; /* wells, insets, small panels */
--r-card:14px; /* cards */
--r-lg:16px; /* media, feature imagery */
--r-xl:18px; /* large panels, dialogs, banners */
--radius: var(--r-card);
/* ---- Elevation ----
Two-layer shadows: a tight contact shadow for edge definition plus a
wide, low-opacity ambient layer. Reads crisp on white instead of the
single large blur that flattens everything into a haze. */
--shadow-xs: 0 1px 2px rgba(16,46,72,.05);
--shadow: 0 1px 2px rgba(16,46,72,.04), 0 6px 16px rgba(16,46,72,.06);
/* ---- Type scale ----
One scale for the whole site. Every font-size in this file resolves to
one of these eight steps, so text is consistent from page to page
instead of drifting between 40-plus ad-hoc values. Root is 16px. */
--fs-xs:0.75rem; /* 12px - micro labels, uppercase eyebrows */
--fs-sm:0.875rem; /* 14px - captions, buttons, nav, table text */
--fs-base:1rem; /* 16px - body copy (default) */
--fs-lg:1.125rem; /* 18px - lead paragraphs, intros */
--fs-h3:1.25rem; /* 20px - H3 / card titles */
--fs-h2:1.5rem; /* 24px - H2 / section titles */
--fs-h1:2rem; /* 32px - H1 / page titles */
--fs-display:2.5rem; /* 40px - hero headline only */
/* ---- Vertical rhythm ----
Section padding is driven from one variable so page spacing can be
tuned in a single place rather than per-section. */
--space-section:2.6rem;
--space-section-sm:2rem;
--maxw: 1180px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
font-family:'Inter',system-ui,sans-serif;
font-size:var(--fs-base);
color:var(--ink);
background:var(--page);
line-height:1.55;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;border-radius:var(--r-card);}
.brand img,.footer-brand img,nav img{border-radius:0;}
.people-photo img,.doc-photo img{border-radius:0;} /* clipped by their card frame */
a{color:inherit;text-decoration:none;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{
font-family:'Montserrat',sans-serif;
font-optical-sizing:auto;
font-weight:600;
line-height:1.22;
margin:0 0 .4em;
color:var(--ink);
letter-spacing:-0.015em;
text-wrap:balance;
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-base);}
h5{font-size:var(--fs-sm);}
p{margin:0 0 .8em;text-wrap:pretty;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
/* Outline only — never set border-radius here, or circular controls
(FABs, close buttons, lightbox arrows) would be squared off. Browsers
already follow each element's own radius when drawing the outline. */
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
/* ---------- Skip link (keyboard + screen-reader users) ---------- */
.skip-link{
position:absolute;left:16px;top:-48px;z-index:300;
background:var(--deep-2);color:var(--white);
padding:10px 16px;border-radius:var(--r-sm);
font-size:var(--fs-sm);font-weight:600;
transition:top .18s var(--ease-out);
}
.skip-link:focus{top:12px;}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5em;
font-family:'Inter',sans-serif;font-weight:600;font-size:0.875rem;
line-height:1.3;letter-spacing:.005em;
padding:.72em 1.25em;border-radius:var(--r-sm);border:1px solid transparent;
cursor:pointer;
transition:background-color .18s var(--ease-out),border-color .18s var(--ease-out),
color .18s var(--ease-out),box-shadow .2s var(--ease-out),
transform .18s var(--ease-out);
white-space:nowrap;text-align:center;-webkit-appearance:none;appearance:none;
}
.btn svg{flex-shrink:0;}
.btn-primary{
background:var(--primary);border-color:var(--primary);
color:var(--white);box-shadow:var(--shadow-xs);
}
.btn-primary:hover{
background:var(--primary-600);border-color:var(--primary-600);
transform:translateY(-1px);box-shadow:0 4px 12px rgba(36,94,128,.22);
}
.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-xs);}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.7);color:var(--white);}
.btn-outline:hover{background:var(--white);border-color:var(--white);color:var(--deep);}
.btn-outline-dark{background:transparent;border-color:var(--deep);color:var(--deep);}
.btn-outline-dark:hover{background:var(--deep);border-color:var(--deep);color:var(--white);}
.btn-ghost{background:var(--mist);border-color:var(--line);color:var(--deep);}
.btn-ghost:hover{background:var(--sand-2);border-color:var(--line-strong);color:var(--deep-2);}
.btn-sm{padding:.55em 1em;font-size:0.875rem;}
/* ---------- Signature divider ---------- */
.eye-divider{
display:flex;align-items:center;justify-content:center;
gap:14px;margin:0 auto;max-width:200px;padding:1.2rem 0;
}
.eye-divider::before,.eye-divider::after{content:"";flex:1;height:1px;background:var(--line);}
.eye-divider svg{width:34px;height:16px;flex-shrink:0;}
.eye-divider svg .pupil{fill:var(--accent);}
.eye-divider svg .lid{stroke:var(--teal);fill:none;stroke-width:1.6;}
/* ---------- Header / Nav (pill design) ---------- */
header.site-header{
background:var(--white);position:sticky;top:0;z-index:100;
box-shadow:0 1px 0 var(--line);
animation:headerIn .6s var(--ease-out) both;
}
@keyframes headerIn{from{transform:translateY(-100%);}to{transform:none;}}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px;}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand img{height:90px;width:auto;}
nav.main-nav{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;}
nav.main-nav > ul{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;}
nav.main-nav > ul > li{position:relative;}
nav.main-nav > ul > li > a{
display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
font-weight:600;font-size:0.875rem;color:var(--ink);
border-radius:var(--r-sm);white-space:nowrap;
transition:background .22s var(--ease-out),color .22s;
}
nav.main-nav .ni{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease-spring);}
nav.main-nav > ul > li > a:hover,
nav.main-nav > ul > li:hover > a,
nav.main-nav > ul > li.active > a{color:var(--primary);background:var(--mist);}
nav.main-nav > ul > li.active > a .ni{stroke-width:2;}
nav.main-nav > ul > li form.nav-logout{margin:0;}
nav.main-nav > ul > li form.nav-logout button{
display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
font-family:inherit;font-weight:600;font-size:0.875rem;color:var(--ink);
border-radius:var(--r-sm);white-space:nowrap;background:none;border:none;cursor:pointer;
transition:background .22s var(--ease-out),color .22s;
}
nav.main-nav > ul > li form.nav-logout button:hover{color:var(--primary);background:var(--mist);}
nav.main-nav > ul > li > a:hover .ni{transform:translateY(-1.5px) scale(1.08);}
nav.main-nav .caret{width:9px;height:9px;opacity:.55;flex-shrink:0;transition:transform .25s var(--ease-out);}
nav.main-nav > ul > li:hover .caret{transform:rotate(180deg);}
.dropdown{
position:absolute;top:calc(100% + 8px);left:0;background:var(--white);min-width:240px;
box-shadow:var(--shadow-lg);border-radius:var(--r-md);padding:8px;opacity:0;visibility:hidden;
transform:translateY(10px);transition:opacity .2s var(--ease-out),transform .24s var(--ease-out),visibility .2s;
border:1px solid var(--line);z-index:5;
}
.dropdown::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;}
nav.main-nav > ul > li:hover .dropdown,
nav.main-nav > ul > li:focus-within .dropdown{opacity:1;visibility:visible;transform:none;}
.dropdown a{
display:block;padding:10px 13px;border-radius:var(--r-xs);font-size:0.875rem;font-weight:500;color:var(--ink);
transition:background .16s,color .16s,padding-left .2s var(--ease-out);
}
.dropdown a:hover{background:var(--mist);color:var(--primary);padding-left:18px;}
.nav-cta{display:flex;gap:10px;align-items:center;flex-shrink:0;}
.nav-toggle{display:none;background:var(--mist);border:1px solid var(--line);cursor:pointer;padding:9px;border-radius:var(--r-sm);transition:background .2s,border-color .2s;}
.nav-toggle:hover{background:var(--sand-2);}
.nav-toggle svg{width:24px;height:24px;display:block;}
/* ----- Mobile drawer (light, icon list — sample style) ----- */
@media (max-width:1200px){
nav.main-nav{
position:fixed;inset:0 0 0 auto;width:min(330px,88vw);height:100vh;height:100dvh;
background:var(--white);flex-direction:column;align-items:stretch;justify-content:flex-start;
padding:84px 18px 30px;transform:translateX(100%);transition:transform .32s var(--ease-out);
overflow-y:auto;z-index:150;box-shadow:-16px 0 48px rgba(2,55,87,.14);
}
nav.main-nav.open{transform:translateX(0);}
nav.main-nav>ul{flex-direction:column;align-items:stretch;gap:6px;}
nav.main-nav>ul>li>a{
display:flex;padding:13px 14px;border-radius:var(--r-sm);font-size:1rem;color:var(--ink);
}
nav.main-nav>ul>li>a:hover,
nav.main-nav>ul>li.active>a{background:var(--mist);color:var(--primary);}
nav.main-nav>ul>li.open>a{background:var(--mist);color:var(--primary);}
nav.main-nav>ul>li form.nav-logout button{
display:flex;width:100%;padding:13px 14px;border-radius:var(--r-sm);font-size:1rem;color:var(--ink);
}
nav.main-nav>ul>li form.nav-logout button:hover{background:var(--mist);color:var(--primary);}
nav.main-nav .ni{width:19px;height:19px;}
nav.main-nav .caret{margin-left:auto;}
nav.main-nav>ul>li.open .caret{transform:rotate(180deg);}
.dropdown{
position:static;box-shadow:none;border:none;background:var(--sand);border-radius:var(--r-md);
opacity:1;visibility:visible;transform:none;display:none;margin:4px 6px 8px 6px;padding:6px;
}
nav.main-nav>ul>li.open .dropdown{display:block;animation:dropIn .28s var(--ease-out);}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.dropdown a{padding:10px 12px 10px 40px;position:relative;font-size:0.875rem;}
.dropdown a::before{content:"";position:absolute;left:20px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--accent-light);transform:translateY(-50%);}
.dropdown a:hover{padding-left:44px;}
.nav-toggle{display:block;position:relative;z-index:160;}
.nav-cta .btn-sm{padding:.6em 1em;font-size:0.75rem;}
.brand img{height:90px;}
}
.nav-scrim{display:none;position:fixed;inset:0;background:rgba(2,40,63,.45);backdrop-filter:blur(3px);z-index:99;}
.nav-scrim.show{display:block;animation:scrimIn .3s ease;}
@keyframes scrimIn{from{opacity:0;}to{opacity:1;}}
/* ---------- Hero ---------- */
.hero{
position:relative;color:var(--white);overflow:hidden;
background:var(--deep-2);
min-height:440px;display:flex;align-items:center;
}
.hero::after{
content:"";position:absolute;inset:0;
background:linear-gradient(120deg,rgba(2,55,87,0) 40%,rgba(44,113,152,.35));
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.hero h1{color:#fff;font-size:var(--fs-display);max-width:14ch;}
.hero p.lead{color:#D7E7F2;font-size:var(--fs-lg);line-height:1.6;max-width:52ch;margin-bottom:1.2em;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.hero-media{position:relative;}
.hero-media .frame{
border-radius:var(--r-lg);overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.30);
border:5px solid rgba(255,255,255,.14);
}
.hero-media img{width:100%;height:340px;object-fit:cover;}
.floating-cards{position:absolute;left:-30px;bottom:-24px;background:#fff;color:var(--ink);
border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:16px 20px;display:flex;gap:14px;align-items:center;}
.floating-cards .num{font-family:'Montserrat',sans-serif;font-size:1.75rem;color:var(--accent);font-weight:700;}
.floating-cards .lbl{font-size:0.75rem;color:var(--teal);font-weight:600;max-width:14ch;}
@media (max-width:900px){
.hero-grid{grid-template-columns:1fr;}
.hero-media{order:-1;}
.floating-cards{position:static;margin-top:-40px;margin-left:16px;width:fit-content;}
}
/* Floating action buttons (WhatsApp / Donate / Appointment) */
.float-actions{position:fixed;right:20px;bottom:24px;display:flex;flex-direction:column;gap:12px;z-index:120;}
.float-actions a{
width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 14px rgba(2,40,63,.22);transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out);
}
.float-actions a:hover{transform:scale(1.05);}
.fab-whatsapp{background:#25D366;}
.fab-donate{background:var(--primary);}
.fab-appointment{background:var(--deep);}
.float-actions svg{width:26px;height:26px;fill:#fff;}
/* ---------- Sections ---------- */
section{padding:var(--space-section) 0;background:#fff;}
.section-alt{background:#fff;}
.section-deep{background:var(--deep-2);color:#D7E7F2;}
.section-deep h2,.section-deep h3{color:#fff;}
.section-head{max-width:720px;margin:0 0 1.5rem;text-align:left;}
.section-head p{color:var(--muted);font-size:var(--fs-lg);line-height:1.6;}
.section-head.left{margin-left:0;text-align:left;}
/* Kept so existing markup using .center still works where a centred
block is genuinely wanted (empty states, success panels). */
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.stat-card{
background:var(--white);border-radius:0;padding:18px 16px;text-align:left;
border:1px solid var(--line);
}
.stat-card .num{font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:700;color:var(--accent);}
.stat-card .lbl{font-size:0.875rem;color:var(--teal);font-weight:600;letter-spacing:.02em;}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
/* Appointment CTA band */
.cta-band{
background:var(--deep);color:#fff;border-radius:var(--r-xl);
padding:1.8rem;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
box-shadow:0 10px 30px rgba(2,55,87,.14);
}
.cta-band h2{color:#fff;margin-bottom:.2em;}
.cta-band p{color:rgba(255,255,255,.92);margin:0;}
.cta-band .btn-outline{border-color:#fff;}
/* Expertise accordion-esque cards */
.expertise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.expertise-card{
background:var(--white);border:1px solid var(--line);border-radius:0;
padding:20px 18px;
}
.expertise-card h4{color:var(--deep);font-size:1.125rem;margin-bottom:.6em;}
.expertise-card p{font-size:0.875rem;color:var(--ink);margin:0;}
@media (max-width:900px){.expertise-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.expertise-grid{grid-template-columns:1fr;}}
/* News / board preview split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;}
.split img{border-radius:var(--r-lg);box-shadow:var(--shadow);width:100%;height:400px;object-fit:cover;}
.split.reverse{direction:rtl;}
.split.reverse > *{direction:ltr;}
@media (max-width:880px){.split{grid-template-columns:1fr;}.split img{height:280px;}}
/* FAQ */
.faq{max-width:820px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
width:100%;text-align:left;background:none;border:none;cursor:pointer;
display:flex;justify-content:space-between;align-items:center;
padding:22px 4px;font-family:'Montserrat',sans-serif;font-size:1.125rem;color:var(--deep-2);gap:16px;
}
.faq-q .plus{font-size:1.5rem;color:var(--accent);transition:transform .2s ease;flex-shrink:0;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.faq-a-inner{padding:0 4px 22px;color:var(--ink);}
.faq-a-inner ol,.faq-a-inner ul{padding-left:1.3em;margin:.6em 0;}
.faq-a-inner li{list-style:decimal;margin-bottom:.3em;}
/* Insights band */
.insights{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow);}
.insight{background:var(--deep);color:#fff;padding:1.4rem 1.2rem;text-align:left;border-right:1px solid rgba(255,255,255,.12);}
.insight:last-child{border-right:none;}
.insight .num{font-family:'Montserrat',sans-serif;font-size:2.5rem;font-weight:700;color:var(--primary);}
.insight .lbl{font-size:0.875rem;letter-spacing:.03em;color:#CFE3F0;margin-top:.3em;}
@media (max-width:900px){.insights{grid-template-columns:repeat(2,1fr);}}
/* Team / people grid */
.people-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:18px;}
.people-card{
background:#fff;border-radius:0;overflow:visible;
border:1px solid var(--line);display:flex;flex-direction:column;
padding:1.5rem 1.25rem 1.3rem;
text-align:left;
}
.people-photo{
width:132px;height:132px;flex:0 0 auto;
border-radius:50%;
margin:0 0 1.1rem;
padding:7px;
background:var(--mist);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.people-photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top center;}
.people-body{padding:0;flex:0 0 auto;display:flex;flex-direction:column;gap:8px;}
.people-body h4{font-size:1.125rem;margin:0 0 .35em;color:var(--primary);line-height:1.28;min-height:2.9rem;}
.people-role{color:var(--muted);font-weight:600;font-size:0.875rem;margin:0 0 1.1rem;line-height:1.4;min-height:3.8rem;}
/* Cards with a "Request an Appointment" CTA (doctor listings) reserve fixed
name/role height so the button lands at the same spot on every card,
regardless of name/designation length. Cards without a CTA (plain team
member cards — technicians, optometrists, admin staff, residents) skip
this on purpose so they stay compact instead of gaining dead space. */
.people-card:has(.people-cta) .people-body h4{min-height:2.7rem;}
.people-card:has(.people-cta) .people-role{min-height:2.8rem;}
.people-view{display:inline-flex;align-items:center;gap:.6em;color:var(--deep);font-weight:700;transition:color .2s ease,transform .2s ease;}
.people-card:not(:has(.people-contact)) .people-view{margin-top:auto;}
.people-view svg{width:15px;height:15px;transition:transform .2s ease;}
.people-card:hover .people-view{color:var(--primary);}
.people-card:hover .people-view svg{transform:translateX(3px);}
@media (max-width:900px){.people-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.people-grid{grid-template-columns:1fr;}}
.people-grid.board-grid,
.people-grid.profile-grid {
grid-template-columns:repeat(3,minmax(220px,1fr));
gap:1rem;
}
.people-grid.board-grid .people-card,
.people-grid.profile-grid .people-card {
padding:.8rem .85rem .8rem;
border-radius:1.25rem;
width:100%;
margin:0 auto;
align-items:center;
text-align:center;
}
.people-grid.board-grid .people-photo,
.people-grid.profile-grid .people-photo {
width:108px;
height:108px;
margin-bottom:.55rem;
padding:5px;
}
.people-grid.board-grid .people-body,
.people-grid.profile-grid .people-body {
gap:5px;
align-items:center;
}
.people-grid.board-grid .people-body h4,
.people-grid.profile-grid .people-body h4 {
font-size:1.05rem;
margin-bottom:.2rem;
min-height:2rem;
}
.people-grid.board-grid .people-role,
.people-grid.profile-grid .people-role {
font-size:.84rem;
margin-bottom:.6rem;
min-height:2.3rem;
}
.people-grid.board-grid .people-view,
.people-grid.profile-grid .people-view {
display:inline-flex;
align-items:center;
gap:.6em;
color:var(--deep);
font-weight:700;
transition:color .25s var(--ease-out),transform .25s var(--ease-out);
border:none;
background:none;
padding:0;
text-decoration:none;
}
.people-grid.board-grid .people-contact,
.people-grid.profile-grid .people-contact {
text-align:center;
}
@media (max-width:1080px){.people-grid.board-grid,.people-grid.profile-grid{grid-template-columns:repeat(2,minmax(200px,1fr));}}
@media (max-width:760px){.people-grid.board-grid,.people-grid.profile-grid{grid-template-columns:1fr;}}
/* two-photo group blocks (team directory sections) */
.group-block{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;margin-bottom:2.6rem;}
.group-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.group-photos img{border-radius:0;height:210px;object-fit:cover;}
@media (max-width:880px){.group-block{grid-template-columns:1fr;}}
/* single-image group block: enlarge the lone photo so it fills its column and reads balanced */
.group-photos:has(img:only-child){grid-template-columns:1fr;}
.group-photos:has(img:only-child) img{height:380px;}
@media (max-width:900px){.group-photos:has(img:only-child) img{height:320px;}}
@media (max-width:560px){.group-photos:has(img:only-child) img{height:240px;}}
/* Gallery grid (about us) */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gallery-grid img{border-radius:0;height:220px;width:100%;object-fit:cover;}
.gallery-grid .tall{grid-row:span 2;height:100%;}
@media (max-width:880px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.gallery-grid{grid-template-columns:1fr;}}
/* Page header banner (inner pages) */
.page-banner{
background:var(--deep-2);color:#fff;padding:2rem 0 1.7rem;position:relative;overflow:hidden;
}
.page-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(2,55,87,0) 45%,rgba(44,113,152,.30));}
.page-banner .container{position:relative;z-index:1;}
.breadcrumb{font-size:var(--fs-xs);color:#A9C8DB;margin-bottom:.6em;}
.breadcrumb a{color:#A9C8DB;}
.breadcrumb a:hover{color:var(--primary-300);text-decoration:underline;}
.page-banner h1{color:#fff;margin-bottom:.3em;max-width:22ch;}
.page-banner p{color:#D7E7F2;max-width:60ch;margin:0;line-height:1.7;}
/* Cards generic */
.card{background:#fff;border-radius:0;border:1px solid var(--line);padding:20px;}
/* Patient Testimonials */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testimonial-card{background:#fff;border-radius:0;padding:22px 20px;border:1px solid var(--line);position:relative;}
.testimonial-card .quote-mark{font-family:'Montserrat',sans-serif;font-size:2.5rem;color:var(--sand-2);position:absolute;top:6px;right:20px;line-height:1;}
.testimonial-card p{font-style:italic;color:var(--ink);position:relative;z-index:1;}
.testimonial-name{font-weight:700;color:var(--deep);margin-top:1em;}
@media (max-width:900px){.testimonial-grid{grid-template-columns:1fr;}}
/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-grid .full{grid-column:1/-1;}
label{display:block;font-weight:600;font-size:0.875rem;letter-spacing:.005em;margin-bottom:.45em;color:var(--deep-2);}
input,textarea,select{
width:100%;padding:.7em .9em;border:1px solid var(--line-strong);border-radius:var(--r-sm);
font-family:'Inter';font-size:1rem;line-height:1.45;background:#fff;color:var(--ink);
}
input:focus,textarea:focus,select:focus{border-color:var(--teal);outline:none;}
input::placeholder,textarea::placeholder{color:#93A2AD;}
textarea{resize:vertical;min-height:120px;}
.form-note{font-size:0.875rem;color:#5C6B76;margin-top:1em;}
/* Doctor find grid */
.doctor-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:1.8rem;}
/* Services */
.service-block{padding:1.4rem 0;border-bottom:1px solid var(--line);}
.service-block:last-child{border-bottom:none;}
.service-title{display:flex;align-items:baseline;gap:16px;margin-bottom:1.2em;}
.service-title .idx{font-family:'Montserrat',sans-serif;color:var(--accent);font-size:1.125rem;}
.service-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 30px;}
.service-list li{padding:.5em 0;border-bottom:1px dashed var(--line);color:var(--ink);font-weight:500;}
.service-list li::before{content:"— ";color:var(--accent);}
.service-toc{display:flex;flex-wrap:wrap;gap:10px;margin:2rem 0;}
.service-toc a{background:var(--white);border:1px solid var(--line-strong);padding:.55em 1em;border-radius:var(--r-sm);font-size:0.875rem;font-weight:600;color:var(--deep);transition:background .18s var(--ease-out),color .18s var(--ease-out),border-color .18s var(--ease-out);}
.service-toc a:hover{background:var(--teal);color:#fff;border-color:var(--teal);}
@media (max-width:700px){.service-list{grid-template-columns:1fr;}}
/* Program highlight list */
.highlight-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}
.highlight-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;background:rgba(255,255,255,.72);backdrop-filter:blur(2px);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 32px;box-shadow:var(--shadow-xs);min-height:140px;justify-content:center;flex:1 1 calc(50% - 20px);max-width:calc(50% - 20px);}
.highlight-item svg{width:36px;height:36px;color:var(--accent);flex-shrink:0;padding:9px;border-radius:50%;background:rgba(6,69,104,.08);}
.highlight-item p{margin:0;color:var(--ink);line-height:1.6;max-width:44ch;font-size:0.98rem;}
@media (max-width:700px){.highlight-item{flex:1 1 100%;max-width:100%;}}
/* Decorative light bulb background used on select sections */
.bulb-decor-section{position:relative;overflow:hidden;}
.bulb-decor-section>.container{position:relative;z-index:1;}
.bulb-decor-section::before{
content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
width:min(900px,140%);height:380px;
background:radial-gradient(ellipse at 50% 0%, rgba(255,196,92,.24) 0%, rgba(255,196,92,.12) 40%, rgba(255,196,92,0) 72%);
z-index:0;pointer-events:none;
}
.bulb-decor{position:absolute;top:0;left:50%;transform:translateX(-50%);width:clamp(200px,22vw,320px);opacity:.85;z-index:0;pointer-events:none;}
.bulb-decor img{display:block;width:100%;height:auto;}
@media (max-width:700px){
.bulb-decor{width:clamp(150px,42vw,220px);opacity:.7;}
.bulb-decor-section::before{height:260px;}
}
/* Simple content prose */
.prose{max-width:72ch;}
.prose h2,.prose h3{margin-top:1.6em;}
.prose ul{margin:1em 0;padding-left:1.3em;}
.prose ul li{list-style:disc;margin-bottom:.4em;}
/* Placeholder image box (for missing media) */
.ph{
background:repeating-linear-gradient(135deg,var(--mist),var(--mist) 10px,var(--sand-2) 10px,var(--sand-2) 20px);
border:1px dashed var(--teal-light);border-radius:var(--r-card);display:flex;align-items:center;justify-content:center;
color:var(--teal);font-weight:600;font-size:0.875rem;text-align:center;padding:20px;min-height:180px;
}
/* Video card */
.video-card{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;background:#fff;border-radius:0;padding:1.5rem;border:1px solid var(--line);}
.image-panel{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--sand);display:flex;align-items:center;justify-content:center;min-height:260px;padding:12px;}
.video-card img{border-radius:0;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
@media (max-width:820px){.video-card{grid-template-columns:1fr;}.image-panel{min-height:auto;padding:10px;}}
/* Map */
.map-embed{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);}
.map-embed iframe{width:100%;height:360px;border:0;display:block;}
/* Footer */
footer.site-footer{background:#023757;color:#fff;padding:2.2rem 0 1.2rem;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:2rem;}
.footer-grid h5{color:#fff;font-family:'Inter';font-weight:700;font-size:0.875rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:1.1em;}
.footer-grid p{color:#fff;font-size:0.875rem;}
.footer-grid ul li{margin-bottom:.6em;}
.footer-grid ul a{color:#fff;font-size:0.875rem;}
.footer-grid ul a:hover{color:var(--primary-300);}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:1.2em;}
.footer-brand img{height:56px;width:auto;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:1.2rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:0.875rem;color:#fff;}
.footer-bottom a{color:#fff;}
.footer-bottom a:hover{color:var(--primary-300);}
@media (max-width:900px){
.footer-grid{grid-template-columns:1fr 1fr;}
.stats-grid{grid-template-columns:repeat(2,1fr);}
.split{gap:30px;}
}
@media (max-width:600px){
.footer-grid{grid-template-columns:1fr;}
section{padding:var(--space-section-sm) 0;}
.cta-band{padding:1.5rem;flex-direction:column;text-align:left;align-items:flex-start;}
}
/* =========================================================
Appointment booking widget (Odoo-style flow, static)
========================================================= */
.appt-wrap{max-width:1080px;margin:0 auto;}
.appt-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:1.6rem;flex-wrap:wrap;}
.appt-back{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:0.875rem;color:var(--primary);cursor:pointer;background:none;border:none;padding:6px 0;}
.appt-back:hover{color:var(--primary-600);text-decoration:underline;}
.appt-back svg{width:16px;height:16px;}
/* Step indicator */
.appt-steps{display:flex;align-items:center;gap:6px;font-size:0.875rem;font-weight:600;flex-wrap:wrap;}
.appt-steps .step{display:inline-flex;align-items:center;gap:8px;color:var(--muted);}
.appt-steps .step .dot{width:24px;height:24px;border-radius:50%;background:var(--mist);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:0.875rem;border:1px solid var(--line-strong);}
.appt-steps .step.active{color:var(--ink);}
.appt-steps .step.active .dot{background:var(--primary);color:#fff;border-color:var(--primary);}
.appt-steps .step.done{color:var(--accent);}
.appt-steps .step.done .dot{background:var(--accent);color:#fff;border-color:var(--accent);}
.appt-steps .sep{width:26px;height:2px;background:var(--line);border-radius:2px;}
/* Doctor choose grid */
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.doc-card{background:#fff;border:1px solid var(--line);border-radius:0;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s var(--ease-out);}
.doc-card:hover{border-color:rgba(44,113,152,.24);}
.doc-photo{aspect-ratio:1/1;overflow:hidden;background:var(--mist);}
.doc-photo img{width:100%;height:100%;object-fit:cover;}
.doc-photo-fallback{display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:600;}
.doc-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;}
.doc-op{display:inline-flex;align-items:center;gap:8px;font-size:0.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.5em;}
.doc-op .op-badge{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.75rem;letter-spacing:0;}
.doc-body h3{font-size:1.125rem;margin-bottom:.4em;color:var(--ink);}
.doc-addr{display:flex;gap:8px;align-items:flex-start;font-size:0.875rem;color:var(--muted);margin-bottom:1.2em;}
.doc-addr svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--accent);}
.doc-card .btn{margin-top:auto;width:100%;justify-content:center;}
@media (max-width:900px){.doc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.doc-grid{grid-template-columns:1fr;}}
/* Booking layout: main + summary sidebar */
.appt-layout{display:grid;grid-template-columns:1.55fr .95fr;gap:34px;align-items:start;}
@media (max-width:860px){.appt-layout{grid-template-columns:1fr;}}
.appt-main{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:22px 24px;}
.appt-main h2{font-size:1.5rem;margin-bottom:1.2rem;}
/* Calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.cal-title{font-family:'Montserrat',sans-serif;font-weight:600;font-size:1.125rem;color:var(--ink);}
.cal-nav{display:flex;gap:8px;}
.cal-nav button{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .16s var(--ease-out),border-color .16s var(--ease-out),color .16s var(--ease-out);}
.cal-nav button:hover:not(:disabled){border-color:var(--primary);color:var(--primary);background:var(--mist);}
.cal-nav button:disabled{opacity:.35;cursor:not-allowed;}
.cal-nav svg{width:16px;height:16px;}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
.cal-weekdays span{text-align:center;font-size:0.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:6px 0;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-day{aspect-ratio:1/1;border:1px solid transparent;border-radius:var(--r-sm);background:var(--sand);color:var(--ink);font-weight:600;font-size:0.875rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .14s ease;font-family:'Inter',sans-serif;}
.cal-day:hover:not(:disabled):not(.empty){border-color:var(--primary);color:var(--primary);background:var(--mist);}
.cal-day.selected{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 8px rgba(44,113,152,.28);}
.cal-day.today{border-color:var(--accent);}
.cal-day:disabled{color:#c2c6cf;background:transparent;cursor:not-allowed;}
.cal-day.empty{background:transparent;border:none;cursor:default;}
/* Controls: timezone + staff */
.appt-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:1.6rem;}
.appt-controls .field label{display:block;font-weight:600;font-size:0.875rem;margin-bottom:.4em;color:var(--ink);}
@media (max-width:520px){.appt-controls{grid-template-columns:1fr;}}
/* Time slots */
.slots-wrap{margin-top:1.8rem;border-top:1px solid var(--line);padding-top:1.4rem;}
.slots-empty{color:var(--muted);font-size:0.875rem;}
.slot-group{margin-bottom:1.2rem;}
.slot-group h4{font-size:0.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.7em;}
.slot-list{display:flex;flex-wrap:wrap;gap:10px;}
.slot{padding:.6em 1.05em;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:#fff;color:var(--ink);font-weight:600;font-size:0.875rem;cursor:pointer;transition:background .16s var(--ease-out),border-color .16s var(--ease-out),color .16s var(--ease-out);font-family:'Inter',sans-serif;}
.slot:hover{border-color:var(--accent);color:var(--accent);background:rgba(44,113,152,.06);}
.slot.selected{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 8px rgba(94,140,21,.26);}
/* Summary sidebar */
.appt-summary{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:20px 20px 22px;position:sticky;top:96px;}
.appt-summary .sum-photo{width:96px;height:96px;border-radius:var(--r-md);object-fit:cover;background:var(--mist);margin-bottom:1rem;}
.appt-summary h3{font-size:1.25rem;margin-bottom:.2em;}
.appt-summary .sum-tag{font-size:0.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2em;}
.sum-list{border-top:1px solid var(--line);padding-top:1.1rem;display:flex;flex-direction:column;gap:.9rem;}
.sum-row{display:flex;gap:12px;align-items:flex-start;font-size:0.875rem;color:var(--ink);}
.sum-row svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;color:var(--primary);}
.sum-row .lbl{display:block;font-size:0.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
.sum-row a:hover{color:var(--primary);}
.sum-when{margin-top:1.2rem;background:var(--mist);border-radius:var(--r-md);padding:14px 16px;font-size:0.875rem;}
.sum-when .lbl{font-size:0.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);margin-bottom:4px;display:block;}
.sum-when strong{color:var(--ink);}
/* Details form */
.appt-form .form-grid{gap:18px;}
.appt-form .req{color:var(--accent);}
.appt-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.6rem;}
/* Booked confirmation */
.appt-done{text-align:left;max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:1.8rem 1.6rem;}
.appt-done .check{width:72px;height:72px;border-radius:50%;background:rgba(44,113,152,.12);display:flex;align-items:center;justify-content:center;margin:0 0 1.1rem;}
.appt-done .check svg{width:44px;height:44px;color:var(--accent);}
.appt-done h2{font-size:1.75rem;margin-bottom:.4em;}
.appt-done p{color:var(--muted);}
.appt-recap{text-align:left;background:var(--mist);border-radius:var(--r-md);padding:20px 22px;margin:1.6rem 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;}
.appt-recap .r{display:flex;flex-direction:column;}
.appt-recap .r .lbl{font-size:0.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);margin-bottom:3px;}
.appt-recap .r span{color:var(--ink);font-weight:600;}
@media (max-width:520px){.appt-recap{grid-template-columns:1fr;}}
.appt-done .appt-actions{justify-content:flex-start;}
/* View toggling */
[data-view]{display:none;}
[data-view].is-active{display:block;animation:apptFade .35s ease;}
@keyframes apptFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
/* =========================================================
PREMIUM ENHANCEMENT LAYER
Signature: "focus pull" — content resolves from soft blur
to crisp as it enters view, echoing an eye focusing.
========================================================= */
:root{
--glow:#4E93BD;
--brand-grad:var(--primary);
/* elevation continues the two-layer scale declared at the top of the file */
--shadow-sm: 0 1px 2px rgba(16,46,72,.04), 0 3px 8px rgba(16,46,72,.05);
--shadow-md: 0 2px 6px rgba(16,46,72,.05), 0 10px 24px rgba(16,46,72,.08);
--shadow-lg: 0 4px 10px rgba(16,46,72,.05), 0 18px 40px rgba(16,46,72,.10);
--shadow-xl: 0 4px 12px rgba(8,30,52,.10), 0 28px 64px rgba(8,30,52,.24);
--ease-out:cubic-bezier(.22,.61,.36,1);
--ease-spring:cubic-bezier(.34,1.4,.64,1);
}
/* Pure white canvas. The two tinted radial washes that used to sit here
were what made the page read as off-white and slightly muddy. */
body{background:var(--page);}
::selection{background:rgba(44,113,152,.16);color:var(--deep-2);}
/* ---------- Scroll progress + back to top (injected by JS) ---------- */
.scroll-progress{
position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
background:var(--brand-grad);border-radius:0 3px 3px 0;
transition:width .12s linear;
}
.to-top{
position:fixed;left:20px;bottom:24px;width:48px;height:48px;border-radius:50%;
background:#fff;border:1px solid var(--line);color:var(--primary);cursor:pointer;
display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
transition:opacity .3s var(--ease-out),transform .3s var(--ease-spring),visibility .3s,background .2s,color .2s;
z-index:120;
}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--primary);color:#fff;transform:translateY(-2px);}
.to-top svg{width:22px;height:22px;}
@media (max-width:600px){.to-top{left:14px;bottom:18px;width:44px;height:44px;}}
/* ---------- Focus-pull reveal (the signature) ---------- */
/* The focus-pull reveal is kept as the site's signature, but shortened and
with far less blur so content settles rather than swims into place. */
.reveal{
opacity:0;transform:translateY(14px);filter:blur(3px);
transition:opacity .5s var(--ease-out),transform .55s var(--ease-out),filter .5s var(--ease-out);
}
.reveal.in{opacity:1;transform:none;filter:blur(0);}
.reveal.from-left{transform:translateX(-18px);}
.reveal.from-right{transform:translateX(18px);}
.reveal.from-left.in,.reveal.from-right.in{transform:none;}
/* ---------- Buttons: flat brand fills, single subtle lift on hover ----------
The gradient + sweeping sheen that used to live here read as decoration
rather than affordance. Buttons now change colour and lift 1px, which is
what a production UI does. */
.btn-outline-dark:hover,
.btn-outline:hover,
.btn-ghost:hover{transform:translateY(-1px);}
.btn-outline-dark:hover{box-shadow:0 4px 12px rgba(2,75,120,.14);}
/* ---------- Header: condense on scroll ---------- */
header.site-header{
transition:padding .3s var(--ease-out),background .3s,box-shadow .3s,backdrop-filter .3s;
will-change:padding;
}
header.site-header.scrolled{
background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(14px);
box-shadow:0 1px 0 var(--line), 0 4px 16px rgba(16,46,72,.06);
}
.nav-wrap{transition:padding .3s var(--ease-out);}
.site-header.scrolled .nav-wrap{padding-top:8px;padding-bottom:8px;}
.brand img{transition:height .3s var(--ease-out);}
.site-header.scrolled .brand img{height:74px;}
/* pill nav handles its own hover states */
@media (max-width:1200px){
.site-header.scrolled .brand img{height:74px;}
}
/* ---------- Hero: orchestrated entrance + living background ---------- */
/* The hero previously carried two animated colour blobs drifting behind the
headline. Removed: a clinical brand reads calmer static, and the constant
repaint cost nothing but battery. */
.hero h1,.hero p.lead,.hero-actions{opacity:0;animation:heroRise .9s var(--ease-out) forwards;}
.hero h1{animation-delay:.22s;}
.hero p.lead{animation-delay:.36s;}
.hero-actions{animation-delay:.50s;}
.hero-media{opacity:0;animation:heroRise 1s var(--ease-out) .30s forwards;}
@keyframes heroRise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
/* aperture ring behind hero image */
.hero-media .frame{position:relative;transition:transform .5s var(--ease-out);}
.hero-media .frame::before{
content:"";position:absolute;inset:-20px;border-radius:22px;z-index:-1;
border:1px solid rgba(255,255,255,.20);
box-shadow:0 0 0 10px rgba(255,255,255,.04), 0 30px 64px rgba(0,0,0,.30);
}
.hero-media img{transition:transform .8s var(--ease-out);}
.hero-media:hover .frame{transform:translateY(-3px);}
.hero-media:hover img{transform:scale(1.03);}
.floating-cards{animation:floatCard 1s var(--ease-spring) 1s both;}
.floating-cards .num{color:var(--primary);}
@keyframes floatCard{from{opacity:0;transform:translateY(20px) scale(.92);}to{opacity:1;transform:none;}}
/* ---------- Eye divider: draw + blink ---------- */
.eye-divider svg{transform-origin:center;overflow:visible;}
.eye-divider svg .lid{stroke-dasharray:132;stroke-dashoffset:132;}
.eye-divider svg .pupil{transform-origin:center;transform:scale(0);}
.eye-divider.blink svg .lid{animation:lidDraw 1.1s var(--ease-out) forwards;}
.eye-divider.blink svg{animation:blink 5s 1.6s ease-in-out infinite;}
.eye-divider.blink svg .pupil{animation:pupilIn .5s .75s var(--ease-spring) forwards, look 7s 2.2s ease-in-out infinite;}
@keyframes lidDraw{to{stroke-dashoffset:0;}}
@keyframes pupilIn{to{transform:scale(1);}}
@keyframes blink{0%,92%,100%{transform:scaleY(1);}95%{transform:scaleY(.1);}}
@keyframes look{0%,100%{transform:scale(1) translateX(0);}30%{transform:scale(1) translateX(2px);}60%{transform:scale(1) translateX(-2px);}}
/* ---------- Stat & insight cards ---------- */
.stat-card{position:relative;overflow:hidden;}
.stat-card .num,.insight .num,.floating-cards .num,.appt-recap span{font-variant-numeric:tabular-nums;}
.stat-card .num{color:var(--primary);}
.insight{transition:background .3s var(--ease-out);}
.insight:hover{background:var(--deep-2);}
.insight .num{color:var(--glow);}
/* ---------- Expertise / generic cards ---------- */
.expertise-card{position:relative;}
.expertise-card h4{transition:color .2s;}
.expertise-card:hover h4{color:var(--primary);}
.highlight-item{transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s;}
.highlight-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:rgba(44,113,152,.2);}
/* ---------- People / doctor / testimonial cards ---------- */
.people-card,.testimonial-card{transition:border-color .25s var(--ease-out);}
.people-card:hover,.testimonial-card:hover{border-color:rgba(44,113,152,.2);}
.testimonial-card .quote-mark{transition:color .3s;}
.testimonial-card:hover .quote-mark{color:rgba(44,113,152,.16);}
/* ---------- Split & gallery imagery ---------- */
.split img{transition:transform .5s var(--ease-out),box-shadow .5s;}
.split:hover img{transform:translateY(-2px);box-shadow:var(--shadow-md);}
/* ---------- FAQ polish ---------- */
.faq-item{transition:background .2s;border-radius:var(--r-md);}
.faq-q{transition:color .2s,padding-left .2s var(--ease-out);border-radius:var(--r-sm);}
.faq-q:hover{color:var(--primary);}
.faq-item.open{background:var(--mist);}
.faq-item.open .faq-q{padding-left:14px;}
.faq-q .plus{transition:transform .3s var(--ease-spring),color .2s;}
/* ---------- CTA band ----------
Previously an endlessly shifting gradient with a shine sweeping across it.
Now a single static brand gradient: the band still carries the page, but it
no longer competes with the button inside it. */
.cta-band{
background:var(--deep);
position:relative;overflow:hidden;
}
/* ---------- Floating action buttons ---------- */
.float-actions a{animation:fabIn .5s var(--ease-spring) both;transition:transform .18s var(--ease-out),box-shadow .18s;}
.float-actions a:nth-child(1){animation-delay:.9s;}
.float-actions a:nth-child(2){animation-delay:1.02s;}
.float-actions a:nth-child(3){animation-delay:1.14s;}
.float-actions a:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 8px 22px rgba(2,40,63,.28);}
@keyframes fabIn{from{opacity:0;transform:translateY(16px) scale(.6);}to{opacity:1;transform:none;}}
.fab-whatsapp{position:relative;}
.fab-whatsapp::before{
content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;z-index:-1;
animation:pulseRing 2.4s var(--ease-out) infinite;
}
@keyframes pulseRing{0%{transform:scale(1);opacity:.55;}70%,100%{transform:scale(1.9);opacity:0;}}
/* ---------- Forms ---------- */
input,textarea,select{transition:border-color .2s,box-shadow .2s;}
input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(44,113,152,.14);}
.form-success{animation:heroRise .5s var(--ease-out);}
/* ---------- Page banner entrance (all inner pages) ---------- */
/* The banner previously carried a drifting radial glow. Removed with the
hero blobs: the banner is now a flat navy field. */
.page-banner .breadcrumb,.page-banner h1,.page-banner p{opacity:0;animation:heroRise .8s var(--ease-out) forwards;}
.page-banner .breadcrumb{animation-delay:.08s;}
.page-banner h1{animation-delay:.20s;}
.page-banner p{animation-delay:.34s;}
/* ---------- Footer ---------- */
footer.site-footer{position:relative;}
footer.site-footer::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:var(--primary);opacity:.5;
}
.footer-grid ul a{transition:color .18s,padding-left .2s var(--ease-out);display:inline-block;}
.footer-grid ul a:hover{padding-left:6px;}
/* ---------- Appointment: gentle polish (keeps widget logic intact) ---------- */
.appt-steps .step.active .dot{box-shadow:0 2px 6px rgba(44,113,152,.26);}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important;
}
.reveal{opacity:1!important;transform:none!important;filter:none!important;}
.hero h1,.hero p.lead,.hero-actions,.hero-media,
.page-banner .breadcrumb,.page-banner h1,.page-banner p{opacity:1!important;}
}
/* =========================================================
BOARD OF MANAGEMENT — clickable profiles + modal
========================================================= */
.board-hint{text-align:left;color:var(--muted);font-size:0.875rem;margin:-1.4rem auto 2.4rem;}
.people-card[data-member]{cursor:pointer;}
.people-card[data-member]:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
.people-view{
display:inline-flex;align-items:center;gap:6px;margin-top:.9em;
font-weight:700;font-size:0.875rem;letter-spacing:.02em;color:var(--primary);
opacity:.85;transition:gap .2s var(--ease-out),opacity .2s;
}
.people-view svg{width:15px;height:15px;transition:transform .25s var(--ease-out);}
.people-card[data-member]:hover .people-view{opacity:1;gap:10px;}
.people-card[data-member]:hover .people-view svg{transform:translateX(3px);}
/* Overlay + dialog */
.bm-overlay{
position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;
padding:5vh 20px;background:rgba(2,40,63,.62);backdrop-filter:blur(6px);
opacity:0;transition:opacity .3s var(--ease-out);overflow-y:auto;
}
.bm-overlay.open{opacity:1;}
.bm-dialog{
position:relative;width:100%;max-width:900px;background:#fff;border-radius:var(--r-xl);overflow:hidden;
box-shadow:var(--shadow-xl);display:flex;flex-direction:column;max-height:90vh;
transform:translateY(24px) scale(.97);opacity:0;transition:transform .38s var(--ease-spring),opacity .3s ease;
}
.bm-overlay.open .bm-dialog{transform:none;opacity:1;}
.bm-close{
position:absolute;top:16px;right:16px;z-index:2;width:40px;height:40px;border-radius:50%;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s var(--ease-out);
}
.bm-close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg);}
.bm-close svg{width:20px;height:20px;}
/* Header */
.bm-head{
display:flex;gap:26px;align-items:center;padding:26px 28px;color:#fff;position:relative;overflow:hidden;
background:var(--deep-2);
flex-shrink:0;
}
.bm-head::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(2,55,87,0) 45%,rgba(44,113,152,.28));}
.bm-photo{position:relative;z-index:1;flex-shrink:0;}
.bm-photo img{width:120px;height:120px;border-radius:var(--r-md);object-fit:cover;border:2px solid rgba(255,255,255,.28);box-shadow:0 10px 24px rgba(0,0,0,.26);background:var(--mist);}
.bm-head-text{position:relative;z-index:1;}
.bm-eyebrow{font-family:'Inter',sans-serif;font-weight:700;font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--glow);margin:0 0 .5em;}
.bm-head-text h2{color:#fff;font-size:1.75rem;margin:0 0 .15em;line-height:1.12;}
.bm-role{color:#D7E7F2;font-size:1rem;margin:0;font-weight:500;}
.bm-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:.9em;}
.bm-tag{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:0.75rem;font-weight:600;padding:.32em .8em;border-radius:var(--r-xs);}
.bm-contact{display:flex;flex-wrap:wrap;gap:10px;margin-top:1em;}
.bm-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;font-size:0.875rem;font-weight:600;padding:.42em .9em;border-radius:var(--r-sm);transition:background .2s var(--ease-out);}
.bm-chip:hover{background:rgba(255,255,255,.28);}
/* Profile-specific chips & tags (override for profile pages) */
.profile-contact .bm-chip,
.profile-meta .bm-tag{
background:var(--mist);
border:1px solid var(--line);
color:var(--deep);
}
.profile-contact .bm-chip:hover{background:var(--sand-2);}
.bm-chip svg{width:15px;height:15px;}
/* ---- Profile tabs (doctor / staff bio pages) ---- */
.profile-tabs{margin-top:2.4rem;}
.profile-tabs .tab-nav{
display:flex;
flex-wrap:wrap;
gap:.4rem;
list-style:none;
margin:0 0 1.6rem;
padding:0;
border-bottom:1px solid var(--line);
}
.profile-tabs .tab-nav li{margin:0;}
.profile-tabs .tab-btn{
display:inline-block;
background:none;
border:none;
cursor:pointer;
font:inherit;
font-weight:600;
font-size:1rem;
color:var(--muted);
padding:.75rem 1.1rem;
border-bottom:2px solid transparent;
margin-bottom:-1px;
transition:color .15s ease, border-color .15s ease;
}
.profile-tabs .tab-btn:hover{color:var(--deep);}
.profile-tabs .tab-btn.active{color:var(--deep);border-bottom-color:var(--deep);}
.profile-tabs .tab-btn[disabled]{cursor:default;opacity:.45;}
.profile-tabs .tab-btn[disabled]:hover{color:var(--muted);}
.profile-tabs .tab-panel{display:none;}
.profile-tabs .tab-panel.active{display:block;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.tab-empty-note{color:var(--muted);font-size:0.875rem;font-style:italic;margin:0;}
/* Body */
.bm-body{padding:24px 28px 28px;overflow-y:auto;flex:1;min-height:0;}
.bm-body::-webkit-scrollbar{width:10px;}
.bm-body::-webkit-scrollbar-thumb{background:var(--sand-2);border-radius:var(--r-sm);border:3px solid #fff;}
.bm-intro p{color:var(--ink);font-size:1rem;line-height:1.7;margin:0 0 1em;}
.bm-intro{margin-bottom:1.6rem;}
.bm-section{margin-bottom:1.4rem;}
.bm-sec-title{
font-family:'Montserrat',sans-serif;font-size:1.125rem;color:var(--deep);margin:0 0 .7em;
display:flex;align-items:center;gap:.6em;
}
.bm-sec-title::before{content:"";width:22px;height:2px;background:var(--primary);border-radius:2px;flex-shrink:0;}
.bm-list{margin:0;padding:0;}
.bm-list li{
position:relative;padding:.5em 0 .5em 1.4em;border-bottom:1px dashed var(--line);
color:var(--ink);font-size:0.875rem;line-height:1.55;
}
.bm-list li:last-child{border-bottom:none;}
.bm-list li::before{content:"";position:absolute;left:0;top:.95em;width:8px;height:8px;border-radius:50%;background:var(--primary);opacity:.45;}
/* Timeline (education / experience) */
.bm-timeline{margin:0;padding:0;}
.bm-timeline li{display:flex;gap:16px;padding:.7em 0;border-bottom:1px dashed var(--line);align-items:baseline;}
.bm-timeline li:last-child{border-bottom:none;}
.bm-period{flex-shrink:0;width:104px;font-size:0.75rem;font-weight:700;color:var(--primary);letter-spacing:.01em;padding-top:.15em;}
.bm-tl-body strong{display:block;color:var(--ink);font-size:1rem;font-family:'Inter',sans-serif;font-weight:700;}
.bm-tl-body span{display:block;color:var(--muted);font-size:0.875rem;margin-top:2px;}
@media (max-width:560px){.bm-timeline li{flex-direction:column;gap:2px;}.bm-period{width:auto;}}
/* Collapsible sections */
.bm-collapsible{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:1rem;overflow:hidden;background:var(--sand);}
.bm-collapsible>summary{
list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7em;padding:16px 18px;
font-family:'Montserrat',sans-serif;font-size:1.125rem;color:var(--deep);transition:background .2s;
}
.bm-collapsible>summary::-webkit-details-marker{display:none;}
.bm-collapsible>summary:hover{background:var(--mist);}
.bm-collapsible .bm-count{margin-left:auto;background:var(--primary);color:#fff;font-family:'Inter',sans-serif;font-size:0.75rem;font-weight:700;min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;}
.bm-chev{width:18px;height:18px;color:var(--primary);transition:transform .28s var(--ease-out);flex-shrink:0;}
.bm-collapsible[open] .bm-chev{transform:rotate(180deg);}
.bm-collapsible .bm-sec-content{padding:0 18px 14px;}
.bm-subgroup{margin-top:.8em;}
.bm-subgroup h5{font-family:'Inter',sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin:0 0 .3em;}
@media (max-width:640px){
.bm-head{flex-direction:column;text-align:left;align-items:flex-start;padding:24px 20px;gap:14px;}
.bm-tags,.bm-contact{justify-content:center;}
.bm-sec-title::before{display:none;}
.bm-body{padding:24px 22px 28px;}
.bm-dialog{max-height:94vh;}
}
@media (prefers-reduced-motion:reduce){
.bm-dialog{transform:none!important;}
}
/* =========================================================
GALLERY LIGHTBOX — click to open full-screen, prev/next
========================================================= */
.gallery-grid img{cursor:zoom-in;}
.lightbox{
position:fixed;inset:0;z-index:1000;
display:flex;align-items:center;justify-content:center;
padding:clamp(16px,4vw,44px);
background:rgba(2,20,35,.92);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .32s var(--ease-out),visibility .32s var(--ease-out);
}
.lightbox.open{opacity:1;visibility:visible;pointer-events:auto;}
.lightbox-stage{
position:relative;
max-width:min(1200px,100%);max-height:100%;
display:flex;align-items:center;justify-content:center;
}
.lightbox-img{
max-width:100%;max-height:82vh;
width:auto;height:auto;object-fit:contain;
border-radius:var(--r-md);box-shadow:0 24px 64px rgba(0,0,0,.50);
background:var(--deep-2);
opacity:0;transform:scale(.985);
transition:opacity .28s var(--ease-out),transform .28s var(--ease-out);
}
.lightbox-img.ready{opacity:1;transform:none;}
/* Controls */
.lightbox-btn{
position:absolute;z-index:2;
display:inline-flex;align-items:center;justify-content:center;
width:52px;height:52px;border:none;border-radius:50%;
background:rgba(255,255,255,.12);color:var(--white);cursor:pointer;
transition:background .25s var(--ease-out),transform .25s var(--ease-out);
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.lightbox-btn:hover{background:var(--primary);transform:scale(1.06);}
.lightbox-btn:focus-visible{outline:2px solid var(--white);outline-offset:3px;}
.lightbox-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.lightbox-prev{left:clamp(8px,3vw,28px);top:50%;transform:translateY(-50%);}
.lightbox-prev:hover{transform:translateY(-50%) scale(1.06);}
.lightbox-next{right:clamp(8px,3vw,28px);top:50%;transform:translateY(-50%);}
.lightbox-next:hover{transform:translateY(-50%) scale(1.06);}
.lightbox-close{top:clamp(10px,3vw,24px);right:clamp(10px,3vw,24px);width:46px;height:46px;}
.lightbox-caption{
position:absolute;left:50%;bottom:clamp(10px,3vw,22px);transform:translateX(-50%);
display:flex;align-items:center;gap:14px;
font-family:'Inter',sans-serif;font-size:0.875rem;color:rgba(255,255,255,.9);
background:rgba(2,20,35,.55);padding:8px 16px;border-radius:999px;
max-width:90vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lightbox-count{font-weight:700;letter-spacing:.05em;color:var(--white);}
.lightbox-caption .lightbox-alt{opacity:.85;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:640px){
.lightbox-btn{width:44px;height:44px;}
.lightbox-img{max-height:74vh;}
.lightbox-caption{font-size:0.875rem;}
}
@media (prefers-reduced-motion:reduce){
.lightbox,.lightbox-img,.lightbox-btn{transition:none!important;}
.lightbox-img{transform:none!important;}
}
/* =========================================================
2026 REFRESH LAYER
1) Palette: STEH blue (#2C7198/#024B78/#023757) + lime
green accent (var(--primary)) — ported from brand file.
2) Full mobile-responsive pass.
3) Topbar removed on mobile.
4) True 3D interactive cards (tilt + glare + depth).
5) Image crispness safeguards.
========================================================= */
/* ---------- kill sideways scroll on phones without breaking sticky header ---------- */
html,body{overflow-x:clip;}
/* ---------- 2) responsive: tablets ---------- */
@media (max-width:900px){
.container{padding:0 18px;}
.hero{min-height:0;padding:1.75rem 0 2rem;}
.hero-media img{height:auto;aspect-ratio:16/11;}
.hero h1{font-size:var(--fs-h1);max-width:none;}
.hero p.lead{font-size:1rem;}
.floating-cards{margin:-34px auto 0;padding:12px 16px;}
.section-head{margin-bottom:1.8rem;}
.page-banner{padding:1.6rem 0 1.4rem;}
.page-banner h1{font-size:var(--fs-h1);}
.video-card{padding:1.25rem;}
.video-card img{height:auto;aspect-ratio:16/10;}
.group-photos img{height:170px;}
}
/* ---------- 2) responsive: phones ---------- */
@media (max-width:560px){
.nav-wrap{padding:10px 16px;}
.brand img{height:90px;}
.site-header.scrolled .brand img{height:74px;}
section{padding:1.75rem 0;}
.hero-actions{gap:10px;}
.hero-actions .btn{flex:1 1 100%;justify-content:center;}
.stats-grid{gap:12px;}
.stat-card{padding:18px 10px;}
.stat-card .num{font-size:1.5rem;}
.stat-card .lbl{font-size:0.75rem;}
.insights{grid-template-columns:1fr;}
.insight{border-right:none;border-bottom:1px solid rgba(255,255,255,.12);padding:1.2rem 1rem;}
.insight:last-child{border-bottom:none;}
.split img{height:auto;aspect-ratio:4/3;}
.doctor-toolbar{flex-direction:column;align-items:stretch;}
.doctor-toolbar .btn{justify-content:center;}
.float-actions{right:12px;bottom:16px;gap:10px;}
.float-actions a{width:48px;height:48px;}
.float-actions svg{width:22px;height:22px;}
.footer-grid{gap:28px;}
footer.site-footer{padding:1.8rem 0 1rem;}
.appt-main{padding:20px 16px;}
.appt-summary{padding:20px 18px;position:static;}
.cal-day{font-size:0.875rem;border-radius:var(--r-xs);}
.eye-divider{padding:1rem 0;}
}
@media (max-width:400px){
.stats-grid{grid-template-columns:1fr 1fr;}
h1{font-size:1.5rem;}
.btn{padding:.7em 1.15em;font-size:0.875rem;}
}
/* ---------- 5) image crispness (HD rendering) ---------- */
img{backface-visibility:hidden;}
.people-photo img,.doc-photo img,.gallery-grid img,.hero-media img,
.split img,.group-photos img,.video-card img{
transform:translateZ(0);
image-rendering:auto;
}
/* stop the focus-pull blur from ever landing on photos (keeps them tack sharp) */
.reveal img{filter:none;}
/* ---------- polish: animated heading accent + small fixes ---------- */
.section-head h2{position:relative;display:inline-block;padding-bottom:12px;}
.section-head h2::after{
content:"";position:absolute;left:50%;bottom:0;width:46px;height:3px;border-radius:3px;
background:var(--primary);
transform:translateX(-50%) scaleX(0);transform-origin:center;
transition:transform .7s var(--ease-out) .2s;
}
.section-head.in h2::after{transform:translateX(-50%) scaleX(1);}
.section-head.left h2::after{left:0;transform:scaleX(0);transform-origin:left;}
.section-head.left.in h2::after{transform:scaleX(1);}
@media (max-width:1200px){
.dropdown::before{display:none;} /* no hover-bridge needed in drawer */
}
/* ---------- Compact header ---------- */
.nav-wrap{padding:8px 20px;gap:12px;}
.brand img{height:90px;}
.site-header.scrolled .brand img{height:74px;}
/* nav pills */
nav.main-nav > ul{gap:2px;}
nav.main-nav > ul > li > a{
padding:6px 9px;
font-size:0.75rem;
gap:5px;
}
nav.main-nav .ni{width:13px;height:13px;stroke-width:1.6;}
nav.main-nav .caret{width:7px;height:7px;}
/* dropdowns */
.dropdown{min-width:200px;border-radius:var(--r-md);padding:6px;}
.dropdown a{padding:8px 10px;font-size:0.875rem;}
/* Book Appointment + hamburger */
.nav-cta .btn-sm{padding:.5em .95em;font-size:0.75rem;}
.nav-toggle{padding:7px;}
.nav-toggle svg{width:20px;height:20px;}
/* mobile drawer: tighter but still finger-friendly */
@media (max-width:1200px){
.brand img{height:90px;}
nav.main-nav>ul>li>a{padding:10px 12px;font-size:0.875rem;}
nav.main-nav .ni{width:16px;height:16px;}
.dropdown a{padding:8px 10px 8px 34px;font-size:0.875rem;}
.dropdown a::before{left:16px;}
.nav-cta .btn-sm{padding:.5em .85em;font-size:0.75rem;}
}
/* Inline document download link (PDF view + download pattern) */
.btn-doc-download{
display:inline-flex;align-items:center;gap:.4em;
font-size:0.875rem;font-weight:600;color:var(--brand,#023757);
text-decoration:none;padding:.4em .7em;border-radius:var(--r-xs);
transition:background .15s ease,color .15s ease;
}
.btn-doc-download svg{flex:0 0 auto}
.btn-doc-download:hover{background:rgba(2,55,87,.08);text-decoration:underline}
/* ---- Individual profile detail pages ---- */
.profile-top{display:grid;grid-template-columns:280px 1fr;gap:2.2rem;align-items:start}
.profile-photo{border-radius:0;overflow:hidden;background:var(--mist);}
.profile-photo img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:3/3.4}
.profile-photo.no-photo{display:flex;align-items:center;justify-content:center;aspect-ratio:3/3.4}
.profile-photo .initials{font-family:inherit;font-weight:700;font-size:2.5rem;color:#fff;background:var(--brand,#023757);width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.profile-name{margin:0 0 .15em;color:var(--brand,#023757)}
.profile-role{font-weight:600;color:var(--primary);margin:0 0 1rem}
.profile-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.profile-contact{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.profile-meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin:1.2rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line)}
.profile-meta h4{margin:0 0 .4rem;font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.profile-note{background:var(--mist);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:.9rem 1.1rem;color:var(--deep-2);font-size:0.875rem;margin:1.4rem 0}
.profile-sections{margin-top:1.8rem;display:grid;gap:1.4rem}
@media(max-width:720px){.profile-top{grid-template-columns:1fr}.profile-photo{max-width:260px}}
/* ---- Category navigation (Doctors directory) ---- */
.cat-nav{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:0 0 1.6rem}
.cat-pill{
display:inline-flex;align-items:center;gap:.4em;
padding:.55em 1.05em;border-radius:var(--r-sm);
font-weight:600;font-size:0.875rem;text-decoration:none;
color:var(--brand,#023757);background:var(--mist);border:1px solid var(--line);
transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.cat-pill:hover{background:var(--sand-2);border-color:var(--line-strong);transform:translateY(-1px)}
.cat-pill.is-active{background:var(--brand,#023757);color:#fff;border-color:var(--brand,#023757)}
.cat-group{margin-bottom:2rem}
.cat-group > h2{margin:0 0 .3rem;color:var(--brand,#023757)}
.cat-group > p.cat-lead{margin:0 0 1.6rem;color:var(--muted);max-width:70ch}
/* =====================================================================
BLOG · "Our Latest" (homepage list), All Blogs grid, and detail pages
Built with the existing design tokens (primary/deep/accent, Montserrat/
Inter, --radius, --shadow) so it reads as native to the site. No new
accent colors introduced.
===================================================================== */
/* ---- Section header with inline "See all" (homepage) ---- */
.blog-head{
display:flex;align-items:flex-end;justify-content:space-between;
gap:20px;margin-bottom:2.2rem;flex-wrap:wrap;
}
.blog-head h2{margin:0;position:relative;padding-bottom:12px;}
.blog-head h2::after{
content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;border-radius:3px;
background:var(--primary);
transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out) .2s;
}
.blog-head.in h2::after{transform:scaleX(1);}
.blog-seeall{
display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:1rem;
color:var(--primary);white-space:nowrap;transition:gap .2s var(--ease-out),color .2s;
}
.blog-seeall svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out);}
.blog-seeall:hover{color:var(--deep);}
.blog-seeall:hover svg{transform:translateX(4px);}
/* ---- Homepage list rows ---- */
.blog-list{display:flex;flex-direction:column;}
.blog-row{
display:flex;align-items:center;gap:26px;padding:20px 6px;
border-top:1px solid var(--line);color:inherit;
transition:transform .2s var(--ease-out),background .2s;
}
.blog-row:last-child{border-bottom:1px solid var(--line);}
.blog-row:hover{transform:translateX(2px);}
.blog-row-photo{
flex:0 0 200px;width:200px;height:118px;border-radius:var(--r-md);overflow:hidden;
background:var(--mist);box-shadow:var(--shadow-xs);
}
.blog-row-photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md);transition:transform .5s var(--ease-out);}
.blog-row:hover .blog-row-photo img{transform:scale(1.05);}
.blog-row-body{min-width:0;}
.blog-row-body h3{
font-size:1.5rem;margin:0 0 .35em;color:var(--ink);line-height:1.2;
transition:color .2s;
}
.blog-row:hover .blog-row-body h3{color:var(--primary);}
.blog-row-date{color:var(--muted);font-size:1rem;}
@media (max-width:640px){
.blog-row{gap:16px;padding:16px 2px;}
.blog-row-photo{flex-basis:120px;width:120px;height:84px;border-radius:var(--r-sm);}
.blog-row-photo img{border-radius:var(--r-sm);}
.blog-row-body h3{font-size:1.125rem;}
.blog-row-date{font-size:0.875rem;}
}
/* ---- All Blogs: toolbar (filter tabs + search) ---- */
.blog-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:18px;
flex-wrap:wrap;margin-bottom:1.8rem;
}
.blog-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.blog-filter .lbl{color:var(--muted);font-weight:600;margin-right:4px;}
.blog-tab{
font-family:'Inter',sans-serif;font-weight:600;font-size:0.875rem;
padding:.5em 1.05em;border-radius:var(--r-sm);border:1px solid var(--line-strong);
background:#fff;color:var(--deep);cursor:pointer;transition:all .18s var(--ease-out);
}
.blog-tab:hover{border-color:var(--primary-300);color:var(--primary);}
.blog-tab.active{background:var(--deep);border-color:var(--deep);color:#fff;}
.blog-search{position:relative;}
.blog-search input{
font-family:'Inter',sans-serif;font-size:0.875rem;color:var(--ink);
padding:.7em 2.6em .7em 1em;border:1px solid var(--line-strong);border-radius:var(--r-sm);
background:#fff;min-width:260px;transition:border-color .18s,box-shadow .18s;
}
.blog-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(44,113,152,.15);}
.blog-search svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);
width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;pointer-events:none;}
@media (max-width:560px){.blog-search input{min-width:0;width:100%;}.blog-search{width:100%;}}
/* ---- All Blogs / grid cards ---- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{
background:#fff;border:1px solid var(--line);border-radius:0;overflow:hidden;
display:flex;flex-direction:column;color:inherit;
transition:border-color .22s var(--ease-out);
}
.blog-card:hover{border-color:rgba(44,113,152,.24);}
.blog-card-photo{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--mist);}
.blog-card-photo img{width:100%;height:100%;object-fit:cover;border-radius:0;}
.blog-badge{
position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:.5em;
background:rgba(2,55,87,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
color:#fff;font-weight:600;font-size:0.875rem;padding:.4em .8em .4em .45em;border-radius:var(--r-sm);
}
.blog-badge img{width:22px;height:22px;border-radius:50%;background:#fff;padding:1px;}
.blog-card-body{padding:16px 16px 18px;flex:1;display:flex;flex-direction:column;}
.blog-card-title{font-size:1.25rem;line-height:1.25;margin:0 0 .55em;color:var(--ink);transition:color .2s;}
.blog-card:hover .blog-card-title{color:var(--primary);}
.blog-card-excerpt{
color:var(--muted);font-size:1rem;margin:0 0 1.3em;
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card-foot{
margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
padding-top:14px;border-top:1px solid var(--line);
}
.blog-date{color:var(--muted);font-size:0.875rem;font-weight:600;}
.blog-tag{
display:inline-flex;align-items:center;gap:.4em;color:var(--primary);font-weight:600;
font-size:0.875rem;
}
.blog-tag svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;}
.blog-empty{text-align:left;color:var(--muted);padding:1.5rem 0;font-size:1.125rem;}
/* ---- Blog detail: hero ---- */
.blog-hero{
position:relative;min-height:clamp(260px,38vw,400px);display:flex;align-items:center;justify-content:center;
text-align:left;overflow:hidden;background:var(--deep-2);
}
.blog-hero img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;
transform:scale(1.04);
}
.blog-hero::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(2,55,87,.35),rgba(2,55,87,.62));}
.blog-hero-title{
position:relative;z-index:1;color:#fff;max-width:22ch;margin:0 auto;padding:0 24px;
font-size:var(--fs-h1);line-height:1.1;text-shadow:0 2px 24px rgba(0,0,0,.35);
}
/* ---- Blog detail: article ---- */
.blog-article{padding:1.8rem 0 2.2rem;}
.blog-crumb{font-size:0.875rem;color:var(--muted);margin-bottom:1.4rem;}
.blog-crumb a{color:var(--primary);font-weight:600;}
.blog-crumb a:hover{text-decoration:underline;}
.blog-crumb .sep{margin:0 .5em;color:var(--line);}
.blog-meta{display:flex;align-items:center;gap:.7em;margin-bottom:2rem;color:var(--muted);font-size:1rem;}
.blog-meta .blog-avatar{
width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);
padding:2px;object-fit:contain;
}
.blog-meta strong{color:var(--deep);font-weight:700;}
.blog-body{max-width:72ch;}
.blog-body p{color:var(--ink);margin:0 0 1.15em;font-size:1.125rem;line-height:1.75;}
.blog-body h3{font-size:1.5rem;margin:1.7em 0 .5em;color:var(--deep);}
.blog-body ul{margin:1em 0 1.4em;padding-left:1.3em;}
.blog-body ul li{list-style:disc;margin-bottom:.5em;color:var(--ink);}
.blog-body .blog-lead{font-size:1.125rem;color:var(--ink);}
.blog-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:2.2em 0;}
.blog-gallery img{
width:100%;height:320px;object-fit:cover;border-radius:0;cursor:zoom-in;
}
/* Tablet: two per row */
@media (max-width:900px){.blog-gallery{grid-template-columns:repeat(2,1fr);gap:16px;}.blog-gallery img{height:280px;}}
/* Mobile: single column, full-width prominent images */
@media (max-width:560px){.blog-gallery{grid-template-columns:1fr;gap:14px;}.blog-gallery img{height:260px;}}
.blog-backrow{margin-top:2.6rem;display:flex;gap:12px;flex-wrap:wrap;}
/* ---- Related / more posts on detail page ---- */
.blog-more{border-top:1px solid var(--line);padding-top:1.8rem;margin-top:2rem;}
.blog-more h2{font-size:1.5rem;margin-bottom:1.6rem;}
/* =====================================================================
FIND A DOCTOR — circular "leadership" directory cards
---------------------------------------------------------------------
Layout/photo/card rules below are scoped to .docs-directory so the
Board of Management page and other plain .people-grid pages are
untouched. The .people-contact (Contact/Email/Phone) block further
down is intentionally NOT scoped — it is shared by every people card
site-wide so the contact format stays consistent everywhere.
Uses existing theme tokens only.
- Photo is now the clickable "View Profile" link (button removed).
- "Request an Appointment" text is white.
===================================================================== */
.people-grid.docs-directory{
grid-template-columns:repeat(4,1fr);
gap:1.75rem;
}
.docs-directory .people-card{
overflow:visible;
align-items:flex-start;
text-align:left;
padding:1.5rem 1.25rem 1.3rem;
}
/* circular photo — clickable, opens the profile page */
.docs-directory .people-photo{
width:132px;
height:132px;
aspect-ratio:auto;
flex:0 0 auto;
border-radius:50%;
margin:0 0 1.1rem;
padding:7px;
background:var(--mist);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
text-decoration:none;
transition:box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.docs-directory .people-photo:hover{
box-shadow:0 0 0 4px rgba(44,113,152,.16);
transform:translateY(-2px);
}
.docs-directory .people-photo img{
width:100%;
height:100%;
border-radius:50%;
object-fit:cover;
object-position:top center;
}
.docs-directory .people-body{
flex:0 0 auto;
padding:0;
gap:0;
align-items:flex-start;
}
.docs-directory .people-body h4{
color:var(--primary);
font-size:1.125rem;
line-height:1.28;
margin:0 0 .35em;
min-height:2.9rem;
}
.docs-directory .people-role{
color:var(--muted);
font-weight:600;
font-size:0.875rem;
line-height:1.4;
margin:0 0 1.1rem;
min-height:3.8rem;
}
/* Request an Appointment — lime-green primary, white text */
.docs-directory .people-cta{
width:100%;
justify-content:center;
margin:0 0 1.15rem;
color:#fff;
}
/* contact block — shared by every .people-card (docs-directory and default alike) */
.people-contact{
width:100%;
border-top:1px solid var(--line);
margin-top:auto;
padding-top:.9rem;
font-size:0.875rem;
}
.people-contact span{
display:block;
color:var(--muted);
margin-bottom:.3rem;
}
.people-contact span:first-child{
font-weight:700;
color:var(--ink);
margin-bottom:.4rem;
}
.people-contact span:last-child{ margin-bottom:0; }
/* reserve room for a 2-line "Contact Name" so Email/Phone line up across
the circular directory cards regardless of name length */
.docs-directory .people-contact span:first-child{ min-height:2.8rem; }
.people-contact a{
color:var(--primary);
font-weight:600;
word-break:break-word;
}
.people-contact a:hover{ text-decoration:underline; }
/* responsive columns */
@media (max-width:1080px){ .people-grid.docs-directory{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .people-grid.docs-directory{ grid-template-columns:repeat(2,1fr); gap:1.25rem; } }
@media (max-width:480px){ .people-grid.docs-directory{ grid-template-columns:1fr; } }
/* =====================================================================
Client feedback — 31 July
Scoped additions only; no existing rule is redefined except the
.people-contact block, which is intentionally re-stated below so the
doctor contact format is identical on every listing page.
Existing theme tokens only.
===================================================================== */
/* --- 2. Shariah Compliance Certificate (footer) ---------------------- */
.footer-cert{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:.35rem .75rem;
}
/* The certificate link used to carry its colour and hover underline in inline
style + onmouseover attributes on all 57 pages. Same result, declared once. */
.footer-cert a{
color:var(--white);
font-size:var(--fs-sm);
font-weight:600;
}
.footer-cert a:hover{
color:var(--white);
text-decoration:underline;
}
.footer-cert .btn-outline{
border-color:rgba(255,255,255,.45);
color:var(--white);
}
.footer-cert .btn-outline:hover{
background:var(--white);
border-color:var(--white);
color:var(--deep-2);
}
/* graceful state when the PDF cannot be reached */
.footer-cert.doc-unavailable .btn-outline{
opacity:.55;
cursor:not-allowed;
pointer-events:none;
}
.doc-missing-note{
flex:1 1 100%;
margin:.15rem 0 0;
font-size:0.75rem;
line-height:1.5;
color:#fff;
}
.doc-missing-note a{ color:var(--primary-300); }
@media (max-width:600px){
.footer-cert{ justify-content:flex-start; }
}
/* --- 3. Doctor contact cards — one format everywhere ------------------
Renders exactly:
Contact:
Email:
Phone:
Identical typography, font size, line height, alignment, gaps and
padding on both the default .people-grid and the circular
.docs-directory cards, so every doctor card matches.
-------------------------------------------------------------------- */
.people-contact{
width:100%;
display:flex;
flex-direction:column;
gap:.3rem;
border-top:1px solid var(--line);
margin-top:auto;
padding-top:.9rem;
font-size:0.875rem;
line-height:1.5;
text-align:left;
}
.people-contact span{
display:block;
margin:0;
color:var(--muted);
}
/* the "Contact: " line — reserve two lines so Email/Phone sit on
the same baseline across cards regardless of how long a name is */
.people-contact span:first-child,
.docs-directory .people-contact span:first-child{
font-weight:700;
color:var(--ink);
min-height:2.55rem;
}
.people-contact a{
color:var(--primary);
font-weight:600;
word-break:break-word;
}
.people-contact a:hover{ text-decoration:underline; }
/* single column: cards are full width, so no height reservation needed */
@media (max-width:600px){
.people-contact span:first-child,
.docs-directory .people-contact span:first-child{ min-height:0; }
}
/* --- 6. Contact Us details (Cell / Landline / Email) ------------------ */
.contact-lines{
display:grid;
gap:.55rem;
margin:0 0 1.2em;
}
.contact-line{
display:grid;
grid-template-columns:5.5rem 1fr;
align-items:baseline;
gap:.5rem;
font-size:1rem;
line-height:1.5;
}
.contact-line .cl-label{
font-weight:700;
color:var(--ink);
}
.contact-line .cl-value a{
color:var(--primary);
font-weight:600;
word-break:break-word;
}
.contact-line .cl-value a:hover{ text-decoration:underline; }
@media (max-width:420px){
.contact-line{ grid-template-columns:4.6rem 1fr; font-size:0.875rem; }
}
/* --- Standardized Contact Us format (Phone / Email / Website) --------- */
.contact-info-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem;}
.contact-info-list li{display:flex;align-items:center;gap:.6rem;font-size:0.9375rem;line-height:1.4;}
.contact-info-list .ci-icon{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.contact-info-list a{color:inherit;font-weight:600;text-decoration:none;}
.contact-info-list a:hover{text-decoration:underline;}
.contact-info-list .ci-label{font-weight:700;}
/* --- Header layout after removing the "Home" menu item ---------------
Six top-level items remain (the logo is the route home). Scoped to the
desktop bar only — the mobile drawer rules above own everything below
1200px, so these are wrapped in min-width queries to avoid leaking
into the vertical drawer. Existing tokens only.
-------------------------------------------------------------------- */
@media (min-width:1201px){
/* a little more breathing room now that there is one item fewer, and an
even rhythm across the row between the logo and the CTA */
nav.main-nav > ul{ gap:8px; }
nav.main-nav > ul > li > a{ padding:9px 16px; }
}
/* Tighten progressively so the row still fits on narrower laptops instead
of the last item sliding under the "Book Appointment" button. */
@media (min-width:1201px) and (max-width:1400px){
.nav-wrap{ padding:12px 18px; gap:12px; }
nav.main-nav > ul{ gap:2px; }
nav.main-nav > ul > li > a{ padding:9px 11px; font-size:0.875rem; }
}
/* =========================================================
DONATION MODULE — dynamic donation selection flow
Scoped entirely under `.don-*` so no shared component is
affected. Colours, radii, shadows and fonts are taken from
the existing token set only.
========================================================= */
.don-module{padding-top:2.2rem;}
#donation-app[hidden]{display:none;}
/* ---------- Live summary card (sits above the steps) ---------- */
.don-summary{
background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
box-shadow:var(--shadow);padding:20px 22px 22px;margin-bottom:1.8rem;
}
.don-summary-head{
display:flex;align-items:baseline;justify-content:space-between;gap:16px;
flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:.9rem;margin-bottom:1.2rem;
}
.don-summary-head h3{
font-family:'Montserrat',sans-serif;font-size:1.25rem;color:var(--deep-2);margin:0;
}
.don-summary-head .don-summary-hint{
font-size:0.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--accent-dark);margin:0;
}
.don-sum-rows{
display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:16px 22px;
}
.don-sum-row{display:flex;flex-direction:column;min-width:0;}
.don-sum-label{
font-size:0.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted);margin-bottom:3px;
}
.don-sum-value{
font-weight:600;color:var(--ink);font-size:1rem;line-height:1.35;overflow-wrap:break-word;
}
.don-sum-row.is-lead .don-sum-label{color:var(--primary);}
.don-sum-row.is-amount .don-sum-label{color:var(--accent-dark);}
.don-sum-row.is-amount .don-sum-value{
font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.25rem;color:var(--deep-2);
}
.don-summary-foot{
margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--line);
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.don-summary-foot p{margin:0;font-size:0.875rem;color:var(--muted);flex:1 1 260px;}
/* ---------- Steps ---------- */
.don-steps{display:flex;flex-direction:column;gap:1.9rem;}
.don-step[hidden]{display:none;}
.don-step-head{display:flex;align-items:center;gap:12px;margin-bottom:.85rem;}
.don-step-num{
flex-shrink:0;width:26px;height:26px;border-radius:50%;
background:var(--mist);color:var(--primary);
font-size:0.75rem;font-weight:700;
display:inline-flex;align-items:center;justify-content:center;
}
.don-step-head h4{
margin:0;font-family:'Inter',sans-serif;font-weight:700;font-size:0.875rem;
letter-spacing:.07em;text-transform:uppercase;color:var(--deep-2);
}
/* ---------- Pill buttons ---------- */
.don-pills{display:flex;flex-wrap:wrap;gap:12px;}
.don-pill{
display:inline-flex;align-items:baseline;gap:.5em;
font-family:'Inter',sans-serif;font-weight:600;font-size:0.875rem;
padding:.7em 1.2em;border-radius:var(--r-sm);
border:1px solid var(--line-strong);background:#fff;color:var(--ink);
cursor:pointer;text-align:left;
transition:background .18s var(--ease-out),border-color .18s var(--ease-out),
color .18s var(--ease-out),box-shadow .22s var(--ease-out),
transform .18s var(--ease-spring);
}
.don-pill:hover:not(.is-selected){
border-color:var(--accent);color:var(--accent-dark);
background:rgba(44,113,152,.07);transform:translateY(-1px);
}
.don-pill:active{transform:translateY(0) scale(.985);}
.don-pill.is-selected{
background:var(--accent-light);border-color:var(--accent-light);
color:var(--deep-2);font-weight:700;
box-shadow:0 2px 8px rgba(94,140,21,.24);
}
.don-pill-note{font-weight:600;font-size:0.875rem;color:var(--muted);white-space:nowrap;}
.don-pill.is-selected .don-pill-note{color:var(--deep-2);opacity:.78;}
/* ---------- Responsive ---------- */
@media (max-width:640px){
.don-summary{padding:20px 18px 22px;border-radius:var(--r-lg);}
.don-sum-rows{grid-template-columns:1fr 1fr;gap:14px 16px;}
.don-sum-row.is-amount{grid-column:1 / -1;}
.don-pills{gap:10px;}
.don-pill{font-size:0.875rem;padding:.66em 1.1em;width:100%;justify-content:space-between;}
.don-summary-foot .btn{width:100%;justify-content:center;}
}
@media (max-width:420px){
.don-sum-rows{grid-template-columns:1fr;}
}
/* Respect the site-wide reduced-motion preference. */
@media (prefers-reduced-motion:reduce){
.don-pill{transition:background .01s linear,border-color .01s linear,color .01s linear;}
.don-pill:hover:not(.is-selected){transform:none;}
}
/* =========================================================
DONATION MODULE — additions for the empty / deselectable state
========================================================= */
.don-sum-empty{margin:0;color:var(--muted);font-size:1rem;}
.don-sum-row.is-pending .don-sum-value{
font-family:'Inter',sans-serif;font-size:1rem;font-weight:600;color:var(--muted);
}
.don-summary-foot p.is-waiting{color:var(--primary);font-weight:600;}
.btn.is-disabled{
opacity:.45;cursor:not-allowed;pointer-events:auto;
box-shadow:none;transform:none !important;
}
/* =========================================================
DONATION PAYMENT PAGE
Scoped under `.don-pay-*` / `.don-method*` / `.don-field`.
========================================================= */
.don-pay-notice{
display:flex;gap:14px;align-items:flex-start;
background:var(--mist);border:1px solid var(--line);border-left:3px solid var(--primary);
border-radius:var(--r-md);padding:14px 18px;margin-bottom:1.6rem;
font-size:0.875rem;color:var(--ink);
}
.don-pay-notice svg{
width:22px;height:22px;flex-shrink:0;margin-top:1px;color:var(--primary);
fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
}
.don-pay-notice strong{color:var(--deep-2);}
.don-pay-layout{display:grid;grid-template-columns:1.5fr .95fr;gap:34px;align-items:start;}
@media (max-width:860px){.don-pay-layout{grid-template-columns:1fr;}}
.don-pay-main{
background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
box-shadow:var(--shadow);padding:22px 24px;
}
.don-pay-main h2{font-size:1.5rem;margin-bottom:1.3rem;}
.don-pay-main h2.don-pay-h2{
margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.don-pay-sub{
font-size:0.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);margin:0 0 .9em;
}
/* ---------- Form fields ---------- */
.don-field{margin-bottom:1.15rem;display:flex;flex-direction:column;}
.don-field label{
font-weight:600;font-size:0.875rem;margin-bottom:.4em;color:var(--ink);
}
.don-field .req{color:var(--accent-dark);}
.don-field input,.don-field select,.don-field textarea{
font-family:'Inter',sans-serif;font-size:1rem;color:var(--ink);
padding:.7em .9em;border:1px solid var(--line-strong);border-radius:var(--r-sm);
background:#fff;width:100%;box-sizing:border-box;
transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out);
}
.don-field textarea{resize:vertical;min-height:96px;}
.don-field input:focus,.don-field select:focus,.don-field textarea:focus{
outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(44,113,152,.14);
}
.don-field input.has-error,.don-field select.has-error{
border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.10);
}
.don-error{
display:block;min-height:1.05em;margin-top:.35em;
font-size:0.875rem;font-weight:600;color:#C0392B;
}
.don-field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
@media (max-width:560px){.don-field-row{grid-template-columns:1fr;}}
/* ---------- Payment method cards ---------- */
.don-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:560px){.don-methods{grid-template-columns:1fr;}}
.don-method{
display:flex;align-items:center;gap:12px;text-align:left;
font-family:'Inter',sans-serif;padding:14px 16px;
border:1px solid var(--line-strong);border-radius:var(--r-md);background:#fff;cursor:pointer;
transition:border-color .18s var(--ease-out),background .18s var(--ease-out),
box-shadow .22s var(--ease-out),transform .18s var(--ease-spring);
}
.don-method:hover:not(.is-selected){
border-color:var(--accent);background:rgba(44,113,152,.06);transform:translateY(-1px);
}
.don-method.is-selected{
border-color:var(--accent-light);background:rgba(44,113,152,.12);
box-shadow:0 2px 8px rgba(94,140,21,.18);
}
.don-method-tick{
flex-shrink:0;width:20px;height:20px;border-radius:50%;
border:2px solid var(--line);background:#fff;position:relative;
transition:border-color .18s var(--ease-out),background .18s var(--ease-out);
}
.don-method.is-selected .don-method-tick{
border-color:var(--accent-dark);background:var(--accent-light);
}
.don-method.is-selected .don-method-tick::after{
content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;
border:solid var(--deep-2);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.don-method-text{display:flex;flex-direction:column;min-width:0;}
.don-method-label{font-weight:700;font-size:0.875rem;color:var(--deep-2);}
.don-method-blurb{font-size:0.875rem;color:var(--muted);}
.don-method-panel{
margin-top:16px;padding:18px 20px;
background:var(--sand);border:1px solid var(--line);border-radius:var(--r-md);
}
.don-method-panel[hidden]{display:none;}
.don-method-note{margin:0 0 1rem;font-size:0.875rem;color:var(--muted);}
.don-method-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
.don-method-fields .don-field.is-full{grid-column:1 / -1;}
@media (max-width:520px){.don-method-fields{grid-template-columns:1fr;}}
.don-method-secured{
margin:.4rem 0 0;font-size:0.75rem;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--muted);
}
.don-pay-actions{
display:flex;gap:12px;flex-wrap:wrap;margin-top:1.9rem;
padding-top:1.5rem;border-top:1px solid var(--line);
}
.don-pay-result{
margin:1.2rem 0 0;padding:13px 16px;border-radius:var(--r-sm);font-size:0.875rem;font-weight:600;
}
.don-pay-result[hidden]{display:none;}
.don-pay-result.is-error{background:rgba(192,57,43,.08);color:#96271C;}
.don-pay-result.is-info{background:var(--mist);color:var(--deep-2);}
/* ---------- Recap sidebar ---------- */
.don-pay-recap{
background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
box-shadow:var(--shadow);padding:20px;position:sticky;top:96px;
}
.don-pay-recap h3{
font-family:'Montserrat',sans-serif;font-size:1.25rem;color:var(--deep-2);
margin:0 0 1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line);
}
.don-recap-rows{display:flex;flex-direction:column;gap:.95rem;}
.don-recap-row{display:flex;flex-direction:column;}
.don-recap-label{
font-size:0.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted);margin-bottom:2px;
}
.don-recap-value{font-weight:600;color:var(--ink);font-size:1rem;overflow-wrap:break-word;}
.don-recap-row.is-amount{
background:var(--mist);border-radius:var(--r-sm);padding:12px 14px;margin-top:.3rem;
}
.don-recap-row.is-amount .don-recap-label{color:var(--accent-dark);}
.don-recap-row.is-amount .don-recap-value{
font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.25rem;color:var(--deep-2);
}
.don-recap-empty{margin:0;font-size:0.875rem;color:var(--muted);}
.don-recap-note{
margin:1.4rem 0 1rem;padding-top:1.1rem;border-top:1px solid var(--line);
font-size:0.875rem;color:var(--muted);
}
@media (max-width:860px){.don-pay-recap{position:static;}}
@media (max-width:640px){
.don-pay-main{padding:22px 18px;border-radius:var(--r-lg);}
.don-pay-recap{padding:20px 18px;border-radius:var(--r-lg);}
.don-pay-actions .btn{width:100%;justify-content:center;}
}
/* ---------------------------------------------------------
Payment method — "coming soon" lock
The cards stay in the DOM and stay visible, just dimmed
behind a semi-transparent overlay. Removing `is-locked`
from the wrapper (or setting ONLINE_PAYMENT_ENABLED = true
in js/donation-pay.js) restores the block untouched.
--------------------------------------------------------- */
.don-methods-lock{position:relative;}
.don-methods-overlay{display:none;}
.don-methods-lock.is-locked{isolation:isolate;}
.don-methods-lock.is-locked .don-methods-dim{
opacity:.5;filter:grayscale(35%);
pointer-events:none;-webkit-user-select:none;user-select:none;
}
.don-methods-lock.is-locked .don-methods-overlay{
position:absolute;inset:-6px;z-index:2;
display:flex;align-items:center;justify-content:center;
padding:14px;cursor:not-allowed;
background:rgba(241,246,250,.62);
-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
border-radius:var(--r-md);
}
.don-methods-badge{
display:inline-flex;align-items:center;gap:10px;max-width:100%;
font-family:'Inter',sans-serif;font-weight:700;font-size:0.875rem;
color:var(--deep-2);text-align:center;
background:#fff;border:1px solid var(--primary-300);
border-radius:var(--r-sm);padding:11px 22px;
box-shadow:var(--shadow-md);
}
.don-methods-badge svg{
width:17px;height:17px;flex-shrink:0;color:var(--primary);
fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;
}
.don-method[disabled]{cursor:not-allowed;}
@media (max-width:480px){
.don-methods-badge{font-size:0.875rem;padding:10px 16px;gap:8px;}
}
/* ---------------------------------------------------------
Bank transfer details
Cards are rendered from BANK_ACCOUNTS in js/donation-pay.js.
--------------------------------------------------------- */
.don-bank-intro{font-size:0.875rem;color:var(--muted);margin:0 0 1.2rem;}
.don-bank-intro a{color:var(--primary);font-weight:600;}
.don-bank-intro a:hover{text-decoration:underline;}
.don-banks{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:620px){.don-banks{grid-template-columns:1fr;}}
.don-bank{
display:flex;flex-direction:column;gap:.85rem;
background:var(--sand);border:1px solid var(--line);
border-left:3px solid var(--primary);
border-radius:var(--r-md);padding:16px 18px;
transition:box-shadow .2s var(--ease-out),transform .2s var(--ease-out);
}
.don-bank:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.don-bank-head{
display:flex;align-items:center;gap:11px;
padding-bottom:.8rem;border-bottom:1px solid var(--line);
}
.don-bank-head svg{
width:21px;height:21px;flex-shrink:0;color:var(--primary);
fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;
}
.don-bank-head-text{display:flex;flex-direction:column;min-width:0;}
.don-bank-name{
font-family:'Montserrat',sans-serif;font-weight:600;font-size:1rem;
color:var(--deep-2);line-height:1.2;overflow-wrap:break-word;
}
.don-bank-rows{display:flex;flex-direction:column;gap:.7rem;}
.don-bank-row{display:flex;flex-direction:column;}
.don-bank-label{
font-size:0.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);margin-bottom:3px;
}
.don-bank-value{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
font-size:1rem;color:var(--ink);
}
.don-bank-text{font-weight:600;overflow-wrap:break-word;}
.don-bank-figure{
font-weight:700;font-size:1rem;color:var(--deep-2);
letter-spacing:.045em;font-variant-numeric:tabular-nums;
overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;
}
.don-bank-copy{
font-family:'Inter',sans-serif;font-size:0.75rem;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;
color:var(--primary);background:#fff;
border:1px solid var(--line-strong);border-radius:var(--r-xs);
padding:.36em .9em;cursor:pointer;
transition:color .16s var(--ease-out),border-color .16s var(--ease-out),
background .16s var(--ease-out);
}
.don-bank-copy:hover{border-color:var(--primary);background:var(--mist);}
.don-bank-copy.is-copied{
color:var(--accent-dark);border-color:var(--accent-light);
background:rgba(44,113,152,.14);
}
.don-bank-empty{margin:0;font-size:0.875rem;color:var(--muted);}
@media (max-width:640px){
.don-bank{padding:14px 16px;}
}
/* ---------------------------------------------------------
Bank transfer confirmation checkbox
--------------------------------------------------------- */
.don-confirm{margin-top:1.7rem;padding-top:1.5rem;border-top:1px solid var(--line);}
.don-check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;}
.don-check input[type="checkbox"]{
-webkit-appearance:none;appearance:none;
flex-shrink:0;width:21px;height:21px;margin:1px 0 0;position:relative;
border:1.5px solid var(--line-strong);border-radius:var(--r-xs);background:#fff;cursor:pointer;
transition:background .16s var(--ease-out),border-color .16s var(--ease-out);
}
.don-check input[type="checkbox"]:hover{border-color:var(--accent);}
.don-check input[type="checkbox"]:checked{
background:var(--accent-light);border-color:var(--accent-dark);
}
.don-check input[type="checkbox"]:checked::after{
content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
border:solid var(--deep-2);border-width:0 2.2px 2.2px 0;transform:rotate(42deg);
}
.don-check input[type="checkbox"].has-error{
border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.10);
}
.don-check-text{font-size:0.875rem;color:var(--ink);line-height:1.5;}
.don-confirm .don-error{margin-left:33px;}
/* ---------------------------------------------------------
Receipt upload + thank-you dialogs
Same mechanic as .bm-overlay: display:none until opened,
then display:flex plus `is-open` to run the transition.
--------------------------------------------------------- */
.don-modal{
position:fixed;inset:0;z-index:400;display:none;
align-items:flex-start;justify-content:center;overflow-y:auto;
padding:5vh 20px;background:rgba(2,40,63,.62);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
opacity:0;transition:opacity .3s var(--ease-out);
}
.don-modal.is-open{opacity:1;}
.don-modal-card{
position:relative;width:100%;max-width:520px;
background:#fff;border-radius:var(--r-xl);padding:26px 24px 22px;
box-shadow:var(--shadow-xl);
transform:translateY(24px) scale(.97);opacity:0;
transition:transform .38s var(--ease-spring),opacity .3s ease;
}
.don-modal.is-open .don-modal-card{transform:none;opacity:1;}
.don-modal-x{
position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--mist);border:1px solid var(--line);color:var(--deep-2);cursor:pointer;
transition:background .2s var(--ease-out),transform .2s var(--ease-out);
}
.don-modal-x:hover{background:var(--sand-2);transform:rotate(90deg);}
.don-modal-x svg{
width:17px;height:17px;fill:none;stroke:currentColor;
stroke-width:2.2;stroke-linecap:round;
}
.don-modal-title{
font-family:'Montserrat',sans-serif;font-size:1.5rem;line-height:1.2;
color:var(--deep-2);margin:0 0 .55rem;padding-right:34px;
}
.don-modal-desc{font-size:0.875rem;color:var(--muted);margin:0 0 1.4rem;}
.don-modal-actions{
display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;
margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
}
.don-modal-actions.is-single{justify-content:center;}
/* ---------- File picker / drop zone ---------- */
.don-drop{position:relative;}
.don-drop[hidden]{display:none;}
.don-drop input[type="file"]{
position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.don-drop-inner{
display:flex;flex-direction:column;align-items:center;gap:4px;
padding:24px 20px;text-align:center;cursor:pointer;
border:1.5px dashed var(--primary-300);border-radius:var(--r-md);background:var(--sand);
transition:border-color .18s var(--ease-out),background .18s var(--ease-out);
}
.don-drop-inner:hover{border-color:var(--primary);background:var(--mist);}
.don-drop:focus-within .don-drop-inner{
border-color:var(--primary);box-shadow:0 0 0 3px rgba(44,113,152,.14);
}
.don-drop.is-dragging .don-drop-inner{
border-color:var(--accent-dark);background:rgba(44,113,152,.12);
}
.don-drop.is-invalid .don-drop-inner{
border-color:#C0392B;background:rgba(192,57,43,.05);
}
.don-drop-icon{
width:34px;height:34px;margin-bottom:4px;color:var(--primary);
fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;
}
.don-drop-title{font-weight:700;font-size:1rem;color:var(--deep-2);}
.don-drop-hint{font-size:0.875rem;color:var(--muted);}
/* ---------- Chosen receipt preview ---------- */
.don-receipt-preview{
display:flex;gap:14px;align-items:flex-start;
padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--sand);
}
.don-receipt-preview[hidden]{display:none;}
.don-receipt-thumb{
flex-shrink:0;width:96px;height:96px;border-radius:var(--r-sm);overflow:hidden;
background:var(--mist);border:1px solid var(--line);
}
.don-receipt-thumb img{
/* contain, not cover: the point of the thumbnail is letting the donor
confirm they picked the right slip, so show the whole image. */
width:100%;height:100%;object-fit:contain;border-radius:0;display:block;
}
.don-receipt-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.don-receipt-name{
font-weight:700;font-size:0.875rem;color:var(--deep-2);overflow-wrap:anywhere;
}
.don-receipt-size{font-size:0.875rem;color:var(--muted);}
.don-receipt-change{
align-self:flex-start;margin-top:7px;padding:0;border:0;background:none;
font-family:'Inter',sans-serif;font-size:0.75rem;font-weight:700;
color:var(--primary);cursor:pointer;
text-decoration:underline;text-underline-offset:2px;
}
.don-receipt-change:hover{color:var(--primary-600);}
/* ---------- Thank-you dialog ---------- */
.don-success-mark{
width:62px;height:62px;margin:0 auto 1.15rem;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(44,113,152,.18);border:2px solid var(--accent-light);
}
.don-success-mark svg{
width:30px;height:30px;fill:none;stroke:var(--accent-dark);
stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.don-modal.is-success .don-modal-title{padding-right:0;text-align:center;}
.don-modal.is-success .don-modal-desc{text-align:center;margin-bottom:0;}
.don-success-emoji{margin-right:.28em;}
@media (max-width:520px){
.don-modal{padding:3vh 14px;}
.don-modal-card{padding:22px 18px 18px;border-radius:var(--r-lg);}
.don-modal-title{font-size:1.25rem;}
.don-modal-actions{flex-direction:column-reverse;}
.don-modal-actions .btn{width:100%;justify-content:center;}
.don-receipt-preview{flex-direction:column;}
.don-receipt-thumb{width:100%;height:150px;}
}
/* =====================================================================
REUSABLE FEATURE CARDS
---------------------------------------------------------------------
Shared component behind `.feature-cards` grids. Markup contract:
The grid is self-sizing, so adding or removing an needs no
CSS change. Built entirely on the existing token scale (--r-card,
--shadow, --line, --ink, --muted, --ease-out) so it inherits the
site theme rather than introducing values of its own.
===================================================================== */
.feature-cards{
display:grid;
/* auto-fit collapses unused tracks, so a 2-card grid fills the row
instead of leaving a hole; min() keeps it from overflowing on phones */
grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
gap:26px;
}
.feature-card{
display:flex;flex-direction:column;
background:#fff;
border:1px solid var(--line);
border-radius:0;
overflow:hidden;
transition:border-color .22s var(--ease-out);
}
.feature-card:hover{
border-color:rgba(44,113,152,.24);
}
/* ---------- Media ---------- */
.feature-card-media{
aspect-ratio:16/10;overflow:hidden;background:var(--mist);flex-shrink:0;
}
.feature-card-media img{
width:100%;height:100%;object-fit:cover;
border-radius:0; /* the card frame does the rounding */
}
/* ---------- Body ---------- */
.feature-card-body{
display:flex;flex-direction:column;flex:1;
padding:18px 18px 20px;
}
.feature-card-title{
font-size:1.125rem;line-height:1.28;margin:0 0 .6em;
color:var(--ink);transition:color .2s var(--ease-out);
}
.feature-card:hover .feature-card-title{color:var(--primary);}
.feature-card-text{
color:var(--ink);font-size:1rem;line-height:1.7;margin:0 0 .9em;
}
/* whichever element ends the body, it should not add trailing space */
.feature-card-body > *:last-child{margin-bottom:0;}
/* ---------- Optional meta / credits ---------- */
.feature-card-meta{
display:flex;flex-direction:column;gap:.35rem;
margin-top:auto; /* pins credits to the card floor so
they align across uneven cards */
padding-top:14px;
border-top:1px solid var(--line);
font-size:0.875rem;line-height:1.55;color:var(--muted);
}
@media (max-width:900px){
.feature-cards{gap:20px;}
}
@media (max-width:560px){
.feature-cards{gap:16px;}
.feature-card-body{padding:14px 14px 16px;}
.feature-card-title{font-size:1.125rem;}
}
/* ---------- Coming Soon / Under Construction placeholder ---------- */
.coming-soon{
max-width:640px;margin:0 auto;text-align:center;background:#fff;
border:1px solid var(--line);border-radius:var(--r-lg);
padding:56px 40px;box-shadow:var(--shadow-xs);
}
.coming-soon-icon{
width:88px;height:88px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;
border-radius:50%;background:rgba(6,69,104,.08);color:var(--accent);
}
.coming-soon-icon svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.coming-soon-eyebrow{
display:inline-block;font-size:0.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--accent);background:rgba(6,69,104,.08);border-radius:999px;padding:.35em 1em;margin-bottom:1.1em;
}
.coming-soon h2{margin:0 0 .5em;}
.coming-soon p{color:var(--ink);line-height:1.7;margin:0 auto .5em;max-width:46ch;}
.coming-soon .cs-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:1.8em;}
@media (max-width:600px){
.coming-soon{padding:40px 22px;}
.coming-soon-icon{width:72px;height:72px;}
.coming-soon-icon svg{width:36px;height:36px;}
}
/* =====================================================================
HEADER SEARCH — 5 August
---------------------------------------------------------------------
The "Book Appointment" button was removed from the header and replaced
with a search icon. Clicking the icon slides a search field open under
the header; it searches every page on the site and jumps to the exact
section of the result. Booking remains reachable from the Contact Us
menu, the hero buttons, and the floating calendar button.
Panel and results markup is injected by js/search.js. Existing theme
tokens only; nothing above this block is redefined.
===================================================================== */
/* ---------- The icon in the header ---------- */
.nav-search-btn{
display:inline-flex;align-items:center;justify-content:center;
width:42px;height:42px;flex-shrink:0;padding:0;
background:var(--mist);border:1px solid var(--line);border-radius:var(--r-sm);
color:var(--deep-2);cursor:pointer;-webkit-appearance:none;appearance:none;
transition:background .2s var(--ease-out),border-color .2s var(--ease-out),
color .2s var(--ease-out),transform .2s var(--ease-out),
box-shadow .2s var(--ease-out);
}
.nav-search-btn svg{
width:20px;height:20px;display:block;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
transition:transform .28s var(--ease-spring);
}
.nav-search-btn:hover{
background:var(--primary);border-color:var(--primary);color:var(--white);
transform:translateY(-1px);box-shadow:0 4px 12px rgba(36,94,128,.22);
}
.nav-search-btn:hover svg{transform:scale(1.08) rotate(-8deg);}
.nav-search-btn[aria-expanded="true"]{
background:var(--primary);border-color:var(--primary);color:var(--white);
}
/* ---------- Backdrop ---------- */
.search-backdrop{
position:fixed;inset:0;z-index:210;display:none;
background:rgba(2,40,63,.48);backdrop-filter:blur(4px);
opacity:0;transition:opacity .28s var(--ease-out);
}
.search-backdrop.show{display:block;opacity:1;}
html.search-open,html.search-open body{overflow:hidden;}
/* ---------- Panel ---------- */
.search-panel{
position:fixed;left:0;right:0;top:0;z-index:220;
display:flex;justify-content:center;
padding:14px 20px 0;
pointer-events:none;
visibility:hidden;
}
.search-panel.open{pointer-events:auto;visibility:visible;}
.search-inner{
width:100%;max-width:720px;
background:var(--white);border:1px solid var(--line);
border-radius:var(--r-xl);box-shadow:var(--shadow-xl);
overflow:hidden;
opacity:0;transform:translateY(-18px) scale(.985);
transition:opacity .26s var(--ease-out),transform .34s var(--ease-spring);
}
.search-panel.open .search-inner{opacity:1;transform:none;}
/* ---------- Field row ---------- */
.search-field{
display:flex;align-items:center;gap:10px;
padding:14px 16px;border-bottom:1px solid var(--line);
}
.search-field-icon{
width:20px;height:20px;flex-shrink:0;fill:none;stroke:var(--primary);
stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.search-input{
flex:1;min-width:0;border:none;outline:none;background:transparent;
font-family:'Inter',sans-serif;font-size:var(--fs-lg);font-weight:500;
color:var(--ink);padding:4px 0;line-height:1.4;
-webkit-appearance:none;appearance:none;
}
.search-input::placeholder{color:var(--muted);font-weight:400;}
.search-input::-webkit-search-cancel-button{display:none;}
.search-input:focus{box-shadow:none;border-color:transparent;}
.search-clear{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;flex-shrink:0;padding:0;
background:var(--mist);border:1px solid var(--line);border-radius:50%;
color:var(--muted);cursor:pointer;
transition:background .18s,color .18s;
}
.search-clear:hover{background:var(--sand-2);color:var(--deep-2);}
.search-clear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}
.search-close{
flex-shrink:0;background:transparent;border:1px solid var(--line-strong);
border-radius:var(--r-sm);padding:.45em .9em;cursor:pointer;
font-family:'Inter',sans-serif;font-size:var(--fs-sm);font-weight:600;
color:var(--muted);transition:background .18s,color .18s,border-color .18s;
}
.search-close:hover{background:var(--mist);color:var(--deep-2);border-color:var(--primary);}
/* ---------- Status line ---------- */
.search-status{
margin:0;padding:9px 16px;background:var(--sand);
border-bottom:1px solid var(--line);
font-size:var(--fs-xs);letter-spacing:.02em;color:var(--muted);
}
.search-status:empty{display:none;}
/* ---------- Results ---------- */
.search-results{
max-height:min(58vh,460px);overflow-y:auto;overscroll-behavior:contain;
padding:8px;
}
.search-group{
margin:6px 8px 8px;font-size:var(--fs-xs);font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.search-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 8px 12px;}
.search-chip{
background:var(--mist);border:1px solid var(--line);border-radius:999px;
padding:.45em 1em;cursor:pointer;
font-family:'Inter',sans-serif;font-size:var(--fs-sm);font-weight:600;
color:var(--deep);
transition:background .18s,border-color .18s,color .18s,transform .18s var(--ease-out);
}
.search-chip:hover{
background:var(--primary);border-color:var(--primary);color:var(--white);
transform:translateY(-1px);
}
.search-result{
display:flex;align-items:center;gap:12px;
padding:11px 12px;border-radius:var(--r-md);
border:1px solid transparent;
transition:background .16s var(--ease-out),border-color .16s var(--ease-out);
}
.search-result-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.search-result-title{
font-family:'Montserrat',sans-serif;font-weight:600;font-size:1.0625rem;
line-height:1.3;color:var(--deep-2);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.search-result-snippet{
font-size:var(--fs-sm);line-height:1.5;color:var(--muted);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.search-result-path{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
font-size:var(--fs-xs);color:var(--muted);margin-top:1px;
}
.search-result-kind{
background:var(--mist);color:var(--primary);border-radius:var(--r-xs);
padding:.15em .6em;font-weight:700;letter-spacing:.03em;
}
.search-result-page{font-weight:600;}
.search-result-go{
width:18px;height:18px;flex-shrink:0;fill:none;stroke:var(--primary);
stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
opacity:0;transform:translateX(-4px);
transition:opacity .2s var(--ease-out),transform .24s var(--ease-out);
}
.search-result:hover,.search-result.is-active{
background:var(--mist);border-color:rgba(44,113,152,.22);
}
.search-result:hover .search-result-go,
.search-result.is-active .search-result-go{opacity:1;transform:none;}
.search-result:hover .search-result-title,
.search-result.is-active .search-result-title{color:var(--primary);}
.search-results mark{
background:rgba(44,113,152,.16);color:var(--deep-2);
border-radius:3px;padding:0 .12em;font-weight:700;
}
.search-empty{padding:26px 18px 30px;text-align:center;}
.search-empty-title{
font-family:'Montserrat',sans-serif;font-weight:600;font-size:var(--fs-h3);
color:var(--deep-2);margin:0 0 .4em;
}
.search-empty p{color:var(--muted);font-size:var(--fs-sm);margin:0 auto;max-width:42ch;}
/* ---------- Keyboard hint strip ---------- */
.search-foot{
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
padding:10px 16px;border-top:1px solid var(--line);background:var(--sand);
font-size:var(--fs-xs);color:var(--muted);
}
.search-foot kbd{
display:inline-block;min-width:20px;text-align:center;
background:var(--white);border:1px solid var(--line-strong);
border-bottom-width:2px;border-radius:var(--r-xs);
padding:1px 5px;margin-right:3px;
font-family:'Inter',sans-serif;font-size:11px;font-weight:700;color:var(--deep-2);
}
/* ---------- Landing on a result: highlight the match in place ---------- */
mark.search-mark{
background:rgba(44,113,152,.20);color:inherit;
border-radius:3px;padding:0 .1em;
}
.search-hit{
position:relative;
animation:searchHitPulse 2.6s var(--ease-out) 1;
border-radius:var(--r-md);
}
@keyframes searchHitPulse{
0% {box-shadow:0 0 0 0 rgba(44,113,152,.42);}
18% {box-shadow:0 0 0 6px rgba(44,113,152,.20);}
100%{box-shadow:0 0 0 12px rgba(44,113,152,0);}
}
/* ---------- Responsive ---------- */
@media (max-width:760px){
.search-panel{padding:10px 12px 0;}
.search-inner{border-radius:var(--r-lg);}
.search-field{padding:12px 13px;gap:8px;}
.search-input{font-size:var(--fs-base);}
.search-close{display:none;} /* the backdrop and Esc still close it */
.search-results{max-height:64vh;}
.search-foot{display:none;} /* no physical keyboard to hint at */
.search-result-title{white-space:normal;}
}
@media (max-width:1200px){
/* sits to the left of the hamburger in the mobile header */
.nav-search-btn{width:40px;height:40px;}
}
@media (max-width:420px){
.nav-search-btn{width:38px;height:38px;}
.nav-search-btn svg{width:18px;height:18px;}
}
@media (prefers-reduced-motion:reduce){
.search-inner{transform:none;}
.search-hit{animation:none;box-shadow:0 0 0 3px rgba(44,113,152,.35);}
}
/* =====================================================================
PROFILE CARD HOVER — 5 August
---------------------------------------------------------------------
Every card that carries a person (doctors, faculty, residents,
optometrists, technicians, admin staff, Board of Management) now
responds to the pointer: the card lifts on a tinted shadow, a soft
brand wash sweeps up from the floor, the circular photo gains a ring
and eases forward while the portrait itself scales inside its frame,
and the name and arrow shift to brand blue.
The transition list restates opacity and filter on purpose: .people-card
is also a scroll-reveal target, and dropping those two would turn its
entrance into a snap instead of the site's focus-pull fade.
===================================================================== */
.people-card{
position:relative;
isolation:isolate;
transition:
opacity .5s var(--ease-out),
filter .5s var(--ease-out),
transform .42s var(--ease-out),
box-shadow .42s var(--ease-out),
border-color .3s var(--ease-out);
will-change:transform;
}
/* the wash that rises from the bottom of the card on hover */
.people-card::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
border-radius:inherit;
background:linear-gradient(to top,rgba(44,113,152,.09),rgba(44,113,152,0) 62%);
opacity:0;transition:opacity .42s var(--ease-out);
}
.people-card:hover,
.people-card:focus-within{
transform:translateY(-6px);
box-shadow:0 10px 22px rgba(2,55,87,.09),0 22px 48px rgba(2,55,87,.13);
border-color:rgba(44,113,152,.34);
}
.people-card:hover::after,
.people-card:focus-within::after{opacity:1;}
/* ---- circular portrait: ring, lift, and inner zoom ---- */
.people-card .people-photo{
position:relative;
transition:transform .42s var(--ease-spring),
box-shadow .42s var(--ease-out),
background-color .42s var(--ease-out);
}
.people-card .people-photo img{
transition:transform .6s var(--ease-out),filter .5s var(--ease-out);
transform-origin:center 22%;
}
.people-card:hover .people-photo,
.people-card:focus-within .people-photo{
transform:translateY(-3px);
background-color:var(--sand-2);
box-shadow:0 0 0 3px rgba(44,113,152,.20),0 8px 18px rgba(2,55,87,.14);
}
.people-card:hover .people-photo img,
.people-card:focus-within .people-photo img{
transform:scale(1.09);
filter:saturate(1.06);
}
/* the ring that expands outward once, as the pointer settles */
.people-card .people-photo::after{
content:"";position:absolute;inset:-4px;border-radius:50%;
border:1px solid rgba(44,113,152,.5);
opacity:0;transform:scale(.9);pointer-events:none;
transition:opacity .45s var(--ease-out),transform .55s var(--ease-out);
}
.people-card:hover .people-photo::after,
.people-card:focus-within .people-photo::after{opacity:1;transform:scale(1);}
/* ---- name, role, arrow ---- */
.people-card .people-body h4{
transition:color .3s var(--ease-out),transform .34s var(--ease-out);
}
.people-card:hover .people-body h4,
.people-card:focus-within .people-body h4{
color:var(--deep-2);
transform:translateY(-1px);
}
.people-card:hover .people-role,
.people-card:focus-within .people-role{color:var(--ink);}
.people-card:hover .people-view svg,
.people-card:focus-within .people-view svg{transform:translateX(4px);}
/* Photo links carry their own hover in the Find a Doctor directory; the
card-level lift above already moves them, so the duplicate nudge is
dropped to keep the two from stacking into a jump. */
.docs-directory .people-card:hover .people-photo,
.docs-directory .people-card:focus-within .people-photo{transform:translateY(-3px);}
/* Board cards are clickable in full, so the pointer follows the card. */
.people-card[data-member]:hover{cursor:pointer;}
@media (hover:none){
/* Touch devices: no hover state to chase, so keep cards flat and let
tapping do the work rather than leaving a card stuck in hover. */
.people-card:hover{transform:none;box-shadow:none;}
.people-card:hover::after{opacity:0;}
.people-card:hover .people-photo{transform:none;box-shadow:none;}
.people-card:hover .people-photo img{transform:none;}
.people-card .people-photo::after{display:none;}
}
@media (prefers-reduced-motion:reduce){
.people-card:hover,.people-card:focus-within{transform:none;}
.people-card .people-photo::after{display:none;}
.people-card:hover .people-photo img{transform:none;}
}
/* =========================================================
DONATION MODULE — dynamic donation selection flow
Scoped entirely under `.don-*` so no shared component is
affected. Colours, radii, shadows and fonts are taken from
the existing token set only.
========================================================= */
.don-module{padding-top:3.4rem;}
#donation-app[hidden]{display:none;}
/* ---------- Live summary card (sits above the steps) ---------- */
.don-summary{
background:#fff;border:1px solid var(--line);border-radius:20px;
box-shadow:var(--shadow);padding:24px 26px 26px;margin-bottom:2.4rem;
}
.don-summary-head{
display:flex;align-items:baseline;justify-content:space-between;gap:16px;
flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:.9rem;margin-bottom:1.2rem;
}
.don-summary-head h3{
font-family:'Montserrat',sans-serif;font-size:1.22rem;color:var(--deep-2);margin:0;
}
.don-summary-head .don-summary-hint{
font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--accent-dark);margin:0;
}
.don-sum-rows{
display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:16px 22px;
}
.don-sum-row{display:flex;flex-direction:column;min-width:0;}
.don-sum-label{
font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted);margin-bottom:3px;
}
.don-sum-value{
font-weight:600;color:var(--ink);font-size:.98rem;line-height:1.35;overflow-wrap:break-word;
}
.don-sum-row.is-lead .don-sum-label{color:var(--primary);}
.don-sum-row.is-amount .don-sum-label{color:var(--accent-dark);}
.don-sum-row.is-amount .don-sum-value{
font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.24rem;color:var(--deep-2);
}
.don-summary-foot{
margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--line);
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.don-summary-foot p{margin:0;font-size:.86rem;color:var(--muted);flex:1 1 260px;}
/* ---------- Steps ---------- */
.don-steps{display:flex;flex-direction:column;gap:1.9rem;}
.don-step[hidden]{display:none;}
.don-step-head{display:flex;align-items:center;gap:12px;margin-bottom:.85rem;}
.don-step-num{
flex-shrink:0;width:26px;height:26px;border-radius:50%;
background:var(--mist);color:var(--primary);
font-size:.76rem;font-weight:700;
display:inline-flex;align-items:center;justify-content:center;
}
.don-step-head h4{
margin:0;font-family:'Inter',sans-serif;font-weight:700;font-size:.84rem;
letter-spacing:.07em;text-transform:uppercase;color:var(--deep-2);
}
/* ---------- Pill buttons ---------- */
.don-pills{display:flex;flex-wrap:wrap;gap:12px;}
.don-pill{
display:inline-flex;align-items:baseline;gap:.5em;
font-family:'Inter',sans-serif;font-weight:600;font-size:.93rem;
padding:.72em 1.35em;border-radius:999px;
border:1.5px solid var(--line);background:#fff;color:var(--ink);
cursor:pointer;text-align:left;
transition:background .18s var(--ease-out),border-color .18s var(--ease-out),
color .18s var(--ease-out),box-shadow .22s var(--ease-out),
transform .18s var(--ease-spring);
}
.don-pill:hover:not(.is-selected){
border-color:var(--accent);color:var(--accent-dark);
background:rgba(127,179,31,.07);transform:translateY(-1px);
}
.don-pill:active{transform:translateY(0) scale(.985);}
.don-pill.is-selected{
background:var(--accent-light);border-color:var(--accent-light);
color:var(--deep-2);font-weight:700;
box-shadow:0 8px 18px rgba(153,209,44,.34);
}
.don-pill-note{font-weight:600;font-size:.82rem;color:var(--muted);white-space:nowrap;}
.don-pill.is-selected .don-pill-note{color:var(--deep-2);opacity:.78;}
/* ---------- Responsive ---------- */
@media (max-width:640px){
.don-summary{padding:20px 18px 22px;border-radius:16px;}
.don-sum-rows{grid-template-columns:1fr 1fr;gap:14px 16px;}
.don-sum-row.is-amount{grid-column:1 / -1;}
.don-pills{gap:10px;}
.don-pill{font-size:.88rem;padding:.66em 1.1em;width:100%;justify-content:space-between;}
.don-summary-foot .btn{width:100%;justify-content:center;}
}
@media (max-width:420px){
.don-sum-rows{grid-template-columns:1fr;}
}
/* Respect the site-wide reduced-motion preference. */
@media (prefers-reduced-motion:reduce){
.don-pill{transition:background .01s linear,border-color .01s linear,color .01s linear;}
.don-pill:hover:not(.is-selected){transform:none;}
}
/* =========================================================
DONATION MODULE — additions for the empty / deselectable state
========================================================= */
.don-sum-empty{margin:0;color:var(--muted);font-size:.95rem;}
.don-sum-row.is-pending .don-sum-value{
font-family:'Inter',sans-serif;font-size:.95rem;font-weight:600;color:var(--muted);
}
.don-summary-foot p.is-waiting{color:var(--primary);font-weight:600;}
.btn.is-disabled{
opacity:.45;cursor:not-allowed;pointer-events:auto;
box-shadow:none;transform:none !important;
}
/* =========================================================
DONATION PAYMENT PAGE
Scoped under `.don-pay-*` / `.don-method*` / `.don-field`.
========================================================= */
.don-pay-notice{
display:flex;gap:14px;align-items:flex-start;
background:var(--mist);border:1px solid var(--line);border-left:4px solid var(--primary);
border-radius:12px;padding:16px 20px;margin-bottom:2.2rem;
font-size:.92rem;color:var(--ink);
}
.don-pay-notice svg{
width:22px;height:22px;flex-shrink:0;margin-top:1px;color:var(--primary);
fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
}
.don-pay-notice strong{color:var(--deep-2);}
.don-pay-layout{display:grid;grid-template-columns:1.5fr .95fr;gap:34px;align-items:start;}
@media (max-width:860px){.don-pay-layout{grid-template-columns:1fr;}}
.don-pay-main{
background:#fff;border:1px solid var(--line);border-radius:20px;
box-shadow:var(--shadow);padding:28px 30px;
}
.don-pay-main h2{font-size:1.4rem;margin-bottom:1.3rem;}
.don-pay-main h2.don-pay-h2{
margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.don-pay-sub{
font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);margin:0 0 .9em;
}
/* ---------- Form fields ---------- */
.don-field{margin-bottom:1.15rem;display:flex;flex-direction:column;}
.don-field label{
font-weight:600;font-size:.82rem;margin-bottom:.4em;color:var(--ink);
}
.don-field .req{color:var(--accent-dark);}
.don-field input,.don-field select,.don-field textarea{
font-family:'Inter',sans-serif;font-size:.95rem;color:var(--ink);
padding:.72em .9em;border:1.5px solid var(--line);border-radius:10px;
background:#fff;width:100%;box-sizing:border-box;
transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out);
}
.don-field textarea{resize:vertical;min-height:96px;}
.don-field input:focus,.don-field select:focus,.don-field textarea:focus{
outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(44,113,152,.14);
}
.don-field input.has-error,.don-field select.has-error{
border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.10);
}
.don-error{
display:block;min-height:1.05em;margin-top:.35em;
font-size:.8rem;font-weight:600;color:#C0392B;
}
.don-field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
@media (max-width:560px){.don-field-row{grid-template-columns:1fr;}}
/* ---------- Payment method cards ---------- */
.don-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:560px){.don-methods{grid-template-columns:1fr;}}
.don-method{
display:flex;align-items:center;gap:12px;text-align:left;
font-family:'Inter',sans-serif;padding:14px 16px;
border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;
transition:border-color .18s var(--ease-out),background .18s var(--ease-out),
box-shadow .22s var(--ease-out),transform .18s var(--ease-spring);
}
.don-method:hover:not(.is-selected){
border-color:var(--accent);background:rgba(127,179,31,.06);transform:translateY(-1px);
}
.don-method.is-selected{
border-color:var(--accent-light);background:rgba(153,209,44,.14);
box-shadow:0 8px 18px rgba(153,209,44,.22);
}
.don-method-tick{
flex-shrink:0;width:20px;height:20px;border-radius:50%;
border:2px solid var(--line);background:#fff;position:relative;
transition:border-color .18s var(--ease-out),background .18s var(--ease-out);
}
.don-method.is-selected .don-method-tick{
border-color:var(--accent-dark);background:var(--accent-light);
}
.don-method.is-selected .don-method-tick::after{
content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;
border:solid var(--deep-2);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.don-method-text{display:flex;flex-direction:column;min-width:0;}
.don-method-label{font-weight:700;font-size:.93rem;color:var(--deep-2);}
.don-method-blurb{font-size:.8rem;color:var(--muted);}
.don-method-panel{
margin-top:16px;padding:18px 20px;
background:var(--sand);border:1px solid var(--line);border-radius:12px;
}
.don-method-panel[hidden]{display:none;}
.don-method-note{margin:0 0 1rem;font-size:.88rem;color:var(--muted);}
.don-method-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
.don-method-fields .don-field.is-full{grid-column:1 / -1;}
@media (max-width:520px){.don-method-fields{grid-template-columns:1fr;}}
.don-method-secured{
margin:.4rem 0 0;font-size:.76rem;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--muted);
}
.don-pay-actions{
display:flex;gap:12px;flex-wrap:wrap;margin-top:1.9rem;
padding-top:1.5rem;border-top:1px solid var(--line);
}
.don-pay-result{
margin:1.2rem 0 0;padding:13px 16px;border-radius:10px;font-size:.9rem;font-weight:600;
}
.don-pay-result[hidden]{display:none;}
.don-pay-result.is-error{background:rgba(192,57,43,.08);color:#96271C;}
.don-pay-result.is-info{background:var(--mist);color:var(--deep-2);}
/* ---------- Recap sidebar ---------- */
.don-pay-recap{
background:#fff;border:1px solid var(--line);border-radius:20px;
box-shadow:var(--shadow);padding:26px;position:sticky;top:96px;
}
.don-pay-recap h3{
font-family:'Montserrat',sans-serif;font-size:1.22rem;color:var(--deep-2);
margin:0 0 1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line);
}
.don-recap-rows{display:flex;flex-direction:column;gap:.95rem;}
.don-recap-row{display:flex;flex-direction:column;}
.don-recap-label{
font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted);margin-bottom:2px;
}
.don-recap-value{font-weight:600;color:var(--ink);font-size:.96rem;overflow-wrap:break-word;}
.don-recap-row.is-amount{
background:var(--mist);border-radius:10px;padding:12px 14px;margin-top:.3rem;
}
.don-recap-row.is-amount .don-recap-label{color:var(--accent-dark);}
.don-recap-row.is-amount .don-recap-value{
font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.24rem;color:var(--deep-2);
}
.don-recap-empty{margin:0;font-size:.92rem;color:var(--muted);}
.don-recap-note{
margin:1.4rem 0 1rem;padding-top:1.1rem;border-top:1px solid var(--line);
font-size:.82rem;color:var(--muted);
}
@media (max-width:860px){.don-pay-recap{position:static;}}
@media (max-width:640px){
.don-pay-main{padding:22px 18px;border-radius:16px;}
.don-pay-recap{padding:20px 18px;border-radius:16px;}
.don-pay-actions .btn{width:100%;justify-content:center;}
}
/* ---------------------------------------------------------
Payment method — "coming soon" lock
The cards stay in the DOM and stay visible, just dimmed
behind a semi-transparent overlay. Removing `is-locked`
from the wrapper (or setting ONLINE_PAYMENT_ENABLED = true
in js/donation-pay.js) restores the block untouched.
--------------------------------------------------------- */
.don-methods-lock{position:relative;}
.don-methods-overlay{display:none;}
.don-methods-lock.is-locked{isolation:isolate;}
.don-methods-lock.is-locked .don-methods-dim{
opacity:.5;filter:grayscale(35%);
pointer-events:none;-webkit-user-select:none;user-select:none;
}
.don-methods-lock.is-locked .don-methods-overlay{
position:absolute;inset:-6px;z-index:2;
display:flex;align-items:center;justify-content:center;
padding:14px;cursor:not-allowed;
background:rgba(238,244,249,.55);
-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
border-radius:14px;
}
.don-methods-badge{
display:inline-flex;align-items:center;gap:10px;max-width:100%;
font-family:'Inter',sans-serif;font-weight:700;font-size:.9rem;
color:var(--deep-2);text-align:center;
background:#fff;border:1.5px solid var(--primary-300);
border-radius:999px;padding:11px 22px;
box-shadow:0 12px 28px rgba(2,75,120,.18);
}
.don-methods-badge svg{
width:17px;height:17px;flex-shrink:0;color:var(--primary);
fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;
}
.don-method[disabled]{cursor:not-allowed;}
@media (max-width:480px){
.don-methods-badge{font-size:.79rem;padding:10px 16px;gap:8px;}
}
/* ---------------------------------------------------------
Bank transfer details
Cards are rendered from BANK_ACCOUNTS in js/donation-pay.js.
--------------------------------------------------------- */
.don-bank-intro{font-size:.9rem;color:var(--muted);margin:0 0 1.2rem;}
.don-bank-intro a{color:var(--primary);font-weight:600;}
.don-bank-intro a:hover{text-decoration:underline;}
.don-banks{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:620px){.don-banks{grid-template-columns:1fr;}}
.don-bank{
display:flex;flex-direction:column;gap:.85rem;
background:var(--sand);border:1px solid var(--line);
border-left:4px solid var(--primary);
border-radius:12px;padding:16px 18px;
transition:box-shadow .2s var(--ease-out),transform .2s var(--ease-out);
}
.don-bank:hover{box-shadow:0 10px 24px rgba(2,75,120,.10);transform:translateY(-1px);}
.don-bank-head{
display:flex;align-items:center;gap:11px;
padding-bottom:.8rem;border-bottom:1px solid var(--line);
}
.don-bank-head svg{
width:21px;height:21px;flex-shrink:0;color:var(--primary);
fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;
}
.don-bank-head-text{display:flex;flex-direction:column;min-width:0;}
.don-bank-name{
font-family:'Montserrat',sans-serif;font-weight:600;font-size:1.02rem;
color:var(--deep-2);line-height:1.2;overflow-wrap:break-word;
}
.don-bank-rows{display:flex;flex-direction:column;gap:.7rem;}
.don-bank-row{display:flex;flex-direction:column;}
.don-bank-label{
font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);margin-bottom:3px;
}
.don-bank-value{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
font-size:.95rem;color:var(--ink);
}
.don-bank-text{font-weight:600;overflow-wrap:break-word;}
.don-bank-figure{
font-weight:700;font-size:1rem;color:var(--deep-2);
letter-spacing:.045em;font-variant-numeric:tabular-nums;
overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;
}
.don-bank-copy{
font-family:'Inter',sans-serif;font-size:.7rem;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;
color:var(--primary);background:#fff;
border:1.5px solid var(--line);border-radius:999px;
padding:.36em .9em;cursor:pointer;
transition:color .16s var(--ease-out),border-color .16s var(--ease-out),
background .16s var(--ease-out);
}
.don-bank-copy:hover{border-color:var(--primary);background:var(--mist);}
.don-bank-copy.is-copied{
color:var(--accent-dark);border-color:var(--accent-light);
background:rgba(153,209,44,.14);
}
.don-bank-empty{margin:0;font-size:.9rem;color:var(--muted);}
@media (max-width:640px){
.don-bank{padding:14px 16px;}
}
/* ---------------------------------------------------------
Bank transfer confirmation checkbox
--------------------------------------------------------- */
.don-confirm{margin-top:1.7rem;padding-top:1.5rem;border-top:1px solid var(--line);}
.don-check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;}
.don-check input[type="checkbox"]{
-webkit-appearance:none;appearance:none;
flex-shrink:0;width:21px;height:21px;margin:1px 0 0;position:relative;
border:1.8px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;
transition:background .16s var(--ease-out),border-color .16s var(--ease-out);
}
.don-check input[type="checkbox"]:hover{border-color:var(--accent);}
.don-check input[type="checkbox"]:checked{
background:var(--accent-light);border-color:var(--accent-dark);
}
.don-check input[type="checkbox"]:checked::after{
content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
border:solid var(--deep-2);border-width:0 2.2px 2.2px 0;transform:rotate(42deg);
}
.don-check input[type="checkbox"].has-error{
border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.10);
}
.don-check-text{font-size:.92rem;color:var(--ink);line-height:1.5;}
.don-confirm .don-error{margin-left:33px;}
/* ---------------------------------------------------------
Receipt upload + thank-you dialogs
Same mechanic as .bm-overlay: display:none until opened,
then display:flex plus `is-open` to run the transition.
--------------------------------------------------------- */
.don-modal{
position:fixed;inset:0;z-index:400;display:none;
align-items:flex-start;justify-content:center;overflow-y:auto;
padding:5vh 20px;background:rgba(2,40,63,.62);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
opacity:0;transition:opacity .3s var(--ease-out);
}
.don-modal.is-open{opacity:1;}
.don-modal-card{
position:relative;width:100%;max-width:520px;
background:#fff;border-radius:22px;padding:34px 32px 28px;
box-shadow:var(--shadow-xl);
transform:translateY(24px) scale(.97);opacity:0;
transition:transform .38s var(--ease-spring),opacity .3s ease;
}
.don-modal.is-open .don-modal-card{transform:none;opacity:1;}
.don-modal-x{
position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--mist);border:1px solid var(--line);color:var(--deep-2);cursor:pointer;
transition:background .2s var(--ease-out),transform .2s var(--ease-out);
}
.don-modal-x:hover{background:var(--sand-2);transform:rotate(90deg);}
.don-modal-x svg{
width:17px;height:17px;fill:none;stroke:currentColor;
stroke-width:2.2;stroke-linecap:round;
}
.don-modal-title{
font-family:'Montserrat',sans-serif;font-size:1.42rem;line-height:1.2;
color:var(--deep-2);margin:0 0 .55rem;padding-right:34px;
}
.don-modal-desc{font-size:.93rem;color:var(--muted);margin:0 0 1.4rem;}
.don-modal-actions{
display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;
margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
}
.don-modal-actions.is-single{justify-content:center;}
/* ---------- File picker / drop zone ---------- */
.don-drop{position:relative;}
.don-drop[hidden]{display:none;}
.don-drop input[type="file"]{
position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.don-drop-inner{
display:flex;flex-direction:column;align-items:center;gap:4px;
padding:30px 20px;text-align:center;cursor:pointer;
border:1.8px dashed var(--primary-300);border-radius:14px;background:var(--sand);
transition:border-color .18s var(--ease-out),background .18s var(--ease-out);
}
.don-drop-inner:hover{border-color:var(--primary);background:var(--mist);}
.don-drop:focus-within .don-drop-inner{
border-color:var(--primary);box-shadow:0 0 0 3px rgba(44,113,152,.14);
}
.don-drop.is-dragging .don-drop-inner{
border-color:var(--accent-dark);background:rgba(153,209,44,.12);
}
.don-drop.is-invalid .don-drop-inner{
border-color:#C0392B;background:rgba(192,57,43,.05);
}
.don-drop-icon{
width:34px;height:34px;margin-bottom:4px;color:var(--primary);
fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;
}
.don-drop-title{font-weight:700;font-size:.95rem;color:var(--deep-2);}
.don-drop-hint{font-size:.83rem;color:var(--muted);}
/* ---------- Chosen receipt preview ---------- */
.don-receipt-preview{
display:flex;gap:14px;align-items:flex-start;
padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--sand);
}
.don-receipt-preview[hidden]{display:none;}
.don-receipt-thumb{
flex-shrink:0;width:96px;height:96px;border-radius:10px;overflow:hidden;
background:var(--mist);border:1px solid var(--line);
}
.don-receipt-thumb img{
/* contain, not cover: the point of the thumbnail is letting the donor
confirm they picked the right slip, so show the whole image. */
width:100%;height:100%;object-fit:contain;border-radius:0;display:block;
}
.don-receipt-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.don-receipt-name{
font-weight:700;font-size:.9rem;color:var(--deep-2);overflow-wrap:anywhere;
}
.don-receipt-size{font-size:.8rem;color:var(--muted);}
.don-receipt-change{
align-self:flex-start;margin-top:7px;padding:0;border:0;background:none;
font-family:'Inter',sans-serif;font-size:.78rem;font-weight:700;
color:var(--primary);cursor:pointer;
text-decoration:underline;text-underline-offset:2px;
}
.don-receipt-change:hover{color:var(--primary-600);}
/* ---------- Thank-you dialog ---------- */
.don-success-mark{
width:62px;height:62px;margin:0 auto 1.15rem;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(153,209,44,.18);border:2px solid var(--accent-light);
}
.don-success-mark svg{
width:30px;height:30px;fill:none;stroke:var(--accent-dark);
stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.don-modal.is-success .don-modal-title{padding-right:0;text-align:center;}
.don-modal.is-success .don-modal-desc{text-align:center;margin-bottom:0;}
.don-success-emoji{margin-right:.28em;}
@media (max-width:520px){
.don-modal{padding:3vh 14px;}
.don-modal-card{padding:28px 20px 22px;border-radius:18px;}
.don-modal-title{font-size:1.2rem;}
.don-modal-actions{flex-direction:column-reverse;}
.don-modal-actions .btn{width:100%;justify-content:center;}
.don-receipt-preview{flex-direction:column;}
.don-receipt-thumb{width:100%;height:150px;}
}