/* ==========================================================================
Tatvam Hospital — Template Stylesheet
A hospital / multispecialty-clinic website template.
Table of contents
------------------
1. CSS Custom Properties (design tokens)
2. Reset / Base
3. Typography
4. Layout helpers (container, grid, section spacing)
5. Buttons
6. Forms
7. Badges / tags / stars
8. Topbar
9. Header / main navigation / mega menu
10. Mobile navigation
11. Hero
12. Page header (inner pages)
13. Section heading pattern
14. Centres of excellence cards
15. About + stat counters
16. Services grid
17. Equipment / feature list
18. Visitor guide cards — retired, see 44
19. Awards strip — retired, see 45
20. Video section — retired, see 46
21. Carousel (shared engine) — unused, commented out
22. Doctor cards
23. Testimonials — retired, see 48
24. Blog / news cards
25. FAQ accordion
26. CTA strip
27. Footer
28. Breadcrumb
29. Sidebar widgets
30. Doctor single page
31. Blog single / article
32. Gallery
33. Contact page / map
34. Pagination
35. 404 page
36. Back-to-top + floating WhatsApp + tour restart
37. Utilities
38. Responsive media queries
39. Driver.js tour theme
40. Hero — premium animations
41. Centres of Excellence — premium animations
42. About & Counters — redesign
43. Technology — premium animations
44. Patient & Visitor Guide — Journey path
45. Awards — Circular orbit showcase
46. Videos — Featured studio
47. Doctors — Specialist wall
48. Testimonials — Healing journey gallery
49. Health Blog — Medical knowledge hub
50. Patient Decision Flow — FAQ + Appointment CTA
51. Hero slideshow — disabled, commented out (rolled back)
========================================================================== */
/* ==========================================================================
1. CSS Custom Properties
========================================================================== */
:root {
/* Brand colors — Tatvam Hospital palette (blue / red / dark neutral only) */
--color-primary: #1c75bc;
--color-primary-dark: #15598f;
--color-primary-darker: #10446d;
--color-primary-light: #7eb0d9;
--color-accent: #be1e2d;
--color-accent-dark: #941723;
--color-navy: #231f20;
--color-navy-soft: #213445;
--color-tint: #eff5fa;
--color-tint-2: #f7fafd;
--color-star: #be1e2d;
/* Neutrals (derived from the dark-neutral brand color) */
--color-text: #3d3a3b;
--color-text-muted: #8d8b8b;
--color-text-soft: #aeacac;
--color-white: #ffffff;
--color-border: #e9e9e9;
--color-bg: #ffffff;
/* Typography */
--font-heading: 'Orange Avenue', 'Playfair Display', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
/* Radius */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-full: 999px;
/* Shadow */
--shadow-sm: 0 2px 10px rgba(35, 31, 32, 0.08);
--shadow-md: 0 10px 28px rgba(35, 31, 32, 0.12);
--shadow-lg: 0 24px 56px rgba(35, 31, 32, 0.2);
/* Layout */
--container-width: 1260px;
--header-height: 88px;
--topbar-height: 42px;
--section-space: clamp(3.25rem, 6vw, 5.5rem);
--transition: 0.25s ease;
}
/* ==========================================================================
2. Reset / Base
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-height);
}
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
color: var(--color-text);
background: var(--color-bg);
overflow-x: hidden;
overflow-wrap: break-word;
}
img,
picture,
svg {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
padding: 0;
}
button,
input,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
table {
border-collapse: collapse;
width: 100%;
}
.icon {
width: 1em;
height: 1em;
fill: none;
flex-shrink: 0;
transform-box: fill-box;
transform-origin: center;
}
.icon-rotate-180 {
transform: rotate(180deg);
}
/* ==========================================================================
3. Typography
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
color: var(--color-navy);
line-height: 1.25;
font-weight: 600;
}
h1 {
font-size: clamp(2rem, 3.6vw, 3.25rem);
font-weight: 700;
}
h2 {
font-size: clamp(1.6rem, 2.8vw, 2.4rem);
font-weight: 700;
}
h3 {
font-size: 1.3rem;
}
h4 {
font-size: 1.125rem;
}
p {
color: var(--color-text-muted);
}
.lead {
font-size: 1.15rem;
color: var(--color-text-muted);
}
.text-primary {
color: var(--color-primary) !important;
}
.text-accent {
color: var(--color-accent) !important;
}
.text-navy {
color: var(--color-navy) !important;
}
.text-white {
color: var(--color-white) !important;
}
.text-muted {
color: var(--color-text-muted) !important;
}
/* ==========================================================================
4. Layout helpers
========================================================================== */
.container {
width: 100%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: 1.25rem;
}
.section {
padding-block: var(--section-space);
}
.section-tint {
background: var(--color-tint);
}
.section-navy {
background: var(--color-navy);
color: rgba(255, 255, 255, 0.85);
}
.section-navy h2,
.section-navy h3,
.section-navy h4 {
color: var(--color-white);
}
.grid {
display: grid;
gap: 1.75rem;
}
.grid-2 {
grid-template-columns: repeat(1, 1fr);
}
.grid-3 {
grid-template-columns: repeat(1, 1fr);
}
.grid-4 {
grid-template-columns: repeat(1, 1fr);
}
.grid-5 {
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 576px) {
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
.grid-4 {
grid-template-columns: repeat(3, 1fr);
}
.grid-5 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-5 {
grid-template-columns: repeat(5, 1fr);
}
}
.flex {
display: flex;
align-items: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-wrap {
flex-wrap: wrap;
}
.gap-sm {
gap: 0.6rem;
}
.gap-md {
gap: 1.25rem;
}
.gap-lg {
gap: 2rem;
}
/* ==========================================================================
5. Buttons
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.85rem 1.75rem;
border-radius: var(--radius-full);
font-weight: 600;
font-size: 0.98rem;
white-space: nowrap;
transition: var(--transition);
border: 2px solid transparent;
}
.btn .icon {
width: 1.05em;
height: 1.05em;
}
.btn-primary {
background: var(--color-primary);
color: var(--color-white);
box-shadow: 0 10px 20px -8px rgba(28, 117, 188, 0.55);
}
.btn-primary:hover {
background: var(--color-primary-dark);
transform: translateY(-2px);
}
.btn-accent {
background: var(--color-accent);
color: var(--color-white);
box-shadow: 0 10px 20px -8px rgba(190, 30, 45, 0.55);
}
.btn-accent:hover {
background: var(--color-accent-dark);
transform: translateY(-2px);
}
.btn-outline {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-outline:hover {
background: var(--color-primary);
color: var(--color-white);
}
.btn-white {
background: var(--color-white);
color: var(--color-primary-dark);
}
.btn-white:hover {
background: var(--color-navy);
color: var(--color-white);
transform: translateY(-2px);
}
.btn-ghost-white {
background: transparent;
color: var(--color-white);
border-color: rgba(255, 255, 255, 0.55);
}
.btn-ghost-white:hover {
background: rgba(255, 255, 255, 0.15);
border-color: var(--color-white);
}
.btn-block {
width: 100%;
}
.btn-sm {
padding: 0.55rem 1.15rem;
font-size: 0.88rem;
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
color: var(--color-primary);
position: relative;
}
.link-arrow .icon {
width: 1.1em;
height: 1.1em;
transition: transform var(--transition);
}
.link-arrow:hover .icon {
transform: translateX(4px);
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--color-border);
color: var(--color-primary-dark);
transition: var(--transition);
flex-shrink: 0;
}
.icon-btn:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
.icon-btn .icon {
width: 1.1em;
height: 1.1em;
}
.icon-btn-sm {
width: 34px;
height: 34px;
}
/* ==========================================================================
6. Forms
========================================================================== */
.field {
margin-bottom: 1.1rem;
text-align: left;
}
.field label {
display: block;
font-size: 0.88rem;
font-weight: 600;
color: var(--color-navy);
margin-bottom: 0.4rem;
}
.field input,
.field select,
.field textarea {
width: 100%;
padding: 0.8rem 1rem;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-white);
font-size: 0.96rem;
transition: var(--transition);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(28, 117, 188, 0.14);
}
.field textarea {
resize: vertical;
min-height: 120px;
}
.field-row {
display: grid;
gap: 1.1rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.field-row-2 {
grid-template-columns: 1fr 1fr;
}
}
.form-note {
font-size: 0.82rem;
color: var(--color-text-soft);
}
.form-success {
display: none;
align-items: center;
gap: 0.6rem;
padding: 0.9rem 1.1rem;
border-radius: var(--radius-sm);
background: rgba(190, 30, 45, 0.12);
color: var(--color-accent-dark);
font-weight: 600;
font-size: 0.92rem;
margin-top: 1rem;
}
.form-success.is-visible {
display: flex;
}
.form-success .icon {
width: 1.2em;
height: 1.2em;
}
/* ==========================================================================
7. Badges / tags / stars
========================================================================== */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 1rem;
border-radius: var(--radius-full);
background: var(--color-tint);
color: var(--color-primary-dark);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 1rem;
}
.eyebrow .icon {
width: 1em;
height: 1em;
}
.eyebrow-on-dark {
background: rgba(255, 255, 255, 0.12);
color: var(--color-primary-light);
}
.pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1.1rem;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
color: var(--color-white);
font-size: 0.82rem;
font-weight: 600;
}
.tag {
display: inline-block;
padding: 0.3rem 0.85rem;
border-radius: var(--radius-full);
background: var(--color-tint);
color: var(--color-primary-dark);
font-size: 0.78rem;
font-weight: 700;
}
/* Unused after the Testimonials redesign (see 48. Testimonials — Healing
journey gallery) — .testimonial-card .stars was the only user and is
retired. Replaced by .healing-stars. Retained for future reference.
.stars {
display: inline-flex;
gap: 0.15rem;
color: var(--color-star);
}
.stars .icon {
width: 1rem;
height: 1rem;
}
*/
/* ==========================================================================
8. Topbar
========================================================================== */
.topbar {
background: var(--color-navy);
color: rgba(255, 255, 255, 0.85);
font-size: 0.84rem;
}
.topbar .container {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--topbar-height);
gap: 1rem;
}
.topbar-links {
display: none;
align-items: center;
gap: 1.5rem;
}
.topbar-links a:hover {
color: var(--color-primary-light);
}
.topbar-contact {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem 1.25rem;
margin-left: auto;
}
.topbar-contact a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
}
.topbar-contact a:hover {
color: var(--color-primary-light);
}
.topbar-contact .icon {
width: 0.95em;
height: 0.95em;
color: var(--color-primary-light);
}
@media (min-width: 992px) {
.topbar-links {
display: flex;
}
}
/* ==========================================================================
9. Header / main navigation / mega menu
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 200;
background: var(--color-white);
box-shadow: 0 2px 16px rgba(35, 31, 32, 0.08);
transition: box-shadow var(--transition);
}
.site-header.is-scrolled {
box-shadow: 0 6px 24px rgba(35, 31, 32, 0.15);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
gap: 1.5rem;
}
.brand {
flex-shrink: 0;
}
.brand img {
height: 46px;
width: auto;
}
.main-nav {
display: none;
}
.nav-menu {
display: flex;
align-items: center;
gap: 0.35rem;
}
.nav-item {
position: relative;
}
/* The mega menu should center on the header/viewport, not on its own trigger
link (which sits off to one side) — otherwise it clips off-screen on
laptop-width viewports. Dropping the positioning context up to the header
fixes that without touching markup or the smaller .dropdown pattern. */
.nav-item:has(.mega-menu) {
position: static;
}
.nav-link {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 1.7rem 0.9rem;
font-weight: 600;
font-size: 0.96rem;
color: var(--color-navy);
transition: var(--transition);
}
.nav-link .icon {
width: 0.8em;
height: 0.8em;
transition: transform var(--transition);
}
.nav-item:hover .nav-link,
.nav-link.is-active {
color: var(--color-primary);
}
.nav-item:hover .nav-link .icon {
transform: rotate(180deg);
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 260px;
background: var(--color-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 0.65rem;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: var(--transition);
}
.nav-item:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown a {
display: block;
padding: 0.65rem 0.9rem;
border-radius: var(--radius-sm);
font-size: 0.92rem;
font-weight: 500;
color: var(--color-text);
}
.dropdown a:hover {
background: var(--color-tint);
color: var(--color-primary-dark);
}
.mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 8px);
width: min(880px, 82vw);
background: var(--color-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 1.75rem;
opacity: 0;
visibility: hidden;
transition: var(--transition);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.25rem 1.5rem;
}
.nav-item:hover .mega-menu {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.mega-menu a {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.7rem;
border-radius: var(--radius-sm);
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text);
}
.mega-menu a::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-primary-light);
flex-shrink: 0;
}
.mega-menu a:hover {
background: var(--color-tint);
color: var(--color-primary-dark);
}
.mega-menu a.link-arrow,
.mega-menu a.link-arrow:hover {
display: inline-flex;
background: none;
padding: 0;
color: var(--color-primary);
}
.mega-menu-foot {
grid-column: 1 / -1;
margin-top: 0.5rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.header-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.nav-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--color-border);
color: var(--color-navy);
}
.nav-toggle .icon {
width: 1.3em;
height: 1.3em;
}
.nav-toggle .icon-close {
display: none;
}
.nav-toggle.is-active .icon-menu {
display: none;
}
.nav-toggle.is-active .icon-close {
display: block;
}
@media (min-width: 992px) {
.main-nav {
display: block;
}
.nav-toggle {
display: none;
}
}
/* ==========================================================================
10. Mobile navigation
========================================================================== */
.mobile-nav {
position: fixed;
inset: 0;
z-index: 300;
visibility: hidden;
}
.mobile-nav-backdrop {
position: absolute;
inset: 0;
background: rgba(35, 31, 32, 0.55);
opacity: 0;
transition: opacity var(--transition);
}
.mobile-nav-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(360px, 86vw);
background: var(--color-white);
padding: 1.5rem;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.mobile-nav.is-open {
visibility: visible;
}
.mobile-nav.is-open .mobile-nav-backdrop {
opacity: 1;
}
.mobile-nav.is-open .mobile-nav-panel {
transform: translateX(0);
}
.mobile-nav-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.mobile-nav-list>li {
border-bottom: 1px solid var(--color-border);
}
.mobile-nav-list a,
.mobile-nav-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.95rem 0.2rem;
font-weight: 600;
color: var(--color-navy);
text-align: left;
}
.mobile-nav-toggle .icon {
width: 1em;
height: 1em;
transition: transform var(--transition);
}
.mobile-nav-toggle.is-open .icon {
transform: rotate(180deg);
}
.mobile-submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.mobile-submenu.is-open {
max-height: 800px;
}
.mobile-submenu a {
padding-left: 1rem;
font-weight: 500;
font-size: 0.92rem;
color: var(--color-text-muted);
}
.mobile-nav-contact {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.mobile-nav-contact a {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 600;
color: var(--color-primary-dark);
}
/* ==========================================================================
11. Hero
========================================================================== */
.hero {
position: relative;
color: var(--color-white);
overflow: hidden;
}
.hero-media {
position: absolute;
inset: 0;
z-index: -1;
}
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(35, 31, 32, 0.92) 5%, rgba(35, 31, 32, 0.72) 45%, rgba(21, 89, 143, 0.55) 100%);
}
.hero-inner {
padding-block: 4.5rem 5rem;
max-width: 680px;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.75rem;
}
.hero h1 {
color: var(--color-white);
margin-bottom: 1.1rem;
}
.hero h1 span {
color: var(--color-primary-light);
}
.hero p.lead {
color: rgba(255, 255, 255, 0.82);
margin-bottom: 1.75rem;
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.hero-strip {
position: relative;
margin-top: -1px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px);
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.hero-strip .container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
padding-block: 1.5rem;
}
.hero-strip-item {
display: flex;
align-items: center;
gap: 0.85rem;
}
.hero-strip-item .icon-btn {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
color: var(--color-white);
}
.hero-strip-item strong {
display: block;
font-family: var(--font-heading);
font-size: 0.98rem;
color: var(--color-white);
}
.hero-strip-item span {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.7);
}
@media (min-width: 768px) {
.hero-strip .container {
grid-template-columns: repeat(4, 1fr);
}
}
/* ==========================================================================
12. Page header (inner pages)
========================================================================== */
.page-header {
position: relative;
background: linear-gradient(120deg, var(--color-navy) 0%, var(--color-primary-dark) 100%);
color: var(--color-white);
padding-block: 3.25rem;
text-align: center;
}
.page-header h1 {
color: var(--color-white);
margin-bottom: 0.65rem;
}
.breadcrumb {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.75);
flex-wrap: wrap;
}
.breadcrumb a:hover {
color: var(--color-white);
}
.breadcrumb .icon {
width: 0.8em;
height: 0.8em;
}
.breadcrumb .is-current {
color: var(--color-white);
font-weight: 600;
}
/* ==========================================================================
13. Section heading pattern
========================================================================== */
.section-head {
max-width: 680px;
margin-bottom: 3rem;
}
.section-head.center {
margin-inline: auto;
text-align: center;
}
.section-head h2 {
margin-bottom: 0.9rem;
}
.section-head-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
/* ==========================================================================
14. Centres of excellence cards
========================================================================== */
.excellence-card {
position: relative;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2rem 1.75rem;
height: 100%;
transition: var(--transition);
}
.excellence-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
border-color: transparent;
}
.excellence-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: var(--radius-md);
background: var(--color-tint);
color: var(--color-primary);
margin-bottom: 1.25rem;
}
.excellence-icon .icon {
width: 1.7rem;
height: 1.7rem;
}
.excellence-card h3 {
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
.excellence-card p {
font-size: 0.92rem;
margin-bottom: 0;
}
/* ==========================================================================
15. About + stat counters
========================================================================== */
.about-grid {
display: grid;
gap: 3rem;
align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 992px) {
.about-grid {
grid-template-columns: 1fr 1fr;
}
}
.about-media {
position: relative;
}
.about-media img {
border-radius: var(--radius-lg);
width: 100%;
}
.about-media-badge {
position: absolute;
bottom: -1.5rem;
right: -1rem;
background: var(--color-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
gap: 0.9rem;
}
.about-media-badge .icon-btn {
width: 48px;
height: 48px;
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-white);
}
.about-media-badge strong {
display: block;
font-family: var(--font-heading);
color: var(--color-navy);
}
.about-media-badge span {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.about-points {
display: grid;
gap: 0.9rem;
margin: 1.5rem 0 2rem;
}
.about-points li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-weight: 600;
color: var(--color-navy);
}
.about-points .icon {
width: 1.35rem;
height: 1.35rem;
padding: 0.25rem;
border-radius: 50%;
background: rgba(190, 30, 45, 0.15);
color: var(--color-accent-dark);
flex-shrink: 0;
margin-top: 0.1rem;
}
.stat-strip {
margin-top: var(--section-space);
padding-top: var(--section-space);
border-top: 1px solid var(--color-border);
display: grid;
gap: 2rem;
grid-template-columns: repeat(2, 1fr);
text-align: center;
}
@media (min-width: 768px) {
.stat-strip {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.stat-strip {
grid-template-columns: repeat(6, 1fr);
}
}
.stat-box .count {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.15rem;
font-family: var(--font-heading);
font-size: clamp(1.9rem, 3vw, 2.5rem);
font-weight: 700;
color: var(--color-primary);
}
.stat-box span.label {
display: block;
margin-top: 0.35rem;
font-size: 0.86rem;
font-weight: 600;
color: var(--color-text-muted);
}
/* ==========================================================================
16. Services grid
========================================================================== */
.service-card {
display: flex;
align-items: center;
gap: 1rem;
background: var(--color-white);
border-radius: var(--radius-md);
padding: 1.35rem;
height: 100%;
transition: var(--transition);
border: 1px solid transparent;
}
.service-card:hover {
border-color: var(--color-primary-light);
box-shadow: var(--shadow-sm);
transform: translateY(-3px);
}
.service-icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--color-tint);
color: var(--color-primary-dark);
flex-shrink: 0;
}
.service-icon .icon {
width: 1.5rem;
height: 1.5rem;
}
.service-card h3 {
font-size: 1rem;
margin: 0;
}
.service-card-foot {
margin-top: 2.5rem;
text-align: center;
}
/* Continuous right-to-left auto-scroll (driverjs.com-style logo strip),
applied only to the services row. .services-track holds the 12 cards
above plus an aria-hidden duplicate set (in the HTML) so translateX(-50%)
lands exactly on the second copy, looping seamlessly. */
.services-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.services-track {
display: flex;
gap: 1.75rem;
width: max-content;
animation: services-scroll 50s linear infinite;
}
.services-marquee:hover .services-track {
animation-play-state: paused;
}
.services-track .service-card {
flex: 0 0 auto;
width: 260px;
}
@media (min-width: 576px) {
.services-track .service-card {
width: 300px;
}
}
@keyframes services-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.services-track {
animation: none;
}
}
/* ==========================================================================
17. Equipment / feature list
========================================================================== */
.feature-row {
display: grid;
gap: 2.5rem;
align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 992px) {
.feature-row {
grid-template-columns: 1fr 1fr;
}
.feature-row.reverse .feature-media {
order: 2;
}
}
.feature-media img {
border-radius: var(--radius-lg);
}
.feature-list {
display: grid;
gap: 1.5rem;
margin-top: 1.75rem;
}
.feature-list-item {
display: flex;
gap: 1rem;
}
.feature-list-item .excellence-icon {
width: 50px;
height: 50px;
flex-shrink: 0;
margin-bottom: 0;
}
.feature-list-item .excellence-icon .icon {
width: 1.4rem;
height: 1.4rem;
}
.feature-list-item h4 {
margin-bottom: 0.3rem;
}
.feature-list-item p {
font-size: 0.92rem;
margin: 0;
}
/* ==========================================================================
18. Visitor guide cards — retired. The Patient & Visitor Guide section
moved from a .guide-card grid to the connected journey path; see
44. Patient & Visitor Guide — Journey path.
========================================================================== */
/* ==========================================================================
19. Awards strip — retired. The Recognition section moved from a plain
.awards-track row to the circular orbit showcase; see
45. Awards — Circular orbit showcase.
========================================================================== */
/* ==========================================================================
20. Video section — retired. The Videos / Expert Opinions section moved
from a .video-card carousel to the Featured Studio + film-strip rail;
see 46. Videos — Featured studio.
========================================================================== */
/* ==========================================================================
21. Carousel (shared engine) — unused. This engine backed the Videos,
Doctors and Testimonials sections before each was individually redesigned
this session (Featured studio / Specialist wall / Healing journey
gallery). No HTML file references [data-carousel] or any .carousel-*
class anymore (confirmed by exhaustive grep across all pages). Retained
for future reference.
.carousel-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 2.5rem;
flex-wrap: wrap;
}
.carousel-controls {
display: flex;
gap: 0.75rem;
}
.carousel-viewport {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
margin: 0 -1.25rem;
padding: 0.5rem 1.25rem 1rem;
}
.carousel-viewport::-webkit-scrollbar {
display: none;
}
.carousel-track {
display: flex;
gap: 1.5rem;
}
.carousel-track>* {
scroll-snap-align: start;
flex: 0 0 auto;
width: 260px;
}
@media (min-width: 576px) {
.carousel-track>* {
width: 300px;
}
}
*/
/* ==========================================================================
22. Doctor cards
========================================================================== */
.doctor-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
height: 100%;
}
.doctor-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-6px);
}
.doctor-photo {
position: relative;
aspect-ratio: 1/1;
overflow: hidden;
}
.doctor-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.doctor-social {
position: absolute;
left: 0.9rem;
bottom: 0.9rem;
display: flex;
gap: 0.5rem;
opacity: 0;
transform: translateY(8px);
transition: var(--transition);
}
.doctor-card:hover .doctor-social {
opacity: 1;
transform: translateY(0);
}
.doctor-social .icon-btn {
background: var(--color-white);
width: 34px;
height: 34px;
}
.doctor-body {
padding: 1.4rem;
}
.doctor-body h3 {
font-size: 1.05rem;
margin-bottom: 0.3rem;
}
.doctor-specialty {
color: var(--color-primary);
font-weight: 600;
font-size: 0.86rem;
margin-bottom: 0.6rem;
}
.doctor-meta {
font-size: 0.82rem;
color: var(--color-text-soft);
display: flex;
align-items: center;
gap: 0.4rem;
}
.doctor-meta .icon {
width: 0.9em;
height: 0.9em;
}
.doctor-filters {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 2.5rem;
}
.filter-btn {
padding: 0.55rem 1.25rem;
border-radius: var(--radius-full);
border: 1.5px solid var(--color-border);
font-weight: 600;
font-size: 0.86rem;
color: var(--color-text-muted);
transition: var(--transition);
}
.filter-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.filter-btn.is-active {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
/* ==========================================================================
23. Testimonials — retired. The Patient Stories section moved from a
.testimonial-card grid to the Healing Journey Gallery; see
48. Testimonials — Healing journey gallery.
========================================================================== */
/* ==========================================================================
24. Blog / news cards
========================================================================== */
.blog-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
height: 100%;
display: flex;
flex-direction: column;
}
.blog-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-6px);
}
.blog-thumb {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
}
.blog-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.blog-card:hover .blog-thumb img {
transform: scale(1.06);
}
.blog-thumb .tag {
position: absolute;
top: 1rem;
left: 1rem;
}
.blog-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.blog-meta {
display: flex;
gap: 1rem;
font-size: 0.8rem;
color: var(--color-text-soft);
margin-bottom: 0.7rem;
}
.blog-meta span {
display: flex;
align-items: center;
gap: 0.35rem;
}
.blog-meta .icon {
width: 0.9em;
height: 0.9em;
}
.blog-body h3 {
font-size: 1.08rem;
margin-bottom: 0.6rem;
}
.blog-body p {
font-size: 0.9rem;
flex-grow: 1;
}
.blog-body .link-arrow {
margin-top: 1rem;
font-size: 0.88rem;
}
/* ==========================================================================
25. FAQ accordion
========================================================================== */
.accordion {
max-width: 820px;
margin-inline: auto;
display: grid;
gap: 1rem;
}
.accordion-item {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.accordion-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
text-align: left;
font-family: var(--font-heading);
font-weight: 600;
color: var(--color-navy);
}
.accordion-trigger .icon {
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
transition: transform var(--transition);
color: var(--color-primary);
}
.accordion-item.is-open .accordion-trigger .icon {
transform: rotate(180deg);
}
.accordion-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-item.is-open .accordion-panel {
max-height: 400px;
}
.accordion-panel-inner {
padding: 0 1.5rem 1.4rem;
font-size: 0.94rem;
}
/* ==========================================================================
26. CTA strip
========================================================================== */
.cta-strip {
background: var(--color-tint);
}
.cta-strip .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
padding-block: 2.25rem;
}
.cta-strip h3 {
margin-bottom: 0.35rem;
}
.cta-strip p {
margin: 0;
}
.cta-strip-form {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.cta-strip-form input {
padding: 0.85rem 1.1rem;
border-radius: var(--radius-full);
border: 1.5px solid var(--color-border);
min-width: 220px;
}
/* ==========================================================================
27. Footer — Hospital Command Center
Sitewide shared chrome (all 45 pages, not homepage-only) — this section
is edited in place rather than retired-and-replaced, since there is no
second footer anywhere for other pages to keep using.
========================================================================== */
.site-footer {
position: relative;
overflow: hidden;
background: var(--color-navy);
color: rgba(255, 255, 255, 0.7);
}
.site-footer::before {
content: '';
position: absolute;
top: -140px;
right: -100px;
width: 460px;
height: 460px;
border-radius: 50%;
background: radial-gradient(circle, rgba(28, 117, 188, 0.16) 0%, rgba(28, 117, 188, 0) 70%);
pointer-events: none;
}
/* ---- Top band: brand identity + newsletter ---- */
.footer-top {
position: relative;
z-index: 1;
padding-block: 4rem 3rem;
display: grid;
gap: 2.75rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.footer-top {
grid-template-columns: 1.2fr 1fr;
align-items: start;
}
}
.footer-brand img {
height: 46px;
margin-bottom: 1.25rem;
}
.footer-tagline {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 0.6rem;
}
.footer-brand p:not(.footer-tagline) {
max-width: 340px;
margin-bottom: 1.5rem;
font-size: 0.92rem;
}
.footer-social {
display: flex;
gap: 0.6rem;
}
.footer-social .icon-btn {
border-color: rgba(255, 255, 255, 0.2);
color: var(--color-white);
}
.footer-social .icon-btn:hover,
.footer-social .icon-btn:focus-visible {
background: var(--color-primary);
border-color: var(--color-primary);
transform: translateY(-2px);
}
.footer-newsletter p {
max-width: 360px;
margin-bottom: 1.5rem;
font-size: 0.92rem;
}
.footer-newsletter-form {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.footer-newsletter-form input {
flex: 1;
min-width: 200px;
padding: 0.8rem 1.1rem;
border-radius: var(--radius-sm);
border: 1.5px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.06);
color: var(--color-white);
transition: border-color var(--transition), box-shadow var(--transition);
}
.footer-newsletter-form input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.footer-newsletter-form input:focus-visible {
outline: none;
border-color: var(--color-primary-light);
box-shadow: 0 0 0 4px rgba(28, 117, 188, 0.25);
}
/* ---- Gradient hairline dividers between bands ---- */
.footer-divider {
position: relative;
z-index: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}
/* ---- Middle band: console-panel modules ---- */
.footer-modules {
position: relative;
z-index: 1;
padding-block: 3rem;
display: grid;
gap: 2.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 992px) {
.footer-modules {
grid-template-columns: repeat(3, 1fr);
}
}
.footer-heading {
display: flex;
align-items: center;
gap: 0.6rem;
color: var(--color-white);
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1.5rem;
}
.footer-heading::before {
content: '';
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--color-accent);
flex-shrink: 0;
}
.footer-newsletter .footer-heading::before {
display: none;
}
.footer-newsletter .footer-heading .icon {
width: 1.15rem;
height: 1.15rem;
color: var(--color-accent);
}
.footer-links {
display: grid;
gap: 0.85rem;
}
.footer-links a {
position: relative;
display: inline-block;
font-size: 0.92rem;
}
.footer-links a::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: var(--color-primary-light);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition);
}
.footer-links a:hover,
.footer-links a:focus-visible {
color: var(--color-primary-light);
}
.footer-links a:hover::after,
.footer-links a:focus-visible::after {
transform: scaleX(1);
}
.footer-contact {
display: grid;
gap: 1rem;
}
.footer-contact li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.9rem;
}
.footer-contact .icon {
width: 1.1rem;
height: 1.1rem;
color: var(--color-primary-light);
flex-shrink: 0;
margin-top: 0.15rem;
}
/* ---- Bottom band: copyright ---- */
.footer-bottom {
position: relative;
z-index: 1;
padding-block: 1.4rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.84rem;
}
.footer-bottom-links {
display: flex;
gap: 1.5rem;
}
.footer-bottom-links a:hover {
color: var(--color-white);
}
/* Per-module entrance stagger — sets --reveal-delay only (inert data), the
actual transition-delay declaration lives inside the reduced-motion
query below, matching every other staggered section this session. */
.footer-module:nth-child(1) { --reveal-delay: 0.05s; }
.footer-module:nth-child(2) { --reveal-delay: 0.15s; }
.footer-module:nth-child(3) { --reveal-delay: 0.25s; }
/* Entrance motion — base rules above are fully visible/functional and
never depend on .is-inview to be usable; gated so reduced motion or a
JS failure always leaves the footer fully visible, readable and
clickable, never stuck invisible. */
@media (prefers-reduced-motion: no-preference) {
.site-footer {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer.is-inview {
opacity: 1;
transform: translateY(0);
}
.footer-divider {
transform: scaleX(0);
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer.is-inview .footer-divider {
transform: scaleX(1);
}
.footer-module {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: var(--reveal-delay, 0s);
}
.site-footer.is-inview .footer-module {
opacity: 1;
transform: translateY(0);
}
}
/* ==========================================================================
28. Breadcrumb — see .breadcrumb in section 12
========================================================================== */
/* ==========================================================================
29. Sidebar widgets
========================================================================== */
.layout-sidebar {
display: grid;
gap: 2.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 992px) {
.layout-sidebar {
grid-template-columns: 2fr 1fr;
}
}
.widget {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.75rem;
margin-bottom: 1.75rem;
}
.widget h4 {
margin-bottom: 1.1rem;
}
.widget-list {
display: grid;
gap: 0.4rem;
}
.widget-list a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 0.15rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.92rem;
font-weight: 500;
}
.widget-list li:last-child a {
border-bottom: none;
}
.widget-list a:hover {
color: var(--color-primary);
}
.widget-cta {
background: linear-gradient(150deg, var(--color-primary-dark), var(--color-navy));
color: var(--color-white);
text-align: center;
}
.widget-cta h4 {
color: var(--color-white);
}
.widget-cta p {
color: rgba(255, 255, 255, 0.75);
font-size: 0.9rem;
margin-bottom: 1.25rem;
}
.widget-post {
display: flex;
gap: 0.85rem;
margin-bottom: 1rem;
}
.widget-post img {
width: 64px;
height: 64px;
border-radius: var(--radius-sm);
object-fit: cover;
flex-shrink: 0;
}
.widget-post h5 {
font-size: 0.88rem;
font-weight: 600;
color: var(--color-navy);
line-height: 1.4;
}
.widget-post span {
font-size: 0.76rem;
color: var(--color-text-soft);
}
.widget-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* ==========================================================================
30. Doctor single page
========================================================================== */
.doctor-profile {
display: grid;
gap: 2.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.doctor-profile {
grid-template-columns: 320px 1fr;
}
}
.doctor-profile-media img {
border-radius: var(--radius-lg);
width: 100%;
}
.doctor-profile-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-top: 1.5rem;
}
.doctor-profile-card li {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem 0;
border-bottom: 1px dashed var(--color-border);
font-size: 0.9rem;
}
.doctor-profile-card li:last-child {
border-bottom: none;
}
.doctor-profile-card li span:first-child {
color: var(--color-text-soft);
}
.doctor-profile-card li span:last-child {
font-weight: 600;
color: var(--color-navy);
text-align: right;
}
.doctor-info {
/* CSS Grid items default to min-width:auto, so without this the
white-space:nowrap .doctor-tabs below can force this column wider
than its actual track, silently cropping content instead of letting
.doctor-tabs' own overflow-x:auto scroll it. */
min-width: 0;
}
.doctor-info h2 {
font-size: 1.9rem;
margin-bottom: 0.4rem;
}
.doctor-info .doctor-specialty {
font-size: 1rem;
margin-bottom: 1.25rem;
}
.doctor-tabs {
display: flex;
gap: 0.5rem;
border-bottom: 1px solid var(--color-border);
margin: 2rem 0 1.5rem;
overflow-x: auto;
}
.doctor-tab {
padding: 0.85rem 1.25rem;
font-weight: 600;
font-size: 0.92rem;
color: var(--color-text-muted);
border-bottom: 2px solid transparent;
white-space: nowrap;
}
.doctor-tab.is-active {
color: var(--color-primary);
border-color: var(--color-primary);
}
.qualification-list {
display: grid;
gap: 1rem;
margin-top: 1rem;
}
.qualification-list li {
display: flex;
gap: 0.85rem;
}
.qualification-list .icon {
width: 2.1rem;
height: 2.1rem;
padding: 0.5rem;
border-radius: 50%;
background: var(--color-tint);
color: var(--color-primary-dark);
flex-shrink: 0;
}
/* ==========================================================================
31. Blog single / article
========================================================================== */
.article-head {
max-width: 820px;
margin-inline: auto;
text-align: center;
}
.article-head h2 {
font-size: clamp(2rem, 3.6vw, 3.25rem);
}
.article-cover {
border-radius: var(--radius-lg);
overflow: hidden;
margin: 2.5rem 0;
aspect-ratio: 16/8;
}
.article-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-body {
max-width: 780px;
margin-inline: auto;
}
.article-body h2 {
margin: 2.25rem 0 1rem;
font-size: 1.5rem;
}
.article-body h3 {
margin: 1.75rem 0 0.85rem;
}
.article-body p {
margin-bottom: 1.15rem;
font-size: 1rem;
}
.article-body ul {
display: grid;
gap: 0.6rem;
margin: 1.25rem 0;
}
.article-body ul li {
display: flex;
gap: 0.7rem;
color: var(--color-text-muted);
}
.article-body ul li::before {
content: '';
width: 8px;
height: 8px;
margin-top: 0.5rem;
border-radius: 50%;
background: var(--color-primary);
flex-shrink: 0;
}
.article-body blockquote {
margin: 1.75rem 0;
padding: 1.5rem 1.75rem;
border-left: 4px solid var(--color-primary);
background: var(--color-tint);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-style: italic;
color: var(--color-navy);
font-family: var(--font-heading);
}
.article-tags {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--color-border);
}
.article-share {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1.5rem;
}
.author-card {
display: flex;
gap: 1.25rem;
background: var(--color-tint-2);
border-radius: var(--radius-lg);
padding: 1.75rem;
margin-top: 2.5rem;
}
.author-card img {
width: 76px;
height: 76px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.author-card h4 {
margin-bottom: 0.3rem;
}
.author-card p {
font-size: 0.9rem;
margin: 0;
}
/* ==========================================================================
32. Gallery
========================================================================== */
.gallery-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
margin-bottom: 2.5rem;
}
.gallery-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.gallery-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.gallery-item {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 1/1;
cursor: pointer;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.gallery-item:hover img {
transform: scale(1.08);
}
.gallery-item-overlay {
position: absolute;
inset: 0;
background: rgba(35, 31, 32, 0.55);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--transition);
}
.gallery-item:hover .gallery-item-overlay {
opacity: 1;
}
.gallery-item-overlay .icon {
width: 1.6rem;
height: 1.6rem;
color: var(--color-white);
}
.lightbox {
position: fixed;
inset: 0;
z-index: 400;
background: rgba(35, 31, 32, 0.92);
display: none;
align-items: center;
justify-content: center;
padding: 2rem;
}
.lightbox.is-open {
display: flex;
}
.lightbox img {
max-width: min(900px, 100%);
max-height: 82vh;
border-radius: var(--radius-md);
}
.lightbox-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-prev {
left: 1.5rem;
}
.lightbox-next {
right: 1.5rem;
}
/* ==========================================================================
33. Contact page / map
========================================================================== */
.contact-grid {
display: grid;
gap: 2rem;
grid-template-columns: 1fr;
}
@media (min-width: 992px) {
.contact-grid {
grid-template-columns: 0.85fr 1.15fr;
}
}
.contact-info-card {
background: var(--color-navy);
color: rgba(255, 255, 255, 0.8);
border-radius: var(--radius-lg);
padding: 2rem;
}
.contact-info-card h3 {
color: var(--color-white);
margin-bottom: 1.5rem;
}
.contact-info-list {
display: grid;
gap: 1.5rem;
}
.contact-info-list li {
display: flex;
gap: 1rem;
}
.contact-info-list strong {
display: block;
color: var(--color-white);
margin-bottom: 0.2rem;
}
.contact-info-list p {
margin: 0;
font-size: 0.92rem;
}
.contact-form-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2rem;
}
.map-wrap {
border-radius: var(--radius-lg);
overflow: hidden;
margin-top: 3rem;
aspect-ratio: 16/6;
border: 1px solid var(--color-border);
}
.map-wrap iframe {
width: 100%;
height: 100%;
border: 0;
}
/* ==========================================================================
34. Pagination
========================================================================== */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin-top: 3rem;
}
.pagination a,
.pagination span {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
font-weight: 600;
font-size: 0.9rem;
color: var(--color-navy);
border: 1.5px solid var(--color-border);
}
.pagination a:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.pagination .is-active {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
/* ==========================================================================
35. 404 page
========================================================================== */
.error-page {
text-align: center;
padding-block: 5rem;
}
.error-code {
font-family: var(--font-heading);
font-size: clamp(4rem, 14vw, 8rem);
font-weight: 800;
color: var(--color-tint);
line-height: 1;
-webkit-text-stroke: 2px var(--color-primary-light);
}
.error-page h2 {
margin: 1rem 0 0.75rem;
}
.error-page p {
max-width: 480px;
margin-inline: auto 2rem;
}
.error-page .btn {
margin-top: 1rem;
}
/* ==========================================================================
36. Back-to-top + floating WhatsApp + tour restart
========================================================================== */
.back-to-top {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition);
z-index: 150;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top .icon {
width: 1.3rem;
height: 1.3rem;
transform: rotate(180deg);
}
.whatsapp-float {
position: fixed;
right: 1.5rem;
bottom: 5.75rem;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--color-accent-dark);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
z-index: 150;
transition: var(--transition);
}
.whatsapp-float:hover {
transform: scale(1.08);
}
.whatsapp-float .icon {
width: 1.6rem;
height: 1.6rem;
}
.tour-restart-btn {
position: fixed;
right: 1.5rem;
bottom: 10.25rem;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
display: none;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
transition: var(--transition);
z-index: 150;
}
.tour-restart-btn.is-visible {
display: flex;
}
.tour-restart-btn:hover {
background: var(--color-primary-dark);
transform: scale(1.08);
}
.tour-restart-btn .icon {
width: 1.4rem;
height: 1.4rem;
}
/* ==========================================================================
37. Utilities
========================================================================== */
.mt-0 {
margin-top: 0 !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mt-1 {
margin-top: 0.75rem !important;
}
.mb-1 {
margin-bottom: 0.75rem !important;
}
.mt-2 {
margin-top: 1.5rem !important;
}
.mb-2 {
margin-bottom: 1.5rem !important;
}
.mt-3 {
margin-top: 2.5rem !important;
}
.mb-3 {
margin-bottom: 2.5rem !important;
}
.text-center {
text-align: center !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: 1rem;
top: 1rem;
transform: translateY(-100px);
background: var(--color-primary);
color: var(--color-white);
padding: 0.75rem 1.25rem;
border-radius: var(--radius-sm);
z-index: 999;
transition: transform var(--transition);
}
.skip-link:focus {
transform: translateY(0);
}
[data-aos] {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-aos].is-inview {
opacity: 1;
transform: translateY(0);
}
/* ==========================================================================
38. Responsive media queries (page-level tweaks)
========================================================================== */
@media (max-width: 991px) {
.hero-inner {
padding-block: 3rem 3.5rem;
}
.cta-strip .container {
justify-content: center;
text-align: center;
}
}
@media (max-width: 767px) {
:root {
--header-height: 76px;
}
.brand img {
height: 38px;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.doctor-info h2 {
font-size: 1.55rem;
}
}
@media (max-width: 480px) {
.hero-cta {
flex-direction: column;
align-items: stretch;
}
.hero-cta .btn {
width: 100%;
}
.cta-strip-form {
width: 100%;
}
.cta-strip-form input {
flex: 1;
min-width: 0;
}
/* Prevents the header logo from being squashed by flexbox below this
width (the header row no longer fits .brand + this button + the nav
toggle) — the mobile slide-out nav already has its own duplicate
"Book Appointment" CTA one tap away. */
#nav-book-btn {
display: none;
}
}
/* ==========================================================================
39. Driver.js tour theme
Restyles the driver.js popover/overlay to match the site's own design
tokens. Class names are the library's own (driverjs.com/docs/theming).
========================================================================== */
.driver-popover {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 1.25rem;
font-family: var(--font-body);
}
.driver-popover-title {
font-family: var(--font-heading);
color: var(--color-navy);
font-size: 1.1rem;
}
.driver-popover-description {
font-family: var(--font-body);
color: var(--color-text-muted);
font-size: 0.92rem;
}
.driver-popover-progress-text {
font-family: var(--font-body);
color: var(--color-text-soft);
font-size: 0.78rem;
}
.driver-popover-footer-btn {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.86rem;
padding: 0.55rem 1.15rem;
border-radius: var(--radius-full);
border: 2px solid transparent;
text-shadow: none;
background: var(--color-primary);
color: var(--color-white);
transition: var(--transition);
}
.driver-popover-footer-btn:hover {
background: var(--color-primary-dark);
color: var(--color-white);
}
.driver-popover-footer-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(28, 117, 188, 0.14);
}
.driver-popover-prev-btn {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.driver-popover-prev-btn:hover {
background: var(--color-primary);
color: var(--color-white);
}
.driver-popover-close-btn {
color: var(--color-text-soft);
}
.driver-popover-close-btn:hover {
color: var(--color-accent-dark);
}
.driver-active-element {
border-radius: var(--radius-sm);
box-shadow: 0 0 0 4px rgba(28, 117, 188, 0.35);
}
/* ==========================================================================
40. Hero — premium animations
Homepage Hero only. Every selector below is scoped under .hero so nothing
bleeds onto other pages that reuse .hero-cta / .pill as bare components
(404.html reuses .hero-cta for its own button row).
========================================================================== */
.hero > .container {
position: relative;
z-index: 1;
}
/* Ambient glow — pure CSS pseudo-elements, no new DOM. Kept in the upper
portion of .hero, clear of .hero-strip, so paint order against the strip
never has to be reasoned about. */
.hero::before,
.hero::after {
content: '';
position: absolute;
z-index: 0;
border-radius: 50%;
pointer-events: none;
}
.hero::before {
top: -12%;
right: -8%;
width: 560px;
height: 560px;
background: radial-gradient(circle, rgba(28, 117, 188, 0.16) 0%, rgba(28, 117, 188, 0) 70%);
}
.hero::after {
top: 8%;
left: -10%;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(190, 30, 45, 0.1) 0%, rgba(190, 30, 45, 0) 70%);
}
/* Soft gradient sheen — a slow diagonal light sweep across the media layer.
Driven by transform (not background-position, which would repaint every
frame) so it stays a pure compositor operation. Sits between the ![]()
and .hero-media's own ::after contrast overlay by default paint order
(no z-index needed), so the overlay still governs final text contrast. */
.hero-media::before {
content: '';
position: absolute;
inset: -10% -40%;
background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.07) 50%, transparent 58%);
pointer-events: none;
}
/* Animated underline under the highlighted word in the headline */
.hero h1 span {
position: relative;
}
.hero h1 span::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -0.08em;
height: 3px;
border-radius: var(--radius-full);
background: linear-gradient(90deg, var(--color-primary-light), rgba(255, 255, 255, 0.2));
transform-origin: left;
}
/* Glassmorphism polish on hero pills only — the global .pill used elsewhere
in the site is untouched. Blur is static (not animated: animating
backdrop-filter forces a per-frame backdrop resample, which is expensive
on the compositor — only opacity/transform are animated below). */
.hero .pill {
backdrop-filter: blur(6px);
transition: transform var(--transition), background var(--transition);
}
.hero .pill:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.18);
}
/* CTA micro-interactions — layer on top of the existing global
.btn-primary:hover (background swap + translateY), never replace it. */
.hero .hero-cta .btn {
position: relative;
overflow: hidden;
}
.hero .hero-cta .btn::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
transform: translateX(-120%);
transition: transform 0.6s ease;
pointer-events: none;
}
.hero .hero-cta .btn:hover::after,
.hero .hero-cta .btn:focus-visible::after {
transform: translateX(120%);
}
.hero .hero-cta .btn-primary:hover,
.hero .hero-cta .btn-primary:focus-visible {
box-shadow: 0 18px 36px -10px rgba(28, 117, 188, 0.6);
}
.hero .hero-cta .btn:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
}
/* Icon micro-animation on the info strip */
.hero .hero-strip-item .icon-btn {
transition: transform 0.3s ease;
}
.hero .hero-strip-item:hover .icon-btn {
transform: scale(1.08) rotate(-4deg);
}
/* Entrance sequence + ambient float, gated behind prefers-reduced-motion so
the unconditional state above (fully visible, no animation) is always the
fallback — content can never get stuck invisible. */
@media (prefers-reduced-motion: no-preference) {
@keyframes heroReveal {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroMediaReveal {
from { opacity: 0; transform: scale(1.06); }
to { opacity: 1; transform: scale(1); }
}
@keyframes heroFloat {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(12px, -16px); }
}
@keyframes heroSheen {
0%, 100% { transform: translateX(-12%); }
50% { transform: translateX(12%); }
}
@keyframes heroUnderline {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Animates the wrapper, not the ![]()
itself — the img's own transform is
driven by the scroll-parallax listener in js/script.js (section 11), and
a CSS animation with fill-mode:both permanently outranks inline-style
writes to the same property, which would silently break the parallax if
both targeted the same element. */
.hero-media {
animation: heroMediaReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-inner > .pill {
animation: heroReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.hero h1 {
animation: heroReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}
.hero p.lead {
animation: heroReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.hero .hero-badges {
animation: heroReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
}
.hero .hero-cta {
animation: heroReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.64s both;
}
.hero .hero-strip {
animation: heroReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.78s both;
}
.hero h1 span::after {
animation: heroUnderline 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}
.hero::before,
.hero::after {
animation: heroFloat 12s ease-in-out infinite;
/* Always-in-view, runs for the page's whole lifetime - the one
ambient decoration on the site worth a permanent compositor layer. */
will-change: transform;
}
.hero-media::before {
animation: heroSheen 9s ease-in-out infinite;
}
}
/* Typography hierarchy refinements (was an inline style on the h1) */
.hero h1 {
margin-top: 1.1rem;
line-height: 1.15;
letter-spacing: -0.01em;
}
.hero p.lead {
line-height: 1.6;
}
.hero-inner > .pill {
letter-spacing: 0.02em;
}
/* Emergency item gets a quiet visual distinction from the other 3
hero-strip items: a faint accent edge and a small status dot, not a
siren-red block. Pulse is gated behind reduced-motion below; the dot
itself stays visible (just static) for reduced-motion users. */
.hero-strip-item--emergency {
padding-left: 0.85rem;
border-left: 2px solid rgba(190, 30, 45, 0.5);
}
.hero-strip-item--emergency strong::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
margin-left: 0.5rem;
border-radius: 50%;
background: var(--color-accent);
vertical-align: middle;
}
@keyframes heroPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.3); }
}
@media (prefers-reduced-motion: no-preference) {
.hero-strip-item--emergency strong::after {
animation: heroPulse 2s ease-in-out infinite;
}
}
/* ==========================================================================
41. Centres of Excellence — premium animations
Homepage section only (index.html). .excellence-card/.excellence-icon are
also reused by about.html (Vision/Mission/Values) and departments.html
(the full department directory) — every selector below is scoped under
.section-excellence so neither of those pages is affected.
========================================================================== */
.section-excellence {
position: relative;
overflow: hidden;
}
.section-excellence .container {
position: relative;
z-index: 1;
}
/* Ambient background glow — reuses the Hero's heroFloat keyframe rather
than duplicating an identical animation under a new name. */
.section-excellence::before,
.section-excellence::after {
content: '';
position: absolute;
z-index: 0;
border-radius: 50%;
pointer-events: none;
}
.section-excellence::before {
top: -15%;
right: -10%;
width: 480px;
height: 480px;
background: radial-gradient(circle, rgba(28, 117, 188, 0.08) 0%, rgba(28, 117, 188, 0) 70%);
}
.section-excellence::after {
bottom: -18%;
left: -8%;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(190, 30, 45, 0.06) 0%, rgba(190, 30, 45, 0) 70%);
}
/* Staggered scroll reveal. Each card only sets --reveal-delay (inert data);
a single transition rule below is the only thing that consumes it, so
there's no multi-rule specificity/shorthand interaction to reason about. */
.section-excellence .grid-3 > [data-aos]:nth-child(1) { --reveal-delay: 0s; }
.section-excellence .grid-3 > [data-aos]:nth-child(2) { --reveal-delay: 0.08s; }
.section-excellence .grid-3 > [data-aos]:nth-child(3) { --reveal-delay: 0.16s; }
.section-excellence .grid-3 > [data-aos]:nth-child(4) { --reveal-delay: 0.24s; }
.section-excellence .grid-3 > [data-aos]:nth-child(5) { --reveal-delay: 0.32s; }
.section-excellence .grid-3 > [data-aos]:nth-child(6) { --reveal-delay: 0.4s; }
/* Richer entrance: adds a subtle scale alongside the site's existing
translateY, plus the stagger delay above. Fully gated behind
prefers-reduced-motion — outside this block nothing here applies, so
reduced-motion users fall back to the untouched global [data-aos] rule
(plain translateY, no delay, defined once, not duplicated). */
@media (prefers-reduced-motion: no-preference) {
.section-excellence [data-aos] {
transform: translateY(24px) scale(0.97);
}
.section-excellence [data-aos].is-inview {
transform: translateY(0) scale(1);
}
.section-excellence .grid-3 > [data-aos] {
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s);
}
.section-excellence .section-head[data-aos] {
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-excellence::before,
.section-excellence::after {
animation: heroFloat 14s ease-in-out infinite;
}
}
/* Premium hover — layers on top of (never replaces) the existing global
.excellence-card:hover, which about.html and departments.html still use
unchanged. Higher selector specificity here wins only within this
section. */
.section-excellence .excellence-card {
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.section-excellence .excellence-card::before {
content: '';
position: absolute;
top: 0;
left: 1.75rem;
right: 1.75rem;
height: 3px;
border-radius: var(--radius-full);
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-excellence .excellence-card:hover {
transform: translateY(-8px) scale(1.01);
box-shadow: 0 24px 48px -16px rgba(28, 117, 188, 0.28), var(--shadow-sm);
border-color: transparent;
}
.section-excellence .excellence-card:hover::before {
transform: scaleX(1);
}
/* Icon micro-animation — flips the flat tint chip to a filled brand
gradient on hover, using only the site's three approved brand colors. */
.section-excellence .excellence-icon {
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, color 0.35s ease;
}
.section-excellence .excellence-card:hover .excellence-icon {
transform: scale(1.1) rotate(-6deg);
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: var(--color-white);
}
/* ==========================================================================
42. About & Counters — redesign
Homepage section only (index.html). .about-media/.about-points/.stat-strip
/.stat-box are also used by about.html's own About narrative — every new
selector below is scoped under .section-about-home so that page stays
pixel-identical to before.
========================================================================== */
.section-about-home .about-grid {
position: relative;
}
/* Dot-texture backdrop behind the photo/text half only — the counters
below get their own, different decorative treatment, kept to one each
so the section doesn't read as over-decorated. */
.section-about-home .about-grid::before {
content: '';
position: absolute;
inset: -2rem;
z-index: -1;
background-image: radial-gradient(circle, var(--color-border) 1.5px, transparent 1.5px);
background-size: 24px 24px;
opacity: 0.6;
pointer-events: none;
}
/* Large decorative quote glyph behind the heading — pure CSS content, no
new fonts/assets, a premium-editorial accent not used elsewhere on the
site. */
.section-about-home .about-grid h2 {
position: relative;
}
.section-about-home .about-grid h2::before {
content: '\201C';
position: absolute;
top: -2.5rem;
left: -1.5rem;
font-family: var(--font-heading);
font-size: 7rem;
line-height: 1;
color: var(--color-primary);
opacity: 0.08;
z-index: -1;
pointer-events: none;
}
/* Layered depth card behind the photo */
.section-about-home .about-media::before {
content: '';
position: absolute;
inset: 0;
transform: translate(14px, 14px);
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
border-radius: var(--radius-lg);
z-index: -1;
opacity: 0.9;
}
/* Feature points: pure-CSS restyle of the existing /- into a
2-column card grid — copy is untouched, only the presentation changes. */
.section-about-home .about-points {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 480px) {
.section-about-home .about-points {
grid-template-columns: 1fr 1fr;
}
}
.section-about-home .about-points li {
align-items: flex-start;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1rem;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.section-about-home .about-points .icon {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* CTA arrow slide */
.section-about-home .about-grid .btn-primary .icon {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-about-home .about-grid .btn-primary:hover .icon {
transform: translateX(4px);
}
/* ---- Counters ---- */
.section-about-home .stat-strip {
position: relative;
border-top: none;
gap: 1.25rem;
}
/* Soft gradient wash behind the whole strip — the counters' one
decorative treatment, distinct from the About half's dot texture. */
.section-about-home .stat-strip::before {
content: '';
position: absolute;
inset: -1.5rem -1rem;
z-index: -1;
background: radial-gradient(ellipse at center, rgba(28, 117, 188, 0.06) 0%, rgba(28, 117, 188, 0) 70%);
pointer-events: none;
}
.section-about-home .stat-box {
position: relative;
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 1.5rem 1rem;
box-shadow: var(--shadow-sm);
}
/* Outlined-ring icon chip — a third icon-chip style, distinct from the
solid-circle .icon-btn and the solid-rounded-square .excellence-icon
already used elsewhere on the site. */
.section-about-home .stat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--color-primary-light);
color: var(--color-primary);
margin-bottom: 0.75rem;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-about-home .stat-icon .icon {
width: 1.3rem;
height: 1.3rem;
}
.section-about-home .stat-box .count {
position: relative;
}
.section-about-home .stat-box .count::after {
content: '';
position: absolute;
left: 15%;
right: 15%;
bottom: -0.35rem;
height: 2px;
border-radius: var(--radius-full);
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
transform-origin: center;
}
/* Stagger data. Each item only sets a custom property (inert data); a
single transition rule per group is the only thing that consumes it,
avoiding the multi-rule specificity puzzle a per-item transition-delay
override would create. */
.section-about-home .about-points li:nth-child(1) { --reveal-delay: 0s; }
.section-about-home .about-points li:nth-child(2) { --reveal-delay: 0.08s; }
.section-about-home .about-points li:nth-child(3) { --reveal-delay: 0.16s; }
.section-about-home .about-points li:nth-child(4) { --reveal-delay: 0.24s; }
.section-about-home .stat-box:nth-child(1) { --reveal-delay: 0s; }
.section-about-home .stat-box:nth-child(2) { --reveal-delay: 0.08s; }
.section-about-home .stat-box:nth-child(3) { --reveal-delay: 0.16s; }
.section-about-home .stat-box:nth-child(4) { --reveal-delay: 0.24s; }
.section-about-home .stat-box:nth-child(5) { --reveal-delay: 0.32s; }
.section-about-home .stat-box:nth-child(6) { --reveal-delay: 0.4s; }
/* Entrance choreography, gated so reduced-motion users keep everything
simply visible with no wipe/pop/stagger/underline-draw. Offsets kept to
10-14px, smaller than earlier sections' 20-28px — per the design-
intelligence lookup, small offsets read as a fade rather than a slide. */
@media (prefers-reduced-motion: no-preference) {
.section-about-home .about-media img {
clip-path: inset(0 100% 0 0 round var(--radius-lg));
transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-about-home .about-media.is-inview img {
clip-path: inset(0 0 0 0 round var(--radius-lg));
}
.section-about-home .about-media::before {
opacity: 0;
transition: opacity 0.6s ease 0.2s;
}
.section-about-home .about-media.is-inview::before {
opacity: 0.9;
}
.section-about-home .about-media-badge {
opacity: 0;
transform: scale(0.85);
}
.section-about-home .about-media.is-inview .about-media-badge {
opacity: 1;
transform: scale(1);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.section-about-home .about-grid h2::before {
opacity: 0;
transform: translateY(10px);
}
.section-about-home [data-aos].is-inview h2::before {
opacity: 0.08;
transform: translateY(0);
transition: opacity 0.7s ease 0.15s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.section-about-home .about-points li {
opacity: 0;
transform: translateX(-14px);
}
.section-about-home [data-aos].is-inview .about-points li {
opacity: 1;
transform: translateX(0);
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s);
}
.section-about-home .stat-box {
opacity: 0;
transform: translateY(12px);
}
.section-about-home .stat-box.is-inview {
opacity: 1;
transform: translateY(0);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s);
}
.section-about-home .stat-box .count::after {
transform: scaleX(0);
}
.section-about-home .stat-box.is-inview .count::after {
transform: scaleX(1);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-delay, 0s) + 0.3s);
}
/* Ambient drift on the two existing decorative backdrops — reuses the
Hero's heroFloat keyframe rather than a new one. Neither pseudo-element
has any other transform, so this can't collide with the entrance rules
above. Different durations so the two halves don't move in lockstep. */
.section-about-home .about-grid::before {
animation: heroFloat 16s ease-in-out infinite;
}
.section-about-home .stat-strip::before {
animation: heroFloat 13s ease-in-out infinite;
}
}
/* Hover interactions — placed after the entrance rules above. Where a
hover target's transform would otherwise collide with an .is-inview
entrance transform at equal/lower specificity, the hover selector
repeats .is-inview so it wins on specificity, not source order. */
.section-about-home .about-media-badge {
transition: box-shadow 0.35s ease;
}
.section-about-home .about-media-badge:hover {
box-shadow: 0 20px 40px -14px rgba(28, 117, 188, 0.35), var(--shadow-lg);
}
.section-about-home .about-media-badge .icon-btn {
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-about-home .about-media-badge:hover .icon-btn {
transform: scale(1.1) rotate(-6deg);
}
.section-about-home .about-points li:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
border-color: transparent;
}
.section-about-home .about-points li:hover .icon {
transform: scale(1.15);
}
.section-about-home .stat-box {
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.section-about-home .stat-box.is-inview:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.section-about-home .stat-box:hover .stat-icon {
background: var(--color-primary);
color: var(--color-white);
transform: scale(1.08);
}
.section-about-home .stat-box:hover .count {
color: var(--color-primary-dark);
}
/* ==========================================================================
43. Technology — premium animations
Homepage "Technology" section only (index.html). .feature-row/.feature-media
/.feature-list/.excellence-icon are also used by about.html's own feature
split and by Centres of Excellence's icon chips — every new selector below
is scoped under .section-technology so those stay pixel-identical.
========================================================================== */
.section-technology {
position: relative;
overflow: hidden;
}
.section-technology::before {
content: '';
position: absolute;
inset: -15% -10%;
z-index: 0;
background: linear-gradient(125deg, transparent 32%, rgba(28, 117, 188, 0.07) 48%, rgba(190, 30, 45, 0.05) 60%, transparent 76%);
pointer-events: none;
}
.section-technology > .container {
position: relative;
z-index: 1;
}
/* Gradient-ring image frame — a different "layered depth" technique than
About's offset depth-card. */
.section-technology .feature-media {
position: relative;
padding: 7px;
border-radius: calc(var(--radius-lg) + 7px);
background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-light) 45%, var(--color-accent) 100%);
box-shadow: var(--shadow-lg);
}
.section-technology .feature-media img {
display: block;
width: 100%;
border-radius: var(--radius-lg);
}
/* Threading line connects the three feature items into one sequence instead
of three unrelated rows. */
.section-technology .feature-list {
position: relative;
}
.section-technology .feature-list::before {
content: '';
position: absolute;
left: 24px;
top: 6px;
bottom: 6px;
width: 2px;
background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 55%, var(--color-accent) 100%);
border-radius: var(--radius-full);
transform-origin: top;
}
.section-technology .feature-list-item {
position: relative;
z-index: 1;
}
.section-technology .feature-list-item:nth-child(1) { --reveal-delay: 0.05s; }
.section-technology .feature-list-item:nth-child(2) { --reveal-delay: 0.23s; }
.section-technology .feature-list-item:nth-child(3) { --reveal-delay: 0.41s; }
/* Station-marker node — a third, distinct icon-chip treatment: a ringed
circle with a tint "gap" against the line, different from Centres' filled
square chip and About's outlined ring. */
.section-technology .feature-list-item .excellence-icon {
position: relative;
z-index: 1;
border-radius: 50%;
background: var(--color-white);
border: 2.5px solid var(--color-primary);
color: var(--color-primary);
box-shadow: 0 0 0 6px var(--color-tint);
transition: box-shadow 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.section-technology .feature-list-item:nth-child(2) .excellence-icon {
border-color: var(--color-primary-dark);
}
.section-technology .feature-list-item:nth-child(3) .excellence-icon {
border-color: var(--color-accent);
color: var(--color-accent);
}
/* Entrance choreography — base state is fully visible/unconditional; motion
lives only inside prefers-reduced-motion:no-preference so reduced motion
or a JS failure can never leave content stuck hidden. .is-inview lands on
the [data-aos] wrapper around this column (see js/script.js §3b), not on
.feature-list itself, so it is targeted here as an ancestor. */
@media (prefers-reduced-motion: no-preference) {
.section-technology::before {
animation: techSweep 22s ease-in-out infinite;
}
.section-technology .feature-list::before {
transform: scaleY(0);
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-technology [data-aos].is-inview .feature-list::before {
transform: scaleY(1);
}
.section-technology .feature-list-item {
opacity: 0;
transform: translateX(24px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: var(--reveal-delay, 0s);
}
.section-technology [data-aos].is-inview .feature-list-item {
opacity: 1;
transform: translateX(0);
}
.section-technology .feature-media img {
clip-path: polygon(0 0, 18% 0, 0 100%, 0 100%);
transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-technology .feature-media.is-inview img {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@keyframes techSweep {
0%, 100% {
transform: translate(0, 0);
}
50% {
transform: translate(-2%, 2%);
}
}
/* Hover — soft pulsing glow bloom on the node, transform-free so it can
never collide with the entrance transform above on the same element. */
.section-technology .feature-list-item:hover .excellence-icon {
box-shadow: 0 0 0 6px var(--color-tint), 0 0 22px 4px rgba(28, 117, 188, 0.45);
}
.section-technology .feature-list-item:nth-child(3):hover .excellence-icon {
box-shadow: 0 0 0 6px var(--color-tint), 0 0 22px 4px rgba(190, 30, 45, 0.4);
}
/* ==========================================================================
44. Patient & Visitor Guide — Journey path
Homepage "Patient & Visitor Guide" section only (index.html). .journey-path
/.journey-stop/.journey-marker/.journey-stem/.journey-panel are new,
unique-to-this-section classes; shared components reused inside them
(.excellence-icon/.link-arrow/h3/p) are scoped under .journey-panel (also
unique) so no other page's usage is affected.
========================================================================== */
.journey-path {
position: relative;
display: flex;
flex-direction: column;
gap: 2.25rem;
counter-reset: journey-stop-count;
}
.journey-path::before {
content: '';
position: absolute;
z-index: 0;
left: 19px;
top: 20px;
bottom: 20px;
width: 2px;
background-image: repeating-linear-gradient(180deg, var(--color-primary) 0 8px, transparent 8px 16px);
}
.journey-path::after {
content: '';
position: absolute;
z-index: 0;
left: 19px;
top: 4px;
width: 8px;
height: 8px;
margin-left: -3px;
border-radius: 50%;
background: var(--color-accent);
box-shadow: 0 0 10px 2px rgba(190, 30, 45, 0.5);
opacity: 0;
pointer-events: none;
}
.journey-stop {
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
align-items: flex-start;
text-decoration: none;
color: inherit;
counter-increment: journey-stop-count;
}
.journey-stop:nth-child(1) {
--reveal-delay: 0.05s;
}
.journey-stop:nth-child(2) {
--reveal-delay: 0.2s;
}
.journey-stop:nth-child(3) {
--reveal-delay: 0.35s;
}
.journey-stop:nth-child(4) {
--reveal-delay: 0.5s;
}
.journey-marker {
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background: var(--color-primary);
}
.journey-marker::before {
content: '';
position: absolute;
inset: 2.5px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background: var(--color-white);
transition: background-color 0.3s ease;
}
.journey-marker::after {
content: counter(journey-stop-count);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.95rem;
color: var(--color-primary);
transition: color 0.3s ease;
}
.journey-stem {
flex-shrink: 0;
width: 1.25rem;
height: 2px;
align-self: center;
margin: 0 0.75rem;
background: var(--color-primary);
opacity: 0.4;
}
.journey-panel {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 1.5rem 1.75rem;
box-shadow: var(--shadow-sm);
transition: box-shadow 0.35s ease;
}
.journey-panel .excellence-icon {
background: var(--color-navy);
color: var(--color-primary-light);
}
.journey-panel h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.journey-panel p {
font-size: 0.9rem;
}
.journey-panel .link-arrow {
margin-top: 1rem;
font-size: 0.9rem;
}
.journey-stop:hover .journey-panel,
.journey-stop:focus-visible .journey-panel {
box-shadow: var(--shadow-md);
}
.journey-stop:hover .journey-marker::before,
.journey-stop:focus-visible .journey-marker::before {
background: var(--color-primary);
}
.journey-stop:hover .journey-marker::after,
.journey-stop:focus-visible .journey-marker::after {
color: var(--color-white);
}
@media (min-width: 992px) {
.journey-path {
flex-direction: row;
align-items: flex-start;
gap: 1.5rem;
}
.journey-path::before {
left: 0;
right: 0;
top: 19px;
bottom: auto;
width: auto;
height: 2px;
background-image: repeating-linear-gradient(90deg, var(--color-primary) 0 8px, transparent 8px 16px);
}
.journey-path::after {
left: 0;
top: 19px;
margin-left: 0;
margin-top: -3px;
}
.journey-stop {
flex-direction: column;
align-items: center;
flex: 1;
text-align: center;
}
.journey-stem {
width: 2px;
height: 1.5rem;
margin: 0.75rem 0;
}
.journey-panel {
align-items: center;
text-align: center;
}
}
/* Entrance choreography — base state above is fully visible/unconditional;
motion lives only inside prefers-reduced-motion:no-preference so reduced
motion or a JS failure can never leave content stuck hidden. */
@media (prefers-reduced-motion: no-preference) {
.journey-path::before {
transform: scaleY(0);
transform-origin: top;
transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.journey-path.is-inview::before {
transform: scaleY(1);
}
.journey-marker {
opacity: 0;
transform: scale(0.4);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
transition-delay: var(--reveal-delay, 0s);
}
.journey-stop.is-inview .journey-marker {
opacity: 1;
transform: scale(1);
}
.journey-panel {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.5s ease calc(var(--reveal-delay, 0s) + 0.12s),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-delay, 0s) + 0.12s),
box-shadow 0.35s ease;
}
.journey-stop.is-inview .journey-panel {
opacity: 1;
transform: translateY(0);
}
.journey-path.is-inview::after {
animation: journeyDotVertical 7s ease-in-out infinite;
}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 992px) {
.journey-path::before {
transform: scaleX(0);
transform-origin: left;
}
.journey-path.is-inview::before {
transform: scaleX(1);
}
.journey-path.is-inview::after {
animation: journeyDotHorizontal 7s ease-in-out infinite;
}
}
@keyframes journeyDotVertical {
0% {
top: 4px;
opacity: 0;
}
8% {
opacity: 1;
}
92% {
opacity: 1;
}
100% {
top: calc(100% - 12px);
opacity: 0;
}
}
@keyframes journeyDotHorizontal {
0% {
left: 0%;
opacity: 0;
}
8% {
opacity: 1;
}
92% {
opacity: 1;
}
100% {
left: calc(100% - 8px);
opacity: 0;
}
}
/* ==========================================================================
45. Awards — Circular orbit showcase
Homepage "Recognition / Awards" section only (index.html). .awards-orbit
/.award-orbit-item/.award-orbit-label/.awards-orbit-toggle are new,
unique-to-this-section classes; the shared .icon-btn is scoped under
.award-orbit-item / .awards-orbit-toggle (both unique) so no other page's
usage is affected.
========================================================================== */
.awards-orbit {
position: relative;
width: min(100%, 420px);
height: 260px;
margin-inline: auto;
perspective: 1200px;
}
.award-orbit-item {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
max-width: 130px;
transform:
translate(-50%, -50%)
rotate(calc(var(--orbit-rotation, 0deg) + var(--item-angle, 0deg)))
translateY(calc(-1 * var(--orbit-radius, 78px)))
rotate(calc(-1 * (var(--orbit-rotation, 0deg) + var(--item-angle, 0deg))))
scale(0.72)
translateZ(-30px);
}
.award-orbit-item .icon-btn {
width: 60px;
height: 60px;
background: var(--color-tint);
border: none;
color: var(--color-primary-dark);
}
.award-orbit-item .icon-btn .icon {
width: 1.7rem;
height: 1.7rem;
}
.award-orbit-label {
display: block;
margin-top: 0.6rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--color-navy);
text-align: center;
}
.award-orbit-item.is-active {
z-index: 10;
}
.award-orbit-item.is-active .icon-btn {
background: var(--color-primary);
color: var(--color-white);
box-shadow: 0 18px 34px -10px rgba(28, 117, 188, 0.5), 0 4px 14px rgba(35, 31, 32, 0.12);
}
.awards-orbit-toggle {
position: absolute;
top: 0;
right: 0;
z-index: 20;
}
.awards-orbit-toggle .awards-orbit-icon-play {
display: none;
}
.awards-orbit-toggle.is-paused .awards-orbit-icon-pause {
display: none;
}
.awards-orbit-toggle.is-paused .awards-orbit-icon-play {
display: block;
}
@media (min-width: 768px) {
.awards-orbit {
height: 320px;
}
.award-orbit-item {
--orbit-radius: 112px;
}
}
@media (min-width: 992px) {
.awards-orbit {
height: 400px;
}
.award-orbit-item {
--orbit-radius: 148px;
}
}
@media (prefers-reduced-motion: reduce) {
.awards-orbit-toggle {
display: none;
}
}
/* Rotation + spotlight differentiation — base rules above are fully
visible/functional and never differentiate .is-active from the rest, so
reduced motion or a JS failure (beyond the hardcoded first .is-active)
always leaves every icon and every label at least legible, never hidden. */
@media (prefers-reduced-motion: no-preference) {
.award-orbit-item {
transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1);
/* Retriggers every 3s for as long as the page is open (js/script.js
stepOrbit) — one of the few genuinely continuous animations on the
site, so a permanent compositor layer here is worth the memory
cost. */
will-change: transform;
}
.award-orbit-item .icon-btn {
filter: blur(0.4px);
transition: background-color 1.3s ease, color 1.3s ease, box-shadow 1.3s ease, filter 1.3s ease;
}
.award-orbit-label {
opacity: 0.55;
transform: scale(0.85);
transition: opacity 1.3s ease, transform 1.3s cubic-bezier(0.65, 0, 0.35, 1);
will-change: transform;
}
.award-orbit-item.is-active .icon-btn {
filter: blur(0);
}
.award-orbit-item.is-active .award-orbit-label {
opacity: 1;
transform: scale(1);
}
.award-orbit-item.is-active {
transform:
translate(-50%, -50%)
rotate(calc(var(--orbit-rotation, 0deg) + var(--item-angle, 0deg)))
translateY(calc(-1 * (var(--orbit-radius, 78px) + 20px)))
rotate(calc(-1 * (var(--orbit-rotation, 0deg) + var(--item-angle, 0deg))))
scale(1.25)
translateZ(24px);
}
}
/* ==========================================================================
46. Videos — Featured studio
Homepage "Videos / Expert Opinions" section only (index.html). All
selectors below are scoped under .video-studio (unique to this section);
the shared carousel engine (§21, data-carousel/.carousel-*) is untouched
and keeps serving the Doctors and Testimonials carousels elsewhere on the
same page.
========================================================================== */
.video-studio {
position: relative;
display: grid;
gap: 2rem;
}
.video-studio-featured {
position: relative;
}
.video-studio-media {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--color-navy);
box-shadow: var(--shadow-md);
}
.video-studio-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Static glass play glyph — background/border only, never transitioned or
animated itself (animating backdrop-filter forces a per-frame backdrop
resample; see the identical rule already followed by .hero .pill). */
.video-studio-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
border: 1px solid rgba(255, 255, 255, 0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--color-white);
pointer-events: none;
}
.video-studio-play .icon {
width: 1.7rem;
height: 1.7rem;
margin-left: 4px;
}
.video-studio-duration {
position: absolute;
right: 1rem;
bottom: 1rem;
padding: 0.3rem 0.7rem;
border-radius: var(--radius-full);
background: rgba(35, 31, 32, 0.7);
color: var(--color-white);
font-size: 0.78rem;
font-weight: 600;
}
.video-studio-info {
margin-top: 1.75rem;
}
.video-studio-info h3 {
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
margin: 0.75rem 0;
}
.video-studio-info p {
color: var(--color-text-soft);
margin-bottom: 0;
}
.video-studio-presenter {
display: flex;
align-items: center;
gap: 0.85rem;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
}
.video-studio-presenter img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.video-studio-presenter strong {
display: block;
font-size: 0.92rem;
color: var(--color-navy);
}
.video-studio-presenter span {
font-size: 0.8rem;
color: var(--color-text-soft);
}
/* Film-strip rail — a literal sprocket-hole motif via repeating-radial-
gradient, no image asset. Base (mobile-first): a horizontal, swipeable
strip. */
.video-studio-rail {
position: relative;
display: flex;
flex-direction: row;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-top: 1rem;
}
.video-studio-rail::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 8px;
background-image: radial-gradient(circle, var(--color-tint) 2.5px, transparent 2.5px);
background-size: 18px 100%;
background-repeat: repeat-x;
}
.video-studio-thumb {
flex: 0 0 250px;
scroll-snap-align: start;
position: relative;
display: grid;
grid-template-columns: 96px 1fr;
grid-template-rows: auto 1fr;
column-gap: 0.85rem;
row-gap: 0.2rem;
text-align: left;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.6rem;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.video-studio-thumb img {
grid-column: 1;
grid-row: 1 / 3;
width: 100%;
height: 100%;
min-height: 64px;
object-fit: cover;
border-radius: var(--radius-sm);
display: block;
}
.video-studio-thumb-duration {
grid-column: 2;
grid-row: 1;
font-size: 0.72rem;
font-weight: 700;
color: var(--color-primary-dark);
}
.video-studio-thumb-title {
grid-column: 2;
grid-row: 2;
font-size: 0.88rem;
font-weight: 600;
color: var(--color-navy);
line-height: 1.35;
}
.video-studio-thumb:hover,
.video-studio-thumb:focus-visible {
border-color: var(--color-primary-light);
box-shadow: var(--shadow-sm);
}
.video-studio-thumb.is-active {
border-color: var(--color-primary);
background: var(--color-tint);
}
.video-studio-thumb.is-active .video-studio-thumb-duration {
color: var(--color-primary);
}
@media (min-width: 992px) {
.video-studio {
grid-template-columns: 2fr 1fr;
align-items: start;
}
.video-studio-rail {
flex-direction: column;
overflow-x: visible;
scroll-snap-type: none;
padding-top: 0;
padding-left: 0.9rem;
}
.video-studio-rail::before {
left: 0;
top: 0;
bottom: 0;
right: auto;
width: 8px;
height: auto;
background-size: 100% 18px;
background-repeat: repeat-y;
}
.video-studio-thumb {
flex: 0 0 auto;
}
}
/* Entrance + swap-transition motion — base rules above are fully visible/
functional and never depend on .is-inview or .is-swapping to be usable;
these are gated so reduced motion or a JS failure always leaves the
studio fully visible and clickable, never stuck invisible. */
@media (prefers-reduced-motion: no-preference) {
.video-studio {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-studio.is-inview {
opacity: 1;
transform: translateY(0);
}
.video-studio-featured {
transition: opacity var(--transition), transform var(--transition);
}
.video-studio-featured.is-swapping {
opacity: 0;
transform: translateY(6px);
/* Scoped to .is-swapping itself (JS adds/removes it for ~250ms per
click) so the promoted layer is naturally transient, not permanent. */
will-change: opacity, transform;
}
.video-studio-thumb.is-previewing {
transform: scale(1.02);
border-color: var(--color-primary-light);
}
}
/* ==========================================================================
47. Doctors — Specialist wall
Homepage "Our Specialists" section only (index.html). All selectors below
are scoped under .specialist-wall (unique to this section); the shared
.doctor-card/.doctor-photo used by 22 other files is completely untouched
— this section uses fresh, purpose-built classes throughout instead.
========================================================================== */
.specialist-wall {
position: relative;
display: grid;
gap: 2.5rem;
}
.specialist-featured {
position: relative;
}
.specialist-featured::before {
content: '';
position: absolute;
top: -10%;
left: 50%;
transform: translateX(-50%);
z-index: 0;
width: 340px;
height: 340px;
border-radius: 50%;
background: radial-gradient(circle, rgba(28, 117, 188, 0.14), transparent 70%);
pointer-events: none;
}
.specialist-featured-media {
position: relative;
z-index: 1;
aspect-ratio: 4 / 5;
max-width: 380px;
margin-inline: auto;
border-radius: 220px 220px 16px 16px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.specialist-featured-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.specialist-featured-info {
position: relative;
z-index: 1;
text-align: center;
margin-top: 1.75rem;
}
.specialist-featured-info h3 {
font-size: clamp(1.4rem, 2.4vw, 1.85rem);
margin: 0.75rem 0 0.5rem;
}
.specialist-meta {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.4rem 1rem;
color: var(--color-text-soft);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.specialist-meta .icon {
width: 1rem;
height: 1rem;
color: var(--color-primary);
}
.specialist-featured-info > p:not(.specialist-meta) {
max-width: 440px;
margin-inline: auto;
color: var(--color-text-soft);
}
.specialist-cta-row {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
/* Directory wall — a row of gradient-ring "medallion" portraits, a
deliberately different shape/motif from every icon-chip or thumbnail used
elsewhere on the site. Base (mobile-first): a horizontal swipeable strip. */
.specialist-directory {
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 0.5rem 0.25rem 1rem;
}
.specialist-medallion {
flex: 0 0 auto;
scroll-snap-align: start;
display: flex;
flex-direction: column;
align-items: center;
width: 110px;
background: none;
border: none;
padding: 0;
cursor: pointer;
text-align: center;
}
.specialist-medallion-photo {
display: block;
width: 84px;
height: 84px;
border-radius: 50%;
padding: 3px;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
margin-bottom: 0.65rem;
transition: box-shadow var(--transition);
}
.specialist-medallion-photo img {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--color-white);
}
.specialist-medallion-name {
font-size: 0.82rem;
font-weight: 600;
color: var(--color-navy);
line-height: 1.3;
}
.specialist-medallion:hover .specialist-medallion-photo,
.specialist-medallion:focus-visible .specialist-medallion-photo {
box-shadow: 0 8px 20px -8px rgba(28, 117, 188, 0.5);
}
.specialist-medallion.is-active .specialist-medallion-photo {
box-shadow: 0 0 0 4px var(--color-tint), 0 8px 20px -6px rgba(28, 117, 188, 0.5);
}
.specialist-medallion.is-active .specialist-medallion-name {
color: var(--color-primary-dark);
}
.specialist-medallion:nth-child(1) { --reveal-delay: 0.05s; }
.specialist-medallion:nth-child(2) { --reveal-delay: 0.15s; }
.specialist-medallion:nth-child(3) { --reveal-delay: 0.25s; }
.specialist-medallion:nth-child(4) { --reveal-delay: 0.35s; }
.specialist-medallion:nth-child(5) { --reveal-delay: 0.45s; }
@media (min-width: 992px) {
.specialist-wall {
grid-template-columns: 1.1fr 1fr;
align-items: center;
}
.specialist-featured-info {
text-align: left;
}
.specialist-meta {
justify-content: flex-start;
}
.specialist-featured-info > p:not(.specialist-meta) {
margin-inline: 0;
}
.specialist-cta-row {
justify-content: flex-start;
}
.specialist-directory {
flex-wrap: wrap;
overflow-x: visible;
scroll-snap-type: none;
justify-content: center;
padding: 0.5rem;
}
}
/* Entrance + swap-transition motion — base rules above are fully visible/
functional and never depend on .is-inview or .is-swapping to be usable;
gated so reduced motion or a JS failure always leaves the wall fully
visible and clickable, never stuck invisible. */
@media (prefers-reduced-motion: no-preference) {
.specialist-wall {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.specialist-wall.is-inview {
opacity: 1;
transform: translateY(0);
}
.specialist-medallion {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: var(--reveal-delay, 0s);
}
.specialist-wall.is-inview .specialist-medallion {
opacity: 1;
transform: translateY(0);
}
.specialist-featured::before {
animation: heroFloat 15s ease-in-out infinite;
}
.specialist-featured-media img {
transition: opacity var(--transition), transform var(--transition);
}
.specialist-featured-info {
transition: opacity var(--transition), transform var(--transition);
}
.specialist-featured.is-swapping .specialist-featured-media img {
opacity: 0;
transform: scale(1.04);
/* Scoped to .is-swapping itself (JS adds/removes it for ~250ms per
click) so the promoted layer is naturally transient, not permanent. */
will-change: opacity, transform;
}
.specialist-featured.is-swapping .specialist-featured-info {
opacity: 0;
transform: translateY(8px);
will-change: opacity, transform;
}
}
/* ==========================================================================
48. Testimonials — Healing journey gallery
Homepage "Patient Stories" section only (index.html). All selectors below
are scoped under .healing-gallery (unique to this section — deliberately
not named "journey-*" to avoid colliding with the unrelated .journey-path
/.journey-stop classes already used by 44. Patient & Visitor Guide on the
same page). The old .testimonial-card/.icon-quote/.stars usage was only
ever used here and is retired above (see 23) rather than left orphaned.
========================================================================== */
.healing-gallery {
position: relative;
max-width: 900px;
margin-inline: auto;
}
.healing-featured {
position: relative;
z-index: 1;
max-width: 620px;
margin-inline: auto;
padding: 0 1rem;
text-align: center;
}
.healing-featured::before {
content: '\201C';
position: absolute;
top: -3rem;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-heading);
font-size: 8rem;
line-height: 1;
color: var(--color-tint);
z-index: -1;
pointer-events: none;
}
.healing-stars {
display: flex;
align-items: center;
justify-content: center;
gap: 0.2rem;
color: var(--color-star);
margin-bottom: 1.1rem;
}
.healing-stars .icon {
width: 1rem;
height: 1rem;
}
.healing-quote {
font-family: var(--font-heading);
font-size: clamp(1.2rem, 1.1rem + 1vw, 1.6rem);
font-weight: 600;
line-height: 1.45;
color: var(--color-navy);
}
.healing-recovery {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1.1rem;
color: var(--color-text-soft);
font-size: 0.92rem;
}
.healing-recovery .icon {
width: 1rem;
height: 1rem;
color: var(--color-accent);
flex-shrink: 0;
}
.healing-patient {
display: flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
margin-top: 1.85rem;
}
.healing-patient img {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.healing-patient > div {
text-align: left;
}
.healing-patient strong {
display: block;
font-size: 0.95rem;
color: var(--color-navy);
}
.healing-patient span {
font-size: 0.8rem;
color: var(--color-text-soft);
}
/* Decorative curved connector — only ever shown once the stops below are
actually following it (desktop + offset-path support); hidden otherwise
so it never appears disconnected from the markers it's meant to link. */
.healing-path-line {
display: none;
width: 100%;
height: 100px;
margin-top: -0.5rem;
color: var(--color-border);
}
.healing-path-line path {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-dasharray: 5 9;
stroke-linecap: round;
}
/* Journey stops — base (mobile-first): a horizontal swipeable strip of
soft glow-halo portraits. Deliberately a gentler, rounder motif than the
hard gradient-ring "medallion" used for 47. Doctors — Specialist wall. */
.healing-stops {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
gap: 2rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 1.75rem 0.25rem 0.5rem;
}
.healing-stop {
flex: 0 0 auto;
scroll-snap-align: start;
display: flex;
flex-direction: column;
align-items: center;
width: 90px;
background: none;
border: none;
padding: 0;
cursor: pointer;
text-align: center;
}
.healing-stop-photo {
display: block;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 0.5rem;
box-shadow: 0 0 0 4px var(--color-white), 0 4px 14px rgba(35, 31, 32, 0.12);
transition: box-shadow var(--transition);
}
.healing-stop-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.healing-stop-name {
font-size: 0.78rem;
font-weight: 600;
color: var(--color-navy);
}
.healing-stop:hover .healing-stop-photo,
.healing-stop:focus-visible .healing-stop-photo {
box-shadow: 0 0 0 4px var(--color-white), 0 0 0 7px rgba(28, 117, 188, 0.25), 0 4px 14px rgba(35, 31, 32, 0.12);
}
.healing-stop.is-active .healing-stop-photo {
box-shadow: 0 0 0 4px var(--color-white), 0 0 0 7px rgba(28, 117, 188, 0.45), 0 6px 18px -4px rgba(28, 117, 188, 0.4);
}
.healing-stop.is-active .healing-stop-name {
color: var(--color-primary-dark);
}
.healing-cta {
text-align: center;
margin-top: 2.5rem;
}
@media (min-width: 992px) {
.healing-stops {
flex-wrap: wrap;
overflow-x: visible;
scroll-snap-type: none;
}
}
/* Curved arrangement — desktop + offset-path support only. Percentages are
not valid inside an SVG path() string, so this needs the fixed-width
container below; every narrower/unsupported case keeps the flex-wrap
fallback immediately above instead. */
@media (min-width: 992px) {
@supports (offset-path: path("M0,0")) {
.healing-path-line {
display: block;
}
.healing-stops {
width: 700px;
max-width: 100%;
height: 160px;
margin-inline: auto;
padding: 0;
display: block;
flex-wrap: nowrap;
}
.healing-stop {
position: absolute;
top: 0;
left: 0;
offset-path: path("M 20,120 Q 350,10 680,120");
offset-distance: var(--stop-offset, 0%);
offset-rotate: 0deg;
transform: translate(-50%, -50%);
}
}
}
/* Per-stop entrance stagger — sets --reveal-delay only (inert data), the
actual transition-delay declaration lives inside the reduced-motion
query below, matching every other staggered section this session. */
.healing-stop:nth-child(1) { --reveal-delay: 0.05s; }
.healing-stop:nth-child(2) { --reveal-delay: 0.2s; }
.healing-stop:nth-child(3) { --reveal-delay: 0.35s; }
/* Entrance + swap-transition motion — base rules above are fully visible/
functional and never depend on .is-inview or .is-swapping to be usable;
gated so reduced motion or a JS failure always leaves the gallery fully
visible and clickable, never stuck invisible. Mirrors the 47. Specialist
wall precedent: the whole block fades in as one unit, only the stops get
an individual stagger, and the featured pane's text gets a transition
used solely for the swap (never a second, competing entrance transition
on the same elements). */
@media (prefers-reduced-motion: no-preference) {
.healing-gallery {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.healing-gallery.is-inview {
opacity: 1;
transform: translateY(0);
}
.healing-path-line path {
stroke-dashoffset: 900;
transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.healing-gallery.is-inview .healing-path-line path {
stroke-dashoffset: 0;
}
.healing-stop {
opacity: 0;
transform: translateY(10px) scale(0.9);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: var(--reveal-delay, 0s);
}
.healing-gallery.is-inview .healing-stop {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Swap choreography only — .is-swapping is toggled briefly by JS while
the featured pane's content is rewritten from the activated stop's
data attributes; 250ms in js/script.js matches --transition here (a
plain kept-in-sync constant, same convention as 46/47's swap timing). */
.healing-stars,
.healing-quote,
.healing-recovery,
.healing-patient {
transition: opacity var(--transition), transform var(--transition);
}
.healing-featured.is-swapping .healing-stars,
.healing-featured.is-swapping .healing-quote,
.healing-featured.is-swapping .healing-recovery,
.healing-featured.is-swapping .healing-patient {
opacity: 0;
transform: translateY(8px);
/* Scoped to .is-swapping itself (JS adds/removes it for ~250ms per
click) so the promoted layer is naturally transient, not permanent. */
will-change: opacity, transform;
}
}
/* ==========================================================================
49. Health Blog — Medical knowledge hub
Homepage "Health Blog" section only (index.html). All selectors below are
scoped under .knowledge-hub (unique to this section). blog.html and
blog-single.html both still use .blog-card/.blog-thumb/.tag for their own
grids (24. Blog / news cards) — that shared component is left untouched.
========================================================================== */
.knowledge-hub {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
/* ---- Featured article: stacked "journal cover" ---- */
.knowledge-featured {
max-width: 760px;
margin-inline: auto;
width: 100%;
}
.knowledge-featured-media {
aspect-ratio: 16 / 10;
border-radius: 12px 64px 12px 12px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.knowledge-featured-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.knowledge-featured-content {
position: relative;
z-index: 1;
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 1.75rem 1.75rem 1.5rem;
margin: -2.5rem 1rem 0;
}
.knowledge-kicker {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary-dark);
}
.knowledge-kicker-line {
width: 26px;
height: 3px;
border-radius: var(--radius-full);
background: var(--color-accent);
flex-shrink: 0;
}
.knowledge-featured-content h3 {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem);
line-height: 1.2;
margin: 0.75rem 0 0.6rem;
}
.knowledge-excerpt {
color: var(--color-text-soft);
}
.knowledge-byline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.25rem;
margin-top: 1.25rem;
padding-top: 1.1rem;
border-top: 1px solid var(--color-border);
}
.knowledge-byline-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--color-navy);
}
.knowledge-byline-item .icon {
width: 1rem;
height: 1rem;
color: var(--color-primary);
}
.knowledge-progress {
display: inline-block;
width: 52px;
height: 4px;
border-radius: var(--radius-full);
background: var(--color-tint);
overflow: hidden;
margin-left: 0.15rem;
}
.knowledge-progress-fill {
display: block;
height: 100%;
width: 22%;
border-radius: var(--radius-full);
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.knowledge-featured-content .link-arrow {
margin-top: 1.4rem;
}
/* ---- Category filter pills ---- */
.knowledge-categories {
display: flex;
align-items: center;
gap: 0.6rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 0.25rem 0.1rem;
max-width: 100%;
}
.knowledge-pill {
flex-shrink: 0;
scroll-snap-align: start;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-white);
color: var(--color-navy);
font-size: 0.85rem;
font-weight: 600;
padding: 0.5rem 1.15rem;
cursor: pointer;
white-space: nowrap;
transition: var(--transition);
}
.knowledge-pill:hover {
border-color: var(--color-primary);
color: var(--color-primary-dark);
}
.knowledge-pill:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.knowledge-pill.is-active {
background: var(--color-primary-dark);
border-color: transparent;
color: var(--color-white);
}
/* ---- Reading shelf: book-spine collection ---- */
.knowledge-shelf {
display: flex;
gap: 1.1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 1.25rem 1rem;
border-radius: 24px;
background: linear-gradient(180deg, transparent 0%, var(--color-tint-2) 45%, var(--color-tint-2) 100%);
}
.knowledge-book {
position: relative;
flex: 0 0 140px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
background: var(--color-white);
border: none;
border-radius: var(--radius-lg);
padding: 0.6rem 0.6rem 0.85rem;
text-align: left;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition), filter var(--transition);
}
.knowledge-book::before {
content: '';
position: absolute;
top: 0;
left: 0.85rem;
right: 0.85rem;
height: 3px;
border-radius: 0 0 var(--radius-full) var(--radius-full);
background: var(--color-primary);
opacity: 0;
transition: opacity var(--transition);
}
.knowledge-book-cover {
display: block;
aspect-ratio: 4 / 3;
border-radius: 10px;
overflow: hidden;
margin-bottom: 0.65rem;
}
.knowledge-book-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.knowledge-book-category {
display: block;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-primary-dark);
margin-bottom: 0.3rem;
}
.knowledge-book-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 0.85rem;
font-weight: 600;
line-height: 1.35;
color: var(--color-navy);
}
.knowledge-book:hover,
.knowledge-book:focus-visible {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.knowledge-book:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.knowledge-book.is-active::before {
opacity: 1;
}
.knowledge-book.is-active .knowledge-book-category {
color: var(--color-accent-dark);
}
.knowledge-book.is-dimmed {
opacity: 0.4;
filter: grayscale(65%);
}
.knowledge-cta {
text-align: center;
margin-top: 2.5rem;
}
@media (min-width: 768px) {
.knowledge-featured-media {
aspect-ratio: 21 / 9;
}
.knowledge-featured-content {
margin: -3.5rem 2.5rem 0;
padding: 2.25rem 2.5rem 2rem;
}
}
@media (min-width: 992px) {
.knowledge-categories {
justify-content: center;
overflow-x: visible;
flex-wrap: wrap;
}
.knowledge-shelf {
overflow-x: visible;
flex-wrap: wrap;
justify-content: center;
}
.knowledge-book {
flex: 0 0 150px;
}
}
/* Per-item entrance stagger — sets --reveal-delay only (inert data), the
actual transition-delay declaration lives inside the reduced-motion
query below, matching every other staggered section this session. */
.knowledge-book:nth-child(1) { --reveal-delay: 0.05s; }
.knowledge-book:nth-child(2) { --reveal-delay: 0.12s; }
.knowledge-book:nth-child(3) { --reveal-delay: 0.19s; }
.knowledge-book:nth-child(4) { --reveal-delay: 0.26s; }
.knowledge-book:nth-child(5) { --reveal-delay: 0.33s; }
.knowledge-book:nth-child(6) { --reveal-delay: 0.4s; }
/* Entrance + swap-transition motion — base rules above are fully visible/
functional and never depend on .is-inview or .is-swapping to be usable;
gated so reduced motion or a JS failure always leaves the hub fully
visible and clickable, never stuck invisible. Mirrors the 47/48
precedent: the whole block fades in as one unit, only the shelf books
get an individual stagger, and the featured pane's text gets a
transition used solely for the swap. */
@media (prefers-reduced-motion: no-preference) {
.knowledge-hub {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.knowledge-hub.is-inview {
opacity: 1;
transform: translateY(0);
}
.knowledge-book {
opacity: 0;
transform: translateY(14px) scale(0.94);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow var(--transition);
transition-delay: var(--reveal-delay, 0s);
}
.knowledge-hub.is-inview .knowledge-book {
opacity: 1;
transform: translateY(0) scale(1);
}
.knowledge-progress-fill {
width: 0;
transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.knowledge-hub.is-inview .knowledge-progress-fill {
width: 22%;
}
.knowledge-featured.is-swapping .knowledge-progress-fill {
width: 0;
transition: width 0.2s ease;
}
/* Swap choreography only — .is-swapping is toggled briefly by JS while
the featured pane's content is rewritten from the activated book's
data attributes; 250ms in js/script.js matches --transition here (a
plain kept-in-sync constant, same convention as 46/47/48's swap
timing). */
.knowledge-featured-media img,
.knowledge-kicker,
.knowledge-featured-content h3,
.knowledge-excerpt,
.knowledge-byline,
.knowledge-featured-content .link-arrow {
transition: opacity var(--transition), transform var(--transition);
}
.knowledge-featured.is-swapping .knowledge-featured-media img {
opacity: 0;
transform: scale(1.04);
/* Scoped to .is-swapping itself (JS adds/removes it for ~250ms per
click) so the promoted layer is naturally transient, not permanent. */
will-change: opacity, transform;
}
.knowledge-featured.is-swapping .knowledge-kicker,
.knowledge-featured.is-swapping .knowledge-featured-content h3,
.knowledge-featured.is-swapping .knowledge-excerpt,
.knowledge-featured.is-swapping .knowledge-byline,
.knowledge-featured.is-swapping .knowledge-featured-content .link-arrow {
opacity: 0;
transform: translateY(8px);
will-change: opacity, transform;
}
}
/* ==========================================================================
50. Patient Decision Flow — FAQ + Appointment CTA
Homepage only (index.html). .faq-* and .appointment-cta* are new,
unique-to-this-pair classes. The shared .accordion (19 files) and
.cta-strip (22 files) components are both left completely untouched —
see 25/26 — this section only stops using them on the homepage.
========================================================================== */
.section-decision-flow-faq {
padding-block-end: clamp(1.5rem, 3vw, 2.5rem);
}
/* ---- FAQ: numbered index + shared answer panel ---- */
.faq-flow {
display: grid;
gap: 2.5rem;
max-width: 1000px;
margin-inline: auto;
}
.faq-questions {
display: flex;
flex-direction: column;
}
.faq-question {
display: flex;
align-items: baseline;
gap: 1.1rem;
width: 100%;
padding: 1.15rem 0.25rem 1.15rem 0.9rem;
background: none;
border: none;
border-bottom: 1px solid var(--color-border);
border-left: 3px solid transparent;
text-align: left;
cursor: pointer;
transition: border-color var(--transition);
}
.faq-question-index {
flex-shrink: 0;
min-width: 2ch;
font-family: var(--font-heading);
font-size: 1.6rem;
color: var(--color-border);
transition: color var(--transition);
}
.faq-question-text {
font-weight: 600;
font-size: 1.02rem;
line-height: 1.4;
color: var(--color-navy);
transition: color var(--transition);
}
.faq-question:hover .faq-question-index,
.faq-question:focus-visible .faq-question-index {
color: var(--color-primary-light);
}
.faq-question.is-active {
border-left-color: var(--color-primary);
}
.faq-question.is-active .faq-question-index {
color: var(--color-primary);
}
.faq-question.is-active .faq-question-text {
color: var(--color-primary-dark);
}
.faq-question:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.faq-answer {
background: var(--color-white);
border-radius: 24px 90px 24px 90px;
padding: clamp(2.25rem, 4vw, 3rem);
box-shadow: var(--shadow-md);
}
.faq-answer p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-navy);
}
.faq-answer .link-arrow {
margin-top: 1.4rem;
}
@media (min-width: 992px) {
.faq-flow {
grid-template-columns: 1fr 1.15fr;
align-items: start;
gap: 3.5rem;
}
}
/* Per-question entrance stagger — sets --reveal-delay only (inert data),
the actual transition-delay declaration lives inside the reduced-motion
query below, matching every other staggered section this session. */
.faq-question:nth-child(1) { --reveal-delay: 0.05s; }
.faq-question:nth-child(2) { --reveal-delay: 0.15s; }
.faq-question:nth-child(3) { --reveal-delay: 0.25s; }
.faq-question:nth-child(4) { --reveal-delay: 0.35s; }
/* ---- CTA: appointment panel with floating badges ---- */
.appointment-cta {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, var(--color-tint) 0%, var(--color-tint-2) 100%);
}
.appointment-cta-inner {
display: grid;
gap: 2.5rem;
align-items: center;
padding-block: 3.5rem;
}
.appointment-cta-availability {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 0.75rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--color-primary-dark);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-accent);
flex-shrink: 0;
}
.appointment-cta-content h3 {
margin-bottom: 0.75rem;
font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.1rem);
}
.appointment-cta-content > p:not(.appointment-cta-availability) {
max-width: 46ch;
color: var(--color-text-soft);
}
.appointment-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1.75rem;
}
.appointment-cta-actions .btn .icon {
width: 1.05em;
height: 1.05em;
}
.appointment-cta-visual {
position: relative;
display: none;
height: 220px;
}
.appointment-cta-badge {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--color-white);
box-shadow: var(--shadow-md);
color: var(--color-primary);
}
.appointment-cta-badge .icon {
width: 1.6rem;
height: 1.6rem;
}
.appointment-cta-badge--1 {
top: 8%;
left: 18%;
}
.appointment-cta-badge--2 {
top: 48%;
left: 58%;
color: var(--color-accent);
}
.appointment-cta-badge--3 {
top: 74%;
left: 22%;
}
@media (min-width: 768px) {
.appointment-cta-visual {
display: block;
}
}
@media (min-width: 992px) {
.appointment-cta-inner {
grid-template-columns: 1.3fr 1fr;
}
}
/* Entrance + swap-transition motion — base rules above are fully visible/
functional and never depend on .is-inview or .is-swapping to be usable;
gated so reduced motion or a JS failure always leaves both the FAQ and
the CTA fully visible and clickable, never stuck invisible. */
@media (prefers-reduced-motion: no-preference) {
.faq-flow {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-flow.is-inview {
opacity: 1;
transform: translateY(0);
}
.faq-question {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: var(--reveal-delay, 0s);
}
.faq-flow.is-inview .faq-question {
opacity: 1;
transform: translateY(0);
}
/* Swap choreography only — .is-swapping is toggled briefly by JS while
the answer panel's content is rewritten from the activated question's
data attributes; 250ms in js/script.js matches --transition here (a
plain kept-in-sync constant, same convention as 46/47/48/49's swap
timing). */
.faq-answer p,
.faq-answer .link-arrow {
transition: opacity var(--transition), transform var(--transition);
}
.faq-answer.is-swapping p,
.faq-answer.is-swapping .link-arrow {
opacity: 0;
transform: translateY(8px);
}
.appointment-cta-inner {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.appointment-cta-inner.is-inview {
opacity: 1;
transform: translateY(0);
}
.appointment-cta-badge {
animation: heroFloat 13s ease-in-out infinite;
}
.appointment-cta-badge--2 {
animation-delay: -4s;
}
.appointment-cta-badge--3 {
animation-delay: -8s;
}
}
/* ==========================================================================
51. Hero slideshow — disabled during rollback. The Hero was restored to
its original single-image .hero-media; no .hero-slide-nav or .hero-slide
element exists in any page anymore (confirmed by exhaustive grep), so
this block is fully inert either way, but it's disabled here too for
clarity. Pairs with JS section 18 in script.js, also disabled in place.
Retained for future reference.
.hero-parallax-layer {
position: absolute;
inset: 0;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
}
.hero-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-slide.is-active {
opacity: 1;
z-index: 2;
}
.hero-slide.is-leaving {
opacity: 1;
z-index: 1;
}
.hero-slide-nav {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 1.1rem;
padding-bottom: 2rem;
}
.hero-slide-dots {
display: flex;
align-items: center;
gap: 0.5rem;
}
.hero-slide-dot {
width: 22px;
height: 8px;
flex-shrink: 0;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.35);
border: none;
padding: 0;
cursor: pointer;
transform: scaleX(0.35);
transform-origin: left center;
transition: var(--transition);
}
.hero-slide-dot:hover,
.hero-slide-dot:focus-visible {
background: rgba(255, 255, 255, 0.6);
}
.hero-slide-dot.is-active {
background: var(--color-white);
transform: scaleX(1);
}
.hero-slide-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.hero-slide-arrow,
.hero-slide-playpause {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
color: var(--color-white);
cursor: pointer;
transition: var(--transition);
}
.hero-slide-arrow .icon,
.hero-slide-playpause .icon {
width: 1.1em;
height: 1.1em;
}
.hero-slide-arrow:hover,
.hero-slide-arrow:focus-visible,
.hero-slide-playpause:hover,
.hero-slide-playpause:focus-visible {
background: var(--color-primary);
border-color: var(--color-primary);
}
.hero-slide-playpause .hero-slide-icon-play {
display: none;
}
.hero-slide-playpause.is-paused .hero-slide-icon-pause {
display: none;
}
.hero-slide-playpause.is-paused .hero-slide-icon-play {
display: block;
}
@media (prefers-reduced-motion: reduce) {
.hero-slide-playpause {
display: none;
}
}
@media (prefers-reduced-motion: no-preference) {
.hero-slide {
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
}
========================================================================== */