:root {
--background: hsl(0, 0%, 100%);
--foreground: hsl(210, 15%, 15%);
--primary: hsl(210, 70%, 50%);
--primary-foreground: hsl(0, 0%, 98%);
--secondary: hsl(150, 40%, 60%);
--secondary-foreground: hsl(210, 15%, 15%);
--muted: hsl(210, 40%, 96%);
--muted-foreground: hsl(210, 15%, 45%);
--accent: hsl(180, 60%, 85%);
--accent-foreground: hsl(210, 15%, 15%);
--destructive: hsl(0, 84.2%, 60.2%);
--destructive-foreground: hsl(210, 40%, 98%);
--border: hsl(210, 20%, 90%);
--input: hsl(210, 20%, 90%);
--ring: hsl(210, 70%, 50%);
--medical-blue: hsl(210, 70%, 50%);
--medical-blue-light: hsl(210, 60%, 85%);
--medical-blue-dark: hsl(210, 80%, 35%);
--medical-teal: hsl(180, 60%, 55%);
--medical-green: hsl(150, 40%, 60%);
--medical-gray: hsl(210, 15%, 95%);
--text-white: #fff;
--gradient-hero: linear-gradient(
135deg,
var(--medical-blue),
var(--medical-teal)
);
--gradient-card: linear-gradient(
180deg,
var(--background),
var(--medical-gray)
);
--shadow-medical: 0 4px 20px -2px hsl(210, 70%, 50%, 0.1);
--shadow-card: 0 2px 10px -1px hsl(210, 70%, 50%, 0.05);
--radius: 0.5rem;
--medical-teal-h: 173;
--medical-teal-s: 85%;
--medical-teal-l: 31%;
--primary-h: 221;
--primary-s: 83%;
--primary-l: 58%;
--shrivas-bg-blue: #005a86;
--background: hsl(0, 0%, 100%);
--foreground: hsl(215, 25%, 15%);
--card: hsl(0, 0%, 100%);
--card-foreground: hsl(215, 25%, 15%);
--primary: hsl(210, 85%, 35%);
--primary-foreground: hsl(0, 0%, 100%);
--secondary: hsl(187, 85%, 55%);
--accent: hsl(187, 85%, 55%);
--muted-foreground: hsl(215, 15%, 50%);
--border: hsl(210, 25%, 88%);
--shadow-card:
0 4px 6px -1px rgba(30, 86, 133, 0.08),
0 2px 4px -1px rgba(30, 86, 133, 0.04);
--shadow-hover:
0 10px 25px -5px rgba(30, 86, 133, 0.15),
0 8px 10px -6px rgba(30, 86, 133, 0.08);
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family:
ui-sans-serif,
system-ui,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
Segoe UI Symbol,
"Noto Color Emoji";
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
scroll-padding-top: 100px; /* Account for fixed header */
}
body {
background: var(--background);
color: var(--foreground);
margin: 0;
padding: 0;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.container-fluid {
max-width: 100%;
padding: 0 2rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit;
font-weight: bold;
margin: 0 0 0.5em 0;
}
ol,
ul,
menu {
margin: 0;
padding: 0;
}
.text-white {
color: var(--text-white);
}
.shrivas-bg-blue {
background-color: var(--shrivas-bg-blue);
}
.text-center {
text-align: center;
}
.text-primary {
color: var(--primary);
}
.text-secondary {
color: var(--secondary);
}
.text-muted-foreground {
color: var(--muted-foreground);
}
.text-background {
color: var(--background);
}
.bg-background {
background: var(--background);
}
.bg-foreground {
background: var(--foreground);
}
.bg-light {
background: var(--medical-gray);
}
.bg-gradient {
background: var(--gradient-hero);
}
.bg-gradient-card {
background: var(--gradient-card);
}
.block {
display: block;
}
/* Flex, Grid, and Layout Utilities */
.flex {
display: flex;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.col-span-2 {
grid-column: span 2;
}
.col-span-1 {
grid-column: span 1;
}
/* Spacing Utilities */
.p-2 {
padding: 0.5rem;
}
.p-4 {
padding: 1rem;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.pt-0 {
padding-top: 0;
}
.pt-6 {
padding-top: 1.5rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.mt-0 {
margin-top: 0;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-12 {
margin-top: 3rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
/* Border, Radius, and Shadow */
.border {
border: 1px solid var(--border);
}
.border-b {
border-bottom: 1px solid var(--border);
}
.border-t {
border-top: 1px solid var(--border);
}
.border-l-2 {
border-left: 2px solid var(--primary);
}
.border-background\/20 {
border: 1px solid rgba(255, 255, 255, 0.2);
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-lg {
border-radius: var(--radius);
}
.rounded-full {
border-radius: 9999px;
}
.shadow-medical {
box-shadow: var(--shadow-medical);
}
.shadow-card {
box-shadow: var(--shadow-card);
}
.shadow-sm {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.box-sizing-border-box {
box-sizing: border-box;
}
/* Button Styles */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
font-size: 1rem;
font-weight: 500;
border-radius: 0.375rem;
padding: 0.5em 1.5em;
border: none;
cursor: pointer;
transition:
background 0.2s,
color 0.2s,
box-shadow 0.2s;
}
.btn-primary {
background: var(--primary);
color: var(--primary-foreground);
}
.btn-primary:hover {
background: hsl(210, 70%, 45%);
}
.btn-outline {
background: var(--background);
color: var(--primary);
border: 1px solid var(--primary);
}
.btn-outline:hover {
background: var(--accent);
color: var(--accent-foreground);
}
.btn-secondary {
background: var(--secondary);
color: var(--secondary-foreground);
}
.btn-secondary:hover {
background: hsl(150, 40%, 55%);
}
.btn-ghost {
background: transparent;
color: var(--primary);
}
.btn-ghost:hover {
background: var(--background);
color: var(--accent-foreground);
}
.btn-lg {
font-size: 1.125rem;
padding: 0.75em 2em;
}
.btn-sm {
font-size: 0.875rem;
padding: 0.25em 1em;
}
.w-full {
width: 100%;
}
.w-75 {
width: 75%;
}
.w-4 {
width: 1rem;
}
/* Badge Styles */
.badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25em 0.75em;
border: 1px solid transparent;
transition:
background 0.2s,
color 0.2s;
}
.badge-default {
background: var(--shrivas-bg-blue);
color: var(--primary-foreground);
}
.badge-secondary {
background: var(--secondary);
color: var(--secondary-foreground);
}
.badge-outline {
background: transparent;
color: var(--foreground);
border: 1px solid var(--border);
}
/* Card Styles */
.card,
.about-card,
.doctor-card,
.gallery-card,
.news-card,
.sidebar-card {
background: var(--card, var(--background));
color: var(--card-foreground, var(--foreground));
border-radius: var(--radius);
box-shadow: var(--shadow-card);
border: 1px solid var(--border);
padding: 1.5rem;
}
/* Misc */
.text-xs {
font-size: 0.75rem;
}
.font-bold {
font-weight: bold;
}
.font-semibold {
font-weight: 600;
}
.font-medium {
font-weight: 500;
}
.leading-tight {
line-height: 1.2;
}
.transition-shadow {
transition: box-shadow 0.2s;
}
.transition-transform {
transition: transform 0.2s;
}
.transition-opacity {
transition: opacity 0.2s;
}
.text-sm {
font-size: 0.875rem;
}
.text-2xl {
font-size: 1.5rem;
}
.text-3xl {
font-size: 1.875rem;
}
.text-4xl {
font-size: 2.25rem;
}
.lg\:text-4xl {
font-size: 2.25rem;
}
.lg\:text-6xl {
font-size: 3.75rem;
}
.max-w-4xl {
max-width: 56rem;
}
.max-w-3xl {
max-width: 48rem;
}
.max-w-2xl {
max-width: 42rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.rounded-lg {
border-radius: var(--radius);
}
.rounded-full {
border-radius: 9999px;
}
.object-cover {
object-fit: cover;
}
/* Icon SVGs (Lucide style, minimal) */
.icon-phone::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-heart::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-award::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-users::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-menu::before {
content: "";
display: inline-block;
width: 2em;
height: 2em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-mail::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-calendar::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-graduation::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-stethoscope::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-microscope::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-shield::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-play::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-zoom-in::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-facebook::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-twitter::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-linkedin::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-map-pin::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-clock::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.icon-arrow-right::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
.nav-links a {
text-decoration: none;
}
.text-decoration-none {
text-decoration: none;
}
/* Responsive Styles */
@media (max-width: 1024px) {
.container {
padding: 0 1rem;
}
.grid-4 {
grid-template-columns: 1fr 1fr;
}
.footer-main.grid-4 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
.doctors-list,
.gallery-list,
.about-cards,
.news-main {
grid-template-columns: 1fr !important;
}
.footer-main.grid-4 {
grid-template-columns: 1fr;
}
.hero-section,
.about-section,
.doctors-section,
.gallery-section,
.news-section,
.footer {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.hero-title {
font-size: 2rem;
}
.section-title {
font-size: 1.5rem;
}
.nav-links {
display: none;
}
.show-md {
display: inline-flex !important;
}
.hidden-md {
display: none !important;
}
}
@media (min-width: 769px) {
.show-md {
display: none !important;
}
.hidden-md {
display: flex !important;
}
.md\:w-75 {
width: 75%;
}
}
@media (max-width: 480px) {
.container {
padding: 0 0.5rem;
}
.hero-title,
.section-title {
font-size: 1.25rem;
}
.btn,
.btn-lg,
.btn-sm {
font-size: 0.9rem;
padding: 0.5em 1em;
}
.sm\:w-100 {
width: 100%;
}
}
/* Responsive Grid Columns */
@media (min-width: 768px) {
.md\:grid-cols-2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-2 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.lg\:grid-cols-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.lg\:grid-cols-4 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.lg\:col-span-2 {
grid-column: span 2;
}
.lg\:col-span-1 {
grid-column: span 1;
}
}
@media (min-width: 1024px) {
.lg\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
}
@media (min-width: 768px) {
.md\:flex {
display: flex;
}
}
/* Gaps */
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.gap-12 {
gap: 3rem;
}
/* --- Spacing Utilities --- */
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-12 {
margin-top: 3rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.p-4 {
padding: 1rem;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.pt-0 {
padding-top: 0;
}
.pt-6 {
padding-top: 1.5rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-16 {
padding-bottom: 4rem;
}
.pl-2 {
padding-left: 0.5rem;
}
.pl-4 {
padding-left: 1rem;
}
.pr-0 {
padding-right: 0;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
/* --- Sizing Utilities --- */
.w-full {
width: 100%;
}
.w-2 {
width: 0.5rem;
}
.w-12 {
width: 3rem;
}
.w-16 {
width: 4rem;
}
.w-20 {
width: 5rem;
}
.h-20 {
height: 5rem;
}
.w-36 {
width: 9rem;
}
.h-36 {
height: 9rem;
}
.w-24 {
width: 6rem;
}
.w-28 {
width: 7rem;
}
.w-32 {
width: 8rem;
}
.w-48 {
width: 12rem;
}
.w-64 {
width: 16rem;
}
.w-96 {
width: 24rem;
}
.h-full {
height: 100%;
}
.h-2 {
height: 0.5rem;
}
.h-3 {
height: 0.75rem;
}
.h-4 {
height: 1rem;
}
.h-5 {
height: 1.25rem;
}
.h-6 {
height: 1.5rem;
}
.h-8 {
height: 2rem;
}
.h-9 {
height: 2.25rem;
}
.h-10 {
height: 2.5rem;
}
.h-11 {
height: 2.75rem;
}
.h-12 {
height: 3rem;
}
.h-16 {
height: 4rem;
}
.h-24 {
height: 6rem;
}
.h-28 {
height: 7rem;
}
.h-32 {
height: 8rem;
}
.h-48 {
height: 12rem;
}
.h-64 {
height: 16rem;
}
.h-96 {
height: 24rem;
}
.min-h-screen {
min-height: 100vh;
}
/* --- Positioning & Z-Index --- */
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.top-0 {
top: 0;
}
.top-3 {
top: 0.75rem;
}
.top-4 {
top: 1rem;
}
.right-4 {
right: 1rem;
}
.top-24 {
top: 6rem;
}
.-bottom-2 {
bottom: -0.5rem;
}
.-right-2 {
right: -0.5rem;
}
.left-0 {
left: 0;
}
.left-3 {
left: 0.75rem;
}
.right-0 {
right: 0;
}
.z-50 {
z-index: 50;
}
.z-100 {
z-index: 100;
}
/* --- Typography --- */
.font-bold {
font-weight: bold;
}
.font-semibold {
font-weight: 600;
}
.font-medium {
font-weight: 500;
}
.leading-tight {
line-height: 1.2;
}
.leading-relaxed {
line-height: 1.625;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-xs {
font-size: 0.75rem;
}
.text-sm {
font-size: 0.875rem;
}
.text-base {
font-size: 1rem;
}
.text-lg {
font-size: 1.125rem;
}
.text-xl {
font-size: 1.25rem;
}
.text-2xl {
font-size: 1.5rem;
}
.text-3xl {
font-size: 1.875rem;
}
.text-4xl {
font-size: 2.25rem;
}
.lg\:text-4xl {
font-size: 2.25rem;
}
.text-muted-foreground {
color: var(--muted-foreground);
}
.text-primary {
color: var(--shrivas-bg-blue);
}
.text-primary-foreground {
color: var(--primary-foreground);
}
.text-background {
color: var(--background);
}
.text-background\/80 {
color: rgba(255, 255, 255, 0.8);
}
.text-background\/60 {
color: rgba(255, 255, 255, 0.6);
}
.text-blue-500 {
color: #3b82f6;
}
.text-blue-700 {
color: #1d4ed8;
}
.text-gray-600 {
color: #4b5563;
}
.text-gray-100 {
color: #f3f4f6;
}
.underline {
text-decoration: underline;
}
/* --- Color & Background Utilities --- */
.bg-background {
background: var(--background);
}
.bg-foreground {
background: var(--foreground);
}
.bg-white\/90 {
background-color: #ffffffe6;
}
.bg-primary {
background: var(--primary);
}
.bg-primary\/10 {
background: rgba(56, 189, 248, 0.1);
}
.bg-black\/0 {
background: rgba(0, 0, 0, 0);
}
.bg-black\/20 {
background: rgba(0, 0, 0, 0.2);
}
.bg-medical-blue-light {
background: hsl(210, 60%, 85%);
}
.bg-medical-gray\/30 {
background: rgba(241, 245, 249, 0.3);
}
.bg-gradient-to-br {
background: linear-gradient(
135deg,
var(--medical-blue-light),
var(--background)
);
}
.bg-gradient-to-r {
background: linear-gradient(
90deg,
rgba(56, 189, 248, 0.1),
rgba(45, 212, 191, 0.1)
);
}
.from-primary\/10 {
background: rgba(56, 189, 248, 0.1);
}
.to-medical-teal\/10 {
background: rgba(45, 212, 191, 0.1);
}
.--tw-gradient-to-position {
}
/* --- Effects & Transitions --- */
.shadow-card {
box-shadow: 0 2px 10px -1px rgba(56, 189, 248, 0.05);
}
.shadow-medical {
box-shadow: 0 4px 20px -2px rgba(56, 189, 248, 0.1);
}
.shadow-sm {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: var(--radius);
}
.rounded-md {
border-radius: 0.375rem;
}
.transition-colors {
transition-property:
color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
}
.transition-shadow {
transition: box-shadow 0.2s;
}
.transition-transform {
transition: transform 0.2s;
}
.transition-opacity {
transition: opacity 0.2s;
}
.duration-300 {
transition-duration: 300ms;
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.hover\:shadow-card:hover {
box-shadow: 0 2px 10px -1px rgba(56, 189, 248, 0.15);
}
.hover\:bg-primary\/80:hover {
background: rgba(56, 189, 248, 0.8);
}
.hover\:text-primary:hover {
color: var(--primary);
}
.hover\:bg-background\/10:hover {
background: rgba(255, 255, 255, 0.1);
}
.hover\:text-blue-700:hover {
color: #1d4ed8;
}
.hover\:underline:hover {
text-decoration: underline;
}
/* --- Flex & Grid --- */
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-end {
justify-content: flex-end;
}
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: 1fr;
}
.grid-cols-2 {
grid-template-columns: 1fr 1fr;
}
.grid-cols-3 {
grid-template-columns: 1fr 1fr 1fr;
}
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.gap-12 {
gap: 3rem;
}
.col-span-1 {
grid-column: span 1;
}
.col-span-2 {
grid-column: span 2;
}
.hidden {
display: none !important;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.group {
position: relative;
padding: 0;
}
.group-hover\:scale-105:hover {
transform: scale(1.05);
}
.group-hover\:opacity-100:hover {
opacity: 1;
}
.group-hover\:bg-black\/20:hover {
background: rgba(0, 0, 0, 0.2);
}
/* --- Misc --- */
.space-x-2 > :not(:last-child) {
margin-right: 0.5rem;
}
.space-x-3 > :not(:last-child) {
margin-right: 0.75rem;
}
.space-x-4 > :not(:last-child) {
margin-right: 1rem;
}
.space-x-6 > :not(:last-child) {
margin-right: 1.5rem;
}
.space-x-8 > :not(:last-child) {
margin-right: 2rem;
}
.space-y-1 > :not(:last-child) {
margin-bottom: 0.25rem;
}
.space-y-3 > :not(:last-child) {
margin-bottom: 0.75rem;
}
.space-y-4 > :not(:last-child) {
margin-bottom: 1rem;
}
.space-y-6 > :not(:last-child) {
margin-bottom: 1.5rem;
}
/* --- Animation Placeholders --- */
.animate-fade-in {
animation: fadeIn 0.8s ease;
}
.animate-slide-in-right {
animation: slideInRight 0.8s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* --- Utility for absolute fill --- */
.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
/* --- Utility for border color --- */
.border-border {
border-color: var(--border);
}
.border-primary\/20 {
border-color: rgba(56, 189, 248, 0.2);
}
/* --- Utility for font color --- */
.text-foreground {
color: var(--foreground);
}
/* --- Utility for background color --- */
.bg-black\/0 {
background: rgba(0, 0, 0, 0);
}
/* --- Utility for hover states --- */
.hover\:bg-accent:hover {
background: var(--accent);
}
.hover\:text-accent-foreground:hover {
color: var(--accent-foreground);
}
/* --- Utility for pointer events --- */
.pointer-events-none {
pointer-events: none;
}
/* --- Utility for disabled states --- */
.disabled\:pointer-events-none:disabled {
pointer-events: none;
}
.disabled\:opacity-50:disabled {
opacity: 0.5;
}
.icon-calendar,
.icon-clock,
.icon-users,
.icon-map-pin,
.icon-mail,
.icon-heart,
.icon-award,
.icon-graduation,
.icon-facebook,
.icon-twitter,
.icon-linkedin,
.icon-menu,
.icon-play,
.icon-zoom-in,
.icon-arrow-right {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.aspect-ratio {
aspect-ratio: 1 / 1;
}
.overflow-hidden {
overflow: hidden;
}
/* Gallery image styles */
/* .gallery-image:hover img {
transform: scale(1.1);
} */
.gallery-overlay {
position: absolute;
inset: 0;
background-color: hsl(var(--primary) / 0.2);
opacity: 0;
transition: opacity 0.3s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none; /* Allow clicks to pass through to the image */
}
.gallery-image:hover .gallery-overlay {
opacity: 1;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-3 {
margin-right: 0.75rem;
}
@media (min-width: 768px) {
.md\:col-span-2 {
grid-column: span 2 / span 2;
}
}
@media (min-width: 640px) {
.sm\:flex-row {
flex-direction: row !important;
}
}
/* Responsive Grid */
@media (min-width: 640px) {
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sm\:flex-row {
flex-direction: row;
}
}
@media (min-width: 768px) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.md\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.md\:flex {
display: flex;
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
/* Gradient backgrounds */
.gradient-to-right {
background-image: linear-gradient(
to right,
hsla(221, 83%, 58%, 0.1),
hsla(221, 83%, 58%, 0)
);
}
.to-medical-teal-10 {
--gradient-to: hsla(
var(--medical-teal-h),
var(--medical-teal-s),
var(--medical-teal-l),
0.1
);
}
.from-primary-10 {
--gradient-from: hsla(
var(--primary-h),
var(--primary-s),
var(--primary-l),
0.1
);
--gradient-to: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0);
--gradient-stops: var(--gradient-from), var(--gradient-to);
}
/* Text sizes */
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
/* Max width utilities */
.max-w-2xl {
max-width: 42rem;
}
/* Spacing utilities */
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
/* Flex utilities */
.justify-center {
justify-content: center;
}
.space-x-4 > * + * {
margin-left: 1rem;
}
/* Button size variants */
.btn-lg {
height: 3rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-size: 1rem;
line-height: 1.5rem;
}
/* Play icon */
.icon-play {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
/* Procedures Section Utilities */
.bg-medical-teal\/10 {
background: rgba(45, 212, 191, 0.1);
}
.text-medical-teal {
color: #14b8a6;
}
.bg-accent\/10 {
background: rgba(244, 63, 94, 0.1);
}
.text-accent {
color: #f43f5e;
}
.bg-medical-blue\/10 {
background: rgba(56, 189, 248, 0.1);
}
.text-medical-blue {
color: #38bdf8;
}
.bg-primary\/5 {
background: rgba(56, 189, 248, 0.05);
}
.to-medical-teal\/5 {
--tw-gradient-to: rgba(45, 212, 191, 0.05);
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.font-medium {
font-weight: 500;
}
.h-full {
height: 100%;
}
.border-border {
border-color: var(--border);
}
.hover\:bg-primary\/90:hover {
background: rgba(56, 189, 248, 0.9);
}
.hover\:bg-muted:hover {
background: var(--muted);
}
.icon-activity {
display: inline-block;
width: 2rem;
height: 2rem;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
/* .icon-clock { display: inline-block; width: 2rem; height: 2rem; background: url('data:image/svg+xml;utf8,') no-repeat center/contain; } */
.icon-scissors {
display: inline-block;
width: 2rem;
height: 2rem;
background: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
}
/* Lazy Loading Styles */
.lazy {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.lazy.loaded {
opacity: 1;
}
/* Gallery Image Loading States */
.gallery-image {
position: relative;
overflow: hidden;
break-inside: avoid;
margin-bottom: 1rem;
padding: 6px;
/* border-radius: 12px; */
background: rgba(255, 255, 255, 0.1); /* transparent white */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari support */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.gallery-image img {
width: 100%;
height: auto;
display: block;
/* object-fit: cover; */
transition:
transform 0.5s ease,
opacity 0.3s ease;
}
.gallery-image img.lazy {
opacity: 0;
}
.gallery-image img.loaded {
opacity: 1;
}
#gallery-grid {
column-count: 4;
}
/* Responsive columns */
@media (max-width: 1200px) {
#gallery-grid {
column-count: 3;
}
}
@media (max-width: 768px) {
#gallery-grid {
column-count: 2;
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
#gallery-grid {
column-count: 1;
}
}
/* Loading Placeholder */
.loading-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f3f4f6;
z-index: 2;
}
.loading-spinner {
width: 30px;
height: 30px;
border: 3px solid #e5e7eb;
border-top: 3px solid #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 8px;
}
.loading-text {
font-size: 12px;
color: #6b7280;
font-weight: 500;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Lightbox Styles */
.lightbox-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
}
.lightbox-content {
position: relative;
overflow: hidden;
max-width: 90%;
max-height: 90%;
}
.lightbox-content img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 0.5rem;
}
.lightbox-close {
position: absolute;
top: -40px;
right: 0;
background: none;
border: none;
color: white;
font-size: 30px;
cursor: pointer;
padding: 10px;
transition: color 0.2s ease;
}
.lightbox-close:hover {
color: #3b82f6;
}
/* Responsive Gallery Grid */
@media (max-width: 640px) {
.gallery-image {
min-height: 150px;
}
}
@media (max-width: 480px) {
.gallery-image {
min-height: 120px;
}
}
/* Mobile menu styles */
.nav-links-mobile {
max-height: 0;
transition: max-height 0.3s ease;
overflow: hidden;
background: var(--background);
border-top: 1px solid var(--border);
}
.nav-links-mobile.active {
max-height: 1200px;
}
.nav-links-mobile a {
transition: color 0.2s ease;
padding: 1rem;
font-size: 20px;
text-decoration: none;
display: block;
text-align: center;
border-bottom: 1px solid var(--border);
}
.nav-links-mobile a:last-child {
border-bottom: none;
}
.nav-links-mobile a:hover {
color: var(--primary);
background: var(--accent);
}
/* Desktop dropdown */
.nav-dropdown {
position: relative;
display: inline-flex;
align-items: center;
}
.nav-dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
cursor: pointer;
}
.nav-caret {
width: 0.45rem;
height: 0.45rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 0.2s ease;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
transform: translateY(1px) rotate(225deg);
}
.nav-dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 8px);
min-width: 13rem;
padding: 0.5rem 0;
background: var(--background);
border: 1px solid var(--border);
border-radius: 0.75rem;
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 60;
}
.nav-dropdown-menu::before {
content: "";
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translate(-50%, 4px);
}
.nav-dropdown-menu a {
display: block;
padding: 0.6rem 1.1rem;
white-space: nowrap;
text-decoration: none;
margin: 0;
}
.nav-dropdown-menu a:hover {
background: var(--accent);
color: var(--primary);
}
/* Mobile grouped links */
.nav-mobile-group {
border-bottom: 1px solid var(--border);
}
.nav-mobile-label {
display: block;
padding: 1rem 1rem 0.35rem;
text-align: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted-foreground);
}
.nav-links-mobile .nav-mobile-sub {
font-size: 17px;
padding: 0.7rem 1rem;
border-bottom: 0;
}
.cursor-pointer {
cursor: pointer;
}
.each-post img {
width: 100%;
}
.circle-bg {
position: relative;
width: 420px;
height: 420px;
background-color: #92b4c9;
border-radius: 50%;
}
.circle-bg .ragahvi-header {
position: absolute;
width: 320px;
left: 10%;
top: 20px;
}
.throat-svg {
position: absolute;
background-color: #fff;
border-radius: 50%;
padding: 10px;
width: 40px;
height: 40px;
right: 6%;
top: 10%;
}
.whatsapp-float {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
z-index: 1000;
cursor: pointer;
text-decoration: none;
background-color: white;
border-radius: 50%;
}
/* floating whatsapp button with circular text around the icon */
.whatsapp-float {
position: fixed;
width: 90px;
height: 90px;
bottom: 40px;
right: 40px;
z-index: 1000;
cursor: pointer;
text-decoration: none;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
}
/* svg that draws text around the button's perimeter */
.whatsapp-text-circle {
position: absolute;
top: 4px;
left: 0;
width: 100%;
height: 100%;
/* rotate so the text path starts at the top instead of the right */
transform: rotate(-90deg);
pointer-events: none;
}
.whatsapp-text-circle text {
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
fill: #333;
}
.whatsapp-icon {
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
box-shadow: 2px 6px 19px var(--secondary);
transition: transform 0.3s ease;
}
.whatsapp-icon:hover {
transform: scale(1.1);
}
/* Legacy: the header no longer switches to position:fixed on scroll.
The nav itself is position:sticky, which avoids the layout jump. */
.menu_fixed {
background-color: #fff;
}
@media (max-width: 768px) {
.circle-bg {
width: 300px;
height: 300px;
}
.circle-bg .ragahvi-header {
width: 220px;
left: 5%;
}
.throat-svg {
right: 4%;
top: 8%;
}
}
@media (max-width: 400px) {
.circle-bg {
width: 200px;
height: 200px;
}
.circle-bg .ragahvi-header {
width: 170px;
left: 5%;
}
.throat-svg {
right: 4%;
top: 8%;
}
}
.shorts-section {
max-width: 100%;
padding: 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.shorts-title {
font-size: 1.8rem;
margin-bottom: 4px;
padding-left: 10px;
color: #111;
}
.shorts-slider-wrapper {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
background: #000;
}
.shorts-slide.active {
opacity: 1;
z-index: 1;
}
.shorts-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: white;
color: #333;
font-size: 20px;
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
cursor: pointer;
z-index: 10;
transition:
background 0.2s ease,
transform 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.shorts-nav:hover {
background: #f0f0f0;
transform: translateY(-50%) scale(1.05);
}
.shorts-nav.prev {
left: 0px;
background-color: var(--primary);
color: white;
}
.shorts-nav.next {
right: 0px;
background-color: var(--primary);
color: white;
}
@media (max-width: 500px) {
.shorts-nav.prev {
left: 5px;
}
.shorts-nav.next {
right: 5px;
}
/* .shorts-slider-wrapper {
width: 90%;
} */
}
#moveToTopBtn {
position: fixed;
bottom: 50px;
left: 50px;
z-index: 50;
background-color: #1e40af72; /* blue-800 */
color: white;
border: none;
outline: none;
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
display: none; /* Hidden by default */
transition:
opacity 0.3s,
transform 0.3s;
}
#moveToTopBtn:hover {
background-color: #2563eb; /* blue-600 */
transform: scale(1.1);
}
/* Instagrram */
.insta-slider-section {
max-width: 100%;
padding: 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.insta-slider-wrapper {
position: relative;
width: 320px;
min-height: 520px;
margin: 0 auto;
overflow: hidden;
}
.insta-slider {
position: relative;
width: 100%;
height: 100%;
}
.insta-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 0.4s ease-in-out;
z-index: 0;
}
.insta-slide.active {
opacity: 1;
z-index: 1;
}
.insta-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: white;
color: #333;
font-size: 20px;
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.insta-nav:hover {
background: #f0f0f0;
}
.insta-nav.prev {
left: 0;
background-color: var(--primary);
color: white;
}
.insta-nav.next {
right: 0;
background-color: var(--primary);
color: white;
}
@media (max-width: 500px) {
.insta-nav.prev {
left: 5px;
}
.insta-nav.next {
right: 5px;
}
/* .insta-slider-wrapper {
width: 90%;
} */
}
.permalink-blog {
color: #000;
font-weight: 600;
font-size: 1.2rem;
text-decoration: none;
}
.blog-details-hero {
padding: 3rem;
}
.shorts-logo {
width: 26px;
height: 26px;
padding-top: 4px;
}
.company-name {
color: var(--primary-foreground);
text-decoration: none;
}
.event_registration {
display: none;
}
#home {
background-color: var(--shrivas-bg-blue);
}
/* --- Home hero (styled after the VASCON 2026 hero) --- */
.hero-home {
--hero-blue: var(--shrivas-bg-blue, #005a86);
--hero-teal: #1aa6b7;
--hero-brand-2: var(--accent, #2563eb);
--hero-line: rgba(255, 255, 255, 0.24);
--hero-glass: rgba(255, 255, 255, 0.14);
--hero-radius: 0.5rem;
--hero-radius-lg: 0.85rem;
position: relative;
overflow: hidden;
color: #fff;
background:
radial-gradient(900px 420px at 18% 12%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
radial-gradient(820px 460px at 86% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 62%),
linear-gradient(135deg, var(--hero-blue), var(--hero-teal));
border-bottom: 1px solid var(--hero-line);
}
.hero-home * {
box-sizing: border-box;
}
.hero-home::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='520' viewBox='0 0 920 520'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0.55'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0.0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='2'%3E%3Cpath d='M20 250 C 120 210, 160 310, 260 270 C 360 230, 400 340, 520 290 C 640 240, 700 320, 820 280'/%3E%3Cpath d='M40 310 C 140 270, 190 360, 290 320 C 390 280, 430 390, 560 340 C 690 290, 750 370, 880 330'/%3E%3Cpath d='M70 120 C 140 140, 190 170, 250 210 C 310 250, 370 290, 450 300 C 540 310, 620 280, 690 230 C 750 190, 790 150, 860 130'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1'%3E%3Ccircle cx='760' cy='120' r='80'/%3E%3Ccircle cx='760' cy='120' r='140'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 75% 35%;
background-size: 900px auto;
}
.hero-inner {
position: relative;
z-index: 1;
padding-top: 42px;
padding-bottom: 18px;
}
.hero-layout {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
align-items: center;
}
.hero-kicker {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.26);
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
}
.hero-title {
margin: 14px 0 12px;
letter-spacing: -0.02em;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.1;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
max-width: 24ch;
}
.hero-subtitle {
margin: 0 0 18px;
color: rgba(255, 255, 255, 0.92);
font-size: 16px;
line-height: 1.55;
max-width: 62ch;
}
.hero-main-grid {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
align-items: center;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.hero-stat {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: var(--hero-radius-lg);
border: 1px solid rgba(255, 255, 255, 0.22);
background: var(--hero-glass);
backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.95);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.hero-stat-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.95);
font-size: 1.05rem;
}
.hero-stat-value {
font-size: 1.25rem;
font-weight: 850;
letter-spacing: -0.01em;
line-height: 1.1;
}
.hero-stat-label {
font-size: 13px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.88);
margin-top: 2px;
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.hero-home .btn {
padding: 0.65em 1.25em;
border: 1px solid transparent;
border-radius: 0.375rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 120ms ease;
}
.hero-home .btn:hover {
transform: translateY(-1px);
}
.hero-btn-primary {
background: rgba(255, 255, 255, 0.96);
color: var(--hero-blue);
border-color: rgba(255, 255, 255, 0.26);
}
.hero-btn-primary:hover {
background: #fff;
color: var(--hero-blue);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}
.hero-btn-ghost {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.24);
}
.hero-btn-ghost:hover {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.hero-locations {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 8px;
padding: 12px 0;
}
.hero-locations-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
margin-right: 2px;
}
.hero-locations-label svg {
width: 16px;
height: 16px;
fill: none;
stroke: #ffd166;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-location {
display: inline-flex;
align-items: center;
padding: 7px 13px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
color: var(--hero-blue);
font-size: 13px;
font-weight: 700;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.26);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
transition: transform 120ms ease, box-shadow 0.2s;
}
.hero-location:hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
color: var(--hero-blue);
}
.hero-doctor {
text-align: center;
}
.hero-doctor .circle-bg {
margin: 0 auto 14px;
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14);
}
.hero-doctor-name {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.01em;
color: #fff;
margin: 0 0 2px;
}
.hero-doctor-role {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
margin: 0 0 8px;
}
.hero-doctor-creds {
font-size: 13px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
.hero-brand {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
align-self: center;
padding: 22px 20px;
border-radius: 18px;
background: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
color: #0f172a;
}
.hero-brand-logo {
display: block;
width: 100%;
max-width: 300px;
height: auto;
}
.hero-brand-rule {
display: block;
width: 56px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--hero-blue), var(--hero-teal));
margin: 14px 0 12px;
}
.hero-brand-tagline {
margin: 0;
font-size: clamp(24px, 2.4vw, 30px);
line-height: 1.1;
font-weight: 850;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--hero-blue), var(--hero-teal));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-brand-sub {
margin: 8px 0 0;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #475569;
}
.hero-wave {
height: 22px;
margin-top: 18px;
opacity: 0.65;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' viewBox='0 0 1200 40'%3E%3Cpath d='M0 22 C 120 6, 240 38, 360 22 C 480 6, 600 38, 720 22 C 840 6, 960 38, 1080 22 C 1140 14, 1170 10, 1200 12' fill='none' stroke='%23ffffff' stroke-opacity='0.65' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1200px 40px;
background-position: center;
}
@media (min-width: 640px) {
.hero-main-grid {
grid-template-columns: 1.15fr 1fr;
}
}
@media (min-width: 1024px) {
.hero-layout {
grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
gap: 28px;
}
.hero-inner {
padding-top: 56px;
}
.hero-home .circle-bg {
width: 300px;
height: 300px;
}
.hero-home .circle-bg .ragahvi-header {
width: 236px;
left: 10%;
top: 12px;
}
}
@media (max-width: 768px) {
.hero-wave {
background-size: 900px 40px;
}
}
/* --- About Me --- */
.about-me {
--am-blue: var(--shrivas-bg-blue, #005a86);
--am-teal: #1aa6b7;
padding: 4.5rem 0;
background:
radial-gradient(900px 420px at 10% 0%, rgba(0, 90, 134, 0.08), rgba(0, 90, 134, 0) 62%),
radial-gradient(800px 420px at 92% 20%, rgba(26, 166, 183, 0.08), rgba(26, 166, 183, 0) 62%),
var(--background);
border-bottom: 1px solid var(--border);
}
.about-me * {
box-sizing: border-box;
}
.about-me-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: start;
}
.about-me-media {
max-width: 420px;
margin: 0 auto;
width: 100%;
}
.about-me-photo {
position: relative;
border-radius: 1.25rem;
padding: 6px;
background: linear-gradient(135deg, var(--am-blue), var(--am-teal));
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}
.about-me-photo img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: calc(1.25rem - 6px);
}
.about-me-highlights {
list-style: none;
margin: 1.25rem 0 0;
padding: 0;
display: grid;
gap: 0.75rem;
}
.about-me-highlights li {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1rem;
background: var(--card, #fff);
border: 1px solid var(--border);
border-radius: 0.85rem;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
.about-me-highlight-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 90, 134, 0.14), rgba(26, 166, 183, 0.14));
border: 1px solid rgba(0, 90, 134, 0.18);
}
.about-me-highlight-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: rgba(0, 90, 134, 0.95);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.about-me-highlight-title {
font-weight: 700;
font-size: 0.95rem;
line-height: 1.3;
color: var(--foreground);
}
.about-me-highlight-text {
font-size: 0.8rem;
color: var(--muted-foreground);
margin-top: 2px;
}
.about-me-eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--am-teal);
margin-bottom: 0.75rem;
}
.about-me-name {
margin: 0 0 0.35rem;
line-height: 1.15;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--am-blue), var(--am-teal));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.about-me-role {
margin: 0 0 1rem;
font-size: 1.125rem;
font-weight: 600;
color: var(--foreground);
}
.about-me-tags {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.about-me-tags li {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.85rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
color: var(--am-blue);
background: rgba(0, 90, 134, 0.08);
border: 1px solid rgba(0, 90, 134, 0.16);
}
.about-me-intro p,
.about-me-more-body p {
margin: 0 0 1rem;
font-size: 1.0625rem;
line-height: 1.75;
color: var(--muted-foreground);
}
.about-me-intro p:first-child {
font-size: 1.125rem;
color: var(--foreground);
font-weight: 500;
}
.about-me-more-row {
margin-top: 0.75rem;
}
.about-me-more-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65em 1.3em;
border-radius: 0.375rem;
border: 1px solid transparent;
font-weight: 600;
color: #fff !important;
background: linear-gradient(135deg, var(--am-blue), var(--am-teal));
box-shadow: 0 10px 24px rgba(0, 90, 134, 0.22);
text-decoration: none;
transition: transform 120ms ease, box-shadow 0.2s;
}
.about-me-more-btn:hover {
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(0, 90, 134, 0.28);
}
.about-me-more-arrow {
transition: transform 0.2s ease;
}
.about-me-more-btn:hover .about-me-more-arrow {
transform: translateX(3px);
}
.about-me-h3 {
--am-blue: var(--shrivas-bg-blue, #005a86);
--am-teal: #1aa6b7;
position: relative;
margin: 1.75rem 0 0.75rem;
padding-left: 1rem;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--foreground);
}
.about-me-h3:first-child {
margin-top: 0;
}
.about-me-h3::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
bottom: 0.2em;
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, var(--am-blue), var(--am-teal));
}
@media (min-width: 1024px) {
.about-me-grid {
grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
gap: 3.5rem;
}
.about-me-media {
position: sticky;
top: 7rem;
margin: 0;
}
}
/* --- Services (tabbed, styled after the VASCON schedule) --- */
.services {
--sv-blue: var(--shrivas-bg-blue, #005a86);
--sv-teal: #1aa6b7;
--sv-line: rgba(15, 23, 42, 0.12);
padding: 4.5rem 0;
background:
radial-gradient(900px 420px at 10% 0%, rgba(0, 90, 134, 0.1), rgba(0, 90, 134, 0) 62%),
radial-gradient(800px 420px at 92% 20%, rgba(26, 166, 183, 0.1), rgba(26, 166, 183, 0) 62%),
var(--muted, #f8fafc);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.services * {
box-sizing: border-box;
}
.services-head {
text-align: center;
max-width: 760px;
margin: 0 auto 1.75rem;
}
.services-eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sv-teal);
margin-bottom: 0.75rem;
}
.services-title {
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--sv-blue), var(--sv-teal));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.services-lead {
margin: 0;
color: var(--muted-foreground);
line-height: 1.65;
font-size: 1.0625rem;
}
.services-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 14px;
}
.services-tab {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--sv-line);
background: rgba(255, 255, 255, 0.75);
color: var(--foreground);
padding: 10px 16px 10px 12px;
border-radius: 999px;
cursor: pointer;
font: inherit;
font-weight: 650;
font-size: 14px;
transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.services-tab:hover {
border-color: rgba(0, 90, 134, 0.35);
background: rgba(255, 255, 255, 0.98);
}
.services-tab-icon {
width: 28px;
height: 28px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 90, 134, 0.14), rgba(26, 166, 183, 0.14));
border: 1px solid rgba(0, 90, 134, 0.18);
transition: background 120ms ease, border-color 120ms ease;
}
.services-tab-icon svg {
width: 16px;
height: 16px;
fill: none;
stroke: rgba(0, 90, 134, 0.95);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 120ms ease;
}
.services-tab[aria-selected="true"] {
color: #fff;
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}
.services-tab[aria-selected="true"] .services-tab-icon {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.22);
}
.services-tab[aria-selected="true"] .services-tab-icon svg {
stroke: #fff;
}
.services-tab:nth-child(1)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(0, 90, 134, 1), rgba(26, 166, 183, 1));
}
.services-tab:nth-child(2)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(26, 166, 183, 1), rgba(0, 90, 134, 1));
}
.services-tab:nth-child(3)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(0, 90, 134, 1), rgba(0, 130, 168, 1));
}
.services-tab:nth-child(4)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(26, 166, 183, 1), rgba(0, 90, 134, 0.95));
}
.services-tab:nth-child(5)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(0, 65, 102, 1), rgba(0, 90, 134, 1));
}
.services-tab:nth-child(6)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(0, 90, 134, 1), rgba(0, 65, 102, 1));
}
.services-panel {
margin-top: 18px;
}
.services-panel[hidden] {
display: none !important;
}
.services-card {
position: relative;
overflow: hidden;
background: var(--card, #fff);
border: 1px solid var(--border);
border-radius: 0.85rem;
padding: 1.75rem;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
.services-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 3px;
width: 100%;
background: linear-gradient(90deg, var(--sv-blue), var(--sv-teal));
opacity: 0.85;
}
.services-card-title {
margin: 0 0 0.75rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--foreground);
text-align: center;
}
.services-card-sub {
margin: -0.25rem auto 1rem;
text-align: center;
font-size: 1.125rem;
font-weight: 600;
font-style: italic;
color: var(--sv-teal);
}
.services-card-text + .services-card-text {
margin-top: 1rem;
}
.services-card-text {
margin: 0 auto;
max-width: 56rem;
text-align: center;
font-size: 1.0625rem;
line-height: 1.75;
color: var(--muted-foreground);
}
.services-image {
margin-top: 1.75rem;
text-align: center;
}
.services-image img {
width: 100%;
max-width: 900px;
max-height: 520px;
object-fit: cover;
border-radius: 1rem;
box-shadow: var(--shadow-hover, 0 18px 38px rgba(15, 23, 42, 0.16));
}
.services-more-body {
text-align: left;
max-width: 56rem;
margin: 1.5rem auto 0;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
.services-more-body p {
margin: 0 0 1rem;
font-size: 1.0625rem;
line-height: 1.75;
color: var(--muted-foreground);
}
.services-h4 {
position: relative;
margin: 1.75rem 0 0.75rem;
padding-left: 1rem;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--foreground);
}
.services-h4:first-child {
margin-top: 0;
}
.services-h4::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
bottom: 0.2em;
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, var(--sv-blue), var(--sv-teal));
}
.services-list {
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0.6rem 1.25rem;
}
.services-list li {
position: relative;
padding-left: 1.75rem;
font-size: 1rem;
line-height: 1.55;
color: var(--foreground);
}
.services-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 1.05rem;
height: 1.05rem;
border-radius: 50%;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E") center / 60% no-repeat,
linear-gradient(135deg, var(--sv-blue), var(--sv-teal));
}
.services-more-body .services-pull {
margin: 0 0 1rem;
padding: 0.75rem 1.25rem;
border-left: 4px solid var(--sv-teal);
border-radius: 0 0.5rem 0.5rem 0;
background: rgba(26, 166, 183, 0.08);
font-size: 1.15rem;
font-weight: 600;
font-style: italic;
color: var(--sv-blue);
}
.services-tagline {
margin: 1.5rem 0 0 !important;
padding: 1rem 1.25rem;
border-radius: 0.75rem;
background: linear-gradient(135deg, rgba(0, 90, 134, 0.08), rgba(26, 166, 183, 0.08));
border: 1px solid rgba(0, 90, 134, 0.16);
color: var(--sv-blue) !important;
font-weight: 600;
text-align: center;
}
@media (min-width: 640px) {
.services-list {
grid-template-columns: 1fr 1fr;
}
}
.services-more-row {
margin-top: 1.5rem;
text-align: center;
}
.services-more-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65em 1.3em;
border-radius: 0.375rem;
border: 1px solid transparent;
font-weight: 600;
color: #fff !important;
background: linear-gradient(135deg, var(--sv-blue), var(--sv-teal));
box-shadow: 0 10px 24px rgba(0, 90, 134, 0.22);
text-decoration: none;
transition: transform 120ms ease, box-shadow 0.2s;
}
.services-more-btn:hover {
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(0, 90, 134, 0.28);
}
.services-more-arrow {
transition: transform 0.2s ease;
}
.services-more-btn:hover .services-more-arrow {
transform: translateX(3px);
}
.services-placeholder {
text-align: center;
padding: 3rem 1.75rem;
}
.services-placeholder p {
margin: 0;
color: var(--muted-foreground);
font-size: 1.0625rem;
}
@media (max-width: 640px) {
.services-tab {
font-size: 13px;
padding: 8px 12px 8px 8px;
}
.services-card {
padding: 1.25rem;
}
.services-card-text {
text-align: left;
}
}
/* =====================================================================
Dual-tone accent layer: warm amber against the blue/teal base.
Applies to the home page, Services, Voice Gym and doctor pages.
===================================================================== */
:root {
--accent-gold: #f2b632;
--accent-gold-deep: #d99a14;
--accent-gold-soft: rgba(242, 182, 50, 0.16);
--accent-ink: #0b2a3a;
}
/* Eyebrow labels */
.home-page .hp-eyebrow,
.hp-eyebrow,
.about-me-eyebrow,
.services-eyebrow,
.vg-eyebrow,
.sp-eyebrow,
.dr-eyebrow {
color: var(--accent-gold-deep);
}
.home-page .hp-eyebrow--light,
.hp-eyebrow--light,
.vg-eyebrow--light,
.sp-eyebrow--light {
color: var(--accent-gold);
}
/* Card top stripes and accent bars */
.home-page .service-card::before,
.home-page #procedures .card::before,
.home-page #doctors .card::before,
.home-page #news .card::before,
.home-page .hp-cta-card::before,
.home-page .testimonial-card::before,
.services-card::before,
.vg-card::before,
.dr-page .card::before {
background: linear-gradient(90deg, var(--hero-blue, #005a86) 0%, #1aa6b7 55%, var(--accent-gold) 100%);
opacity: 1;
}
.about-me-h3::before,
.services-h4::before {
background: linear-gradient(180deg, var(--accent-gold), var(--accent-gold-deep));
}
.about-me-highlight-icon,
.vg-icon,
.home-page #procedures .card .w-16,
.services-tab-icon {
background: linear-gradient(135deg, var(--accent-gold-soft), rgba(242, 182, 50, 0.28));
border-color: rgba(217, 154, 20, 0.35);
}
.about-me-highlight-icon svg,
.vg-icon svg,
.services-tab-icon svg,
.home-page #procedures .card .w-16 svg {
stroke: var(--accent-gold-deep);
}
.services-tab[aria-selected="true"] .services-tab-icon {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.28);
}
.services-tab[aria-selected="true"] .services-tab-icon svg {
stroke: var(--accent-gold);
}
/* Hero accents */
.vg-hero .vg-pills li strong,
.hero-doctor-role,
.dr-hero-role {
color: var(--accent-gold);
}
.hero-stat-icon {
background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-deep));
border-color: rgba(242, 182, 50, 0.6);
color: #fff;
}
.hero-stat-icon .icon-award::before {
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.hero-stat-icon .icon-users::before {
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.hero-stat-icon .icon-heart::before {
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.hero-brand-rule,
.vg-hero-rule {
background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-deep));
}
.hero-doctor .circle-bg,
.vg-doctor-photo,
.about-me-photo,
.dr-hero-photo {
box-shadow: 0 0 0 4px rgba(242, 182, 50, 0.55), 0 18px 38px rgba(0, 0, 0, 0.2);
}
.about-me-photo,
.vg-doctor-photo {
background: linear-gradient(135deg, var(--hero-blue, #005a86), var(--accent-gold));
}
/* Gradient section titles: keep blue base, warm the tail */
.hp-h2,
.about-me-name,
.services-title,
.vg-h2,
.sp-h2,
.dr-h2,
.hero-brand-tagline,
.vg-hero-tagline {
background: linear-gradient(135deg, #005a86 0%, #1aa6b7 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hp-h2--light,
.vg-h2--light,
.sp-h2--light {
background: none;
-webkit-text-fill-color: initial;
color: #fff;
}
/* Primary call-to-action buttons go amber with navy text */
.home-page .hp-btn,
.services-more-btn,
.about-me-more-btn,
.about-me-more summary,
.vg-btn-primary,
.sp-btn-primary,
.dr-btn-primary,
.hero-btn-primary {
background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-deep) 100%);
color: var(--accent-ink) !important;
border-color: rgba(217, 154, 20, 0.5);
box-shadow: 0 10px 24px rgba(217, 154, 20, 0.3);
}
.home-page .hp-btn:hover,
.services-more-btn:hover,
.about-me-more-btn:hover,
.vg-btn-primary:hover,
.sp-btn-primary:hover,
.dr-btn-primary:hover,
.hero-btn-primary:hover {
background: linear-gradient(135deg, #f7c34a 0%, var(--accent-gold) 100%);
box-shadow: 0 16px 32px rgba(217, 154, 20, 0.38);
color: var(--accent-ink) !important;
}
.home-page .hp-btn--light {
background: rgba(255, 255, 255, 0.96);
color: var(--hp-blue) !important;
box-shadow: none;
border-color: rgba(255, 255, 255, 0.26);
}
.home-page .hp-btn--light:hover {
background: #fff;
color: var(--hp-blue) !important;
}
.hero-location {
color: var(--accent-ink);
background: linear-gradient(135deg, #fff 0%, #ffe9b3 100%);
}
/* Lists, ratings, FAQ */
.services-list li::before,
.vg-list li::before,
.dr-page .card li .bg-primary {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2a3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E") center / 60% no-repeat,
linear-gradient(135deg, var(--accent-gold), var(--accent-gold-deep));
}
.home-page .star {
fill: var(--accent-gold);
}
.home-page .dot.active {
background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-deep));
}
.home-page .faq-question .icon {
background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-deep));
color: var(--accent-ink);
}
.home-page .faq-question:hover,
.home-page .faq-item.active .faq-question {
background: linear-gradient(135deg, rgba(242, 182, 50, 0.14), rgba(0, 90, 134, 0.06));
}
.home-page #news .card .badge,
.dr-page .card .badge,
.home-page #doctors .card .badge {
background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-deep));
color: var(--accent-ink);
}
.vg-num,
.vg-step-num,
.services-more-arrow {
background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-deep));
color: var(--accent-ink);
}
.services-more-arrow {
background: none;
}
.vg-program--elite .vg-num {
background: var(--accent-gold);
color: var(--accent-ink);
}
.vg-card-sub,
.services-card-sub,
.vg-tags li,
.about-me-tags li,
.dr-tags li {
color: var(--accent-gold-deep);
}
.vg-tags li,
.about-me-tags li {
background: var(--accent-gold-soft);
border-color: rgba(217, 154, 20, 0.35);
}
.dr-tags li {
background: #fff3d1;
}
.services-tagline,
.vg-quote--big {
background: linear-gradient(135deg, rgba(242, 182, 50, 0.16), rgba(0, 90, 134, 0.06));
border-color: rgba(217, 154, 20, 0.35);
}
.services-more-body .services-pull,
.vg-quote {
border-left-color: var(--accent-gold);
background: rgba(242, 182, 50, 0.12);
}
.sp-jump .sp-jump--ext {
background: var(--accent-gold);
color: var(--accent-ink);
}
.vg-brand-rule,
.vg-hero-rule,
.hero-brand-rule,
.about-me-highlight-title {
color: inherit;
}
/* A warm glow in the corner of every dark band */
.hero-home,
.home-page .hp-dark,
.vg-hero,
.sp-hero,
.dr-hero,
.vg-cta-band,
.sp-cta {
background-image:
radial-gradient(700px 360px at 92% 100%, rgba(242, 182, 50, 0.22), rgba(242, 182, 50, 0) 65%),
radial-gradient(900px 420px at 18% 12%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
linear-gradient(135deg, #005a86, #1aa6b7);
}
/* =====================================================================
Home page v2 hero: specialty-led banner with photo background,
action tiles and a trust strip below.
===================================================================== */
.hero-v2 {
position: relative;
overflow: hidden;
color: #fff;
background: #00466b;
}
.hero-v2-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-v2-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.35;
filter: saturate(0.85);
}
.hero-v2-bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(700px 360px at 92% 100%, rgba(242, 182, 50, 0.26), rgba(242, 182, 50, 0) 65%),
linear-gradient(100deg, rgba(0, 70, 107, 0.96) 0%, rgba(0, 90, 134, 0.88) 45%, rgba(26, 166, 183, 0.55) 100%);
}
.hero-v2-inner {
position: relative;
z-index: 1;
padding-top: 64px;
padding-bottom: 48px;
}
.hero-v2-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: center;
}
.hero-v2-kicker {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.24);
font-size: 13px;
color: rgba(255, 255, 255, 0.95);
}
.hero-v2-title {
margin: 18px 0 12px;
font-size: clamp(34px, 4.6vw, 58px);
line-height: 1.04;
font-weight: 800;
letter-spacing: -0.025em;
color: #fff;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
max-width: 16ch;
}
.hero-v2-sub {
margin: 0;
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.55;
color: rgba(255, 255, 255, 0.92);
max-width: 52ch;
}
.hero-v2-sub strong {
color: var(--accent-gold, #f2b632);
font-weight: 700;
}
.hero-v2-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
}
.hero-v2-btn {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.8em 1.5em;
border-radius: 0.5rem;
font-weight: 700;
text-decoration: none;
color: #0b2a3a !important;
background: linear-gradient(135deg, #f2b632, #d99a14);
box-shadow: 0 12px 28px rgba(217, 154, 20, 0.35);
transition: transform 120ms ease, box-shadow 0.2s;
}
.hero-v2-btn:hover {
transform: translateY(-1px);
box-shadow: 0 18px 36px rgba(217, 154, 20, 0.45);
}
.hero-v2-link {
color: #fff;
font-weight: 600;
text-decoration: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}
.hero-v2-link:hover {
border-bottom-color: #fff;
color: #fff;
}
.hero-v2-side {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.hero-v2-doctor {
position: relative;
width: 100%;
max-width: 380px;
border-radius: 1.25rem;
overflow: hidden;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 0 0 4px rgba(242, 182, 50, 0.45), 0 24px 48px rgba(0, 0, 0, 0.3);
}
.hero-v2-doctor img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: top center;
}
.hero-v2-doctor-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 14px 16px 16px;
background: linear-gradient(180deg, rgba(0, 46, 70, 0) 0%, rgba(0, 46, 70, 0.92) 55%);
display: flex;
flex-direction: column;
gap: 2px;
}
.hero-v2-doctor-caption strong {
font-size: 1.05rem;
color: #fff;
}
.hero-v2-doctor-caption span {
font-size: 12px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.85);
}
.hero-v2-gym {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 380px;
padding: 16px 18px 14px;
border-radius: 1rem;
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 0 4px rgba(242, 182, 50, 0.45), 0 18px 38px rgba(0, 0, 0, 0.28);
text-decoration: none;
transition: transform 120ms ease, box-shadow 0.2s;
}
.hero-v2-gym:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 4px rgba(242, 182, 50, 0.65), 0 24px 46px rgba(0, 0, 0, 0.32);
}
.hero-v2-gym img {
display: block;
width: 100%;
max-width: 300px;
height: auto;
}
.hero-v2-gym-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
margin-top: 10px;
padding-top: 10px;
border-top: 2px solid #f2b632;
width: 100%;
text-align: center;
}
.hero-v2-gym-text strong {
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.01em;
color: #005a86;
}
.hero-v2-gym-text span {
font-size: 12px;
font-weight: 600;
color: #d99a14;
}
.hero-v2-tiles {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 40px;
}
.hero-v2-tile {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 0.85rem;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(8px);
color: #fff;
text-decoration: none;
transition: background 0.2s, transform 120ms ease;
}
.hero-v2-tile:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
color: #fff;
}
.hero-v2-tile-icon {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f2b632, #d99a14);
}
.hero-v2-tile-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-v2-tile-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.hero-v2-tile-text strong {
font-size: 0.98rem;
}
.hero-v2-tile-text span {
font-size: 12px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.82);
}
.hero-v2-tile-arrow {
margin-left: auto;
color: var(--accent-gold, #f2b632);
font-weight: 700;
transition: transform 0.2s ease;
}
.hero-v2-tile:hover .hero-v2-tile-arrow {
transform: translateX(3px);
}
.hero-v2-tile--gym {
background: rgba(242, 182, 50, 0.18);
border-color: rgba(242, 182, 50, 0.45);
}
.hero-v2-tile--gym .hero-v2-tile-icon {
background: #fff;
}
.hero-v2-tile--gym .hero-v2-tile-icon svg {
stroke: #d99a14;
}
.trust-strip {
background: var(--background, #fff);
border-bottom: 1px solid var(--border);
}
.trust-strip-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
padding-top: 18px;
padding-bottom: 18px;
}
.trust-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 10px 8px;
border-right: 1px solid var(--border);
}
.trust-item:nth-child(2n) {
border-right: 0;
}
.trust-item strong {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #005a86, #1aa6b7);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.trust-item span {
font-size: 0.85rem;
color: var(--muted-foreground);
}
@media (min-width: 640px) {
.hero-v2-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.hero-v2-grid {
grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
gap: 48px;
}
.hero-v2-inner {
padding-top: 84px;
}
.hero-v2-tiles {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trust-strip-inner {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trust-item:nth-child(2n) {
border-right: 1px solid var(--border);
}
.trust-item:last-child {
border-right: 0;
}
}
/* Header logo (drives the nav bar height) */
.site-logo {
width: 5.75rem;
height: 5.75rem;
display: block;
margin: 0.25rem 0;
}
@media (max-width: 768px) {
.site-logo {
width: 4.25rem;
height: 4.25rem;
}
}
/* =====================================================================
PREMIUM LAYER (scoped to .home-premium plus a few global basics).
Typography, calmer colour, one card system, editorial details.
===================================================================== */
/* --- Typography: Inter for body, Fraunces for display --- */
body {
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.home-premium h1,
.home-premium h2,
.home-premium h3,
.home-premium .hp-h2,
.home-premium .hero-v2-title,
.home-premium .about-me-name,
.home-premium .services-title,
.home-premium .services-card-title,
.home-premium .dr-statement-quote,
.home-premium .trust-item strong {
font-family: "Fraunces", Georgia, "Times New Roman", serif;
font-weight: 600;
letter-spacing: -0.015em;
}
.home-premium .hero-v2-title,
.home-premium .hp-h2,
.home-premium .about-me-name,
.home-premium .services-title {
font-weight: 600;
}
.home-premium p,
.home-premium li {
line-height: 1.78;
}
.home-premium .trust-item strong {
font-variant-numeric: tabular-nums;
}
/* --- Quieter header --- */
.site-banner {
padding: 0.35rem 0 !important;
background: #f6f1e4 !important;
}
.site-banner a {
font-size: 0.82rem;
font-weight: 600;
color: #7a5a12 !important;
text-decoration: none !important;
}
.site-banner a:hover {
text-decoration: underline !important;
}
.nav-links a,
.nav-dropdown-toggle {
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0.005em;
}
/* --- Calm the colour: light sections become plain --- */
.home-premium .hp-alt,
.home-premium .services,
.home-premium .about-me {
background: #fbfaf7;
background-image: none;
}
.home-premium .services {
border-top: 1px solid rgba(15, 23, 42, 0.07);
border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
.home-premium .hp-dark {
background-image: none;
background: linear-gradient(140deg, #004e73 0%, #00354e 100%);
}
/* --- One card system --- */
.home-premium .services-card,
.home-premium .service-card,
.home-premium #news .card,
.home-premium .about-me-highlights li,
.home-premium .testimonial-card,
.home-premium .hp-cta-card {
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.09);
border-radius: 12px;
box-shadow: none;
transition: box-shadow 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
border-color 260ms ease;
}
.home-premium .services-card:hover,
.home-premium .service-card:hover,
.home-premium #news .card:hover,
.home-premium .about-me-highlights li:hover {
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.09);
border-color: rgba(15, 23, 42, 0.14);
transform: translateY(-2px);
}
.home-premium .services-card::before,
.home-premium .service-card::before,
.home-premium #news .card::before,
.home-premium .testimonial-card::before,
.home-premium .hp-cta-card::before {
display: none;
}
/* --- Accent used sparingly: amber only for primary actions --- */
.home-premium .about-me-highlight-icon,
.home-premium .services-tab-icon {
background: rgba(0, 90, 134, 0.07);
border-color: rgba(0, 90, 134, 0.14);
}
.home-premium .about-me-highlight-icon svg,
.home-premium .services-tab-icon svg {
stroke: #005a86;
}
.home-premium .services-tab[aria-selected="true"] {
background: #00354e;
}
.home-premium .services-tab[aria-selected="true"] .services-tab-icon {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.22);
}
.home-premium .services-tab[aria-selected="true"] .services-tab-icon svg {
stroke: #fff;
}
.home-premium .about-me-h3::before,
.home-premium .services-h4::before {
background: #d99a14;
}
.home-premium .services-list li::before {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005a86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
background-color: rgba(0, 90, 134, 0.08);
}
.home-premium .hp-h2,
.home-premium .about-me-name,
.home-premium .services-title {
background: none;
-webkit-text-fill-color: initial;
color: #0b2a3a;
}
.home-premium .hp-h2--light {
color: #fff;
}
/* --- Editorial eyebrows with numbers --- */
.home-premium .hp-eyebrow,
.home-premium .about-me-eyebrow,
.home-premium .services-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6b7f8c;
margin-bottom: 1rem;
}
.home-premium .hp-eyebrow--light {
color: rgba(255, 255, 255, 0.72);
}
.home-premium .hp-eyebrow i,
.home-premium .about-me-eyebrow i,
.home-premium .services-eyebrow i {
font-style: normal;
font-variant-numeric: tabular-nums;
color: #d99a14;
padding-right: 0.6rem;
border-right: 1px solid rgba(15, 23, 42, 0.16);
}
.home-premium .hp-eyebrow--light i {
border-right-color: rgba(255, 255, 255, 0.28);
color: #f2b632;
}
/* --- Plain text links replace pill buttons --- */
.home-premium .text-link {
display: inline-block;
font-size: 0.92rem;
font-weight: 600;
color: #005a86;
text-decoration: none;
padding: 0 0 2px;
border: 0;
background: none !important;
box-shadow: none !important;
border-bottom: 1px solid rgba(0, 90, 134, 0.35);
transition: border-color 200ms ease, color 200ms ease;
}
.home-premium .text-link:hover {
color: #003b57;
border-bottom-color: #003b57;
}
.home-premium .text-link--light {
color: #fff;
border-bottom-color: rgba(255, 255, 255, 0.45);
}
.home-premium .text-link--light:hover {
color: #fff;
border-bottom-color: #fff;
}
/* --- Generous section rhythm --- */
.home-premium section.py-16,
.home-premium .services,
.home-premium .about-me {
padding-top: 7rem;
padding-bottom: 7rem;
}
.home-premium .hp-head {
margin-bottom: 3rem;
}
/* --- Doctor statement --- */
.dr-statement {
padding: 7rem 0;
background: #0b2a3a;
color: #fff;
}
.dr-statement-inner {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
.dr-statement-photo {
margin: 0;
max-width: 420px;
}
.dr-statement-photo img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 4px;
filter: saturate(0.92);
}
.dr-statement .hp-eyebrow {
color: rgba(255, 255, 255, 0.7);
}
.dr-statement .hp-eyebrow i {
color: #f2b632;
border-right-color: rgba(255, 255, 255, 0.28);
}
.dr-statement-quote {
margin: 0 0 2rem;
font-family: "Fraunces", Georgia, serif;
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
line-height: 1.38;
font-weight: 500;
letter-spacing: -0.015em;
color: #fff;
}
.dr-statement-meta {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.dr-statement-meta strong {
font-size: 1.05rem;
color: #fff;
}
.dr-statement-meta span {
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.68);
}
.dr-statement-creds {
list-style: none;
margin: 1.5rem 0 2rem;
padding: 0;
display: grid;
gap: 0.4rem 1.5rem;
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.78);
}
.dr-statement-creds li {
position: relative;
padding-left: 1rem;
}
.dr-statement-creds li::before {
content: "";
position: absolute;
left: 0;
top: 0.75em;
width: 5px;
height: 1px;
background: #f2b632;
}
.dr-statement .text-link {
color: #fff;
border-bottom-color: rgba(255, 255, 255, 0.45);
}
.dr-statement .text-link:hover {
border-bottom-color: #fff;
}
/* --- Single-photo gallery --- */
.gallery-feature {
padding: 7rem 0;
background: #fbfaf7;
}
.gallery-feature-figure {
margin: 0;
overflow: hidden;
border-radius: 4px;
}
.gallery-feature-figure img {
display: block;
width: 100%;
aspect-ratio: 16 / 7;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gallery-feature-figure:hover img {
transform: scale(1.03);
}
.gallery-feature-link {
margin: 1.75rem 0 0;
text-align: center;
}
/* --- Trust strip refinement --- */
.home-premium .trust-strip {
background: #fff;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.home-premium .trust-strip-inner {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
.home-premium .trust-item {
border-right-color: rgba(15, 23, 42, 0.08);
}
.home-premium .trust-item strong {
font-size: 2.1rem;
font-weight: 600;
background: none;
-webkit-text-fill-color: initial;
color: #0b2a3a;
}
.home-premium .trust-item span {
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #6b7f8c;
margin-top: 0.35rem;
}
/* --- Motion: one easing curve, reveal on scroll, slow hero zoom --- */
.home-premium .animate-fade-in,
.home-premium .animate-slide-in-right {
animation: none;
}
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1),
transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
.hero-v2-bg img {
animation: heroDrift 24s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
@keyframes heroDrift {
from { transform: scale(1); }
to { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.hero-v2-bg img { animation: none; }
.gallery-feature-figure img { transition: none; }
}
@media (min-width: 768px) {
.dr-statement-creds {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.dr-statement-inner {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 5rem;
}
}
@media (max-width: 767px) {
.home-premium section.py-16,
.home-premium .services,
.home-premium .about-me,
.dr-statement,
.gallery-feature {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
}
/* --- Premium clean-up: retire leftover accent flourishes --- */
.home-premium .about-me-photo,
.home-premium .hero-v2-doctor,
.home-premium .hero-v2-gym {
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.35);
}
.home-premium .about-me-photo {
padding: 0;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 4px;
box-shadow: none;
background: none;
}
.home-premium .about-me-photo img {
border-radius: 4px;
aspect-ratio: 4 / 5;
}
.home-premium .hero-v2-doctor,
.home-premium .hero-v2-gym {
border-radius: 4px;
}
.home-premium .hero-v2-gym-text {
border-top-color: rgba(15, 23, 42, 0.12);
}
.home-premium .hero-v2-gym-text span {
color: #6b7f8c;
}
.home-premium .about-me-tags li {
background: rgba(0, 90, 134, 0.06);
border-color: rgba(0, 90, 134, 0.14);
color: #005a86;
border-radius: 3px;
font-weight: 500;
letter-spacing: 0.02em;
}
.home-premium .about-me-role,
.home-premium .services-card-sub {
color: #6b7f8c;
font-style: normal;
}
.home-premium .star {
fill: #d99a14;
}
.home-premium .dot.active {
background: #d99a14;
}
.home-premium .testimonial-image {
border-color: rgba(15, 23, 42, 0.12);
}
.home-premium .services-tagline {
background: rgba(0, 90, 134, 0.05);
border-color: rgba(0, 90, 134, 0.14);
color: #0b2a3a !important;
}
.home-premium .hero-v2-tile {
border-radius: 4px;
}
.home-premium .hero-v2-tile-icon {
border-radius: 3px;
background: rgba(255, 255, 255, 0.16);
}
.home-premium .hero-v2-tile-icon svg {
stroke: #fff;
}
.home-premium .hero-v2-tile--gym {
background: rgba(242, 182, 50, 0.16);
border-color: rgba(242, 182, 50, 0.4);
}
.home-premium .hero-v2-tile--gym .hero-v2-tile-icon {
background: #f2b632;
}
.home-premium .hero-v2-tile--gym .hero-v2-tile-icon svg {
stroke: #0b2a3a;
}
.home-premium .hero-v2-kicker {
border-radius: 3px;
letter-spacing: 0.04em;
}
.home-premium #news .card .badge {
background: rgba(0, 90, 134, 0.08);
color: #005a86;
border-radius: 3px;
font-weight: 600;
}
.home-premium .services-more-btn,
.home-premium .about-me-more-btn {
border-radius: 4px;
box-shadow: none;
background: #0b2a3a;
color: #fff !important;
font-weight: 600;
letter-spacing: 0.01em;
}
.home-premium .services-more-btn:hover,
.home-premium .about-me-more-btn:hover {
background: #005a86;
color: #fff !important;
box-shadow: none;
transform: none;
}
/* Premium: keep the Voice Gym card on the hero background at phone width */
@media (max-width: 1023px) {
.home-premium .hero-v2-side {
gap: 14px;
}
.home-premium .hero-v2-gym {
max-width: 380px;
margin: 0 auto;
}
.home-premium .hero-v2-tiles {
margin-top: 28px;
}
}
/* =====================================================================
Nav bar: links left, dual logos centred, links right.
===================================================================== */
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.nav-side {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
}
.nav-side--left {
justify-content: flex-end;
}
.nav-side--right {
justify-content: flex-start;
}
.nav-side .nav-links {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: nowrap;
}
.nav-side .nav-links > a,
.nav-side .nav-dropdown-toggle {
white-space: nowrap;
}
.nav-brand {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 0.9rem;
}
.nav-brand-link {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.nav-brand-divider {
flex: 0 0 auto;
width: 1px;
height: 2.6rem;
background: rgba(15, 23, 42, 0.16);
}
.site-logo-gym {
display: block;
width: auto;
height: 5.4rem;
max-width: 100%;
object-fit: contain;
mix-blend-mode: multiply;
}
.nav-brand-link--gym {
opacity: 0.95;
transition: opacity 200ms ease;
}
.nav-brand-link--gym:hover {
opacity: 1;
}
@media (max-width: 1200px) {
.nav-side .nav-links {
gap: 1.1rem;
}
.nav-side .nav-links > a,
.nav-side .nav-dropdown-toggle {
font-size: 0.86rem;
}
.nav-brand {
gap: 0.7rem;
}
.site-logo-gym {
height: 4.6rem;
}
.nav-brand-divider {
height: 2.4rem;
}
}
@media (max-width: 768px) {
.nav-bar {
justify-content: space-between;
gap: 0.75rem;
}
.nav-side {
display: none;
}
.nav-brand {
flex: 1 1 auto;
justify-content: flex-start;
gap: 0.6rem;
}
.site-logo-gym {
height: 4rem;
}
.nav-brand-divider {
height: 2.1rem;
}
}
@media (max-width: 420px) {
.nav-brand-divider,
.nav-brand-link--gym {
display: none;
}
}
/* =====================================================================
Hero v2 portrait: cut-out figure instead of a boxed photo.
===================================================================== */
.hero-v2-portrait {
position: relative;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
min-height: 420px;
padding-bottom: 0;
}
.hero-v2-portrait-glow {
position: absolute;
left: 50%;
bottom: 12%;
width: 118%;
aspect-ratio: 1 / 1;
transform: translateX(-50%);
border-radius: 50%;
background:
radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0) 68%);
pointer-events: none;
}
.hero-v2-portrait > img {
position: relative;
z-index: 1;
display: block;
width: 100%;
max-width: 400px;
height: auto;
filter: drop-shadow(0 26px 46px rgba(0, 20, 34, 0.45));
}
.hero-v2-portrait-caption {
position: relative;
z-index: 2;
margin-top: 1rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.22);
width: min(100%, 360px);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
padding: 0 0.5rem;
}
.hero-v2-portrait-caption strong {
font-size: 1.12rem;
font-weight: 600;
color: #fff;
letter-spacing: -0.01em;
}
.hero-v2-portrait-caption span {
font-size: 0.86rem;
color: rgba(255, 255, 255, 0.86);
}
.hero-v2-portrait-caption em {
display: inline-block;
margin-top: 0.45rem;
padding: 0.3rem 0.75rem;
border-radius: 3px;
font-style: normal;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #0b2a3a;
background: #f2b632;
}
.home-premium .hero-v2-portrait-caption strong {
font-family: "Fraunces", Georgia, serif;
font-size: 1.25rem;
}
@media (min-width: 1024px) {
.hero-v2-portrait {
min-height: 500px;
}
.hero-v2-portrait > img {
max-width: 440px;
}
}
@media (max-width: 640px) {
.hero-v2-portrait {
min-height: 340px;
margin-top: 1rem;
}
.hero-v2-portrait > img {
max-width: 290px;
}
.hero-v2-portrait-caption {
margin-top: 0.85rem;
padding-top: 1rem;
}
}
/* =====================================================================
DUAL-TONE + TYPE REFRESH (v2 / .home-premium)
Deep teal-navy as the base, warm terracotta-gold as a true second
tone with real presence. Instrument Serif display + Outfit body.
===================================================================== */
.home-premium,
.hero-v2,
.dr-statement,
.gallery-feature {
--tone-ink: #07242f;
--tone-deep: #0c3a4a;
--tone-mid: #18657d;
--tone-warm: #e08a3c;
--tone-warm-deep: #c06a22;
--tone-warm-soft: #fdf1e3;
--tone-paper: #fcf8f3;
--tone-line: rgba(7, 36, 47, 0.12);
}
/* --- Type --- */
body {
font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
font-weight: 400;
letter-spacing: 0.002em;
}
.home-premium h1,
.home-premium h2,
.home-premium h3,
.home-premium .hp-h2,
.home-premium .hero-v2-title,
.home-premium .about-me-name,
.home-premium .services-title,
.home-premium .services-card-title,
.home-premium .dr-statement-quote,
.home-premium .trust-item strong,
.home-premium .hero-v2-portrait-caption strong {
font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
font-weight: 400;
letter-spacing: -0.012em;
}
.home-premium .hero-v2-title {
font-size: clamp(38px, 5.4vw, 70px);
line-height: 1.02;
}
.home-premium .hp-h2,
.home-premium .about-me-name,
.home-premium .services-title {
font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 1.1;
}
.home-premium .dr-statement-quote {
font-size: clamp(1.75rem, 3.2vw, 2.65rem);
line-height: 1.24;
}
.home-premium .hero-v2-sub,
.home-premium .hp-lead,
.home-premium .services-lead {
font-weight: 300;
font-size: 1.1rem;
}
.home-premium .hero-v2-sub {
font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}
/* --- Warm paper base for light sections --- */
.home-premium .hp-alt,
.home-premium .services,
.home-premium .about-me,
.gallery-feature {
background: var(--tone-paper);
background-image: none;
}
.home-premium .trust-strip {
background: #fff;
}
/* --- Dark sections: deep teal-navy, not blue --- */
.home-premium .hp-dark {
background: linear-gradient(150deg, var(--tone-deep) 0%, var(--tone-ink) 100%);
background-image:
radial-gradient(620px 320px at 88% 108%, rgba(224, 138, 60, 0.26), rgba(224, 138, 60, 0) 62%),
linear-gradient(150deg, var(--tone-deep) 0%, var(--tone-ink) 100%);
}
.dr-statement {
background: var(--tone-ink);
background-image:
radial-gradient(560px 300px at 6% 0%, rgba(224, 138, 60, 0.2), rgba(224, 138, 60, 0) 58%);
}
.hero-v2-bg::after {
background:
radial-gradient(760px 420px at 96% 104%, rgba(224, 138, 60, 0.4), rgba(224, 138, 60, 0) 60%),
linear-gradient(104deg, rgba(7, 36, 47, 0.96) 0%, rgba(12, 58, 74, 0.9) 48%, rgba(24, 101, 125, 0.62) 100%);
}
/* --- The warm tone, used with intent --- */
.home-premium .hero-v2-sub strong {
color: var(--tone-warm);
font-weight: 500;
}
.home-premium .hp-eyebrow i,
.home-premium .about-me-eyebrow i,
.home-premium .services-eyebrow i,
.dr-statement .hp-eyebrow i {
color: var(--tone-warm);
}
.home-premium .hp-eyebrow,
.home-premium .about-me-eyebrow,
.home-premium .services-eyebrow {
color: var(--tone-warm-deep);
}
.home-premium .hp-eyebrow--light,
.dr-statement .hp-eyebrow {
color: rgba(255, 255, 255, 0.72);
}
.home-premium .hp-h2,
.home-premium .about-me-name,
.home-premium .services-title {
color: var(--tone-ink);
}
/* Headings that sit on the dark bands stay white. */
.home-premium .hp-h2--light,
.home-premium .hp-dark .hp-h2,
.home-premium .vg-h2--light,
.home-premium .sp-h2--light,
.dr-statement .dr-h2 {
color: #fff;
background: none;
-webkit-text-fill-color: #fff;
}
/* And so does the lead text beneath them. */
.home-premium .hp-lead--light,
.home-premium .hp-dark .hp-lead,
.home-premium .sp-lead--light,
.home-premium .vg-lead--light {
color: rgba(255, 255, 255, 0.86);
}
.home-premium .hp-dark .hp-eyebrow,
.home-premium .hp-eyebrow--light {
color: rgba(255, 255, 255, 0.72);
}
.home-premium .hp-dark .hp-eyebrow i,
.home-premium .hp-eyebrow--light i {
color: var(--tone-warm, #e08a3c);
border-right-color: rgba(255, 255, 255, 0.28);
}
.home-premium .about-me-h3::before,
.home-premium .services-h4::before {
background: var(--tone-warm);
width: 3px;
}
.home-premium .about-me-highlight-icon,
.home-premium .services-tab-icon {
background: var(--tone-warm-soft);
border-color: rgba(224, 138, 60, 0.3);
}
.home-premium .about-me-highlight-icon svg,
.home-premium .services-tab-icon svg {
stroke: var(--tone-warm-deep);
}
.home-premium .services-tab[aria-selected="true"] {
background: var(--tone-ink);
}
.home-premium .services-tab[aria-selected="true"] .services-tab-icon {
background: var(--tone-warm);
border-color: transparent;
}
.home-premium .services-tab[aria-selected="true"] .services-tab-icon svg {
stroke: var(--tone-ink);
}
.home-premium .services-list li::before {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c06a22' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
background-color: var(--tone-warm-soft);
}
.home-premium .about-me-tags li {
background: var(--tone-warm-soft);
border-color: rgba(224, 138, 60, 0.28);
color: var(--tone-warm-deep);
}
.home-premium .star,
.home-premium .dot.active {
fill: var(--tone-warm);
background: var(--tone-warm);
}
.home-premium .star {
background: none;
}
.home-premium .services-tagline {
background: var(--tone-warm-soft);
border-color: rgba(224, 138, 60, 0.28);
color: var(--tone-warm-deep) !important;
}
.home-premium .services-more-body .services-pull,
.home-premium .services-card-sub {
border-left-color: var(--tone-warm);
color: var(--tone-warm-deep);
}
.home-premium .services-more-body .services-pull {
background: var(--tone-warm-soft);
}
.home-premium #news .card .badge {
background: var(--tone-warm-soft);
color: var(--tone-warm-deep);
}
.home-premium .text-link {
color: var(--tone-warm-deep);
border-bottom-color: rgba(192, 106, 34, 0.4);
}
.home-premium .text-link:hover {
color: var(--tone-ink);
border-bottom-color: var(--tone-ink);
}
.dr-statement .text-link,
.home-premium .text-link--light {
color: var(--tone-warm);
border-bottom-color: rgba(224, 138, 60, 0.5);
}
.dr-statement .text-link:hover,
.home-premium .text-link--light:hover {
color: #fff;
border-bottom-color: #fff;
}
.dr-statement-creds li::before {
background: var(--tone-warm);
}
/* --- Primary actions carry the warm tone --- */
.home-premium .services-more-btn,
.home-premium .about-me-more-btn {
background: var(--tone-warm);
color: var(--tone-ink) !important;
font-weight: 600;
}
.home-premium .services-more-btn:hover,
.home-premium .about-me-more-btn:hover {
background: var(--tone-warm-deep);
color: #fff !important;
}
/* --- Hero details --- */
.home-premium .hero-v2-portrait-caption em {
background: var(--tone-warm);
color: var(--tone-ink);
}
.home-premium .hero-v2-tile-icon {
background: rgba(255, 255, 255, 0.14);
}
.home-premium .hero-v2-tile--gym {
background: rgba(224, 138, 60, 0.2);
border-color: rgba(224, 138, 60, 0.46);
}
.home-premium .hero-v2-tile--gym .hero-v2-tile-icon {
background: var(--tone-warm);
}
.home-premium .hero-v2-tile--gym .hero-v2-tile-icon svg {
stroke: var(--tone-ink);
}
.home-premium .hero-v2-tile-arrow {
color: var(--tone-warm);
}
/* --- Trust strip in the warm tone --- */
.home-premium .trust-item strong {
color: var(--tone-ink);
font-size: 2.6rem;
}
.home-premium .trust-item span {
color: var(--tone-warm-deep);
}
.home-premium .trust-item {
border-right-color: var(--tone-line);
}
/* --- Cards on warm paper --- */
.home-premium .services-card,
.home-premium .service-card,
.home-premium #news .card,
.home-premium .about-me-highlights li,
.home-premium .hp-cta-card {
border-color: var(--tone-line);
}
.home-premium .services {
border-top-color: var(--tone-line);
border-bottom-color: var(--tone-line);
}
/* --- Header picks up the warm tone --- */
.site-banner {
background: var(--tone-warm-soft, #fdf1e3) !important;
}
.site-banner a {
color: #8a4d12 !important;
}
/* =====================================================================
Type: Figtree throughout (the face Apollo Hospitals uses).
One family, weight and size carry the hierarchy.
===================================================================== */
body {
font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
font-weight: 400;
letter-spacing: 0;
}
.home-premium h1,
.home-premium h2,
.home-premium h3,
.home-premium h4,
.home-premium .hp-h2,
.home-premium .hero-v2-title,
.home-premium .about-me-name,
.home-premium .services-title,
.home-premium .services-card-title,
.home-premium .dr-statement-quote,
.home-premium .trust-item strong,
.home-premium .hero-v2-portrait-caption strong {
font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
}
/* Display sizes: heavier weight and tighter tracking do the work */
.home-premium .hero-v2-title {
font-weight: 700;
font-size: clamp(36px, 4.8vw, 60px);
line-height: 1.06;
letter-spacing: -0.03em;
}
.home-premium .hp-h2,
.home-premium .about-me-name,
.home-premium .services-title {
font-weight: 700;
font-size: clamp(1.9rem, 3.2vw, 2.7rem);
line-height: 1.14;
letter-spacing: -0.025em;
}
.home-premium .dr-statement-quote {
font-weight: 600;
font-size: clamp(1.6rem, 2.9vw, 2.35rem);
line-height: 1.32;
letter-spacing: -0.022em;
}
.home-premium .services-card-title {
font-weight: 700;
letter-spacing: -0.015em;
}
.home-premium .trust-item strong {
font-weight: 700;
font-size: 2.5rem;
letter-spacing: -0.03em;
}
.home-premium .hero-v2-portrait-caption strong {
font-weight: 700;
font-size: 1.15rem;
letter-spacing: -0.015em;
}
.home-premium .hero-v2-sub,
.home-premium .hp-lead,
.home-premium .services-lead {
font-weight: 400;
}
.home-premium .hero-v2-sub {
font-size: clamp(1.02rem, 1.4vw, 1.22rem);
line-height: 1.6;
}
.home-premium p,
.home-premium li {
line-height: 1.72;
}
.nav-links a,
.nav-dropdown-toggle {
font-weight: 500;
}
/* =====================================================================
Services page: pick up the dual-tone theme.
===================================================================== */
.services-page.home-premium {
--sp-blue: var(--tone-deep);
--sp-teal: var(--tone-mid);
--sv-blue: var(--tone-deep);
--sv-teal: var(--tone-mid);
}
/* Hero */
.services-page.home-premium .sp-hero {
background:
radial-gradient(760px 420px at 96% 104%, rgba(224, 138, 60, 0.36), rgba(224, 138, 60, 0) 60%),
linear-gradient(140deg, var(--tone-deep) 0%, var(--tone-ink) 100%);
}
.services-page.home-premium .sp-hero::after {
opacity: 0.18;
}
.services-page.home-premium .sp-hero-inner {
padding-top: 72px;
padding-bottom: 32px;
}
.services-page.home-premium .sp-hero-title {
font-weight: 700;
font-size: clamp(36px, 4.8vw, 60px);
line-height: 1.06;
letter-spacing: -0.03em;
}
.services-page.home-premium .sp-hero-lead {
font-size: clamp(1.02rem, 1.4vw, 1.22rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.86);
}
.services-page.home-premium .sp-kicker {
border-radius: 3px;
letter-spacing: 0.04em;
}
.services-page.home-premium .sp-jump a {
border-radius: 3px;
font-weight: 500;
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.22);
}
.services-page.home-premium .sp-jump a:hover {
background: rgba(255, 255, 255, 0.2);
}
.services-page.home-premium .sp-jump .sp-jump--ext {
background: var(--tone-warm);
color: var(--tone-ink);
border-color: transparent;
font-weight: 600;
}
.services-page.home-premium .sp-jump .sp-jump--ext:hover {
background: var(--tone-warm-deep);
color: #fff;
}
/* Sections */
.services-page.home-premium .sp-section {
padding: 7rem 0;
background: #fff;
}
.services-page.home-premium .sp-section--alt {
background: var(--tone-paper);
background-image: none;
border-top: 1px solid var(--tone-line);
border-bottom: 1px solid var(--tone-line);
}
.services-page.home-premium .sp-head {
margin-bottom: 2rem;
}
.services-page.home-premium .sp-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tone-warm-deep);
margin-bottom: 1rem;
}
.services-page.home-premium .sp-eyebrow i {
font-style: normal;
font-variant-numeric: tabular-nums;
color: var(--tone-warm);
padding-right: 0.6rem;
border-right: 1px solid var(--tone-line);
}
.services-page.home-premium .sp-h2 {
background: none;
-webkit-text-fill-color: initial;
color: var(--tone-ink);
font-weight: 700;
font-size: clamp(1.9rem, 3.2vw, 2.7rem);
line-height: 1.14;
letter-spacing: -0.025em;
}
.services-page.home-premium .sp-h2--light {
color: #fff;
}
.services-page.home-premium .sp-body {
border-top-color: var(--tone-line);
}
.services-page.home-premium .sp-note a {
color: var(--tone-warm-deep);
}
/* Procedures block inherited from the home page */
.services-page.home-premium #procedures {
background: var(--tone-paper);
background-image: none;
padding-top: 7rem;
padding-bottom: 7rem;
}
.services-page.home-premium .hp-cta-card {
border-color: var(--tone-line);
}
/* Closing call to action */
.services-page.home-premium .sp-cta {
background:
radial-gradient(620px 320px at 88% 108%, rgba(224, 138, 60, 0.26), rgba(224, 138, 60, 0) 62%),
linear-gradient(150deg, var(--tone-deep) 0%, var(--tone-ink) 100%);
padding: 6rem 0;
}
.services-page.home-premium .sp-btn-primary {
background: var(--tone-warm);
color: var(--tone-ink);
border-color: transparent;
font-weight: 600;
}
.services-page.home-premium .sp-btn-primary:hover {
background: var(--tone-warm-deep);
color: #fff;
}
.services-page.home-premium .sp-btn-ghost {
border-radius: 4px;
}
.services-page.home-premium .sp-btn-primary,
.services-page.home-premium .sp-btn-ghost {
border-radius: 4px;
}
.services-page.home-premium .sp-lead--light {
color: rgba(255, 255, 255, 0.86);
}
@media (max-width: 767px) {
.services-page.home-premium .sp-section,
.services-page.home-premium #procedures {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
}
/* Services page: remaining accents onto the dual tone */
.services-page.home-premium .text-link,
.services-page.home-premium .service-show-more,
.services-page.home-premium .show-details-link {
display: inline-block;
color: var(--tone-warm-deep) !important;
background: none !important;
border: 0;
border-bottom: 1px solid rgba(192, 106, 34, 0.4);
border-radius: 0;
box-shadow: none !important;
padding: 0 0 2px;
font-size: 0.9rem !important;
font-weight: 600;
text-decoration: none !important;
}
.services-page.home-premium .text-link:hover,
.services-page.home-premium .service-show-more:hover,
.services-page.home-premium .show-details-link:hover {
color: var(--tone-ink) !important;
border-bottom-color: var(--tone-ink);
background: none !important;
}
.services-page.home-premium .hp-btn {
background: var(--tone-warm);
color: var(--tone-ink) !important;
border-radius: 4px;
box-shadow: none;
font-weight: 600;
}
.services-page.home-premium .hp-btn:hover {
background: var(--tone-warm-deep);
color: #fff !important;
transform: translateY(-1px);
box-shadow: none;
}
.services-page.home-premium #procedures .card .w-16 {
background: var(--tone-warm-soft);
border-color: rgba(224, 138, 60, 0.3);
}
.services-page.home-premium #procedures .card .w-16 svg {
stroke: var(--tone-warm-deep);
}
.services-page.home-premium #procedures .card li .bg-primary {
background: var(--tone-warm);
}
/* Hero v2: layered graphic behind the cut-out portrait */
.hero-v2-portrait-art {
position: absolute;
left: 50%;
top: 40%;
width: 146%;
max-width: 700px;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
}
.hero-v2-portrait-art svg {
width: 100%;
height: 100%;
display: block;
animation: hv2ArtIn 1400ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-v2-portrait-art circle:first-of-type {
transform-origin: 50% 50%;
animation: hv2Spin 90s linear infinite;
}
@keyframes hv2ArtIn {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
@keyframes hv2Spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hero-v2-portrait-glow {
background:
radial-gradient(circle at 50% 46%, rgba(224, 138, 60, 0.2) 0%, rgba(224, 138, 60, 0.07) 36%, rgba(255, 255, 255, 0) 66%);
}
@media (prefers-reduced-motion: reduce) {
.hero-v2-portrait-art svg,
.hero-v2-portrait-art circle:first-of-type {
animation: none;
}
}
@media (max-width: 640px) {
.hero-v2-portrait-art {
width: 124%;
top: 44%;
}
}
/* =====================================================================
Doctor profile page: dual-tone theme.
===================================================================== */
.dr-page.home-premium {
--dr-blue: var(--tone-deep);
--dr-teal: var(--tone-mid);
--am-blue: var(--tone-deep);
--am-teal: var(--tone-mid);
}
/* Hero */
.dr-page.home-premium .dr-hero {
background:
radial-gradient(760px 420px at 96% 104%, rgba(224, 138, 60, 0.34), rgba(224, 138, 60, 0) 60%),
linear-gradient(140deg, var(--tone-deep) 0%, var(--tone-ink) 100%);
}
.dr-page.home-premium .dr-hero::after {
opacity: 0.16;
}
.dr-page.home-premium .dr-hero-title {
font-weight: 700;
font-size: clamp(34px, 4.4vw, 54px);
line-height: 1.06;
letter-spacing: -0.03em;
}
.dr-page.home-premium .dr-hero-role {
color: var(--tone-warm);
font-weight: 500;
}
.dr-page.home-premium .dr-kicker,
.dr-page.home-premium .dr-pills li {
border-radius: 3px;
letter-spacing: 0.02em;
}
.dr-page.home-premium .dr-tags li {
background: var(--tone-warm);
color: var(--tone-ink);
border-radius: 3px;
font-weight: 600;
}
.dr-page.home-premium .dr-btn-primary {
background: var(--tone-warm);
color: var(--tone-ink);
border-color: transparent;
border-radius: 4px;
font-weight: 600;
}
.dr-page.home-premium .dr-btn-primary:hover {
background: var(--tone-warm-deep);
color: #fff;
}
.dr-page.home-premium .dr-btn-ghost {
border-radius: 4px;
}
.dr-page.home-premium .dr-hero-photo {
background: #fff;
border-radius: 4px;
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.3);
}
.dr-page.home-premium .dr-hero-photo img {
border-radius: 3px;
}
/* Sections */
.dr-page.home-premium .dr-section {
padding: 7rem 0;
background: #fff;
}
.dr-page.home-premium .dr-section--alt {
background: var(--tone-paper);
background-image: none;
border-top: 1px solid var(--tone-line);
border-bottom: 1px solid var(--tone-line);
}
.dr-page.home-premium .dr-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tone-warm-deep);
margin-bottom: 1rem;
}
.dr-page.home-premium .dr-eyebrow i {
font-style: normal;
font-variant-numeric: tabular-nums;
color: var(--tone-warm);
padding-right: 0.6rem;
border-right: 1px solid var(--tone-line);
}
.dr-page.home-premium .dr-h2 {
background: none;
-webkit-text-fill-color: initial;
color: var(--tone-ink);
font-weight: 700;
font-size: clamp(1.8rem, 3vw, 2.5rem);
line-height: 1.16;
letter-spacing: -0.025em;
}
.dr-page.home-premium .dr-profile-intro .dr-lead {
color: var(--tone-ink);
}
.dr-page.home-premium .about-me-h3::before {
background: var(--tone-warm);
width: 3px;
}
/* Credential cards */
.dr-page.home-premium .card {
background: #fff;
border: 1px solid var(--tone-line);
border-radius: 12px;
box-shadow: none;
transition: box-shadow 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
border-color 260ms ease;
}
.dr-page.home-premium .card::before {
display: none;
}
.dr-page.home-premium .card:hover {
box-shadow: 0 14px 40px rgba(7, 36, 47, 0.08);
border-color: rgba(7, 36, 47, 0.16);
}
.dr-page.home-premium .card .text-primary {
color: var(--tone-warm-deep);
}
.dr-page.home-premium .card svg.text-primary,
.dr-page.home-premium .card .lucide {
stroke: var(--tone-warm-deep);
}
.dr-page.home-premium .card li .bg-primary {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c06a22' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
background-color: var(--tone-warm-soft);
}
.dr-page.home-premium .card h4 {
color: var(--tone-warm-deep);
background: var(--tone-warm-soft);
border-color: rgba(224, 138, 60, 0.28);
border-radius: 3px;
}
.dr-page.home-premium .card .badge {
background: var(--tone-warm-soft);
color: var(--tone-warm-deep);
border-radius: 3px;
font-weight: 600;
}
@media (max-width: 767px) {
.dr-page.home-premium .dr-section {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
}
/* Doctor page: recolour the remaining flat-file icons to the warm tone */
.dr-page.home-premium .card .flex.items-center img[src$=".svg"] {
filter: brightness(0) saturate(100%) invert(46%) sepia(58%) saturate(1180%)
hue-rotate(347deg) brightness(88%) contrast(92%);
}
.dr-page.home-premium .card svg[fill="currentColor"] {
fill: var(--tone-warm-deep);
stroke: none;
}
/* =====================================================================
Hero locations: two clickable location cards, shared by both
home templates.
===================================================================== */
.hero-locations,
.hero-v2-locations {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
margin: 1.5rem 0 0;
padding: 0;
}
.hero-locations-label,
.hero-v2-locations-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.hero-locations-label svg {
width: 15px;
height: 15px;
fill: none;
stroke: #e08a3c;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-locations-list,
.hero-v2-locations-list {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.hero-location,
.hero-v2-location {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.65rem 1.1rem 0.65rem 0.7rem;
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-left: 3px solid #e08a3c;
backdrop-filter: blur(8px);
text-decoration: none;
transition: background 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
border-color 220ms ease;
}
.hero-location:hover,
.hero-v2-location:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.34);
border-left-color: #f2b632;
transform: translateY(-2px);
}
.hero-location-pin,
.hero-v2-location-pin {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 3px;
background: #e08a3c;
}
.hero-location-pin svg,
.hero-v2-location-pin svg {
width: 16px;
height: 16px;
fill: none;
stroke: #07242f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-location-text,
.hero-v2-location-text {
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.25;
}
.hero-location-text strong,
.hero-v2-location-text strong {
font-size: 0.95rem;
font-weight: 600;
color: #fff;
letter-spacing: -0.005em;
}
.hero-location-text > span,
.hero-v2-location-text > span {
font-size: 0.74rem;
color: rgba(255, 255, 255, 0.66);
}
@media (max-width: 480px) {
.hero-locations-list,
.hero-v2-locations-list {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.hero-location,
.hero-v2-location {
width: 100%;
}
}
/* =====================================================================
Sticky header. The whole header pins (a sticky child can never travel
outside its parent, and the header is only ~138px tall), and the
announcement bar slides away under the nav as you scroll.
===================================================================== */
.main_menu {
position: sticky;
top: 0;
z-index: 60;
transition: transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: transform;
}
/* Pull the header up by exactly the banner height so the nav rests at the
top edge, leaving the banner visible only at the top of the page. */
.main_menu.nav-scrolled {
transform: translateY(calc(-1 * var(--banner-h, 0px)));
}
.main_menu nav {
position: relative;
z-index: 2;
background: #fff;
border-bottom: 1px solid rgba(7, 36, 47, 0.08);
transition: background 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
box-shadow 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
border-color 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.main_menu.nav-scrolled nav {
background: #fff;
border-bottom-color: rgba(7, 36, 47, 0.1);
box-shadow: 0 6px 24px rgba(7, 36, 47, 0.09);
}
/* The bar condenses a little once pinned */
.main_menu nav .site-logo,
.main_menu nav .site-logo-gym,
.main_menu nav .nav-brand-divider {
transition: height 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
width 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.main_menu.nav-scrolled nav .site-logo {
width: 4.4rem;
height: 4.4rem;
}
.main_menu.nav-scrolled nav .site-logo-gym {
height: 4.4rem;
}
.main_menu.nav-scrolled nav .nav-brand-divider {
height: 2rem;
}
@media (prefers-reduced-motion: reduce) {
.main_menu,
.main_menu nav,
.main_menu nav .site-logo,
.main_menu nav .site-logo-gym,
.main_menu nav .nav-brand-divider {
transition: none;
}
}
/* =====================================================================
Gallery page: dual-tone theme, and a restyle of the NextGEN plugin
thumbnails so they match the site's card system.
===================================================================== */
.gallery-page.home-premium {
--gp-ink: var(--tone-ink, #07242f);
}
/* Hero */
.gp-hero {
position: relative;
overflow: hidden;
color: #fff;
text-align: center;
background:
radial-gradient(760px 420px at 96% 104%, rgba(224, 138, 60, 0.34), rgba(224, 138, 60, 0) 60%),
linear-gradient(140deg, #0c3a4a 0%, #07242f 100%);
}
.gp-hero-inner {
position: relative;
z-index: 1;
padding-top: 68px;
padding-bottom: 28px;
}
.gp-kicker {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 6px 12px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.92);
font-size: 13px;
letter-spacing: 0.02em;
}
.gp-hero-title {
margin: 16px 0 10px;
font-weight: 700;
font-size: clamp(34px, 4.6vw, 56px);
line-height: 1.06;
letter-spacing: -0.03em;
color: #fff;
}
.gp-hero-lead {
margin: 0 auto 22px;
max-width: 56ch;
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.86);
}
.gp-jump {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.gp-jump a {
display: inline-flex;
align-items: center;
padding: 9px 14px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gp-jump a:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.gp-wave {
height: 22px;
margin-top: 24px;
opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' viewBox='0 0 1200 40'%3E%3Cpath d='M0 22 C 120 6, 240 38, 360 22 C 480 6, 600 38, 720 22 C 840 6, 960 38, 1080 22 C 1140 14, 1170 10, 1200 12' fill='none' stroke='%23ffffff' stroke-opacity='0.65' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1200px 40px;
background-position: center;
}
/* Sections */
.gp-section {
padding: 6rem 0;
background: #fff;
scroll-margin-top: 130px;
}
.gp-section--alt {
background: var(--tone-paper, #fcf8f3);
border-top: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
border-bottom: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
}
.gp-head {
text-align: center;
max-width: 760px;
margin: 0 auto 2.75rem;
}
.gp-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tone-warm-deep, #c06a22);
margin-bottom: 1rem;
}
.gp-eyebrow i {
font-style: normal;
font-variant-numeric: tabular-nums;
color: var(--tone-warm, #e08a3c);
padding-right: 0.6rem;
border-right: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
}
.gp-eyebrow--light {
color: rgba(255, 255, 255, 0.72);
}
.gp-eyebrow--light i {
color: var(--tone-warm, #e08a3c);
border-right-color: rgba(255, 255, 255, 0.28);
}
.gp-h2 {
margin: 0;
font-weight: 700;
font-size: clamp(1.9rem, 3.2vw, 2.7rem);
line-height: 1.14;
letter-spacing: -0.025em;
color: var(--gp-ink);
}
.gp-h2--light {
color: #fff;
}
.gp-lead--light {
margin: 0.5rem 0 0;
color: rgba(255, 255, 255, 0.86);
line-height: 1.6;
}
/* --- NextGEN thumbnails restyled as clean cards --- */
.gallery-page div.ngg-galleryoverview {
display: grid !important;
width: 100% !important;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
margin: 0 !important;
padding: 0;
overflow: visible !important;
float: none;
}
.gallery-page div.ngg-galleryoverview div.ngg-gallery-thumbnail-box,
.gallery-page .ngg-gallery-thumbnail-box[style] {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.gallery-page .ngg-gallery-thumbnail {
display: block;
width: auto !important;
margin: 0 !important;
border: 0 !important;
background: none !important;
float: none !important;
}
.gallery-page .ngg-gallery-thumbnail a {
display: block;
margin: 0 !important;
overflow: hidden;
border-radius: 10px;
border: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
background: #fff;
transition: box-shadow 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
border-color 280ms ease;
}
.gallery-page .ngg-gallery-thumbnail a:hover {
box-shadow: 0 16px 40px rgba(7, 36, 47, 0.12);
border-color: rgba(7, 36, 47, 0.18);
transform: translateY(-3px);
}
.gallery-page .ngg-gallery-thumbnail img {
display: block;
width: 100% !important;
height: 230px !important;
object-fit: cover;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gallery-page .ngg-gallery-thumbnail a:hover img {
transform: scale(1.05);
}
/* The gallery script injects the raw filename as a caption after load.
Clip the box to the image so no injected text can show. */
.gallery-page .ngg-gallery-thumbnail-box .ngg-gallery-thumbnail span,
.gallery-page .ngg-gallery-thumbnail > span,
.gallery-page .ngg-gallery-thumbnail-box > span,
.gallery-page .ngg-gallery-thumbnail-box p,
.gallery-page .ngg-gallery-thumbnail-box .ngg-caption,
.gallery-page .ngg-gallery-thumbnail a > span,
.gallery-page .ngg-gallery-thumbnail a > div {
display: none !important;
}
.gallery-page div.ngg-galleryoverview div.ngg-gallery-thumbnail-box {
height: 230px;
overflow: hidden;
border-radius: 10px;
}
.gallery-page .ngg-gallery-thumbnail {
height: 100%;
}
.gallery-page .ngg-gallery-thumbnail a {
height: 100%;
}
/* The plugin emits a clearing div; in a grid it would steal a cell. */
.gallery-page div.ngg-galleryoverview > .ngg-clear,
.gallery-page div.ngg-galleryoverview > br {
display: none !important;
}
.gallery-page .ngg-navigation {
grid-column: 1 / -1;
clear: both;
}
.gallery-page .ngg-navigation {
margin-top: 2rem;
text-align: center;
}
.gallery-page .ngg-navigation a,
.gallery-page .ngg-navigation span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 0.6rem;
margin: 0 3px;
border-radius: 3px;
border: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
background: #fff;
color: var(--gp-ink);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
}
.gallery-page .ngg-navigation a:hover {
border-color: var(--tone-warm, #e08a3c);
color: var(--tone-warm-deep, #c06a22);
}
.gallery-page .ngg-navigation .current {
background: var(--tone-warm, #e08a3c);
border-color: transparent;
color: var(--gp-ink);
}
/* Closing call to action */
.gp-cta {
padding: 6rem 0;
color: #fff;
background:
radial-gradient(620px 320px at 88% 108%, rgba(224, 138, 60, 0.26), rgba(224, 138, 60, 0) 62%),
linear-gradient(150deg, #0c3a4a 0%, #07242f 100%);
}
.gp-cta-inner {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
align-items: center;
}
.gp-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery-page .btn {
padding: 0.75em 1.35em;
border: 1px solid transparent;
border-radius: 4px;
font-weight: 600;
text-decoration: none;
transition: background 220ms ease, color 220ms ease, transform 160ms ease;
}
.gallery-page .btn:hover {
transform: translateY(-1px);
}
.gp-btn-primary {
background: var(--tone-warm, #e08a3c);
color: var(--gp-ink);
}
.gp-btn-primary:hover {
background: var(--tone-warm-deep, #c06a22);
color: #fff;
}
.gp-btn-ghost {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.24);
}
.gp-btn-ghost:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
@media (min-width: 1024px) {
.gp-cta-inner {
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
}
.gp-cta-actions {
justify-content: flex-end;
}
}
@media (max-width: 767px) {
.gp-section,
.gp-cta {
padding-top: 4rem;
padding-bottom: 4rem;
}
.gallery-page div.ngg-galleryoverview {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
gap: 0.75rem;
}
.gallery-page div.ngg-galleryoverview div.ngg-gallery-thumbnail-box {
height: 160px;
}
.gallery-page .ngg-gallery-thumbnail img {
height: 160px !important;
}
}
/* =====================================================================
Blog listing page: dual-tone theme.
===================================================================== */
.blog-page {
--bp-ink: var(--tone-ink, #07242f);
}
/* Hero */
.bp-hero {
position: relative;
overflow: hidden;
color: #fff;
text-align: center;
background:
radial-gradient(760px 420px at 96% 104%, rgba(224, 138, 60, 0.34), rgba(224, 138, 60, 0) 60%),
linear-gradient(140deg, #0c3a4a 0%, #07242f 100%);
}
.bp-hero-inner {
position: relative;
z-index: 1;
padding-top: 68px;
padding-bottom: 28px;
}
.bp-kicker {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 6px 12px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.92);
font-size: 13px;
letter-spacing: 0.02em;
}
.bp-hero-title {
margin: 16px 0 10px;
font-weight: 700;
font-size: clamp(34px, 4.6vw, 56px);
line-height: 1.06;
letter-spacing: -0.03em;
color: #fff;
}
.bp-hero-lead {
margin: 0 auto;
max-width: 54ch;
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.86);
}
.bp-wave {
height: 22px;
margin-top: 26px;
opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' viewBox='0 0 1200 40'%3E%3Cpath d='M0 22 C 120 6, 240 38, 360 22 C 480 6, 600 38, 720 22 C 840 6, 960 38, 1080 22 C 1140 14, 1170 10, 1200 12' fill='none' stroke='%23ffffff' stroke-opacity='0.65' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1200px 40px;
background-position: center;
}
/* Listing */
.bp-section {
padding: 5rem 0 6rem;
background: var(--tone-paper, #fcf8f3);
}
.bp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.75rem;
align-items: stretch;
}
.bp-card {
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
border-radius: 12px;
transition: box-shadow 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
border-color 280ms ease;
}
.bp-card:hover {
box-shadow: 0 16px 42px rgba(7, 36, 47, 0.1);
border-color: rgba(7, 36, 47, 0.18);
transform: translateY(-3px);
}
.bp-card-media {
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--tone-paper, #fcf8f3);
}
.bp-card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bp-card:hover .bp-card-media img {
transform: scale(1.05);
}
.bp-card-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 1.5rem;
}
.bp-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.85rem;
font-size: 0.74rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6b7f8c;
}
.bp-card-cat {
display: inline-flex;
padding: 0.26rem 0.6rem;
border-radius: 3px;
background: var(--tone-warm-soft, #fdf1e3);
color: var(--tone-warm-deep, #c06a22);
font-weight: 600;
letter-spacing: 0.06em;
}
.bp-card-title {
margin: 0 0 0.7rem;
font-size: 1.22rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.015em;
}
.bp-card-title a {
color: var(--bp-ink);
text-decoration: none;
transition: color 200ms ease;
}
.bp-card-title a:hover {
color: var(--tone-warm-deep, #c06a22);
}
.bp-card-excerpt {
margin: 0 0 1.25rem;
font-size: 0.97rem;
line-height: 1.7;
color: #55707d;
}
.bp-card-link {
align-self: flex-start;
margin-top: auto;
padding: 0 0 2px;
font-size: 0.9rem;
font-weight: 600;
color: var(--tone-warm-deep, #c06a22);
text-decoration: none;
border-bottom: 1px solid rgba(192, 106, 34, 0.4);
transition: color 200ms ease, border-color 200ms ease;
}
.bp-card-link:hover {
color: var(--bp-ink);
border-bottom-color: var(--bp-ink);
}
.bp-empty {
text-align: center;
color: #55707d;
font-size: 1.05rem;
}
/* Pagination */
.bp-pagination {
margin-top: 3rem;
text-align: center;
}
.bp-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 0.7rem;
margin: 0 3px;
border-radius: 3px;
border: 1px solid var(--tone-line, rgba(7, 36, 47, 0.12));
background: #fff;
color: var(--bp-ink);
font-size: 0.92rem;
font-weight: 600;
text-decoration: none;
transition: border-color 200ms ease, color 200ms ease;
}
.bp-pagination .page-numbers:hover {
border-color: var(--tone-warm, #e08a3c);
color: var(--tone-warm-deep, #c06a22);
}
.bp-pagination .page-numbers.current {
background: var(--tone-warm, #e08a3c);
border-color: transparent;
color: var(--bp-ink);
}
/* Closing call to action */
.bp-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tone-warm-deep, #c06a22);
margin-bottom: 1rem;
}
.bp-eyebrow--light {
color: rgba(255, 255, 255, 0.72);
}
.bp-h2 {
margin: 0;
font-weight: 700;
font-size: clamp(1.9rem, 3.2vw, 2.7rem);
line-height: 1.14;
letter-spacing: -0.025em;
color: var(--bp-ink);
}
.bp-h2--light {
color: #fff;
}
.bp-lead--light {
margin: 0.5rem 0 0;
color: rgba(255, 255, 255, 0.86);
line-height: 1.6;
}
.bp-cta {
padding: 6rem 0;
color: #fff;
background:
radial-gradient(620px 320px at 88% 108%, rgba(224, 138, 60, 0.26), rgba(224, 138, 60, 0) 62%),
linear-gradient(150deg, #0c3a4a 0%, #07242f 100%);
}
.bp-cta-inner {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
align-items: center;
}
.bp-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.blog-page .btn {
padding: 0.75em 1.35em;
border: 1px solid transparent;
border-radius: 4px;
font-weight: 600;
text-decoration: none;
transition: background 220ms ease, color 220ms ease, transform 160ms ease;
}
.blog-page .btn:hover {
transform: translateY(-1px);
}
.bp-btn-primary {
background: var(--tone-warm, #e08a3c);
color: var(--bp-ink);
}
.bp-btn-primary:hover {
background: var(--tone-warm-deep, #c06a22);
color: #fff;
}
.bp-btn-ghost {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.24);
}
.bp-btn-ghost:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
@media (min-width: 1024px) {
.bp-cta-inner {
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
}
.bp-cta-actions {
justify-content: flex-end;
}
}
@media (max-width: 767px) {
.bp-section {
padding: 3.5rem 0 4rem;
}
.bp-cta {
padding: 4rem 0;
}
.bp-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
/* =====================================================================
VOICE GYM — rebuilt page.
One photographic hero, then a typographic page. Editorial scale,
a left rail of numbers, and programmes shown as a progression.
===================================================================== */
.vgym {
--ink: #07242f;
--ink-soft: #55707d;
--paper: #fcf8f3;
--line: rgba(7, 36, 47, 0.14);
--warm: #e08a3c;
--warm-deep: #c06a22;
color: var(--ink);
background: #fff;
}
.vgym * {
box-sizing: border-box;
}
.vgym h1,
.vgym h2,
.vgym h3 {
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.04;
margin: 0;
}
.vgym p {
margin: 0;
}
.vgym-kicker {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--warm-deep);
margin-bottom: 1.1rem !important;
}
.vgym-h2 {
font-size: clamp(2rem, 4.2vw, 3.4rem);
}
.vgym-head {
max-width: 30ch;
margin-bottom: 3.5rem;
}
.vgym-programmes .vgym-head {
max-width: 46ch;
}
.vgym-who .vgym-head {
max-width: none;
}
.vgym-head--light .vgym-kicker {
color: var(--warm);
}
.vgym-head--light .vgym-h2 {
color: #fff;
}
.vgym-head-note {
margin-top: 1.1rem !important;
color: rgba(255, 255, 255, 0.66);
font-size: 1.02rem;
line-height: 1.6;
max-width: 34ch;
}
/* --- 1. Hero --- */
.vgym-hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: min(88vh, 760px);
padding-top: 5rem;
overflow: hidden;
background: var(--ink);
}
.vgym-hero-media {
position: absolute;
inset: 0;
}
.vgym-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.42;
filter: grayscale(0.35) contrast(1.05);
animation: vgymDrift 26s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
.vgym-hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7, 36, 47, 0.7) 0%, rgba(7, 36, 47, 0.55) 40%, rgba(7, 36, 47, 0.94) 100%);
}
@keyframes vgymDrift {
from { transform: scale(1.02); }
to { transform: scale(1.1); }
}
.vgym-hero-inner {
position: relative;
z-index: 1;
padding-bottom: 3.5rem;
}
.vgym-hero-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 1.6rem !important;
}
.vgym-hero-title {
font-size: clamp(2.7rem, 7vw, 5.6rem);
color: #fff;
max-width: 16ch;
}
.vgym-hero-title em {
font-style: normal;
color: var(--warm);
}
.vgym-hero-lead {
margin-top: 1.6rem !important;
max-width: 46ch;
font-size: clamp(1.02rem, 1.4vw, 1.2rem);
line-height: 1.65;
color: rgba(255, 255, 255, 0.82);
}
.vgym-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2.2rem;
}
.vgym-btn {
display: inline-flex;
align-items: center;
padding: 0.95rem 1.7rem;
border-radius: 2px;
background: var(--warm);
color: var(--ink);
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
transition: background 200ms ease, color 200ms ease;
}
.vgym-btn:hover {
background: #fff;
color: var(--ink);
}
.vgym-btn--quiet {
background: none;
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.vgym-btn--quiet:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.vgym-hero-facts {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vgym-hero-facts > div {
padding: 1.3rem 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.vgym-hero-facts dt {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
color: #fff;
}
.vgym-hero-facts dd {
margin: 0.15rem 0 0;
font-size: 0.82rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
/* --- 2. Argument --- */
.vgym-argument {
padding: 7rem 0;
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.vgym-statement {
font-size: clamp(1.8rem, 4vw, 3.1rem);
font-weight: 700;
line-height: 1.16;
letter-spacing: -0.03em;
max-width: 20ch;
}
.vgym-statement span {
display: block;
color: var(--warm-deep);
}
.vgym-argument-body {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2.5rem;
max-width: 62ch;
}
.vgym-argument-body p {
font-size: 1.05rem;
line-height: 1.8;
color: var(--ink-soft);
}
/* --- 3. Who --- */
.vgym-who {
padding: 7rem 0;
}
.vgym-who-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.vgym-who-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
padding: 2rem 0;
border-bottom: 1px solid var(--line);
transition: background 220ms ease;
}
.vgym-who-list li:hover {
background: var(--paper);
}
.vgym-who-num {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--warm);
padding-top: 0.45rem;
font-variant-numeric: tabular-nums;
}
.vgym-who-list h3 {
font-size: 1.45rem;
margin-bottom: 0.4rem;
}
.vgym-who-list p {
font-size: 1rem;
line-height: 1.7;
color: var(--ink-soft);
max-width: 60ch;
}
/* --- 4. Programmes ladder --- */
.vgym-programmes {
padding: 7rem 0;
background: var(--ink);
color: #fff;
}
.vgym-ladder {
display: grid;
gap: 3.5rem;
}
.vgym-rung-stage {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
padding-bottom: 1.1rem;
margin-bottom: 1.6rem !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.vgym-prog-row {
display: grid;
grid-template-columns: 1fr;
gap: 2rem 2.5rem;
}
.vgym-prog h3 {
font-size: 1.5rem;
color: #fff;
margin-bottom: 0.3rem;
}
.vgym-prog-sub {
font-size: 0.8rem !important;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 0.8rem !important;
}
.vgym-prog p:last-child {
font-size: 0.98rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.66);
max-width: 44ch;
}
.vgym-prog--wide h3 {
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}
.vgym-prog--wide p:last-child {
max-width: 56ch;
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.76);
}
.vgym-prog--clinical .vgym-prog-sub {
color: #9fc4d2;
}
.vgym-prog--elite {
padding: 2rem;
background: rgba(224, 138, 60, 0.1);
box-shadow: inset 0 0 0 1px rgba(224, 138, 60, 0.35);
border-radius: 2px;
}
.vgym-rung--entry .vgym-prog--wide {
padding-left: 1.5rem;
border-left: 3px solid var(--warm);
}
/* --- 5. Method --- */
.vgym-method {
padding: 7rem 0;
background: var(--paper);
}
.vgym-method-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
counter-reset: m;
}
.vgym-method-grid article {
counter-increment: m;
position: relative;
padding-top: 1.6rem;
border-top: 2px solid var(--ink);
}
.vgym-method-grid article::before {
content: "0" counter(m);
position: absolute;
top: -2.1rem;
left: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--warm-deep);
}
.vgym-method-grid h3 {
font-size: 1.5rem;
margin-bottom: 0.6rem;
}
.vgym-method-grid p {
font-size: 1rem;
line-height: 1.75;
color: var(--ink-soft);
}
/* --- 6. Doctor --- */
.vgym-doctor {
padding: 7rem 0;
}
.vgym-doctor-inner {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
.vgym-doctor-photo {
margin: 0;
max-width: 420px;
}
.vgym-doctor-photo img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 2px;
filter: grayscale(0.15);
}
.vgym-doctor-role {
margin-top: 0.6rem !important;
font-size: 1.05rem;
font-weight: 600;
color: var(--warm-deep);
}
.vgym-doctor-text {
margin-top: 1.5rem !important;
font-size: 1.05rem;
line-height: 1.8;
color: var(--ink-soft);
max-width: 58ch;
}
.vgym-creds {
list-style: none;
margin: 2rem 0;
padding: 0;
display: grid;
gap: 0.55rem;
max-width: 46ch;
}
.vgym-creds li {
padding-bottom: 0.55rem;
border-bottom: 1px solid var(--line);
font-size: 0.93rem;
color: var(--ink);
}
.vgym-link {
font-size: 0.95rem;
font-weight: 600;
color: var(--warm-deep);
text-decoration: none;
border-bottom: 1px solid rgba(192, 106, 34, 0.45);
padding-bottom: 2px;
}
.vgym-link:hover {
color: var(--ink);
border-bottom-color: var(--ink);
}
/* --- 7. Process + FAQ --- */
.vgym-detail {
padding: 7rem 0;
background: var(--paper);
border-top: 1px solid var(--line);
}
.vgym-detail-inner {
display: grid;
grid-template-columns: 1fr;
gap: 3.5rem;
}
.vgym-steps {
list-style: none;
margin: 0;
padding: 0;
}
.vgym-steps li {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.25rem;
padding: 1.4rem 0;
border-top: 1px solid var(--line);
}
.vgym-steps li:last-child {
border-bottom: 1px solid var(--line);
}
.vgym-steps span {
font-size: 0.78rem;
font-weight: 700;
color: var(--warm);
padding-top: 0.3rem;
font-variant-numeric: tabular-nums;
}
.vgym-steps h3 {
font-size: 1.15rem;
margin-bottom: 0.25rem;
}
.vgym-steps p {
font-size: 0.96rem;
line-height: 1.65;
color: var(--ink-soft);
}
.vgym-faq {
border-top: 1px solid var(--line);
}
.vgym-faq:last-of-type {
border-bottom: 1px solid var(--line);
}
.vgym-faq summary {
list-style: none;
cursor: pointer;
padding: 1.25rem 2.5rem 1.25rem 0;
position: relative;
font-size: 1.05rem;
font-weight: 600;
color: var(--ink);
}
.vgym-faq summary::-webkit-details-marker {
display: none;
}
.vgym-faq summary::after {
content: "+";
position: absolute;
right: 0;
top: 1.1rem;
font-size: 1.3rem;
font-weight: 400;
color: var(--warm);
}
.vgym-faq[open] summary::after {
content: "\2212";
}
.vgym-faq p {
padding: 0 2.5rem 1.4rem 0;
font-size: 0.98rem;
line-height: 1.75;
color: var(--ink-soft);
}
/* --- 8. Close --- */
.vgym-close {
padding: 7rem 0;
background: var(--ink);
color: #fff;
}
.vgym-close-title {
font-size: clamp(2.2rem, 5vw, 4rem);
color: #fff;
}
.vgym-close-text {
margin-top: 1.1rem !important;
font-size: 1.1rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.7);
max-width: 42ch;
}
.vgym-close-locations {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-top: 4.5rem;
padding-top: 2.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vgym-close-locations h3 {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 0.8rem;
}
.vgym-close-locations p {
font-size: 0.95rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 0.6rem !important;
}
.vgym-close-locations a {
font-size: 0.95rem;
font-weight: 600;
color: #fff;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
/* --- Responsive --- */
@media (min-width: 700px) {
.vgym-hero-facts {
grid-template-columns: repeat(3, 1fr);
}
.vgym-hero-facts > div {
border-bottom: 0;
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.vgym-hero-facts > div:last-child {
border-right: 0;
}
.vgym-argument-body {
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
}
.vgym-method-grid,
.vgym-close-locations {
grid-template-columns: repeat(3, 1fr);
}
.vgym-prog-row {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.vgym-hero-inner {
padding-bottom: 4.5rem;
}
.vgym-argument-inner,
.vgym-method-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 4rem;
align-items: start;
}
.vgym-argument .vgym-kicker,
.vgym-argument .vgym-statement {
grid-column: 1;
}
.vgym-argument-body {
grid-column: 2;
grid-row: 1 / 3;
margin-top: 0.4rem;
grid-template-columns: 1fr;
}
.vgym-method .vgym-head {
grid-column: 1;
margin-bottom: 0;
}
.vgym-method-grid {
grid-column: 2;
grid-template-columns: 1fr;
gap: 2.75rem;
}
.vgym-who-list li {
grid-template-columns: 5rem 1fr;
gap: 2.5rem;
}
.vgym-prog-row {
grid-template-columns: repeat(4, 1fr);
}
.vgym-prog-row--two {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.vgym-doctor-inner {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 4.5rem;
}
.vgym-detail-inner {
grid-template-columns: 1fr 1fr;
gap: 5rem;
}
}
@media (max-width: 767px) {
.vgym-argument,
.vgym-who,
.vgym-programmes,
.vgym-method,
.vgym-doctor,
.vgym-detail,
.vgym-close {
padding: 4.5rem 0;
}
.vgym-hero {
min-height: auto;
padding-top: 3.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.vgym-hero-media img {
animation: none;
}
}
/* =====================================================================
RESTORED: base layout rules for shared home-page components.
These were removed in error while cleaning up the old Voice Gym
styles; the theme overrides for them still exist further up.
===================================================================== */
/* --- Section header --- */
.section-header {
text-align: center;
margin-bottom: 40px;
}
.section-title {
font-size: 2.5rem;
font-weight: bold;
color: #fff;
margin-bottom: 0;
}
.section-subtitle {
font-size: 1.125rem;
color: #fff;
margin-bottom: 0;
margin-top: 2px;
}
/* --- Testimonials --- */
.testimonials-section {
max-width: 900px;
margin: 0 auto;
width: 100%;
}
.testimonial-container {
position: relative;
}
.testimonial-card {
background: #fff;
border-radius: 16px;
padding: 48px;
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e5e5;
opacity: 0;
animation: fadeIn 0.3s ease-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.testimonial-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.testimonial-image {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--shrivas-bg-blue);
}
.testimonial-author {
flex: 1;
}
.testimonial-name {
font-size: 1.125rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 4px;
}
.testimonial-role {
color: #666;
font-size: 0.875rem;
}
.stars {
display: flex;
gap: 4px;
margin-bottom: 16px;
}
.star {
width: 20px;
height: 20px;
fill: var(--shrivas-bg-blue);
}
.testimonial-content {
font-size: 1.125rem;
line-height: 1.75;
color: #333;
margin-bottom: 32px;
font-style: italic;
}
.testimonial-dots {
display: flex;
justify-content: center;
gap: 8px;
}
.dot {
height: 8px;
width: 8px;
border-radius: 9999px;
background: #e5e5e5;
border: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.dot:hover {
background: #d4d4d4;
}
.dot.active {
width: 32px;
background: var(--shrivas-bg-blue);
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 24px;
}
.nav-button {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #e5e5e5;
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.nav-button svg {
width: 24px;
height: 24px;
stroke: #1a1a1a;
fill: none;
}
/* --- Facilities / services grid --- */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
padding-top: 3rem;
}
.service-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 0.75rem;
padding: 1.2rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-card);
}
.service-icon {
width: 100%;
height: 200px;
object-fit: cover;
margin-bottom: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--card-foreground);
}
.service-description {
font-size: 1rem;
color: var(--muted-foreground);
font-weight: 500;
margin-bottom: 1rem;
}
.service-features {
list-style: none;
}
/* --- Associated hospitals scroller --- */
.hospital-scroll-section {
width: 100%;
padding: 4rem 0;
overflow: hidden;
}
.scroll-container {
position: relative;
width: 100%;
overflow: visible;
}
.scroll-track {
display: flex;
width: fit-content;
animation: scroll 40s linear infinite;
will-change: transform;
}
.hospital-card {
flex-shrink: 0;
margin: 0 2rem;
width: 10rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hospital-card p {
height: 30%;
font-weight: bold;
}
.card-inner {
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
padding: 1.1rem;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.card-inner img {
max-width: 100%;
max-height: 70%;
object-fit: contain;
transition: all 0.3s ease;
}
/* --- FAQ accordion --- */
.faq {
max-width: 70%;
margin: 0 auto;
padding: 2rem;
}
.faq-item {
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 10px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.faq-question {
background: #f1f5f9;
padding: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-question:hover {
background: #e2e8f0;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition:
max-height 0.3s ease,
padding 0.3s ease;
padding: 0 16px;
color: #475569;
line-height: 1.5;
}
.faq-item.active .faq-answer {
max-height: max-content;
padding: 16px;
}
.faq-answer ul {
margin: revert;
padding: revert;
}
.faq-item.active .icon {
transform: rotate(180deg);
}
/* Hospital logo carousel animation (restored). */
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-33.333%);
}
}
/* =====================================================================
VOICE GYM — section variation.
Each section gets its own treatment so the page stops repeating
one left-aligned pattern eight times.
===================================================================== */
/* 2. The idea — dark full-bleed quote band */
.vgym-argument {
background: var(--ink);
color: #fff;
border-bottom: 0;
padding: 8rem 0;
}
.vgym-argument .vgym-statement {
position: relative;
padding-top: 2.5rem;
font-size: clamp(2rem, 4.6vw, 3.6rem);
color: #fff;
max-width: 22ch;
margin: 0;
quotes: none;
}
.vgym-argument .vgym-statement::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4rem;
height: 3px;
background: var(--warm);
}
.vgym-argument .vgym-statement span {
color: var(--warm);
}
.vgym-argument-body p {
color: rgba(255, 255, 255, 0.68);
}
/* 3. Who — header splits, list gets a wide hover state */
.vgym-head--split {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
max-width: none;
align-items: end;
}
.vgym-head--split > div {
max-width: 48ch;
}
.vgym-head--split .vgym-h2 {
max-width: 16ch;
}
.vgym-head-aside {
font-size: 0.95rem;
color: var(--ink-soft);
letter-spacing: 0.01em;
}
.vgym-who-list li {
position: relative;
padding-left: 0;
transition: padding-left 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
background 320ms ease;
}
.vgym-who-list li::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 0;
height: 2px;
background: var(--warm);
transition: width 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vgym-who-list li:hover::after {
width: 100%;
}
.vgym-who-list li:hover {
background: none;
}
/* 5. Method — centred, three columns under one split headline */
.vgym-method {
background: #fff;
border-top: 1px solid var(--line);
padding: 8rem 0;
text-align: center;
}
.vgym-kicker--center {
text-align: center;
}
.vgym-method-title {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1em;
font-size: clamp(2.2rem, 6vw, 4.6rem);
line-height: 0.98;
letter-spacing: -0.04em;
margin-bottom: 4rem;
}
.vgym-method-title span:nth-child(1) { color: var(--ink); }
.vgym-method-title span:nth-child(2) { color: var(--warm); }
.vgym-method-title span:nth-child(3) { color: var(--ink-soft); }
.vgym-method .vgym-method-grid {
counter-reset: m;
text-align: left;
max-width: 1000px;
margin: 0 auto;
}
.vgym-method .vgym-method-grid article {
border-top: 1px solid var(--line);
padding-top: 2.6rem;
position: relative;
}
.vgym-method .vgym-method-grid article::before {
color: var(--warm);
top: 1.1rem;
}
/* 6. Doctor — offset, photo overlaps the section edge */
.vgym-doctor {
background: var(--paper);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.vgym-doctor-photo img {
filter: grayscale(0.15) contrast(1.02);
}
/* 7. Detail — process on paper, FAQ on white, split down the middle */
.vgym-detail {
padding: 0;
background: none;
border-top: 0;
}
.vgym-detail-inner {
gap: 0;
}
.vgym-process,
.vgym-faq-block {
padding: 6rem 0;
}
@media (min-width: 700px) {
.vgym-method-title {
flex-direction: row;
gap: 0.4em;
justify-content: center;
flex-wrap: wrap;
}
}
@media (min-width: 1024px) {
.vgym-head--split {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 3rem;
}
.vgym-head-aside {
text-align: right;
padding-bottom: 0.5rem;
}
.vgym-who-list li:hover {
padding-left: 1.25rem;
}
.vgym-argument-inner {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 5rem;
}
.vgym-method .vgym-method-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
.vgym-doctor-inner {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: center;
}
.vgym-doctor-photo {
max-width: none;
margin-left: -4rem;
}
.vgym-doctor-media {
padding-bottom: 2rem;
}
.vgym-detail-inner {
grid-template-columns: 1fr 1fr;
gap: 0;
}
.vgym-process {
padding-right: 4rem;
background: var(--paper);
position: relative;
}
.vgym-process::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50vw;
background: var(--paper);
z-index: -1;
}
.vgym-process::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -50vw;
width: 50vw;
background: var(--paper);
}
.vgym-faq-block {
padding-left: 4rem;
}
}
@media (max-width: 767px) {
.vgym-argument,
.vgym-method {
padding: 4.5rem 0;
}
.vgym-process,
.vgym-faq-block {
padding: 3.5rem 0;
}
.vgym-process {
background: var(--paper);
}
}
/* =====================================================================
VOICE GYM — programmes as a numbered index.
A contents-page treatment: big left numerals, a rule per row, and a
tag column on the right. Replaces the stacked ladder.
===================================================================== */
.vgym-index-head {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: 4rem;
align-items: end;
}
.vgym-index-title {
font-size: clamp(2.1rem, 4.6vw, 3.6rem);
line-height: 1.02;
letter-spacing: -0.035em;
color: #fff;
margin: 0;
}
.vgym-index-note {
font-size: 1rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.55);
max-width: 30ch;
}
.vgym-index {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vgym-idx {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.35rem 1.25rem;
padding: 1.9rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
transition: background 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vgym-idx::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 0;
height: 1px;
background: var(--warm);
transition: width 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vgym-idx:hover::after {
width: 100%;
}
.vgym-idx-num {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, 0.34);
padding-top: 0.5rem;
transition: color 300ms ease;
}
.vgym-idx:hover .vgym-idx-num {
color: var(--warm);
}
.vgym-idx-body h3 {
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
color: #fff;
margin-bottom: 0.25rem;
}
.vgym-idx-for {
font-size: 0.78rem !important;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 0.6rem !important;
}
.vgym-idx-text {
font-size: 0.98rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.6);
max-width: 58ch;
}
.vgym-idx-tag {
grid-column: 2;
justify-self: start;
margin-top: 0.4rem;
padding: 0.28rem 0.7rem;
border-radius: 2px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.vgym-idx-tag--clinical {
color: #9fc4d2;
box-shadow: inset 0 0 0 1px rgba(159, 196, 210, 0.4);
}
.vgym-idx-tag--elite {
color: var(--warm);
box-shadow: inset 0 0 0 1px rgba(224, 138, 60, 0.5);
}
/* The first row reads as the entry point */
.vgym-idx--first {
padding-top: 2.4rem;
padding-bottom: 2.4rem;
background: rgba(255, 255, 255, 0.03);
}
.vgym-idx--first .vgym-idx-num {
color: var(--warm);
}
.vgym-idx--first .vgym-idx-body h3 {
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}
.vgym-idx--first .vgym-idx-tag {
color: var(--ink);
background: var(--warm);
box-shadow: none;
}
@media (min-width: 900px) {
.vgym-index-head {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 3rem;
}
.vgym-index-head .vgym-kicker {
grid-column: 1 / -1;
}
.vgym-index-note {
padding-bottom: 0.5rem;
}
.vgym-idx {
grid-template-columns: 4.5rem minmax(0, 1fr) 7rem;
gap: 0 2rem;
align-items: start;
}
.vgym-idx-num {
font-size: 0.85rem;
}
.vgym-idx-tag {
grid-column: 3;
justify-self: end;
margin-top: 0.7rem;
}
.vgym-idx:hover {
background: rgba(255, 255, 255, 0.03);
}
}
/* =====================================================================
RESTORED: base Services page rules (hero, sections, CTA).
Removed in error during the Voice Gym cleanup; the dual-tone
overrides for these still exist further up the file.
===================================================================== */
.services-page {
--sp-blue: #005a86;
--sp-teal: #1aa6b7;
--sv-blue: #005a86;
--sv-teal: #1aa6b7;
color: var(--foreground);
}
.services-page * {
box-sizing: border-box;
}
/* Hero */
.sp-hero {
position: relative;
overflow: hidden;
color: #fff;
text-align: center;
background: linear-gradient(140deg, #0c3a4a 0%, #07242f 100%);
}
.sp-hero-inner {
position: relative;
z-index: 1;
padding-top: 68px;
padding-bottom: 28px;
}
.sp-kicker {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 6px 12px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.92);
font-size: 13px;
letter-spacing: 0.02em;
}
.sp-hero-title {
margin: 16px 0 10px;
font-weight: 700;
font-size: clamp(34px, 4.6vw, 56px);
line-height: 1.06;
letter-spacing: -0.03em;
color: #fff;
}
.sp-hero-lead {
margin: 0 auto 22px;
max-width: 56ch;
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.86);
}
.sp-jump {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.sp-jump a {
display: inline-flex;
align-items: center;
padding: 9px 14px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sp-jump a:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.sp-wave {
height: 22px;
margin-top: 24px;
opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' viewBox='0 0 1200 40'%3E%3Cpath d='M0 22 C 120 6, 240 38, 360 22 C 480 6, 600 38, 720 22 C 840 6, 960 38, 1080 22 C 1140 14, 1170 10, 1200 12' fill='none' stroke='%23ffffff' stroke-opacity='0.65' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1200px 40px;
background-position: center;
}
/* Sections */
.sp-section,
.services-page #procedures {
scroll-margin-top: 200px;
}
.sp-section {
padding: 7rem 0;
background: #fff;
}
.sp-head {
text-align: center;
max-width: 800px;
margin: 0 auto 2rem;
}
.sp-h2 {
margin: 0;
font-size: clamp(1.9rem, 3.2vw, 2.7rem);
line-height: 1.14;
font-weight: 700;
letter-spacing: -0.025em;
}
.sp-intro {
max-width: 56rem;
margin: 0 auto;
}
.sp-intro .services-card-text + .services-card-text {
margin-top: 1rem;
}
.services-page .sp-body {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(15, 23, 42, 0.12);
}
.sp-note {
margin: 1.25rem 0 0;
text-align: center;
font-size: 0.95rem;
color: var(--muted-foreground);
}
/* Closing call to action */
.sp-cta {
padding: 6rem 0;
color: #fff;
background: linear-gradient(150deg, #0c3a4a 0%, #07242f 100%);
}
.sp-cta-inner {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: center;
}
.sp-lead--light {
margin: 0.5rem 0 0;
color: rgba(255, 255, 255, 0.86);
line-height: 1.6;
}
.sp-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.services-page .btn {
padding: 0.7em 1.3em;
border: 1px solid transparent;
border-radius: 4px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 120ms ease;
}
.services-page .btn:hover {
transform: translateY(-1px);
}
.sp-btn-ghost {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.24);
}
.sp-btn-ghost:hover {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
@media (min-width: 1024px) {
.sp-cta-inner {
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
}
.sp-cta-actions {
justify-content: flex-end;
}
}
@media (max-width: 768px) {
.sp-wave {
background-size: 900px 40px;
}
.sp-section {
scroll-margin-top: 170px;
}
.sp-intro .services-card-text {
text-align: left;
}
}
/* =====================================================================
RESTORED: base doctor-profile page rules.
Removed in error during the Voice Gym cleanup.
===================================================================== */
.dr-page {
--dr-blue: #0c3a4a;
--dr-teal: #18657d;
--am-blue: #0c3a4a;
--am-teal: #18657d;
color: var(--foreground);
}
.dr-page * {
box-sizing: border-box;
}
/* Hero */
.dr-hero {
position: relative;
overflow: hidden;
color: #fff;
background: linear-gradient(140deg, #0c3a4a 0%, #07242f 100%);
}
.dr-hero-inner {
position: relative;
z-index: 1;
padding-top: 48px;
padding-bottom: 18px;
}
.dr-hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
align-items: center;
}
.dr-kicker {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 6px 12px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.24);
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
}
.dr-hero-title {
margin: 14px 0 4px;
letter-spacing: -0.03em;
font-size: clamp(30px, 4.2vw, 48px);
line-height: 1.08;
font-weight: 700;
color: #fff;
}
.dr-hero-role {
margin: 0 0 14px;
font-size: clamp(17px, 1.8vw, 21px);
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
}
.dr-pills {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.dr-pills li {
display: inline-flex;
padding: 9px 12px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.24);
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
}
.dr-tags {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dr-tags li {
display: inline-flex;
padding: 5px 11px;
border-radius: 3px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
.dr-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.dr-page .btn {
padding: 0.7em 1.3em;
border: 1px solid transparent;
border-radius: 4px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 120ms ease;
}
.dr-page .btn:hover {
transform: translateY(-1px);
}
.dr-btn-ghost {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.24);
}
.dr-btn-ghost:hover {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.dr-hero-photo {
align-self: center;
max-width: 360px;
width: 100%;
margin: 0 auto;
padding: 6px;
border-radius: 4px;
background: #fff;
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.3);
}
.dr-hero-photo img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 3px;
}
/* Sections */
.dr-section {
padding: 7rem 0;
background: #fff;
}
.dr-head {
text-align: center;
max-width: 820px;
margin: 0 auto 2.25rem;
}
.dr-h2 {
margin: 0;
font-size: clamp(1.8rem, 3vw, 2.5rem);
line-height: 1.16;
font-weight: 700;
letter-spacing: -0.025em;
}
.dr-profile {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: start;
}
.dr-profile-intro p,
.dr-profile-body p {
margin: 0 0 1rem;
font-size: 1.0625rem;
line-height: 1.75;
color: var(--muted-foreground);
}
.dr-profile-intro .dr-lead {
font-size: 1.15rem;
font-weight: 500;
}
.dr-profile-body .about-me-h3:first-child {
margin-top: 0;
}
@media (min-width: 1024px) {
.dr-hero-grid {
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}
.dr-hero-inner {
padding-top: 60px;
}
.dr-profile {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
gap: 3.5rem;
}
.dr-profile-intro {
position: sticky;
top: 7rem;
}
}
@media (max-width: 767px) {
.dr-section {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
}
/* =====================================================================
RESTORED: VASCON 2026 page styles.
These were removed in error while cleaning up other page styles.
Recovered from the shrivasclinic theme copy.
===================================================================== */
.vascon2026 {
/* Prefer live-site variables when embedded into shrivasclinic.com */
--vsc-bg: var(--background, #ffffff);
--vsc-ink: var(--foreground, #0f172a);
--vsc-muted: var(--muted-foreground, #475569);
--vsc-line: var(--border, rgba(15, 23, 42, 0.12));
--vsc-card: var(--card, #ffffff);
--vsc-surface: var(--muted, #f8fafc);
--vsc-brand: var(--primary, #0f766e);
--vsc-brand-2: var(--accent, #2563eb);
--vsc-shadow: var(--shadow-card, 0 10px 30px rgba(15, 23, 42, 0.1));
--vsc-shadow-hover: var(--shadow-hover, 0 18px 38px rgba(15, 23, 42, 0.16));
--vsc-radius: var(--radius, 0.5rem);
--vsc-hero-blue: var(--shrivas-bg-blue, #005a86);
--vsc-hero-grad: var(
--gradient-hero,
linear-gradient(135deg, var(--vsc-hero-blue), #1aa6b7)
);
--vsc-teal: #1aa6b7;
--vsc-surface-2: rgba(0, 90, 134, 0.06);
--vsc-radius-lg: calc(var(--vsc-radius) + 0.35rem);
color: var(--vsc-ink);
background:
radial-gradient(
1200px 700px at 15% 0%,
rgba(0, 90, 134, 0.1),
rgba(0, 90, 134, 0) 55%
),
radial-gradient(
900px 650px at 92% 20%,
rgba(26, 166, 183, 0.1),
rgba(26, 166, 183, 0) 55%
),
var(--vsc-bg);
}
.vascon2026 * {
box-sizing: border-box;
}
.vascon2026 a {
color: white;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
.vascon2026 a:hover {
text-decoration-thickness: 0.12em;
}
.vascon2026 .vsc-srOnly {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.vascon2026 .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.vascon2026 .vsc-hero {
padding: 42px 0 18px;
background:
radial-gradient(
900px 420px at 18% 12%,
rgba(255, 255, 255, 0.16),
rgba(255, 255, 255, 0) 60%
),
radial-gradient(
820px 460px at 86% 0%,
rgba(255, 255, 255, 0.12),
rgba(255, 255, 255, 0) 62%
),
var(--vsc-hero-grad);
border-bottom: 1px solid var(--vsc-line);
position: relative;
overflow: hidden;
}
.vascon2026 .vsc-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='520' viewBox='0 0 920 520'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0.55'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0.0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='2'%3E%3Cpath d='M20 250 C 120 210, 160 310, 260 270 C 360 230, 400 340, 520 290 C 640 240, 700 320, 820 280'/%3E%3Cpath d='M40 310 C 140 270, 190 360, 290 320 C 390 280, 430 390, 560 340 C 690 290, 750 370, 880 330'/%3E%3Cpath d='M70 120 C 140 140, 190 170, 250 210 C 310 250, 370 290, 450 300 C 540 310, 620 280, 690 230 C 750 190, 790 150, 860 130'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1'%3E%3Ccircle cx='760' cy='120' r='80'/%3E%3Ccircle cx='760' cy='120' r='140'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 75% 35%;
background-size: 900px auto;
}
.vascon2026 .vsc-heroGrid {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 22px;
align-items: stretch;
}
.vascon2026 .vsc-siteLogo {
height: 58px;
width: auto;
border-radius: 18px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
display: inline-block;
margin-bottom: 10px;
}
.vascon2026 .vsc-siteLogo--wide {
height: 52px;
padding: 8px 12px;
border-radius: 20px;
max-width: 100%;
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.22);
}
.vascon2026 .vsc-siteLogo--small {
height: 44px;
padding: 8px 10px;
margin: 0 0 8px;
box-shadow: 0 12px 20px rgba(15, 23, 42, 0.12);
}
.vascon2026 .vsc-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.26);
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
}
.vascon2026 .vsc-title {
margin: 14px 0 6px;
letter-spacing: -0.02em;
font-size: clamp(30px, 4vw, 46px);
line-height: 1.08;
background: linear-gradient(135deg, var(--vsc-brand), var(--vsc-brand-2));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.vascon2026 .vsc-hero .vsc-title {
background: none;
-webkit-text-fill-color: initial;
color: #ffffff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}
.vascon2026 .vsc-subtitle {
margin: 0;
color: var(--vsc-muted);
font-size: 16px;
line-height: 1.55;
max-width: 62ch;
}
.vascon2026 .vsc-hero .vsc-subtitle {
color: rgba(255, 255, 255, 0.92);
}
.vascon2026 .vsc-metaRow {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.vascon2026 .vsc-pill {
display: inline-flex;
gap: 10px;
align-items: baseline;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid var(--vsc-line);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
color: var(--vsc-ink);
font-size: 13px;
}
.vascon2026 .vsc-hero .vsc-pill {
border-color: rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.95);
}
.vascon2026 .vsc-pill strong {
font-weight: 700;
}
.vascon2026 .vsc-ctaRow {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.vascon2026 .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
font-size: 1rem;
font-weight: 500;
border-radius: 0.375rem;
padding: 0.65em 1.25em;
border: 1px solid transparent;
cursor: pointer;
transition:
background 0.2s,
color 0.2s,
box-shadow 0.2s,
transform 120ms ease;
text-decoration: none;
}
.vascon2026 .btn:hover {
transform: translateY(-1px);
}
.vascon2026 .btn-primary {
background: var(--vsc-brand);
color: var(--primary-foreground, #ffffff);
}
.vascon2026 .btn-primary:hover {
box-shadow: var(--vsc-shadow-hover);
}
.vascon2026 .btn-outline {
background: rgba(255, 255, 255, 0.75);
color: var(--vsc-brand);
border-color: rgba(15, 23, 42, 0.14);
}
.vascon2026 .btn-outline:hover {
background: rgba(15, 23, 42, 0.04);
}
.vascon2026 .btn-ghost {
background: transparent;
color: var(--vsc-brand);
border-color: rgba(15, 23, 42, 0.1);
}
.vascon2026 .btn-ghost:hover {
background: rgba(15, 23, 42, 0.04);
}
.vascon2026 .vsc-hero .btn-primary {
background: rgba(255, 255, 255, 0.96);
color: var(--vsc-hero-blue);
border-color: rgba(255, 255, 255, 0.26);
}
.vascon2026 .vsc-hero .btn-primary:hover {
background: #ffffff;
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}
.vascon2026 .vsc-hero .btn-outline,
.vascon2026 .vsc-hero .btn-ghost {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.24);
}
.vascon2026 .vsc-hero .btn-outline:hover,
.vascon2026 .vsc-hero .btn-ghost:hover {
background: rgba(255, 255, 255, 0.18);
}
.vascon2026 .vsc-heroAside {
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: var(--vsc-radius);
overflow: hidden;
background: transparent;
}
.vascon2026 .vsc-cover {
width: 100%;
height: auto;
display: block;
}
.vascon2026 .vsc-asideBody {
padding: 14px;
}
.vascon2026 .vsc-logos {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin: 10px 0 0;
}
.vascon2026 .vsc-logoImg {
height: 28px;
width: auto;
max-width: 170px;
object-fit: contain;
border-radius: 8px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: var(--vsc-card);
padding: 6px 8px;
}
.vascon2026 .vsc-section {
padding: 34px 0;
position: relative;
overflow: hidden;
}
.vascon2026 .vsc-section > .container {
position: relative;
z-index: 1;
}
.vascon2026 .vsc-section:not(.vsc-section--alt)::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
900px 420px at 12% 10%,
rgba(0, 90, 134, 0.08),
rgba(0, 90, 134, 0) 62%
),
radial-gradient(
820px 420px at 92% 20%,
rgba(26, 166, 183, 0.08),
rgba(26, 166, 183, 0) 62%
),
linear-gradient(135deg, rgba(0, 90, 134, 0.02), rgba(26, 166, 183, 0.02));
}
.vascon2026 .vsc-section:not(.vsc-section--alt)::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
135deg,
rgba(0, 90, 134, 0.035) 0px,
rgba(0, 90, 134, 0.035) 1px,
rgba(0, 90, 134, 0) 1px,
rgba(0, 90, 134, 0) 14px
);
opacity: 0.22;
}
.vascon2026 .vsc-hero::before {
display: none;
}
.vascon2026 .vsc-section--alt {
background:
radial-gradient(
900px 420px at 10% 0%,
rgba(0, 90, 134, 0.1),
rgba(0, 90, 134, 0) 62%
),
radial-gradient(
800px 420px at 92% 20%,
rgba(26, 166, 183, 0.1),
rgba(26, 166, 183, 0) 62%
),
var(--vsc-surface);
border-top: 1px solid var(--vsc-line);
border-bottom: 1px solid var(--vsc-line);
}
.vascon2026 .vsc-h2 {
margin: 0 0 10px;
font-size: 22px;
letter-spacing: -0.01em;
}
.vascon2026 .vsc-section .vsc-h2 {
background: linear-gradient(135deg, var(--vsc-brand), var(--vsc-brand-2));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.vascon2026 .vsc-lead {
margin: 0;
color: var(--vsc-muted);
line-height: 1.65;
max-width: 80ch;
}
.vascon2026 .vsc-hero .vsc-note,
.vascon2026 .vsc-hero .vsc-note a {
color: black;
}
.vsc-note-details {
color: white;
}
.vascon2026 .vsc-hero .vsc-note a {
text-decoration-color: rgba(255, 255, 255, 0.6);
}
.vascon2026 .vsc-hero .vsc-note a:hover {
text-decoration-color: rgba(255, 255, 255, 0.9);
}
.vascon2026 .vsc-grid3 {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.vascon2026 .card {
border: 1px solid transparent;
background:
linear-gradient(var(--vsc-card), var(--vsc-card)) padding-box,
linear-gradient(135deg, rgba(0, 90, 134, 0.3), rgba(26, 166, 183, 0.28))
border-box;
border-radius: var(--vsc-radius-lg);
padding: 16px;
box-shadow: var(--vsc-shadow);
transition:
transform 140ms ease,
box-shadow 140ms ease,
border-color 140ms ease;
position: relative;
}
.vascon2026 .card::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 3px;
width: 100%;
background: linear-gradient(90deg, var(--vsc-hero-blue), var(--vsc-brand-2));
opacity: 0.65;
}
.vascon2026 .card:hover {
transform: translateY(-2px);
box-shadow: var(--vsc-shadow-hover);
}
.vascon2026 .vsc-cardTitle {
margin: 0 0 6px;
font-size: 15px;
letter-spacing: -0.01em;
}
.vascon2026 .vsc-cardText {
margin: 0;
color: var(--vsc-muted);
line-height: 1.6;
font-size: 14px;
}
.vascon2026 .vsc-icon {
width: 40px;
height: 40px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(
135deg,
rgba(0, 90, 134, 0.14),
rgba(26, 166, 183, 0.14)
);
border: 1px solid rgba(0, 90, 134, 0.18);
}
.vascon2026 .vsc-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: rgba(0, 90, 134, 0.95);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.vascon2026 .vsc-row {
display: flex;
gap: 12px;
align-items: flex-start;
}
.vascon2026 .vsc-row h3 {
margin: 0 0 6px;
}
.vascon2026 .vsc-band {
margin-top: -1px;
padding: 18px 0 26px;
background:
radial-gradient(
900px 420px at 18% 12%,
rgba(255, 255, 255, 0.16),
rgba(255, 255, 255, 0) 60%
),
radial-gradient(
820px 460px at 86% 0%,
rgba(255, 255, 255, 0.12),
rgba(255, 255, 255, 0) 62%
),
var(--vsc-hero-grad);
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.vascon2026 .vsc-bandGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.vascon2026 .vsc-bandCard {
border-radius: var(--vsc-radius-lg);
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(8px);
padding: 12px 12px;
color: rgba(255, 255, 255, 0.95);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.vascon2026 .vsc-bandCard .vsc-icon {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.22);
}
.vascon2026 .vsc-bandCard .vsc-icon svg {
stroke: rgba(255, 255, 255, 0.95);
}
.vascon2026 .vsc-bandTitle {
margin: 10px 0 4px;
font-weight: 850;
letter-spacing: -0.01em;
font-size: 14px;
}
.vascon2026 .vsc-bandText {
margin: 0;
color: rgba(255, 255, 255, 0.88);
font-size: 13px;
line-height: 1.45;
}
.vascon2026 .vsc-dividerWave {
height: 22px;
margin-top: 18px;
opacity: 0.65;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' viewBox='0 0 1200 40'%3E%3Cpath d='M0 22 C 120 6, 240 38, 360 22 C 480 6, 600 38, 720 22 C 840 6, 960 38, 1080 22 C 1140 14, 1170 10, 1200 12' fill='none' stroke='%23ffffff' stroke-opacity='0.65' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1200px 40px;
background-position: center;
}
@keyframes vsc-rise {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.vascon2026 .vsc-heroGrid > div > * {
animation: vsc-rise 520ms ease both;
}
.vascon2026 .vsc-heroGrid > div > *:nth-child(1) {
animation-delay: 0ms;
}
.vascon2026 .vsc-heroGrid > div > *:nth-child(2) {
animation-delay: 60ms;
}
.vascon2026 .vsc-heroGrid > div > *:nth-child(3) {
animation-delay: 120ms;
}
.vascon2026 .vsc-heroGrid > div > *:nth-child(4) {
animation-delay: 180ms;
}
.vascon2026 .vsc-heroGrid > div > *:nth-child(5) {
animation-delay: 240ms;
}
.vascon2026 .vsc-details {
margin-top: 14px;
}
.vascon2026 .vsc-details summary {
cursor: pointer;
font-weight: 650;
color: var(--vsc-ink);
}
.vascon2026 .vsc-detailsBody {
margin-top: 10px;
color: var(--vsc-muted);
line-height: 1.75;
}
.vascon2026 .vsc-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 16px;
}
.vascon2026 .vsc-chipGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 10px;
margin-top: 10px;
}
.vascon2026 .vsc-chip {
border: 1px solid var(--vsc-line);
background: rgba(255, 255, 255, 0.88);
padding: 8px 10px;
border-radius: 999px;
color: var(--vsc-ink);
font-size: 13px;
line-height: 1.2;
}
.vascon2026 .vsc-chip small {
display: block;
color: var(--vsc-muted);
margin-top: 4px;
font-size: 12px;
}
.vascon2026 .vsc-facultyWrap {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 14px;
}
.vascon2026 .vsc-facultyCol {
display: grid;
grid-auto-rows: min-content;
gap: 14px;
}
.vascon2026 .vsc-facultyCard .vsc-note {
margin-top: 8px;
}
.vascon2026 .vsc-facultyHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.vascon2026 .vsc-badge {
display: inline-flex;
align-items: center;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
padding: 6px 10px;
background: rgba(0, 90, 134, 0.1);
border: 1px solid rgba(0, 90, 134, 0.18);
color: rgba(0, 90, 134, 0.95);
white-space: nowrap;
}
.vascon2026 .vsc-badge--teal {
background: rgba(26, 166, 183, 0.12);
border-color: rgba(26, 166, 183, 0.22);
color: rgba(0, 110, 126, 1);
}
.vascon2026 .vsc-personList {
margin: 12px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.vascon2026 .vsc-personRow {
display: grid;
grid-template-columns: 12px 1fr;
gap: 10px;
align-items: start;
}
.vascon2026 .vsc-personDot {
width: 10px;
height: 10px;
border-radius: 999px;
margin-top: 4px;
background: linear-gradient(135deg, var(--vsc-hero-blue), var(--vsc-brand-2));
box-shadow: 0 0 0 4px rgba(0, 90, 134, 0.1);
}
.vascon2026 .vsc-personName {
font-weight: 800;
color: var(--vsc-ink);
font-size: 14px;
line-height: 1.2;
}
.vascon2026 .vsc-personMeta {
margin-top: 4px;
color: var(--vsc-muted);
font-size: 13px;
line-height: 1.35;
}
.vascon2026 .vsc-miniGrid {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.vascon2026 .vsc-miniGrid--tight {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vascon2026 .vsc-miniPerson {
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 14px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.75);
}
.vascon2026 .vsc-miniName {
font-weight: 800;
font-size: 13px;
line-height: 1.25;
color: var(--vsc-ink);
}
.vascon2026 .vsc-miniMeta {
margin-top: 4px;
font-size: 12px;
color: var(--vsc-muted);
}
.vascon2026 .vsc-details--tight {
margin-top: 10px;
}
.vascon2026 .vsc-colList {
margin: 0;
padding-left: 18px;
columns: 2;
column-gap: 24px;
}
.vascon2026 .vsc-colList li {
break-inside: avoid;
padding: 2px 0;
}
.vascon2026 .vsc-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.vascon2026 .vsc-tabBtn {
border: 1px solid var(--vsc-line);
background: rgba(255, 255, 255, 0.75);
color: var(--vsc-ink);
padding: 10px 12px;
border-radius: 999px;
cursor: pointer;
font-weight: 650;
font-size: 13px;
transition:
border-color 120ms ease,
background 120ms ease;
}
.vascon2026 .vsc-tabBtn[aria-selected="true"] {
background: rgba(255, 255, 255, 0.98);
border-color: rgba(0, 90, 134, 0.35);
box-shadow: 0 8px 18px rgba(0, 90, 134, 0.1);
}
.vascon2026 .vsc-tabs--days .vsc-tabBtn[aria-selected="true"],
.vascon2026 .vsc-tabs--tracks .vsc-tabBtn[aria-selected="true"] {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}
.vascon2026 .vsc-tabs--days .vsc-tabBtn:nth-child(1)[aria-selected="true"] {
background: linear-gradient(
135deg,
rgba(0, 90, 134, 1),
rgba(26, 166, 183, 1)
);
}
.vascon2026 .vsc-tabs--days .vsc-tabBtn:nth-child(2)[aria-selected="true"] {
background: linear-gradient(
135deg,
rgba(26, 166, 183, 1),
rgba(0, 90, 134, 1)
);
}
.vascon2026 .vsc-tabs--tracks .vsc-tabBtn:nth-child(1)[aria-selected="true"] {
background: linear-gradient(
135deg,
rgba(0, 90, 134, 1),
rgba(0, 130, 168, 1)
);
}
.vascon2026 .vsc-tabs--tracks .vsc-tabBtn:nth-child(2)[aria-selected="true"] {
background: linear-gradient(
135deg,
rgba(26, 166, 183, 1),
rgba(0, 90, 134, 0.95)
);
}
.vascon2026 .vsc-tabs--tracks .vsc-tabBtn:nth-child(3)[aria-selected="true"] {
background: linear-gradient(135deg, rgba(0, 65, 102, 1), rgba(0, 90, 134, 1));
}
.vascon2026 .vsc-panel {
margin-top: 14px;
}
.vascon2026 .vsc-panel[hidden] {
display: none !important;
}
.vascon2026 .vsc-timeline {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.vascon2026 .vsc-timeline {
position: relative;
}
.vascon2026 .vsc-timeline::before {
content: "";
position: absolute;
left: 146px;
top: 0;
bottom: 0;
width: 2px;
background: rgba(0, 90, 134, 0.16);
}
.vascon2026 .vsc-tlItem {
display: grid;
grid-template-columns: 140px 1fr;
gap: 12px;
align-items: start;
}
.vascon2026 .vsc-time {
position: sticky;
top: 10px;
align-self: start;
font-weight: 800;
color: var(--vsc-ink);
letter-spacing: -0.01em;
font-size: 13px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(0, 90, 134, 0.1);
border: 1px solid rgba(0, 90, 134, 0.2);
}
.vascon2026 .vsc-tlCard {
border-radius: var(--vsc-radius);
background: var(--vsc-card);
border: 1px solid var(--vsc-line);
padding: 14px;
box-shadow: var(--vsc-shadow);
position: relative;
}
.vascon2026 .vsc-tlCard::before {
content: "";
position: absolute;
left: -12px;
top: 18px;
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--vsc-hero-blue);
box-shadow: 0 0 0 5px rgba(0, 90, 134, 0.14);
}
.vascon2026 .vsc-tlCard h4 {
margin: 0 0 8px;
font-size: 15px;
letter-spacing: -0.01em;
}
.vascon2026 .vsc-talkList {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 7px;
}
.vascon2026 .vsc-talk {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: baseline;
border-top: 1px dashed rgba(15, 23, 42, 0.14);
padding-top: 7px;
}
.vascon2026 .vsc-talk:first-child {
border-top: none;
padding-top: 0;
}
.vascon2026 .vsc-talkTitle {
color: var(--vsc-ink);
font-size: 14px;
line-height: 1.35;
}
.vascon2026 .vsc-talkWho {
color: var(--vsc-muted);
font-size: 13px;
white-space: nowrap;
}
.vascon2026 .vsc-note {
margin: 10px 0 0;
color: black;
font-size: 15px;
line-height: 1.6;
}
.vascon2026 .vsc-personImage {
width: 180px;
height: 180px;
}
.vascon2026 .vsc-tableWrap {
margin-top: 12px;
border: 1px solid var(--vsc-line);
border-radius: var(--vsc-radius);
overflow-x: auto;
background: var(--vsc-card);
}
.vascon2026 .vsc-table {
width: 100%;
border-collapse: collapse;
min-width: 640px;
}
.vascon2026 .vsc-table th,
.vascon2026 .vsc-table td {
padding: 12px 12px;
text-align: left;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
vertical-align: top;
}
.vascon2026 .vsc-table th {
font-weight: 800;
font-size: 13px;
color: var(--vsc-ink);
background: rgba(15, 23, 42, 0.04);
}
.vascon2026 .vsc-table td {
font-size: 14px;
color: var(--vsc-muted);
}
.vascon2026 .vsc-twoCol {
display: grid;
grid-template-columns: 1fr 0.9fr;
gap: 14px;
margin-top: 14px;
}
.vascon2026 .vsc-qr {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: start;
}
.vascon2026 .vsc-qr img {
width: 250px;
height: 250px;
object-fit: contain;
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: var(--vsc-card);
}
.payment-card {
margin-top: 10px;
}
.vascon2026 .vsc-list {
margin: 10px 0 0;
padding-left: 20px;
color: var(--vsc-muted);
line-height: 1.7;
}
.vascon2026 .vsc-footer {
padding: 24px 0 38px;
border-top: 1px solid var(--vsc-line);
background: rgba(248, 250, 252, 0.65);
}
.vascon2026 .vsc-small {
color: var(--vsc-muted);
font-size: 13px;
line-height: 1.6;
}
@media (max-width: 960px) {
.vascon2026 .vsc-heroGrid {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-grid3 {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-split {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-twoCol {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-tlItem {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-time {
position: relative;
top: auto;
}
.vascon2026 .vsc-timeline::before,
.vascon2026 .vsc-tlCard::before {
display: none;
}
.vascon2026 .vsc-talkWho {
white-space: normal;
}
.vascon2026 .vsc-facultyWrap {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-miniGrid,
.vascon2026 .vsc-miniGrid--tight {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-colList {
columns: 1;
}
.vascon2026 .vsc-bandGrid {
grid-template-columns: 1fr;
}
.vascon2026 .vsc-dividerWave {
background-size: 900px 40px;
}
}