/**
* Ibn Al-Nafees Hospital — Main Stylesheet
* Version: 1.0.0
*
* @package ibnalnafees
*/
/* ============================================================
CSS Custom Properties (Design Tokens)
============================================================ */
/* Design tokens: see tokens.css (loaded first). */
/* ============================================================
Reset & Base
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
html[lang^="en"] {
direction: ltr;
}
html[lang^="ar"] {
direction: rtl;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-16);
font-weight: var(--fw-regular);
line-height: 1.75;
color: var(--color-text);
background: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
color: inherit;
transition: color var(--transition-fast);
}
:where(a, button, input, select, textarea):focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
:where(button, [role="button"])[disabled],
:where(button, [role="button"])[aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.55;
}
:where(input, select, textarea)[aria-invalid="true"] {
background: color-mix(in srgb, var(--color-emergency) 8%, transparent);
border-color: var(--color-emergency);
}
[class*="__field"].is-success :where(input, select, textarea) {
background: color-mix(in srgb, var(--color-primary-light) 50%, transparent);
border-color: var(--color-success);
}
[class*="__field"].is-warning :where(input, select, textarea) {
background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
border-color: var(--color-warning);
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--font-body);
font-weight: var(--fw-medium);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--color-heading);
}
main p,
main li {
line-height: 1.75;
}
.text-large {
font-size: var(--fs-18);
line-height: 1.8;
}
h1 {
font-size: var(--fs-h1);
}
h2 {
font-size: var(--fs-h2);
}
h3 {
font-size: var(--fs-h3);
}
h4 {
font-size: var(--fs-h4);
}
h5 {
font-size: var(--fs-h5);
}
h6 {
font-size: var(--fs-18);
}
body h1[class],
body h2[class],
body h3[class],
body h4[class],
body h5[class],
body h6[class] {
font-family: var(--font-body);
font-weight: var(--fw-medium);
}
/* ============================================================
RTL / Arabic Typography
============================================================ */
[dir="rtl"] body {
font-family: var(--font-arabic);
font-weight: var(--fw-regular);
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
font-family: var(--font-arabic);
font-weight: var(--fw-semibold);
line-height: 1.4;
}
html[lang^="ar"] body,
html[lang^="ar"] p,
html[lang^="ar"] li {
line-height: var(--lh-body);
}
[dir="rtl"] body h1[class],
[dir="rtl"] body h2[class],
[dir="rtl"] body h3[class],
[dir="rtl"] body h4[class],
[dir="rtl"] body h5[class],
[dir="rtl"] body h6[class] {
font-family: var(--font-arabic);
font-weight: var(--fw-semibold);
}
[dir="rtl"] [class*="__eyebrow"],
[dir="rtl"] [class*="__label"],
[dir="rtl"] [class*="__tag"] {
letter-spacing: normal;
text-transform: none;
}
html[lang^="ar"] [class*="__eyebrow"] {
font-size: var(--fs-13);
font-weight: var(--fw-bold);
}
html[lang^="ar"] [class*="__title"] {
letter-spacing: normal;
text-transform: none;
}
[dir="rtl"] .bcms-hero__title {
font-family: var(--font-arabic);
font-weight: var(--fw-semibold);
line-height: 1.3;
}
/* ============================================================
Skip Link (Accessibility)
============================================================ */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: var(--color-white);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
clip: auto !important;
clip-path: none;
color: var(--color-primary-dark);
display: block;
font-size: var(--fs-14);
font-weight: var(--fw-semibold);
height: auto;
inset-inline-start: 5px;
line-height: normal;
padding: var(--space-4) var(--space-6) var(--space-4);
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
/* ============================================================
Generic Inner Page — Header, Breadcrumbs, Container
(used by page.php and any custom page templates, e.g. page-doctors.php)
============================================================ */
.bcms-container {
width: min(100% - 40px, var(--container-width));
margin-inline: auto;
padding-inline: 0;
}
@media (max-width: 480px) {
.bcms-container {
width: min(100% - 28px, var(--container-width));
}
}
/* ============================================================
Inner Page Header (every inner page; template-parts/hero-inner.php)
The original .bcms-page-hero design, made compact: breadcrumb, H1
and intro over the page group's banner photo (a real ![]()
, cover),
navy overlay for AA contrast, grid texture, gold rule, ring
ornament and colour edge. About 320-400 px tall on desktop and
240-280 px on phones; start-aligned (right-aligned in RTL).
============================================================ */
.bcms-page-hero {
position: relative;
display: flex;
align-items: flex-end;
min-height: clamp(320px, 27vw, 400px);
padding-block: var(--space-10) var(--space-9);
overflow: hidden;
isolation: isolate;
background-color: var(--color-heading);
}
.bcms-page-hero__media {
position: absolute;
inset: 0;
z-index: -3;
}
.bcms-page-hero__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 45%;
}
/* Navy scrim: darkest behind the text (inline-start), lighter towards the
end so the photo still reads. Keeps white text at 4.5:1 or better on any
photo (checked with the contrast script, polish-report.md). */
.bcms-page-hero__overlay {
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(90deg, var(--scrim-strong) 0%, color-mix(in srgb, var(--color-heading) 70%, transparent) 45%, color-mix(in srgb, var(--color-heading) 42%, transparent) 78%, color-mix(in srgb, var(--color-heading) 28%, transparent) 100%),
linear-gradient(0deg, color-mix(in srgb, var(--color-heading) 45%, transparent) 0%, transparent 55%);
pointer-events: none;
}
[dir="rtl"] .bcms-page-hero__overlay {
background:
linear-gradient(270deg, var(--scrim-strong) 0%, color-mix(in srgb, var(--color-heading) 70%, transparent) 45%, color-mix(in srgb, var(--color-heading) 42%, transparent) 78%, color-mix(in srgb, var(--color-heading) 28%, transparent) 100%),
linear-gradient(0deg, color-mix(in srgb, var(--color-heading) 45%, transparent) 0%, transparent 55%);
}
.bcms-page-hero--plain .bcms-page-hero__overlay {
background: linear-gradient(120deg, var(--color-heading), var(--color-primary-dark));
}
.bcms-page-hero__texture {
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(color-mix(in srgb, var(--color-white) 3.5%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--color-white) 3.5%, transparent) 1px, transparent 1px);
background-size: 72px 72px;
-webkit-mask-image: linear-gradient(90deg, var(--color-heading) 0%, transparent 68%);
mask-image: linear-gradient(90deg, var(--color-heading) 0%, transparent 68%);
pointer-events: none;
}
[dir="rtl"] .bcms-page-hero__texture {
-webkit-mask-image: linear-gradient(270deg, var(--color-heading) 0%, transparent 68%);
mask-image: linear-gradient(270deg, var(--color-heading) 0%, transparent 68%);
}
.bcms-page-hero__ornament {
position: absolute;
inset-inline-end: clamp(36px, 8vw, 130px);
inset-block-start: 50%;
width: clamp(170px, 20vw, 300px);
aspect-ratio: 1;
border: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent);
border-radius: var(--radius-pill);
transform: translateY(-45%);
pointer-events: none;
}
.bcms-page-hero__ornament::before,
.bcms-page-hero__ornament::after,
.bcms-page-hero__ornament span {
position: absolute;
border: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent);
border-radius: var(--radius-pill);
content: '';
}
.bcms-page-hero__ornament::before {
inset: 13%;
}
.bcms-page-hero__ornament::after {
inset: 31%;
border-color: color-mix(in srgb, var(--color-secondary) 52%, transparent);
}
.bcms-page-hero__ornament span:first-child {
inset: 49% -12% auto;
height: 1px;
border-width: 1px 0 0;
border-radius: 0;
}
.bcms-page-hero__ornament span:last-child {
inset: -12% auto -12% 49%;
width: 1px;
border-width: 0 0 0 1px;
border-radius: 0;
}
.bcms-page-hero__inner {
position: relative;
z-index: 1;
width: var(--container);
margin-inline: auto;
padding-inline-start: clamp(20px, 3vw, 40px);
border-inline-start: 1px solid color-mix(in srgb, var(--color-white) 24%, transparent);
}
.bcms-page-hero__content {
max-width: 820px;
}
.bcms-page-hero__title {
margin: 0;
max-width: 900px;
color: var(--color-white);
font-family: var(--font-body);
font-size: var(--fs-h1);
font-weight: var(--fw-semibold);
line-height: 1.05;
letter-spacing: -0.04em;
text-wrap: balance;
}
.bcms-page-hero__rule {
display: block;
width: clamp(54px, 6vw, 84px);
height: 2px;
margin: var(--space-5) 0 var(--space-4);
background: linear-gradient(90deg, var(--color-secondary) 0 38%, color-mix(in srgb, var(--color-white) 38%, transparent) 38% 100%);
}
[dir="rtl"] .bcms-page-hero__rule {
background: linear-gradient(270deg, var(--color-secondary) 0 38%, color-mix(in srgb, var(--color-white) 38%, transparent) 38% 100%);
}
.bcms-page-hero__subtitle {
max-width: 660px;
margin: 0;
color: color-mix(in srgb, var(--color-white) 90%, transparent);
font-family: var(--font-body);
font-size: var(--fs-18);
line-height: 1.65;
text-wrap: pretty;
}
.bcms-page-hero__edge {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
height: 5px;
background: linear-gradient(90deg, var(--color-primary) 0 23%, var(--color-secondary) 23% 31%, color-mix(in srgb, var(--color-white) 22%, transparent) 31% 100%);
pointer-events: none;
}
[dir="rtl"] .bcms-page-hero__edge {
background: linear-gradient(270deg, var(--color-primary) 0 23%, var(--color-secondary) 23% 31%, color-mix(in srgb, var(--color-white) 22%, transparent) 31% 100%);
}
/* Breadcrumb (ibnalnafees_breadcrumbs()), on the dark header */
.bcms-page-hero .breadcrumbs {
margin-block-end: var(--space-4);
}
.bcms-page-hero .breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--space-2);
margin: 0;
padding: 0;
list-style: none;
color: color-mix(in srgb, var(--color-white) 88%, transparent);
font-size: var(--fs-13);
font-weight: var(--fw-medium);
}
.bcms-page-hero .breadcrumbs__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.bcms-page-hero .breadcrumbs a {
display: inline-block;
padding-block: var(--space-1);
color: var(--color-white);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--color-white) 40%, transparent);
text-underline-offset: 0.25em;
}
.bcms-page-hero .breadcrumbs a:hover,
.bcms-page-hero .breadcrumbs a:focus-visible {
text-decoration-color: currentColor;
}
.bcms-page-hero .breadcrumbs .icon {
width: 14px;
height: 14px;
color: var(--color-secondary-light);
}
[dir="rtl"] .bcms-page-hero .breadcrumbs .icon--dir {
transform: scaleX(-1);
}
.bcms-page-hero .breadcrumbs [aria-current="page"] {
display: inline-block;
max-width: 40ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
@media (max-width: 767px) {
.bcms-page-hero {
min-height: 220px;
padding-block: var(--space-7) var(--space-6);
}
.bcms-page-hero .breadcrumbs {
margin-block-end: var(--space-3);
}
.bcms-page-hero__title {
line-height: 1.08;
}
.bcms-page-hero__inner {
padding-inline-start: var(--space-4);
}
/* Text runs the full width on phones: a flatter, stronger scrim. */
.bcms-page-hero__overlay,
[dir="rtl"] .bcms-page-hero__overlay {
background:
linear-gradient(90deg, var(--scrim-strong) 0%, color-mix(in srgb, var(--color-heading) 66%, transparent) 100%),
linear-gradient(0deg, color-mix(in srgb, var(--color-heading) 40%, transparent) 0%, transparent 60%);
}
.bcms-page-hero__rule {
width: 52px;
margin: var(--space-3) 0 var(--space-2);
}
.bcms-page-hero__ornament {
display: none;
}
.bcms-page-hero__texture {
background-size: 48px 48px;
}
.bcms-page-hero__subtitle {
font-size: var(--fs-15);
line-height: 1.5;
}
.bcms-page-hero .breadcrumbs [aria-current="page"] {
max-width: 22ch;
}
}
.bcms-page {
padding-block: var(--space-10) var(--space-11);
}
.bcms-page__content {
max-width: 820px;
margin-inline: auto;
}
.bcms-page__featured-image {
margin-bottom: var(--space-7);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.bcms-page__thumb {
width: 100%;
height: auto;
display: block;
}
.bcms-page__body {
font-size: var(--fs-16);
line-height: 1.75;
color: var(--color-text);
}
.bcms-page__body h2,
.bcms-page__body h3 {
color: var(--color-heading);
margin: 1.6em 0 0.6em;
}
.bcms-page__body p {
margin: 0 0 1.2em;
}
.bcms-page__body a {
color: var(--color-primary-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.bcms-page__body a:hover {
color: var(--color-heading);
}
/* ============================================================
Site Header — v3 (.bcms-hd)
============================================================ */
/* ---------- TOP BAR ---------- */
/* Logo */
/* Uploaded logo (Customizer) */
/* Navigation */
/* Chevron for real WP menu items with children (no inline SVG in the markup) */
/* Dropdown — supports both the custom .bcms-hd__dropdown markup and
WordPress's default .sub-menu output from a real registered menu. */
/* Actions */
/* Language toggle — shows only the *other* language as a single pill */
/* Icon button */
/* Phone */
/* CTA */
/* Burger */
/* ---------- SEARCH PANEL (slide-down) ---------- */
/* ---------- FINDER BAR ---------- */
/* ---------- MOBILE MENU (inline dropdown) ---------- */
/* ---------- RESPONSIVE ---------- */
/* Squeeze zone: nav is still shown (burger hasn't kicked in yet) but the
bar is getting tight — tighten spacing before anything wraps/overflows. */
/* Smallest phones — every pixel in the top bar counts */
/* ============================================================
Hero Section
============================================================ */
.bcms-hero {
position: relative;
touch-action: pan-y;
cursor: grab;
display: flex;
overflow: hidden;
}
.bcms-hero.is-dragging {
cursor: grabbing;
user-select: none;
}
.bcms-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
transform-origin: center top;
will-change: transform;
}
.bcms-hero__bg img {
object-position: center 30%;
display: block;
filter: saturate(0.92) contrast(1.02);
transform-origin: center;
animation: bcmsHeroZoom 22s ease-in-out infinite alternate;
transition: opacity 0.42s ease, filter 0.42s ease;
}
@keyframes bcmsHeroZoom {
from {
transform: scale(1);
}
to {
transform: scale(1.08);
}
}
.bcms-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(115deg, color-mix(in srgb, var(--color-heading) 76%, transparent) 0%, color-mix(in srgb, var(--color-heading) 52%, transparent) 55%, color-mix(in srgb, var(--color-heading) 18%, transparent) 100%);
}
.bcms-hero__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
width: 42px;
height: 42px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-heading) 35%, transparent);
border: 1px solid color-mix(in srgb, var(--color-white) 28%, transparent);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
padding: 0;
}
.bcms-hero__arrow:disabled {
cursor: default;
opacity: 0.55;
}
.bcms-hero__arrow:active:not(:disabled) {
transform: translateY(-50%) scale(0.94);
}
.bcms-hero__arrow:hover {
background: var(--color-primary);
border-color: var(--color-primary);
}
.bcms-hero__scroll {
position: absolute;
bottom: 28px;
inset-inline-start: 50%;
transform: translateX(-50%);
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-white) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--color-white) 30%, transparent);
color: var(--color-white);
cursor: pointer;
padding: 0;
opacity: 1;
transition: opacity 0.3s ease, background var(--transition-fast), border-color var(--transition-fast);
}
.bcms-hero__scroll:hover {
background: var(--color-primary);
border-color: var(--color-primary);
}
.bcms-hero__scroll.is-hidden {
opacity: 0;
pointer-events: none;
}
.bcms-hero__scroll svg {
animation: bcmsHeroScrollBounce 1.8s ease-in-out infinite;
}
@keyframes bcmsHeroScrollBounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(4px);
}
}
.bcms-hero__inner {
position: relative;
z-index: 10;
max-width: var(--container-width);
margin: 0 auto;
width: 100%;
padding: 150px var(--space-10) var(--space-10);
display: flex;
justify-content: space-between;
gap: var(--space-8);
}
.bcms-hero__content {
max-width: 620px;
opacity: 0;
transform: translateY(14px);
animation: bcmsHeroIn 0.7s ease 0.15s forwards;
}
.bcms-hero.is-slider-ready .bcms-hero__content {
animation: none;
opacity: 1;
transform: translate(0, 0);
transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.bcms-hero.is-slide-next {
--bcms-hero-enter-shift: 30px;
--bcms-hero-exit-shift: -30px;
}
.bcms-hero.is-slide-prev {
--bcms-hero-enter-shift: -30px;
--bcms-hero-exit-shift: 30px;
}
[dir="rtl"] .bcms-hero.is-slide-next {
--bcms-hero-enter-shift: -30px;
--bcms-hero-exit-shift: 30px;
}
[dir="rtl"] .bcms-hero.is-slide-prev {
--bcms-hero-enter-shift: 30px;
--bcms-hero-exit-shift: -30px;
}
.bcms-hero.is-slide-changing .bcms-hero__bg img {
filter: saturate(0.86) contrast(1.02) blur(3px);
opacity: 0.35;
}
.bcms-hero.is-slide-changing .bcms-hero__content {
opacity: 0;
transform: translateX(var(--bcms-hero-exit-shift));
}
.bcms-hero.is-slide-entering .bcms-hero__content {
animation: bcmsHeroSlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bcms-hero.is-slide-entering .bcms-hero__pulse path {
animation: bcmsPulseDraw 1.1s ease 0.18s both;
}
@keyframes bcmsHeroSlideIn {
from {
opacity: 0;
transform: translateX(var(--bcms-hero-enter-shift));
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes bcmsHeroIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.bcms-hero__tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.bcms-hero__tag {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: color-mix(in srgb, var(--color-white) 7%, transparent);
border: 1px solid color-mix(in srgb, var(--color-white) 16%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: var(--radius-pill);
padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
font-size: var(--fs-12);
font-weight: var(--fw-semibold);
letter-spacing: 0.04em;
color: color-mix(in srgb, var(--color-white) 92%, transparent);
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.bcms-hero__tag:hover {
background: color-mix(in srgb, var(--color-white) 12%, transparent);
border-color: color-mix(in srgb, var(--color-white) 28%, transparent);
}
.bcms-hero__tag svg {
flex: none;
width: 13px;
height: 13px;
fill: none;
stroke: var(--color-primary-light);
stroke-width: 2.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.bcms-hero__title {
font-family: var(--font-body);
font-size: var(--fs-h1);
font-weight: var(--fw-medium);
line-height: 1.12;
margin: 0 0 var(--space-5);
letter-spacing: -0.025em;
color: var(--color-white);
text-shadow: 0 4px 28px color-mix(in srgb, var(--color-heading) 18%, transparent);
}
.bcms-hero__subtitle {
font-size: var(--fs-16);
line-height: 1.7;
max-width: 470px;
margin: 0 0 var(--space-7);
font-weight: var(--fw-regular);
}
.bcms-hero__pulse {
width: 190px;
height: 26px;
color: var(--color-primary-light);
opacity: 0.85;
display: block;
margin-bottom: var(--space-6);
}
.bcms-hero__pulse path {
stroke-dasharray: 420;
stroke-dashoffset: 420;
animation: bcmsPulseDraw 1.8s ease 0.6s forwards;
}
@keyframes bcmsPulseDraw {
to {
stroke-dashoffset: 0;
}
}
.bcms-hero__actions {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.bcms-hero__cta {
display: inline-flex;
align-items: center;
gap: var(--space-3);
background: var(--color-primary-dark);
color: var(--color-white);
font-weight: var(--fw-semibold);
font-size: var(--fs-14);
letter-spacing: 0.2px;
padding: var(--space-4) var(--space-7);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-sm);
transition: background var(--transition-fast), transform 0.15s ease, box-shadow var(--transition-fast);
}
.bcms-hero__cta:hover {
background: var(--color-heading);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.bcms-hero__cta svg {
transition: transform var(--transition-fast);
}
.bcms-hero__cta:hover svg {
transform: translateX(3px);
}
.bcms-hero__cta-secondary {
display: inline-flex;
align-items: center;
gap: var(--space-3);
background: color-mix(in srgb, var(--color-white) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--color-white) 28%, transparent);
color: var(--color-white);
font-weight: var(--fw-semibold);
font-size: var(--fs-14);
letter-spacing: 0.2px;
padding: var(--space-4) var(--space-7);
border-radius: var(--radius-pill);
transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.15s ease;
}
.bcms-hero__cta-secondary:hover {
background: color-mix(in srgb, var(--color-white) 20%, transparent);
border-color: color-mix(in srgb, var(--color-white) 40%, transparent);
transform: translateY(-2px);
}
.bcms-hero__doctors {
display: flex;
gap: var(--space-5);
flex-shrink: 0;
opacity: 0;
transform: translateY(14px);
animation: bcmsHeroIn 0.7s ease 0.35s forwards;
}
.bcms-hero__doctor {
text-align: start;
display: flex;
align-items: center;
gap: var(--space-3);
border: 1px solid color-mix(in srgb, var(--color-white) 14%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--radius-md);
padding-block: var(--space-3);
padding-inline: var(--space-3) var(--space-5);
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.bcms-hero__doctor:hover {
border-color: color-mix(in srgb, var(--color-white) 30%, transparent);
}
.bcms-hero__doctor-photo {
width: 52px;
height: 52px;
border-radius: var(--radius-pill);
object-fit: cover;
border: 2px solid color-mix(in srgb, var(--color-white) 70%, transparent);
display: block;
flex-shrink: 0;
}
.bcms-hero__doctor-info {
display: flex;
flex-direction: column;
}
.bcms-hero__doctor-name {
margin: 0;
font-size: var(--fs-14);
font-weight: var(--fw-semibold);
color: var(--color-white);
}
.bcms-hero__doctor-role {
margin: 2px 0 0;
font-size: var(--fs-12);
color: var(--color-primary-light);
}
/* ============================================================
Footer
============================================================ */
/* Top: brand + newsletter */
/* Main: link columns */
/* ============================================================
Reduced Motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.bcms-hero__content,
.bcms-hero__doctors,
.bcms-hero__pulse path {
opacity: 1 !important;
transform: none !important;
stroke-dashoffset: 0 !important;
}
.bcms-hero.is-slide-changing .bcms-hero__bg img,
.bcms-hero.is-slide-changing .bcms-hero__content {
filter: saturate(0.92) contrast(1.02);
opacity: 1;
transform: none;
}
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 992px) {
.bcms-hero {
min-height: 620px;
}
.bcms-hero__inner {
flex-direction: column;
align-items: flex-start;
padding-top: var(--space-13);
}
/* Dropped on mobile/small screens — with .bcms-hero__doctors stacking
below the content instead of sitting beside it at this width, these
two were adding a lot of extra height for little payoff. */
.bcms-hero__tags,
.bcms-hero__doctors {
display: none;
}
}
@media (max-width: 768px) {
.bcms-hero {
min-height: 560px;
}
.bcms-hero__inner {
padding: var(--space-12) var(--space-6) var(--space-8);
}
.bcms-hero__title {
font-size: var(--fs-h1);
}
.bcms-hero__subtitle {
font-size: var(--fs-14);
}
.bcms-hero__cta {
padding: var(--space-4) var(--space-6);
font-size: var(--fs-13);
}
.bcms-hero__arrow {
display: none;
}
}
@media (max-width: 480px) {
.bcms-hero__title {
margin-bottom: var(--space-4);
}
.bcms-hero__pulse {
width: 150px;
}
}
/* ============================================================
Care Pathways — Great Care Starts Here
============================================================ */
.bcms-carex {
box-sizing: border-box;
background: var(--color-background);
padding: var(--space-11) var(--space-6) var(--space-12);
}
.bcms-carex *,
.bcms-carex *::before,
.bcms-carex *::after {
box-sizing: border-box;
}
.bcms-carex__inner {
max-width: var(--container-width);
margin: 0 auto;
}
/* Header */
.bcms-carex__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--space-7);
margin-bottom: var(--space-9);
padding-bottom: var(--space-7);
border-bottom: 1px solid var(--color-border);
}
.bcms-carex__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-primary-dark);
margin: 0 0 var(--space-4);
}
.bcms-carex__eyebrow::before {
content: "";
width: 22px;
height: 2px;
background: var(--color-secondary);
display: inline-block;
}
.bcms-carex__title {
font-family: var(--font-body);
font-weight: var(--fw-bold);
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
}
[dir="rtl"] .bcms-carex__title {
font-family: var(--font-arabic);
font-weight: var(--fw-bold);
letter-spacing: 0;
}
.bcms-carex__subtitle {
max-width: 340px;
color: var(--color-text-muted);
font-size: var(--fs-15);
line-height: 1.6;
margin: 0;
flex-shrink: 0;
}
/* Grid */
.bcms-carex__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-7);
}
/* Card */
.bcms-carex__card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateY(24px);
transition: opacity 0.55s ease, transform 0.55s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.bcms-carex__card.bcms-in-view {
opacity: 1;
transform: translateY(0);
}
.bcms-carex__card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
/* Media */
.bcms-carex__media {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--color-border);
}
.bcms-carex__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(0.15) saturate(1.05);
transition: transform 0.6s ease;
}
.bcms-carex__card:hover .bcms-carex__media img {
transform: scale(1.05);
}
.bcms-carex__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--color-heading) 35%, transparent) 100%);
}
/* Badge */
.bcms-carex__badge {
position: absolute;
inset-inline-start: 18px;
bottom: 10px;
width: 48px;
height: 48px;
border-radius: var(--radius-pill);
background: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
z-index: 2;
}
.bcms-carex__badge svg {
width: 22px;
height: 22px;
stroke: var(--color-white);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Body */
.bcms-carex__body {
padding: var(--space-8) var(--space-6) var(--space-7);
display: flex;
flex-direction: column;
flex: 1;
}
.bcms-carex__index {
font-family: var(--font-body);
font-size: var(--fs-12);
font-weight: var(--fw-semibold);
letter-spacing: 0.08em;
color: var(--color-primary-dark);
margin: 0 0 var(--space-3);
}
[dir="rtl"] .bcms-carex__index {
font-family: var(--font-body);
letter-spacing: 0;
}
.bcms-carex__heading {
font-family: var(--font-body);
font-weight: var(--fw-bold);
color: var(--color-heading);
font-size: var(--fs-20);
line-height: 1.3;
margin: 0 0 var(--space-5);
}
[dir="rtl"] .bcms-carex__heading {
font-family: var(--font-arabic);
font-weight: var(--fw-bold);
}
/* Links */
.bcms-carex__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.bcms-carex__links li + li {
border-top: 1px solid var(--color-border);
}
.bcms-carex__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
text-decoration: none;
color: var(--color-heading);
font-weight: var(--fw-semibold);
font-size: var(--fs-14);
padding: var(--space-3) 0;
transition: color 0.2s ease;
}
.bcms-carex__arrow {
flex: none;
width: 30px;
height: 30px;
border-radius: var(--radius-pill);
background: var(--color-primary-light);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.bcms-carex__arrow svg {
width: 14px;
height: 14px;
stroke: var(--color-primary-dark);
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.2s ease;
}
.bcms-carex__link:hover {
color: var(--color-primary-dark);
}
.bcms-carex__link:hover .bcms-carex__arrow {
background: var(--color-primary);
transform: translateX(2px);
}
[dir="rtl"] .bcms-carex__link:hover .bcms-carex__arrow {
transform: translateX(-2px);
}
.bcms-carex__link:hover .bcms-carex__arrow svg {
stroke: var(--color-white);
transform: translateX(1px);
}
[dir="rtl"] .bcms-carex__link:hover .bcms-carex__arrow svg {
transform: translateX(-1px);
}
.bcms-carex__link:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Responsive — Care Pathways */
@media (max-width: 1024px) {
.bcms-carex__grid {
gap: var(--space-5);
}
.bcms-carex__body {
padding: var(--space-7) var(--space-6) var(--space-6);
}
}
@media (max-width: 860px) {
.bcms-carex__header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
.bcms-carex__subtitle {
max-width: 100%;
}
.bcms-carex__grid {
grid-template-columns: 1fr;
max-width: 480px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.bcms-carex {
padding: var(--space-9) var(--space-4) var(--space-10);
}
.bcms-carex__body {
padding: var(--space-7) var(--space-5) var(--space-6);
}
.bcms-carex__heading {
font-size: var(--fs-18);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-carex__card,
.bcms-carex__media img,
.bcms-carex__link,
.bcms-carex__arrow,
.bcms-carex__arrow svg {
transition: none !important;
}
.bcms-carex__card {
opacity: 1;
transform: none;
}
}
/* ============================================================
Healing Introduction
============================================================ */
.bcms-heal {
background: var(--color-white);
padding: clamp(56px, 8vw, 104px) var(--space-6);
}
.bcms-heal__inner {
width: min(100%, var(--container-width));
margin-inline: auto;
display: grid;
grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
align-items: center;
gap: clamp(40px, 6vw, 76px);
}
.bcms-heal__text,
.bcms-heal__media {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.bcms-heal__media {
transition-delay: 0.1s;
}
.bcms-heal__text.is-visible,
.bcms-heal__media.is-visible {
opacity: 1;
transform: translateY(0);
}
.bcms-heal__title {
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: 1.08;
letter-spacing: -0.025em;
margin: 0 0 var(--space-8);
}
.bcms-heal__feature {
border-inline-start: 3px solid var(--color-primary);
margin-block-end: var(--space-7);
padding-inline-start: var(--space-5);
}
.bcms-heal__feature h3 {
color: var(--color-heading);
font-size: var(--fs-18);
font-weight: var(--fw-bold);
line-height: 1.35;
margin: 0 0 var(--space-2);
}
.bcms-heal__feature p {
color: var(--color-text);
font-size: var(--fs-16);
line-height: 1.7;
margin: 0;
}
.bcms-heal__link {
color: var(--color-primary-dark);
font-weight: var(--fw-bold);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.bcms-heal__link:hover {
color: var(--color-heading);
}
.bcms-heal__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
border: 1.5px solid var(--color-primary-dark);
border-radius: var(--radius-pill);
color: var(--color-primary-dark);
font-size: var(--fs-16);
font-weight: var(--fw-bold);
margin-block-start: var(--space-1);
padding: var(--space-4) var(--space-7);
transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.bcms-heal__cta:hover {
background: var(--color-primary-dark);
color: var(--color-white);
transform: translateY(-2px);
}
.bcms-heal__cta:focus-visible,
.bcms-heal__link:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
}
.bcms-heal__cta svg {
flex: none;
}
[dir="rtl"] .bcms-heal__title,
[dir="rtl"] .bcms-heal__feature h3 {
font-family: var(--font-arabic);
letter-spacing: 0;
}
[dir="rtl"] .bcms-heal__cta svg {
transform: scaleX(-1);
}
.bcms-heal__media {
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
margin: 0;
overflow: hidden;
}
.bcms-heal__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.7s ease;
}
.bcms-heal__media:hover img {
transform: scale(1.025);
}
@media (max-width: 840px) {
.bcms-heal__inner {
grid-template-columns: 1fr;
}
.bcms-heal__media {
aspect-ratio: 16 / 10;
}
}
@media (max-width: 480px) {
.bcms-heal {
padding-inline: var(--space-4);
}
.bcms-heal__title {
margin-block-end: var(--space-7);
}
.bcms-heal__feature {
padding-inline-start: var(--space-4);
}
.bcms-heal__feature h3 {
font-size: var(--fs-16);
}
.bcms-heal__feature p {
font-size: var(--fs-15);
}
.bcms-heal__cta {
width: 100%;
}
.bcms-heal__media {
aspect-ratio: 4 / 3;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-heal__text,
.bcms-heal__media,
.bcms-heal__media img,
.bcms-heal__cta {
opacity: 1;
transform: none;
transition: none;
}
}
/* ============================================================
Milestones — 3D Coverflow Slider
============================================================ */
.bcms-milestones {
box-sizing: border-box;
background:
radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 38%),
var(--color-white);
padding: clamp(88px, 10vw, 132px) var(--space-6);
overflow: hidden;
}
.bcms-milestones *,
.bcms-milestones *::before,
.bcms-milestones *::after {
box-sizing: border-box;
}
.bcms-milestones__inner {
max-width: var(--container-width);
margin: 0 auto;
}
.bcms-milestones__header {
text-align: center;
max-width: 780px;
margin: 0 auto var(--space-11);
}
.bcms-milestones__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-primary-dark);
margin: 0 0 var(--space-5);
}
.bcms-milestones__eyebrow::before,
.bcms-milestones__eyebrow::after {
content: "";
width: 30px;
height: 2px;
background: var(--color-secondary);
display: inline-block;
}
.bcms-milestones__title {
font-family: var(--font-body);
font-weight: var(--fw-semibold);
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 var(--space-5);
}
.bcms-milestones__subtitle {
font-size: var(--fs-16);
color: var(--color-text-muted);
line-height: 1.7;
margin: 0;
}
[dir="rtl"] .bcms-milestones__eyebrow,
[dir="rtl"] .bcms-milestones__title {
font-family: var(--font-arabic);
letter-spacing: 0;
}
/* Coverflow stage */
.bcms-milestones__stage {
position: relative;
height: 570px;
perspective: 1700px;
perspective-origin: 50% 50%;
cursor: grab;
touch-action: pan-y;
}
.bcms-milestones__stage.is-dragging {
cursor: grabbing;
user-select: none;
}
.bcms-milestones__track {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.bcms-milestones__slide {
position: absolute;
top: 50%;
inset-inline-start: 50%;
width: 400px;
height: 510px;
margin: -255px 0 0 -200px;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-white);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.65s ease, box-shadow 0.4s ease;
cursor: pointer;
}
.bcms-milestones__slide-media {
position: relative;
width: 100%;
height: 60%;
overflow: hidden;
background: var(--color-border);
}
.bcms-milestones__slide-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bcms-milestones__slide-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--color-heading) 28%, transparent) 100%);
}
.bcms-milestones__slide-date {
position: absolute;
top: 20px;
inset-inline-start: 20px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: color-mix(in srgb, var(--color-white) 94%, transparent);
backdrop-filter: blur(4px);
color: var(--color-heading);
font-family: var(--font-body);
font-weight: var(--fw-semibold);
font-size: var(--fs-13);
letter-spacing: 0.02em;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-sm);
}
.bcms-milestones__slide-date svg {
width: 15px;
height: 15px;
stroke: var(--color-primary-dark);
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.bcms-milestones__slide-body {
padding: var(--space-7) var(--space-7) var(--space-7);
height: 40%;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-3);
}
.bcms-milestones__slide-tag {
font-size: var(--fs-12);
font-weight: var(--fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-primary-dark);
margin: 0;
}
.bcms-milestones__slide-heading {
font-family: var(--font-body);
font-weight: var(--fw-semibold);
font-size: var(--fs-18);
line-height: 1.45;
color: var(--color-heading);
margin: 0;
}
[dir="rtl"] .bcms-milestones__slide-date,
[dir="rtl"] .bcms-milestones__slide-heading {
font-family: var(--font-arabic);
}
/* Non-active slides: quiet, not distracting */
.bcms-milestones__slide:not([data-offset="0"]) .bcms-milestones__slide-date {
opacity: 0;
}
.bcms-milestones__slide:not([data-offset="0"]) .bcms-milestones__slide-body {
opacity: 0.55;
}
/* Coverflow positioning */
.bcms-milestones__slide[data-offset="0"] {
transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
z-index: 5;
opacity: 1;
box-shadow: var(--shadow-lg);
}
.bcms-milestones__slide[data-offset="-1"] {
transform: translate3d(-290px, 12px, -160px) scale(0.84) rotateY(23deg);
z-index: 4;
opacity: 0.9;
}
.bcms-milestones__slide[data-offset="1"] {
transform: translate3d(290px, 12px, -160px) scale(0.84) rotateY(-23deg);
z-index: 4;
opacity: 0.9;
}
.bcms-milestones__slide[data-offset="-2"] {
transform: translate3d(-500px, 30px, -330px) scale(0.68) rotateY(29deg);
z-index: 3;
opacity: 0.55;
}
.bcms-milestones__slide[data-offset="2"] {
transform: translate3d(500px, 30px, -330px) scale(0.68) rotateY(-29deg);
z-index: 3;
opacity: 0.55;
}
.bcms-milestones__slide[data-offset="far"] {
transform: translate3d(0, 40px, -480px) scale(0.5);
opacity: 0;
z-index: 1;
pointer-events: none;
}
[dir="rtl"] .bcms-milestones__slide[data-offset="-1"] {
transform: translate3d(290px, 12px, -160px) scale(0.84) rotateY(-23deg);
}
[dir="rtl"] .bcms-milestones__slide[data-offset="1"] {
transform: translate3d(-290px, 12px, -160px) scale(0.84) rotateY(23deg);
}
[dir="rtl"] .bcms-milestones__slide[data-offset="-2"] {
transform: translate3d(500px, 30px, -330px) scale(0.68) rotateY(-29deg);
}
[dir="rtl"] .bcms-milestones__slide[data-offset="2"] {
transform: translate3d(-500px, 30px, -330px) scale(0.68) rotateY(29deg);
}
/* Controls */
.bcms-milestones__controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-6);
margin-top: var(--space-10);
}
.bcms-milestones__nav-btn {
align-items: center;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
color: var(--color-heading);
cursor: pointer;
display: inline-flex;
height: 52px;
justify-content: center;
flex: none;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
width: 52px;
}
.bcms-milestones__nav-btn svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 2.3;
stroke-linecap: round;
stroke-linejoin: round;
}
.bcms-milestones__nav-btn:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: var(--color-white);
transform: translateY(-1px);
}
.bcms-milestones__nav-btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
}
[dir="rtl"] .bcms-milestones__nav-btn svg {
transform: scaleX(-1);
}
.bcms-milestones__progress {
position: relative;
width: 280px;
height: 5px;
border-radius: var(--radius-pill);
background: var(--color-border);
overflow: hidden;
}
.bcms-milestones__progress-fill {
position: absolute;
inset: 0;
background: var(--color-primary);
transform-origin: left;
transform: scaleX(0);
}
[dir="rtl"] .bcms-milestones__progress-fill {
transform-origin: right;
}
.bcms-milestones__progress-fill.bcms-running {
animation: bcmsMilestonesProgress 5.5s linear forwards;
}
@keyframes bcmsMilestonesProgress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.bcms-milestones__counter {
font-family: var(--font-body);
font-size: var(--fs-14);
font-weight: var(--fw-semibold);
color: var(--color-text-muted);
letter-spacing: 0.02em;
min-width: 56px;
text-align: center;
margin: 0;
}
.bcms-milestones__counter span {
color: var(--color-heading);
}
@media (max-width: 900px) {
.bcms-milestones {
padding-block: var(--space-11);
}
.bcms-milestones__header {
margin-block-end: var(--space-10);
}
.bcms-milestones__stage {
height: 500px;
}
.bcms-milestones__slide {
width: 330px;
height: 430px;
margin: -215px 0 0 -165px;
}
.bcms-milestones__slide[data-offset="-1"] {
transform: translate3d(-190px, 10px, -130px) scale(0.8) rotateY(22deg);
}
.bcms-milestones__slide[data-offset="1"] {
transform: translate3d(190px, 10px, -130px) scale(0.8) rotateY(-22deg);
}
.bcms-milestones__slide[data-offset="-2"],
.bcms-milestones__slide[data-offset="2"] {
opacity: 0;
pointer-events: none;
}
[dir="rtl"] .bcms-milestones__slide[data-offset="-1"] {
transform: translate3d(190px, 10px, -130px) scale(0.8) rotateY(-22deg);
}
[dir="rtl"] .bcms-milestones__slide[data-offset="1"] {
transform: translate3d(-190px, 10px, -130px) scale(0.8) rotateY(22deg);
}
}
@media (max-width: 600px) {
.bcms-milestones {
padding: var(--space-11) var(--space-4) var(--space-11);
}
.bcms-milestones__header {
margin-block-end: var(--space-9);
}
.bcms-milestones__title {
font-size: var(--fs-h2);
}
.bcms-milestones__subtitle {
font-size: var(--fs-15);
}
.bcms-milestones__stage {
height: 480px;
perspective: 1000px;
}
.bcms-milestones__slide {
width: 280px;
height: 420px;
margin: -210px 0 0 -140px;
}
.bcms-milestones__slide-media {
height: 58%;
}
.bcms-milestones__slide-body {
height: 42%;
padding: var(--space-6) var(--space-6) var(--space-6);
}
.bcms-milestones__slide-heading {
font-size: var(--fs-16);
}
.bcms-milestones__slide[data-offset="-1"] {
transform: translate3d(-118px, 6px, -100px) scale(0.76) rotateY(20deg);
}
.bcms-milestones__slide[data-offset="1"] {
transform: translate3d(118px, 6px, -100px) scale(0.76) rotateY(-20deg);
}
[dir="rtl"] .bcms-milestones__slide[data-offset="-1"] {
transform: translate3d(118px, 6px, -100px) scale(0.76) rotateY(-20deg);
}
[dir="rtl"] .bcms-milestones__slide[data-offset="1"] {
transform: translate3d(-118px, 6px, -100px) scale(0.76) rotateY(20deg);
}
.bcms-milestones__progress {
width: 140px;
}
.bcms-milestones__controls {
gap: var(--space-4);
margin-block-start: var(--space-9);
}
.bcms-milestones__nav-btn {
height: 48px;
width: 48px;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-milestones__slide {
transition: none;
}
.bcms-milestones__progress-fill.bcms-running {
animation: none;
transform: scaleX(1);
}
}
/* ============================================================
Featured Doctors Slider
============================================================ */
.bcms-doctors {
background: var(--color-background-alt);
overflow: hidden;
padding: clamp(64px, 8vw, 104px) var(--space-6);
}
.bcms-doctors__inner {
width: min(100%, var(--container-width));
margin-inline: auto;
}
.bcms-doctors__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-7);
margin-block-end: var(--space-8);
}
.bcms-doctors__eyebrow {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--color-primary-dark);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
margin: 0 0 var(--space-3);
text-transform: uppercase;
}
.bcms-doctors__eyebrow::before {
background: var(--color-secondary);
content: "";
display: block;
height: 2px;
width: 28px;
}
.bcms-doctors__title {
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
letter-spacing: -0.025em;
line-height: 1.08;
margin: 0;
}
.bcms-doctors__actions,
.bcms-doctors__controls {
display: flex;
align-items: center;
gap: var(--space-3);
}
.bcms-doctors__all {
color: var(--color-primary-dark);
font-size: var(--fs-15);
font-weight: var(--fw-bold);
margin-inline-end: var(--space-3);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.bcms-doctors__all:hover {
color: var(--color-heading);
}
.bcms-doctors__control {
align-items: center;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
color: var(--color-heading);
cursor: pointer;
display: inline-flex;
height: 48px;
justify-content: center;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
width: 48px;
}
.bcms-doctors__control:hover:not(:disabled) {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: var(--color-white);
transform: translateY(-2px);
}
.bcms-doctors__control:disabled {
cursor: not-allowed;
opacity: 0.4;
}
.bcms-doctors__control svg {
fill: none;
height: 20px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.2;
width: 20px;
}
[dir="rtl"] .bcms-doctors__control svg,
[dir="rtl"] .bcms-doctors__profile svg {
transform: scaleX(-1);
}
.bcms-doctors__viewport {
overflow: hidden;
}
.bcms-doctors__track {
display: grid;
gap: var(--space-6);
grid-auto-columns: calc((100% - 72px) / 4);
grid-auto-flow: column;
overflow-x: auto;
padding: var(--space-1) 2px var(--space-7);
scroll-snap-type: inline mandatory;
scrollbar-color: var(--color-primary) var(--color-border);
scrollbar-width: thin;
}
.bcms-doctors__track:focus-visible {
border-radius: var(--radius-md);
outline: 3px solid var(--color-primary);
outline-offset: 4px;
}
.bcms-doctors__track::-webkit-scrollbar {
height: 5px;
}
.bcms-doctors__track::-webkit-scrollbar-track {
background: var(--color-border);
border-radius: var(--radius-pill);
}
.bcms-doctors__track::-webkit-scrollbar-thumb {
background: var(--color-primary);
border-radius: var(--radius-pill);
}
.bcms-doctors__card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
min-width: 0;
overflow: hidden;
scroll-snap-align: start;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.bcms-doctors__card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.bcms-doctors__card-link {
color: inherit;
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
}
.bcms-doctors__card-link:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: -4px;
}
.bcms-doctors__photo {
aspect-ratio: 4 / 4.35;
background: var(--color-primary-light);
overflow: hidden;
position: relative;
}
.bcms-doctors__photo img {
display: block;
height: 100%;
object-fit: cover;
object-position: center top;
transition: transform 0.6s ease;
width: 100%;
}
.bcms-doctors__card:hover .bcms-doctors__photo img {
transform: scale(1.035);
}
.bcms-doctors__specialty {
background: color-mix(in srgb, var(--color-white) 94%, transparent);
border-radius: var(--radius-pill);
bottom: 16px;
box-shadow: var(--shadow-sm);
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
inset-inline-start: 16px;
line-height: 1.25;
max-width: calc(100% - 32px);
padding: var(--space-2) var(--space-3);
position: absolute;
}
.bcms-doctors__body {
display: flex;
flex: 1;
flex-direction: column;
padding: var(--space-6) var(--space-6) var(--space-6);
}
.bcms-doctors__name {
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-22);
font-weight: var(--fw-bold);
line-height: 1.25;
margin: 0 0 var(--space-2);
}
.bcms-doctors__role {
color: var(--color-text-muted);
font-size: var(--fs-14);
line-height: 1.55;
margin: 0 0 var(--space-6);
}
.bcms-doctors__profile {
align-items: center;
color: var(--color-primary-dark);
display: inline-flex;
font-size: var(--fs-14);
font-weight: var(--fw-bold);
gap: var(--space-2);
margin-block-start: auto;
}
.bcms-doctors__profile svg {
fill: none;
height: 16px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.3;
transition: transform var(--transition-fast);
width: 16px;
}
.bcms-doctors__card:hover .bcms-doctors__profile svg {
transform: translateX(3px);
}
[dir="rtl"] .bcms-doctors__card:hover .bcms-doctors__profile svg {
transform: scaleX(-1) translateX(3px);
}
[dir="rtl"] .bcms-doctors__eyebrow,
[dir="rtl"] .bcms-doctors__title,
[dir="rtl"] .bcms-doctors__name {
font-family: var(--font-arabic);
letter-spacing: 0;
}
@media (max-width: 1100px) {
.bcms-doctors__track {
grid-auto-columns: calc((100% - 48px) / 3);
}
}
@media (max-width: 780px) {
.bcms-doctors__header {
align-items: flex-start;
flex-direction: column;
}
.bcms-doctors__actions {
justify-content: space-between;
width: 100%;
}
.bcms-doctors__track {
grid-auto-columns: calc((100% - 20px) / 2);
gap: var(--space-5);
}
}
@media (max-width: 520px) {
.bcms-doctors {
padding-inline: var(--space-4);
}
.bcms-doctors__all {
font-size: var(--fs-14);
}
.bcms-doctors__control {
height: 44px;
width: 44px;
}
.bcms-doctors__track {
grid-auto-columns: min(84%, 310px);
gap: var(--space-4);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-doctors__track {
scroll-behavior: auto;
}
.bcms-doctors__card,
.bcms-doctors__photo img,
.bcms-doctors__control,
.bcms-doctors__profile svg {
transition: none;
}
}
/* ============================================================
Our Doctors — Directory Page (page-doctors.php)
============================================================ */
.bcms-container--doctors {
--container-width: 1560px;
}
.bcms-doctor-dir__layout {
padding-top: var(--space-9);
padding-bottom: var(--space-9);
display: grid;
grid-template-columns: 310px 1fr;
align-items: start;
gap: var(--space-8);
}
/* Sidebar */
.bcms-doctor-dir__sidebar {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-7) var(--space-6);
position: sticky;
top: 24px;
max-height: calc(100vh - 48px);
overflow-y: auto;
scrollbar-width: none;
}
.bcms-doctor-dir__sidebar::-webkit-scrollbar {
display: none;
}
.bcms-doctor-dir__group-title {
font-family: var(--font-body);
color: var(--color-heading);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 var(--space-5);
}
.bcms-doctor-dir__filter-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.bcms-doctor-dir__filter-btn {
all: unset;
cursor: pointer;
display: block;
width: 100%;
color: var(--color-text);
font-size: var(--fs-14);
line-height: 1.4;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
transition: background var(--transition-fast), color var(--transition-fast);
}
.bcms-doctor-dir__filter-btn:hover {
background: var(--color-primary-light);
color: var(--color-primary-dark);
}
.bcms-doctor-dir__filter-btn.is-active {
background: var(--color-primary-light);
color: var(--color-primary-dark);
font-weight: var(--fw-semibold);
}
.bcms-doctor-dir__filter-btn:focus-visible {
outline: 2px solid var(--color-primary-dark);
outline-offset: 2px;
}
/* Mobile-only dropdown equivalent of .bcms-doctor-dir__filter-list — swapped
in at the same breakpoint the sidebar already stacks above the grid, so a
long specialty list doesn't push the doctors themselves far down the page
on small screens. Hidden on desktop; see the max-width:860px block below. */
.bcms-doctor-dir__filter-select {
display: none;
}
.bcms-doctor-dir__divider {
height: 1px;
background: var(--color-border);
margin: var(--space-5) 0;
}
.bcms-doctor-dir__reset {
all: unset;
cursor: pointer;
display: inline-block;
color: var(--color-primary-dark);
font-size: var(--fs-13);
font-weight: var(--fw-semibold);
text-decoration: underline;
text-underline-offset: 3px;
}
.bcms-doctor-dir__reset:hover {
color: var(--color-heading);
}
.bcms-doctor-dir__reset:focus-visible {
outline: 2px solid var(--color-primary-dark);
outline-offset: 2px;
}
/* Topbar: count + search */
.bcms-doctor-dir__topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
flex-wrap: wrap;
margin-bottom: var(--space-7);
}
.bcms-doctor-dir__count {
margin: 0;
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.bcms-doctor-dir__search {
position: relative;
min-width: 280px;
flex: none;
}
.bcms-doctor-dir__search-input {
width: 100%;
border: 1px solid var(--color-border);
background: var(--color-white);
border-radius: var(--radius-pill);
padding-block: var(--space-3);
padding-inline: var(--space-8) var(--space-4);
font-size: var(--fs-14);
font-family: var(--font-body);
color: var(--color-heading);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.bcms-doctor-dir__search-input::placeholder {
color: var(--color-text-muted);
}
.bcms-doctor-dir__search-input:focus {
outline: none;
border-color: var(--color-primary-dark);
box-shadow: var(--shadow-ring);
}
.bcms-doctor-dir__search-icon {
position: absolute;
inset-inline-start: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--color-text-muted);
pointer-events: none;
}
/* Grid + cards (visually consistent with the homepage doctors slider) */
.bcms-doctor-dir__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.bcms-doctor-dir__card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
text-decoration: none;
color: inherit;
display: block;
}
.bcms-doctor-dir__card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.bcms-doctor-dir__card[hidden] {
display: none;
}
.bcms-doctor-dir__photo {
position: relative;
aspect-ratio: 4 / 4.35;
background: var(--color-primary-light);
overflow: hidden;
}
.bcms-doctor-dir__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform 0.6s ease;
}
.bcms-doctor-dir__card:hover .bcms-doctor-dir__photo img {
transform: scale(1.035);
}
.bcms-doctor-dir__specialty {
position: absolute;
bottom: 16px;
inset-inline-start: 16px;
max-width: calc(100% - 32px);
background: color-mix(in srgb, var(--color-white) 94%, transparent);
box-shadow: var(--shadow-sm);
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
line-height: 1.25;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-pill);
}
.bcms-doctor-dir__body {
padding: var(--space-6) var(--space-5);
}
.bcms-doctor-dir__name {
font-family: var(--font-body);
color: var(--color-heading);
font-size: var(--fs-18);
font-weight: var(--fw-bold);
line-height: 1.25;
margin: 0 0 var(--space-2);
}
.bcms-doctor-dir__role {
color: var(--color-text-muted);
font-size: var(--fs-13);
line-height: 1.5;
margin: 0;
}
[dir="rtl"] .bcms-doctor-dir__name {
font-family: var(--font-arabic);
}
.bcms-doctor-dir__empty {
text-align: center;
color: var(--color-text-muted);
font-size: var(--fs-15);
padding: var(--space-10) var(--space-6);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
@media (max-width: 1024px) {
.bcms-doctor-dir__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 860px) {
.bcms-doctor-dir__layout {
grid-template-columns: 1fr;
}
.bcms-doctor-dir__sidebar {
position: static;
width: 100%;
}
/* Small screens get a dropdown instead of the full pill list — same
filtering behind it, just a shorter sidebar above the doctor grid. */
.bcms-doctor-dir__filter-list {
display: none;
}
.bcms-doctor-dir__filter-select {
display: block;
width: 100%;
border: 1px solid var(--color-border);
background-color: var(--color-white);
border-radius: var(--radius-pill);
padding: var(--space-3) var(--space-4);
font-family: var(--font-body);
font-size: var(--fs-14);
font-weight: var(--fw-semibold);
color: var(--color-heading);
outline: none;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
padding-inline-end: var(--space-8);
transition: border-color var(--transition-fast);
}
.bcms-doctor-dir__filter-select:hover {
border-color: var(--color-primary-dark);
}
[dir="rtl"] .bcms-doctor-dir__filter-select {
background-position: left 16px center;
padding-inline-end: var(--space-4);
padding-inline-start: var(--space-8);
}
.bcms-doctor-dir__filter-select:focus-visible {
outline: 2px solid var(--color-primary-dark);
outline-offset: 2px;
}
}
@media (max-width: 560px) {
.bcms-doctor-dir__grid {
grid-template-columns: 1fr;
}
.bcms-doctor-dir__topbar {
flex-direction: column;
align-items: flex-start;
}
.bcms-doctor-dir__search {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-doctor-dir__card,
.bcms-doctor-dir__photo img {
transition: none;
}
}
/* ============================================================
Hospital Highlights Slider
============================================================ */
.bcms-highlights {
background: var(--color-background);
padding: clamp(64px, 8vw, 92px) var(--space-6);
}
.bcms-highlights__inner {
margin-inline: auto;
max-width: 1240px;
}
.bcms-highlights__header {
align-items: flex-end;
border-bottom: 1px solid var(--color-border);
display: flex;
gap: var(--space-7);
justify-content: space-between;
margin-block-end: var(--space-9);
padding-block-end: var(--space-7);
}
.bcms-highlights__eyebrow {
align-items: center;
color: var(--color-primary-dark);
display: inline-flex;
font-size: var(--fs-12);
font-weight: var(--fw-bold);
gap: var(--space-2);
letter-spacing: 0.14em;
margin: 0 0 var(--space-4);
text-transform: uppercase;
}
.bcms-highlights__eyebrow::before {
background: var(--color-secondary);
content: "";
height: 2px;
width: 24px;
}
.bcms-highlights__title {
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
letter-spacing: -0.025em;
line-height: 1.1;
margin: 0;
}
.bcms-highlights__subtitle {
color: var(--color-text-muted);
flex-shrink: 0;
font-size: var(--fs-15);
line-height: 1.65;
margin: 0;
max-width: 380px;
}
.bcms-highlights__slider {
position: relative;
}
.bcms-highlights__slider:focus-visible {
border-radius: var(--radius-lg);
outline: 3px solid var(--color-primary);
outline-offset: 5px;
}
.bcms-highlights__viewport {
border-radius: var(--radius-lg);
overflow: hidden;
}
.bcms-highlights__track {
display: flex;
transform: translateX(var(--bcms-highlights-offset, 0%));
transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
will-change: transform;
}
.bcms-highlights__slide {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
display: grid;
flex: 0 0 100%;
grid-template-columns: 1fr 1fr;
min-height: 430px;
overflow: hidden;
}
.bcms-highlights__media {
background: var(--color-border);
overflow: hidden;
position: relative;
}
.bcms-highlights__media img {
display: block;
height: 100%;
object-fit: cover;
opacity: 0.35;
transform: scale(1.06);
transition: opacity 0.7s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
width: 100%;
}
.bcms-highlights__slide.is-active .bcms-highlights__media img {
opacity: 1;
transform: scale(1);
}
.bcms-highlights__tag {
backdrop-filter: blur(6px);
background: color-mix(in srgb, var(--color-heading) 78%, transparent);
border-radius: var(--radius-pill);
color: var(--color-white);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
inset-inline-start: 20px;
letter-spacing: 0.04em;
opacity: 0;
padding: var(--space-2) var(--space-4);
position: absolute;
top: 20px;
transform: translateY(-8px);
transition: opacity 0.45s ease 0.2s, transform 0.45s ease 0.2s;
}
.bcms-highlights__slide.is-active .bcms-highlights__tag {
opacity: 1;
transform: translateY(0);
}
.bcms-highlights__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-9) clamp(30px, 4vw, 54px);
}
.bcms-highlights__date,
.bcms-highlights__heading,
.bcms-highlights__text,
.bcms-highlights__link {
opacity: 0;
transform: translateY(14px);
}
.bcms-highlights__date {
color: var(--color-primary-dark);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
letter-spacing: 0.05em;
margin: 0 0 var(--space-4);
transition: opacity 0.45s ease 0.1s, transform 0.45s ease 0.1s;
}
.bcms-highlights__heading {
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
line-height: 1.25;
margin: 0 0 var(--space-4);
transition: opacity 0.45s ease 0.18s, transform 0.45s ease 0.18s;
}
.bcms-highlights__text {
color: var(--color-text-muted);
font-size: var(--fs-15);
line-height: 1.7;
margin: 0 0 var(--space-6);
max-width: 470px;
transition: opacity 0.45s ease 0.26s, transform 0.45s ease 0.26s;
}
.bcms-highlights__link {
align-items: center;
color: var(--color-heading);
display: inline-flex;
font-size: var(--fs-14);
font-weight: var(--fw-bold);
gap: var(--space-3);
text-decoration: none;
transition: color var(--transition-fast), opacity 0.45s ease 0.34s, transform 0.45s ease 0.34s;
}
.bcms-highlights__slide.is-active .bcms-highlights__date,
.bcms-highlights__slide.is-active .bcms-highlights__heading,
.bcms-highlights__slide.is-active .bcms-highlights__text,
.bcms-highlights__slide.is-active .bcms-highlights__link {
opacity: 1;
transform: translateY(0);
}
.bcms-highlights__link-arrow {
align-items: center;
background: var(--color-primary-light);
border-radius: var(--radius-pill);
display: inline-flex;
height: 32px;
justify-content: center;
transition: background var(--transition-fast), transform var(--transition-fast);
width: 32px;
}
.bcms-highlights__link-arrow svg {
fill: none;
height: 14px;
stroke: var(--color-primary-dark);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.4;
width: 14px;
}
.bcms-highlights__link:hover {
color: var(--color-primary-dark);
}
.bcms-highlights__link:hover .bcms-highlights__link-arrow {
background: var(--color-primary);
transform: translateX(3px);
}
.bcms-highlights__link:hover .bcms-highlights__link-arrow svg {
stroke: var(--color-white);
}
.bcms-highlights__link:focus-visible,
.bcms-highlights__nav:focus-visible,
.bcms-highlights__dot:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
.bcms-highlights__controls {
align-items: center;
display: flex;
gap: var(--space-6);
justify-content: space-between;
margin-block-start: var(--space-7);
}
.bcms-highlights__arrows,
.bcms-highlights__dots {
align-items: center;
display: flex;
gap: var(--space-3);
}
.bcms-highlights__nav {
align-items: center;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
color: var(--color-heading);
cursor: pointer;
display: flex;
height: 44px;
justify-content: center;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
width: 44px;
}
.bcms-highlights__nav:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: var(--color-white);
transform: translateY(-1px);
}
.bcms-highlights__nav svg {
fill: none;
height: 18px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.3;
width: 18px;
}
.bcms-highlights__dot {
background: var(--color-border);
border: 0;
border-radius: var(--radius-pill);
cursor: pointer;
height: 5px;
overflow: hidden;
padding: 0;
position: relative;
width: 40px;
}
.bcms-highlights__dot::after {
background: var(--color-primary);
border-radius: inherit;
content: "";
inset: 0;
position: absolute;
transform: scaleX(0);
transform-origin: left;
}
[dir="rtl"] .bcms-highlights__dot::after {
transform-origin: right;
}
.bcms-highlights__dot.is-active::after {
animation: bcmsHighlightsProgress 6s linear forwards;
}
@keyframes bcmsHighlightsProgress {
to {
transform: scaleX(1);
}
}
.bcms-highlights__counter {
color: var(--color-text-muted);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
letter-spacing: 0.04em;
margin: 0;
}
.bcms-highlights__counter span:not(.screen-reader-text) {
color: var(--color-heading);
}
[dir="rtl"] .bcms-highlights__eyebrow,
[dir="rtl"] .bcms-highlights__title,
[dir="rtl"] .bcms-highlights__heading {
font-family: var(--font-arabic);
letter-spacing: 0;
}
[dir="rtl"] .bcms-highlights__nav svg,
[dir="rtl"] .bcms-highlights__link-arrow svg {
transform: scaleX(-1);
}
[dir="rtl"] .bcms-highlights__link:hover .bcms-highlights__link-arrow {
transform: translateX(-3px);
}
@media (max-width: 900px) {
.bcms-highlights__header {
align-items: flex-start;
flex-direction: column;
gap: var(--space-4);
}
.bcms-highlights__subtitle {
max-width: 100%;
}
.bcms-highlights__slide {
grid-template-columns: 1fr;
min-height: 0;
}
.bcms-highlights__media {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 520px) {
.bcms-highlights {
padding-inline: var(--space-4);
}
.bcms-highlights__content {
padding: var(--space-7) var(--space-6) var(--space-7);
}
.bcms-highlights__controls {
flex-wrap: wrap;
}
.bcms-highlights__dots {
justify-content: center;
order: 3;
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-highlights__track,
.bcms-highlights__media img,
.bcms-highlights__tag,
.bcms-highlights__date,
.bcms-highlights__heading,
.bcms-highlights__text,
.bcms-highlights__link,
.bcms-highlights__nav {
transition: none;
}
.bcms-highlights__dot.is-active::after {
animation: none;
transform: scaleX(1);
}
.bcms-highlights__media img,
.bcms-highlights__tag,
.bcms-highlights__date,
.bcms-highlights__heading,
.bcms-highlights__text,
.bcms-highlights__link {
opacity: 1;
transform: none;
}
}
/* ============================================================
Our Locations — rail navigation + image stage
============================================================ */
.bcms-locations {
box-sizing: border-box;
background: var(--color-background);
padding: var(--space-10) var(--space-6) var(--space-11);
}
.bcms-locations *,
.bcms-locations *::before,
.bcms-locations *::after {
box-sizing: border-box;
}
.bcms-locations__inner {
max-width: var(--container-width);
margin: 0 auto;
}
.bcms-locations__header {
margin-bottom: var(--space-8);
}
.bcms-locations__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-primary-dark);
margin: 0 0 var(--space-4);
}
.bcms-locations__eyebrow::before {
content: "";
width: 22px;
height: 2px;
background: var(--color-secondary);
display: inline-block;
}
.bcms-locations__title {
font-family: var(--font-body);
font-weight: var(--fw-bold);
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.2;
letter-spacing: -0.015em;
margin: 0;
}
[dir="rtl"] .bcms-locations__eyebrow,
[dir="rtl"] .bcms-locations__title {
font-family: var(--font-arabic);
letter-spacing: 0;
}
/* Layout: rail + stage */
.bcms-locations__layout {
display: grid;
grid-template-columns: 300px 1fr;
gap: 0;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
/* Vertical nav rail */
.bcms-locations__rail {
background: var(--color-white);
border: 1px solid var(--color-border);
border-inline-end: none;
padding: var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-1);
position: relative;
}
.bcms-locations__rail-indicator {
position: absolute;
inset-inline-start: 6px;
width: 3px;
border-radius: var(--radius-sm);
background: var(--color-primary-dark);
transition: top 0.45s cubic-bezier(0.65, 0, 0.35, 1), height 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.bcms-locations__item {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--space-4);
text-align: start;
background: transparent;
border: none;
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-4);
cursor: pointer;
transition: background 0.25s ease;
}
.bcms-locations__item:hover,
.bcms-locations__item.bcms-active {
background: var(--color-primary-light);
}
.bcms-locations__item-icon {
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
background: var(--color-primary-light);
display: flex;
align-items: center;
justify-content: center;
flex: none;
color: var(--color-primary-dark);
transition: background 0.25s ease, color 0.25s ease;
}
.bcms-locations__item.bcms-active .bcms-locations__item-icon {
background: var(--color-primary-dark);
color: var(--color-white);
}
.bcms-locations__item-icon svg {
width: 18px;
height: 18px;
}
.bcms-locations__item-text {
display: flex;
flex-direction: column;
gap: 3px;
padding-top: 2px;
}
.bcms-locations__item-name {
font-family: var(--font-body);
font-weight: var(--fw-semibold);
font-size: var(--fs-14);
color: var(--color-heading);
line-height: 1.35;
}
.bcms-locations__item-sub {
font-size: var(--fs-12);
color: var(--color-text-muted);
}
[dir="rtl"] .bcms-locations__item-name {
font-family: var(--font-arabic);
}
.bcms-locations__item:focus-visible {
outline: 2px solid var(--color-primary-dark);
outline-offset: 2px;
}
/* Stage (image + glass card) */
.bcms-locations__stage {
position: relative;
min-height: 480px;
overflow: hidden;
background: var(--color-border);
}
.bcms-locations__slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.7s ease;
}
.bcms-locations__slide.bcms-active {
opacity: 1;
visibility: visible;
z-index: 2;
}
.bcms-locations__slide-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.12);
transition: transform 6s cubic-bezier(0.22, 1, 0.36, 1);
}
.bcms-locations__slide.bcms-active .bcms-locations__slide-img {
transform: scale(1);
}
.bcms-locations__slide::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, color-mix(in srgb, var(--color-heading) 15%, transparent) 0%, color-mix(in srgb, var(--color-heading) 0%, transparent) 45%),
linear-gradient(0deg, color-mix(in srgb, var(--color-heading) 60%, transparent) 0%, color-mix(in srgb, var(--color-heading) 0%, transparent) 45%);
z-index: 1;
}
/* Glass content card */
.bcms-locations__glass {
position: absolute;
inset-inline: 32px;
bottom: 32px;
z-index: 3;
background: color-mix(in srgb, var(--color-white) 88%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-radius: var(--radius-lg);
padding: var(--space-7) var(--space-7);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-6);
align-items: center;
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}
.bcms-locations__slide.bcms-active .bcms-locations__glass {
opacity: 1;
transform: translateY(0);
}
.bcms-locations__glass-copy {
max-width: 520px;
}
.bcms-locations__glass-tag {
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary-dark);
margin: 0 0 var(--space-2);
}
.bcms-locations__glass-heading {
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: var(--fs-h5);
line-height: 1.3;
color: var(--color-heading);
margin: 0 0 var(--space-2);
}
.bcms-locations__glass-text {
font-size: var(--fs-14);
line-height: 1.6;
color: var(--color-text-muted);
margin: 0;
}
[dir="rtl"] .bcms-locations__glass-heading {
font-family: var(--font-arabic);
}
.bcms-locations__glass-cta {
display: inline-flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: var(--color-white);
background: var(--color-primary-dark);
font-weight: var(--fw-semibold);
font-size: var(--fs-14);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
white-space: nowrap;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.bcms-locations__glass-cta:hover {
background: var(--color-primary);
transform: translateY(-1px);
}
.bcms-locations__glass-cta svg {
width: 15px;
height: 15px;
stroke: var(--color-white);
fill: none;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--transition-fast);
}
.bcms-locations__glass-cta:hover svg {
transform: translateX(2px);
}
[dir="rtl"] .bcms-locations__glass-cta:hover svg {
transform: translateX(-2px) scaleX(-1);
}
[dir="rtl"] .bcms-locations__glass-cta svg {
transform: scaleX(-1);
}
.bcms-locations__glass-cta:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
}
/* Top-corner meta badge on image */
.bcms-locations__meta {
position: absolute;
top: 24px;
inset-inline-end: 24px;
z-index: 3;
display: flex;
align-items: center;
gap: var(--space-2);
background: color-mix(in srgb, var(--color-white) 92%, transparent);
backdrop-filter: blur(6px);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
font-size: var(--fs-12);
font-weight: var(--fw-semibold);
color: var(--color-heading);
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s;
}
.bcms-locations__slide.bcms-active .bcms-locations__meta {
opacity: 1;
transform: translateY(0);
}
.bcms-locations__meta svg {
width: 13px;
height: 13px;
stroke: var(--color-primary-dark);
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
}
@media (max-width: 900px) {
.bcms-locations__layout {
grid-template-columns: 1fr;
}
.bcms-locations__rail {
flex-direction: row;
overflow-x: auto;
border-inline-end: 1px solid var(--color-border);
border-block-end: none;
}
.bcms-locations__rail-indicator {
display: none;
}
.bcms-locations__item {
flex: none;
padding: var(--space-4) var(--space-4);
}
.bcms-locations__stage {
min-height: 420px;
}
}
@media (max-width: 560px) {
.bcms-locations {
padding: var(--space-9) var(--space-4) var(--space-10);
}
.bcms-locations__stage {
min-height: 520px;
}
.bcms-locations__glass {
grid-template-columns: 1fr;
inset-inline: 16px;
bottom: 16px;
padding: var(--space-6) var(--space-6) var(--space-6);
}
.bcms-locations__glass-cta {
justify-content: center;
}
.bcms-locations__meta {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-locations__slide,
.bcms-locations__slide-img,
.bcms-locations__glass,
.bcms-locations__meta,
.bcms-locations__rail-indicator,
.bcms-locations__glass-cta,
.bcms-locations__glass-cta svg {
transition: none;
}
.bcms-locations__glass,
.bcms-locations__meta {
opacity: 1;
transform: none;
}
}
/* ============================================================
Latest News
============================================================ */
.bcms-news {
box-sizing: border-box;
background: var(--color-white);
padding: var(--space-11) var(--space-6) var(--space-12);
}
.bcms-news *,
.bcms-news *::before,
.bcms-news *::after {
box-sizing: border-box;
}
.bcms-news__inner {
max-width: var(--container-width);
margin: 0 auto;
}
.bcms-news__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--space-7);
margin-bottom: var(--space-9);
padding-bottom: var(--space-7);
border-bottom: 1px solid var(--color-border);
}
.bcms-news__eyebrow {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--color-primary-dark);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 var(--space-3);
}
.bcms-news__eyebrow::before {
background: var(--color-secondary);
content: "";
display: block;
height: 2px;
width: 28px;
}
.bcms-news__title {
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
}
[dir="rtl"] .bcms-news__eyebrow,
[dir="rtl"] .bcms-news__title {
font-family: var(--font-arabic);
letter-spacing: 0;
}
.bcms-news__all {
color: var(--color-primary-dark);
font-size: var(--fs-15);
font-weight: var(--fw-bold);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
white-space: nowrap;
}
.bcms-news__all:hover {
color: var(--color-heading);
}
/* Feature row: panel + image */
.bcms-news__feature {
display: grid;
grid-template-columns: minmax(280px, 0.62fr) 1fr;
gap: 0;
margin-bottom: var(--space-6);
border-radius: var(--radius-lg);
overflow: hidden;
}
.bcms-news__feature-panel {
background: var(--color-background);
padding: var(--space-8) var(--space-8) var(--space-8);
display: flex;
flex-direction: column;
justify-content: center;
}
.bcms-news__feature-link {
text-decoration: none;
display: block;
}
.bcms-news__feature-heading-row {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
}
.bcms-news__feature-heading {
font-family: var(--font-body);
font-weight: var(--fw-bold);
color: var(--color-heading);
font-size: var(--fs-h4);
line-height: 1.28;
margin: 0 0 var(--space-5);
display: block;
}
.bcms-news__feature-copy {
font-size: var(--fs-15);
line-height: 1.65;
color: var(--color-text);
margin: 0;
max-width: 480px;
}
.bcms-news__feature-media {
position: relative;
min-height: 320px;
overflow: hidden;
background: var(--color-border);
}
.bcms-news__feature-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bcms-news__arrow-badge {
flex: none;
width: 30px;
height: 30px;
border-radius: var(--radius-sm);
background: var(--color-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: var(--space-1);
margin-bottom: var(--space-1);
transition: background var(--transition-fast), transform var(--transition-fast);
}
.bcms-news__arrow-badge svg {
width: 15px;
height: 15px;
stroke: var(--color-white);
fill: none;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.bcms-news__arrow-badge--sm {
width: 26px;
height: 26px;
margin-top: 3px;
}
.bcms-news__arrow-badge--sm svg {
width: 13px;
height: 13px;
}
.bcms-news__feature-link:hover .bcms-news__arrow-badge,
.bcms-news__card-link:hover .bcms-news__arrow-badge {
background: var(--color-secondary-dark);
transform: translateX(3px);
}
[dir="rtl"] .bcms-news__feature-link:hover .bcms-news__arrow-badge,
[dir="rtl"] .bcms-news__card-link:hover .bcms-news__arrow-badge {
transform: translateX(-3px) scaleX(-1);
}
.bcms-news__feature-link:focus-visible .bcms-news__feature-heading,
.bcms-news__card-link:focus-visible .bcms-news__card-heading {
outline: 2px solid var(--color-heading);
outline-offset: 4px;
}
/* Bottom row: article cards */
.bcms-news__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.bcms-news__card {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-white);
display: flex;
flex-direction: column;
opacity: 0;
transform: translateY(22px);
transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.25s ease;
}
.bcms-news__card.bcms-in-view {
opacity: 1;
transform: translateY(0);
}
.bcms-news__card:hover {
box-shadow: var(--shadow-md);
}
.bcms-news__card-media {
width: 100%;
aspect-ratio: 16 / 11;
overflow: hidden;
background: var(--color-border);
}
.bcms-news__card-media img {
display: block;
transition: transform 0.5s ease;
}
.bcms-news__card:hover .bcms-news__card-media img {
transform: scale(1.04);
}
.bcms-news__card-body {
padding: var(--space-5) var(--space-6) var(--space-6);
}
.bcms-news__card-link {
text-decoration: none;
}
.bcms-news__card-heading-row {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
}
.bcms-news__card-heading {
font-family: var(--font-body);
font-weight: var(--fw-bold);
color: var(--color-heading);
font-size: var(--fs-18);
line-height: 1.35;
margin: 0;
}
[dir="rtl"] .bcms-news__feature-heading,
[dir="rtl"] .bcms-news__card-heading {
font-family: var(--font-arabic);
}
@media (max-width: 900px) {
.bcms-news__header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
.bcms-news__feature {
grid-template-columns: 1fr;
}
.bcms-news__feature-media {
min-height: 260px;
order: -1;
}
.bcms-news__cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.bcms-news {
padding: var(--space-9) var(--space-4) var(--space-10);
}
.bcms-news__feature-panel {
padding: var(--space-7) var(--space-6) var(--space-7);
}
.bcms-news__card-body {
padding: var(--space-5) var(--space-5) var(--space-5);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-news__card,
.bcms-news__card-media img,
.bcms-news__arrow-badge {
transition: none;
}
.bcms-news__card {
opacity: 1;
transform: none;
}
}
/* ============================================================
Quick Information and Resources
============================================================ */
.bcms-resources {
background:
linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent), color-mix(in srgb, var(--color-secondary) 8%, transparent)),
var(--color-white);
padding: clamp(64px, 8vw, 96px) var(--space-6);
}
.bcms-resources__inner {
width: min(100%, var(--container-width));
margin-inline: auto;
}
.bcms-resources__header {
display: grid;
gap: var(--space-3);
grid-template-columns: minmax(160px, 0.35fr) minmax(280px, 1fr);
margin-block-end: var(--space-8);
}
.bcms-resources__eyebrow {
align-items: center;
align-self: start;
color: var(--color-primary-dark);
display: flex;
font-size: var(--fs-13);
font-weight: var(--fw-bold);
gap: var(--space-3);
letter-spacing: 0.14em;
margin: var(--space-3) 0 0;
text-transform: uppercase;
}
.bcms-resources__eyebrow::before {
background: var(--color-secondary);
content: "";
height: 2px;
width: 28px;
}
.bcms-resources__title {
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
letter-spacing: -0.025em;
line-height: 1.12;
margin: 0;
max-width: 850px;
}
.bcms-resources__grid {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.bcms-resources__card {
align-items: flex-start;
background: color-mix(in srgb, var(--color-white) 92%, transparent);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
color: var(--color-heading);
display: flex;
flex-direction: column;
min-height: 250px;
padding: var(--space-6) var(--space-6) var(--space-5);
position: relative;
text-decoration: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.bcms-resources__card::before {
background: var(--color-primary);
border-radius: var(--radius-pill);
content: "";
height: 3px;
inset-inline: 22px;
position: absolute;
top: 0;
transform: scaleX(0);
transition: transform var(--transition-fast);
}
.bcms-resources__card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-5px);
}
.bcms-resources__card:hover::before {
transform: scaleX(1);
}
.bcms-resources__card:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
}
.bcms-resources__icon {
align-items: center;
background: var(--color-primary-light);
border-radius: var(--radius-pill);
color: var(--color-primary-dark);
display: inline-flex;
height: 52px;
justify-content: center;
margin-block-end: var(--space-6);
transition: background var(--transition-fast), color var(--transition-fast);
width: 52px;
}
.bcms-resources__card:hover .bcms-resources__icon {
background: var(--color-primary-dark);
color: var(--color-white);
}
.bcms-resources__icon svg {
fill: none;
height: 24px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
width: 24px;
}
.bcms-resources__content {
display: block;
}
.bcms-resources__card-title {
display: block;
font-size: var(--fs-18);
font-weight: var(--fw-bold);
line-height: 1.3;
margin-block-end: var(--space-2);
}
.bcms-resources__description {
color: var(--color-text-muted);
display: block;
font-size: var(--fs-14);
line-height: 1.55;
}
.bcms-resources__arrow {
align-items: center;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
color: var(--color-primary-dark);
display: inline-flex;
height: 34px;
justify-content: center;
margin-block-start: auto;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
width: 34px;
}
.bcms-resources__card:hover .bcms-resources__arrow {
background: var(--color-secondary);
border-color: var(--color-secondary);
color: var(--color-white);
}
.bcms-resources__arrow svg {
fill: none;
height: 15px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.2;
width: 15px;
}
[dir="rtl"] .bcms-resources__eyebrow,
[dir="rtl"] .bcms-resources__title,
[dir="rtl"] .bcms-resources__card-title {
font-family: var(--font-arabic);
letter-spacing: 0;
}
[dir="rtl"] .bcms-resources__arrow svg:not(.bcms-resources__external) {
transform: scaleX(-1);
}
@media (max-width: 1180px) {
.bcms-resources__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.bcms-resources__header {
grid-template-columns: 1fr;
}
.bcms-resources__eyebrow {
margin-block-start: 0;
}
.bcms-resources__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.bcms-resources {
padding-inline: var(--space-4);
}
.bcms-resources__grid {
grid-template-columns: 1fr;
}
.bcms-resources__card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-4);
min-height: 0;
padding: var(--space-5);
}
.bcms-resources__icon,
.bcms-resources__arrow {
margin: 0;
}
.bcms-resources__arrow {
align-self: center;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-resources__card,
.bcms-resources__card::before,
.bcms-resources__icon,
.bcms-resources__arrow {
transition: none;
}
}
/* ============================================================
Quick-access sidebar (original #bcmsQside, front page only)
From 1440 px the rail sits in the page gutter: each tab is 40 px wide
and the container leaves at least 40 px each side, so the rail never
covers page text. It sits below the sticky header (z-index under it)
and centres in the space left under the header. Hover or keyboard
focus slides the label out (a tooltip); every link also has an
aria-label. Below 1440 px it is hidden: the header, finder and mobile
menu carry the same destinations. Tabs use the dark green so the
white label passes AA (#177C61, 5.13:1).
============================================================ */
.bcms-qside {
display: none;
}
@media (min-width: 1440px) {
.bcms-qside {
position: fixed;
inset-block: 0;
inset-inline-end: 0;
z-index: var(--z-qside);
display: flex;
align-items: center;
padding-block-start: calc(var(--header-h) + var(--space-6));
pointer-events: none;
}
}
.bcms-qside__list {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-2);
max-height: calc(100vh - var(--header-h) - var(--space-9));
pointer-events: auto;
}
.bcms-qside__item {
display: flex;
align-items: center;
gap: 0;
height: 48px;
padding-inline: var(--space-2);
border-radius: var(--radius-pill) 0 0 var(--radius-pill);
background: var(--color-primary-dark);
box-shadow: var(--shadow-md);
color: var(--color-white);
white-space: nowrap;
text-decoration: none;
transition: background-color var(--transition-fast), box-shadow var(--transition-fast), gap var(--transition-normal), padding-inline var(--transition-normal);
}
[dir="rtl"] .bcms-qside__item {
border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}
.bcms-qside__item:hover,
.bcms-qside__item:focus-visible {
gap: var(--space-3);
padding-inline: var(--space-3) var(--space-5);
background: var(--color-heading);
box-shadow: var(--shadow-lg);
}
.bcms-qside__item:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
.bcms-qside__icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--color-white);
}
.bcms-qside__icon svg {
width: 22px;
height: 22px;
}
.bcms-qside__label {
max-width: 0;
overflow: hidden;
color: var(--color-white);
font-family: var(--font-body);
font-size: var(--fs-14);
font-weight: var(--fw-bold);
opacity: 0;
transition: max-width var(--transition-normal), opacity var(--transition-normal);
}
.bcms-qside__item:hover .bcms-qside__label,
.bcms-qside__item:focus-visible .bcms-qside__label {
max-width: 240px;
opacity: 1;
}
/* Hidden while the mobile menu is open (see theme.js) so it doesn't float
on top of the open menu on small screens. */
/* Closed by default (icon-only) — the label reveals on hover/focus, no click needed. */
/* "Small" laptop/desktop screens — the nav is still visible here (it only
hides at ≤1080px), but the viewport can be short enough that a full-size
7-item stack leaves almost no margin below the header. Shrink the pills
instead of relying on a razor-thin gap. */
/* Keeps the sidebar's no-go zone in sync with the header's own shorter
height at each of its breakpoints (see .bcms-hd__top .bcms-hd__inner). */
/* Responsive — Tablet */
/* Responsive — Mobile. No hover on touch, so the sidebar just stays
icon-only (tap navigates directly) instead of trying to expand. */
/* RTL is handled via CSS logical properties throughout.
Additional RTL overrides live in rtl.css. */
/* ============================================================
About Us Page
============================================================ */
.bcms-about-intro {
background: var(--color-white);
overflow: hidden;
position: relative;
}
.bcms-about-intro__inner {
display: grid;
gap: clamp(48px, 6vw, 78px);
grid-template-columns: minmax(0, 1fr) minmax(380px, 0.92fr);
margin-inline: auto;
max-width: 1280px;
padding: clamp(72px, 8vw, 112px) var(--space-6) 0;
position: relative;
z-index: 2;
}
.bcms-about-intro__copy {
display: flex;
flex-direction: column;
}
.bcms-about-intro__eyebrow {
align-items: center;
color: var(--color-primary-dark);
display: inline-flex;
font-size: var(--fs-13);
font-weight: var(--fw-semibold);
gap: var(--space-3);
letter-spacing: 0.14em;
margin: 0 0 var(--space-4);
text-transform: uppercase;
}
.bcms-about-intro__eyebrow::before {
background: var(--color-secondary);
content: "";
height: 2px;
width: 28px;
}
.bcms-about-intro__title {
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h2);
font-weight: var(--fw-semibold);
letter-spacing: -0.025em;
line-height: 1.12;
margin: 0 0 var(--space-6);
max-width: 650px;
}
.bcms-about-intro__text {
color: var(--color-text);
font-size: var(--fs-16);
line-height: 1.8;
margin: 0 0 var(--space-7);
max-width: 590px;
}
.bcms-about-intro__button {
align-items: center;
align-self: flex-start;
background: var(--color-primary-dark);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-sm);
color: var(--color-white);
display: inline-flex;
font-size: var(--fs-15);
font-weight: var(--fw-semibold);
gap: var(--space-3);
justify-content: center;
padding: var(--space-4) var(--space-7);
transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.bcms-about-intro__button:hover {
background: var(--color-heading);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
.bcms-about-intro__button:focus-visible,
.bcms-about-intro__feature:focus-within {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
}
.bcms-about-intro__button svg {
fill: none;
height: 17px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.2;
width: 17px;
}
.bcms-about-intro__divider {
border: 0;
border-block-start: 1px solid var(--color-border);
margin: var(--space-8) 0 var(--space-7);
width: 100%;
}
.bcms-about-intro__features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-block-end: var(--space-9);
}
.bcms-about-intro__feature {
align-items: flex-start;
display: flex;
gap: var(--space-4);
opacity: 0;
padding-inline: var(--space-6);
transform: translateY(18px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.bcms-about-intro__feature:first-child {
border-inline-end: 1px solid var(--color-border);
padding-inline-start: 0;
}
.bcms-about-intro__feature.is-visible {
opacity: 1;
transform: translateY(0);
}
.bcms-about-intro__feature-icon {
align-items: center;
background: var(--color-primary-light);
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
border-radius: var(--radius-md);
color: var(--color-primary-dark);
display: flex;
flex: none;
height: 58px;
justify-content: center;
transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
width: 58px;
}
.bcms-about-intro__feature:hover .bcms-about-intro__feature-icon {
background: var(--color-primary-dark);
color: var(--color-white);
transform: translateY(-2px);
}
.bcms-about-intro__feature-icon svg {
fill: none;
height: 27px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
width: 27px;
}
.bcms-about-intro__feature-title {
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-16);
font-weight: var(--fw-semibold);
line-height: 1.35;
margin: 0 0 var(--space-2);
}
.bcms-about-intro__feature-copy {
color: var(--color-text-muted);
font-size: var(--fs-13);
line-height: 1.6;
margin: 0;
}
.bcms-about-intro__small-media {
aspect-ratio: 16 / 10;
background: var(--color-border);
border: 5px solid var(--color-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
margin: 0 0 -150px;
max-width: 590px;
overflow: hidden;
position: relative;
z-index: 3;
}
.bcms-about-intro__small-media img,
.bcms-about-intro__portrait img {
display: block;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
width: 100%;
}
.bcms-about-intro__small-media:hover img,
.bcms-about-intro__portrait:hover img {
transform: scale(1.025);
}
.bcms-about-intro__portrait {
background: var(--color-border);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
box-shadow: var(--shadow-md);
min-height: 650px;
overflow: hidden;
position: relative;
}
.bcms-about-intro__portrait::after {
background: linear-gradient(180deg, transparent 65%, color-mix(in srgb, var(--color-heading) 18%, transparent));
content: "";
inset: 0;
pointer-events: none;
position: absolute;
}
.bcms-about-intro__band {
background: var(--color-heading);
height: 100px;
margin-block-start: var(--space-11);
overflow: hidden;
position: relative;
}
.bcms-about-intro__band svg {
bottom: 0;
height: 72px;
inset-inline: 0;
opacity: 0.22;
position: absolute;
width: 100%;
}
.bcms-about-intro__band polyline {
fill: none;
stroke: var(--color-primary-light);
stroke-width: 2;
}
.bcms-about-content {
background: var(--color-background);
padding: clamp(64px, 8vw, 96px) var(--space-6);
}
.bcms-about-content__inner {
color: var(--color-text);
font-size: var(--fs-16);
line-height: 1.8;
margin-inline: auto;
max-width: 900px;
}
[dir="rtl"] .bcms-about-intro__eyebrow,
[dir="rtl"] .bcms-about-intro__title,
[dir="rtl"] .bcms-about-intro__feature-title {
font-family: var(--font-arabic);
letter-spacing: 0;
}
[dir="rtl"] .bcms-about-intro__button svg {
transform: scaleX(-1);
}
@media (max-width: 980px) {
.bcms-about-intro__inner {
grid-template-columns: 1fr;
}
.bcms-about-intro__portrait {
grid-row: 1;
min-height: 480px;
}
.bcms-about-intro__small-media {
margin-block-end: 0;
}
.bcms-about-intro__band {
height: 90px;
margin-block-start: var(--space-10);
}
}
@media (max-width: 640px) {
.bcms-about-intro__inner {
padding-inline: var(--space-4);
}
.bcms-about-intro__portrait {
min-height: 380px;
}
.bcms-about-intro__features {
gap: var(--space-6);
grid-template-columns: 1fr;
}
.bcms-about-intro__feature {
padding-inline: 0;
}
.bcms-about-intro__feature:first-child {
border-block-end: 1px solid var(--color-border);
border-inline-end: 0;
padding-block-end: var(--space-6);
}
}
@media (max-width: 480px) {
.bcms-about-intro__inner {
padding-block-start: var(--space-10);
}
.bcms-about-intro__title {
font-size: var(--fs-h2);
}
.bcms-about-intro__button {
width: 100%;
}
.bcms-about-intro__band {
height: 80px;
margin-block-start: var(--space-9);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-about-intro__feature,
.bcms-about-intro__feature-icon,
.bcms-about-intro__button,
.bcms-about-intro__small-media img,
.bcms-about-intro__portrait img {
opacity: 1;
transform: none;
transition: none;
}
}
/* ============================================================
About Us — Mission, Values, and Vision
============================================================ */
.bcms-about-pillars {
background:
linear-gradient(180deg, color-mix(in srgb, var(--color-primary-light) 45%, transparent), transparent 42%),
var(--color-background);
padding: clamp(72px, 9vw, 112px) var(--space-6);
}
.bcms-about-pillars__card {
aspect-ratio: 3 / 4;
background: var(--color-border);
border: 1px solid color-mix(in srgb, var(--color-white) 35%, transparent);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
opacity: 0;
overflow: hidden;
position: relative;
transform: translateY(26px);
transition: opacity 0.55s ease, transform 0.55s ease, box-shadow var(--transition-fast);
}
.bcms-about-pillars__card.is-visible {
opacity: 1;
transform: translateY(0);
}
.bcms-about-pillars__card:hover {
box-shadow: var(--shadow-md);
}
@media (max-width: 980px) {
.bcms-about-pillars__card:last-child {
aspect-ratio: 16 / 8;
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.bcms-about-pillars {
padding-inline: var(--space-4);
}
.bcms-about-pillars__card,
.bcms-about-pillars__card:last-child {
aspect-ratio: 4 / 4.4;
grid-column: auto;
}
}
@media (max-width: 480px) {
.bcms-about-pillars {
padding-block: var(--space-10) var(--space-11);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-about-pillars__card {
opacity: 1;
transform: none;
transition: none;
}
}
/* ============================================================
Doctor Detail — Profile / Dossier (page-doctor-detail.php)
Scoped under .bcms-doc
============================================================ */
.bcms-doc {
font-family: var(--font-body);
color: var(--color-heading);
background:
radial-gradient(1100px 480px at 88% -8%, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 60%),
radial-gradient(700px 380px at -5% 10%, color-mix(in srgb, var(--color-secondary) 6%, transparent), transparent 55%),
var(--color-background);
padding: 150px 6vw var(--space-11);
max-width: 1180px;
margin: 0 auto;
box-sizing: border-box;
overflow-x: hidden;
position: relative;
}
.bcms-doc *,
.bcms-doc *::before,
.bcms-doc *::after {
box-sizing: border-box;
}
.bcms-doc h1,
.bcms-doc h2,
.bcms-doc h3 {
font-family: var(--font-body);
margin: 0;
color: var(--color-heading);
}
[dir="rtl"] .bcms-doc h1,
[dir="rtl"] .bcms-doc h2,
[dir="rtl"] .bcms-doc h3 {
font-family: var(--font-arabic);
}
/* ---------- Hero ---------- */
.bcms-doc__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary-dark);
background: var(--color-primary-light);
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
border-radius: var(--radius-pill);
margin-bottom: var(--space-6);
}
.bcms-doc__name {
font-size: var(--fs-h2);
font-weight: var(--fw-semibold);
line-height: 1.02;
letter-spacing: -0.01em;
}
[dir="rtl"] .bcms-doc__name {
font-family: var(--font-arabic);
letter-spacing: 0;
}
.bcms-doc__title {
font-size: var(--fs-18);
color: var(--color-text-muted);
margin: var(--space-4) 0 var(--space-7);
font-weight: var(--fw-medium);
}
.bcms-doc__btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: var(--fs-14);
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-pill);
text-decoration: none;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
border: 1.5px solid transparent;
cursor: pointer;
}
.bcms-doc__btn--primary {
background: var(--color-primary-dark);
color: var(--color-white);
}
.bcms-doc__btn--primary:hover {
background: var(--color-heading);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.bcms-doc__btn--ghost {
background: transparent;
color: var(--color-heading);
border-color: var(--color-border);
}
.bcms-doc__btn--ghost:hover {
border-color: var(--color-heading);
}
.bcms-doc__btn--outline {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.bcms-doc__btn--outline:hover {
background: var(--color-heading);
color: var(--color-white);
}
.bcms-doc__btn:focus-visible {
outline: 2px solid var(--color-primary-dark);
outline-offset: 3px;
}
/* ---------- Photo Frame ---------- */
/* ---------- Section Head ---------- */
.bcms-doc__section {
margin-bottom: var(--space-10);
}
/* ---------- Ledger ---------- */
/* ---------- Specialty Strip ---------- */
/* ---------- Profile ---------- */
/* ---------- Contact Strip ---------- */
/* ---------- Reveal Animation ---------- */
.bcms-doc [data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.bcms-doc [data-reveal].bcms-doc--visible {
opacity: 1;
transform: translateY(0);
}
/* ---------- Responsive — Doctor Detail ---------- */
@media (max-width: 860px) {
.bcms-doc {
padding: var(--space-9) 6vw var(--space-10);
}
}
@media (max-width: 480px) {
.bcms-doc {
padding: var(--space-7) 4vw var(--space-9);
}
.bcms-doc__name {
font-size: var(--fs-h2);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-doc [data-reveal] {
transition: none;
opacity: 1;
transform: none;
}
}
/* ============================================================
Newsroom Page — Press Index Grid
============================================================ */
.bcms-newsroom {
padding: var(--space-10) 0 var(--space-11);
}
.bcms-newsroom * {
box-sizing: border-box;
}
.bcms-newsroom h2,
.bcms-newsroom h3,
.bcms-newsroom h4 {
font-family: var(--font-body);
margin: 0;
color: var(--color-heading);
font-weight: var(--fw-medium);
}
[dir="rtl"] .bcms-newsroom h2,
[dir="rtl"] .bcms-newsroom h3,
[dir="rtl"] .bcms-newsroom h4 {
font-family: var(--font-arabic);
}
/* ---------- Head ---------- */
.bcms-newsroom__head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--space-6);
flex-wrap: wrap;
margin-bottom: var(--space-8);
padding-bottom: var(--space-7);
border-bottom: 1px solid var(--color-border);
}
.bcms-newsroom__eyebrow {
display: block;
font-family: var(--font-body);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-secondary-dark);
margin-bottom: var(--space-3);
}
[dir="rtl"] .bcms-newsroom__eyebrow {
font-family: var(--font-arabic);
letter-spacing: 0;
text-transform: none;
}
.bcms-newsroom__heading {
font-size: var(--fs-h2);
}
/* ---------- Filters ---------- */
.bcms-newsroom__filters {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.bcms-newsroom__filter {
font-family: var(--font-body);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
background: transparent;
color: var(--color-text-muted);
border: 1.5px solid var(--color-border);
padding: var(--space-2) var(--space-5);
border-radius: var(--radius-pill);
cursor: pointer;
transition: all 0.18s ease;
}
[dir="rtl"] .bcms-newsroom__filter {
font-family: var(--font-arabic);
}
.bcms-newsroom__filter:hover {
border-color: var(--color-primary);
color: var(--color-primary-dark);
}
.bcms-newsroom__filter.is-active {
background: var(--color-primary-dark);
border-color: var(--color-primary);
color: var(--color-white);
}
/* ---------- Tags & dates ---------- */
.bcms-newsroom__tag {
position: absolute;
top: 16px;
inset-inline-start: 16px;
color: var(--color-white);
font-family: var(--font-body);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-pill);
}
[dir="rtl"] .bcms-newsroom__tag {
font-family: var(--font-arabic);
letter-spacing: 0;
text-transform: none;
}
.bcms-newsroom__date {
font-family: var(--font-body);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
letter-spacing: 0.03em;
color: var(--color-primary-dark);
}
[dir="rtl"] .bcms-newsroom__date {
font-family: var(--font-arabic);
letter-spacing: 0;
}
.bcms-newsroom__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
color: var(--color-heading);
margin-top: var(--space-1);
}
[dir="rtl"] .bcms-newsroom__link {
font-family: var(--font-arabic);
}
.bcms-newsroom__link svg {
transition: transform 0.18s ease;
color: var(--color-secondary);
}
.bcms-newsroom__card:hover .bcms-newsroom__link svg {
transform: translateX(4px);
}
[dir="rtl"] .bcms-newsroom__card:hover .bcms-newsroom__link svg {
transform: translateX(-4px);
}
/* ---------- Grid ---------- */
.bcms-newsroom__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-7);
}
.bcms-newsroom__card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
text-decoration: none;
display: flex;
flex-direction: column;
transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.bcms-newsroom__card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
border-color: transparent;
}
.bcms-newsroom__card-media {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
}
.bcms-newsroom__card-media img {
display: block;
transition: transform 0.5s ease;
}
.bcms-newsroom__card:hover .bcms-newsroom__card-media img {
transform: scale(1.06);
}
.bcms-newsroom__card-body {
padding: var(--space-6) var(--space-6) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
flex: 1;
}
.bcms-newsroom__card-body h4 {
font-size: var(--fs-18);
line-height: 1.36;
color: var(--color-heading);
}
/* ---------- Empty / More ---------- */
.bcms-newsroom__empty {
text-align: center;
color: var(--color-text-muted);
padding: var(--space-9) 0;
font-size: var(--fs-15);
}
.bcms-newsroom__more {
display: flex;
justify-content: center;
margin-top: var(--space-9);
}
.bcms-newsroom__more-btn {
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: var(--fs-14);
background: transparent;
color: var(--color-primary-dark);
border: 1.5px solid var(--color-primary);
padding: var(--space-3) var(--space-7);
border-radius: var(--radius-pill);
cursor: pointer;
transition: all 0.18s ease;
}
[dir="rtl"] .bcms-newsroom__more-btn {
font-family: var(--font-arabic);
}
.bcms-newsroom__more-btn:hover {
background: var(--color-heading);
color: var(--color-white);
}
/* ---------- Reveal ---------- */
.bcms-newsroom [data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.bcms-newsroom [data-reveal].bcms-newsroom--visible {
opacity: 1;
transform: translateY(0);
}
/* ---------- Newsroom Responsive ---------- */
@media (max-width: 980px) {
.bcms-newsroom__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 620px) {
.bcms-newsroom__grid {
grid-template-columns: 1fr;
}
.bcms-newsroom__head {
align-items: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-newsroom * {
transition: none !important;
}
}
/* ============================================================
News / Standard Post Detail
============================================================ */
.bcms-container--single {
--container-width: 1500px;
}
.bcms-single {
padding-block: clamp(48px, 7vw, 92px);
}
.bcms-single__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
gap: clamp(36px, 5vw, 68px);
align-items: start;
width: min(100%, 1440px);
margin-inline: auto;
}
.bcms-single__primary {
min-width: 0;
}
.bcms-single__post,
.bcms-single .post-navigation,
.bcms-comments {
width: 100%;
margin-inline: auto;
}
.bcms-single__back {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-block-end: var(--space-6);
color: var(--color-primary-dark);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
letter-spacing: 0.04em;
text-decoration: none;
text-transform: uppercase;
}
.bcms-single__back svg {
transition: transform var(--transition-fast);
}
.bcms-single__back:hover svg {
transform: translateX(-4px);
}
[dir="rtl"] .bcms-single__back {
letter-spacing: 0;
text-transform: none;
}
[dir="rtl"] .bcms-single__back svg {
transform: scaleX(-1);
}
[dir="rtl"] .bcms-single__back:hover svg {
transform: scaleX(-1) translateX(-4px);
}
.bcms-single__featured-image {
position: relative;
aspect-ratio: 16 / 9;
margin-block-end: var(--space-6);
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--color-background-alt);
box-shadow: var(--shadow-md);
}
.bcms-single__thumb {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bcms-single__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3) var(--space-6);
width: 100%;
margin: 0 0 clamp(32px, 5vw, 52px);
padding-block: var(--space-5);
border-block: 1px solid var(--color-border);
color: var(--color-text-muted);
font-size: var(--fs-13);
font-weight: var(--fw-semibold);
}
.bcms-single__meta > span {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.bcms-single__meta > span + span::before {
content: "";
width: 4px;
height: 4px;
margin-inline-end: var(--space-3);
border-radius: var(--radius-pill);
background: var(--color-secondary);
}
.bcms-single__meta svg {
color: var(--color-primary);
}
.bcms-single__meta a {
color: var(--color-primary-dark);
text-decoration: none;
}
.bcms-single__meta a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.bcms-single__body {
width: 100%;
color: var(--color-text-muted);
font-size: var(--fs-18);
line-height: 1.9;
}
.bcms-single__body > *:first-child {
margin-block-start: 0;
}
.bcms-single__body > *:last-child {
margin-block-end: 0;
}
.bcms-single__body p,
.bcms-single__body ul,
.bcms-single__body ol,
.bcms-single__body figure,
.bcms-single__body table,
.bcms-single__body pre,
.bcms-single__body blockquote {
margin-block: 0 1.5em;
}
.bcms-single__body h2,
.bcms-single__body h3,
.bcms-single__body h4,
.bcms-single__body h5,
.bcms-single__body h6 {
margin: 1.6em 0 0.55em;
color: var(--color-heading);
font-family: var(--font-body);
font-weight: var(--fw-semibold);
line-height: 1.25;
}
[dir="rtl"] .bcms-single__body h2,
[dir="rtl"] .bcms-single__body h3,
[dir="rtl"] .bcms-single__body h4,
[dir="rtl"] .bcms-single__body h5,
[dir="rtl"] .bcms-single__body h6 {
font-family: var(--font-arabic);
}
.bcms-single__body h2 {
font-size: var(--fs-h2);
}
.bcms-single__body h3 {
font-size: var(--fs-h3);
}
.bcms-single__body h4 {
font-size: var(--fs-h5);
}
.bcms-single__body a {
color: var(--color-primary-dark);
font-weight: var(--fw-semibold);
text-decoration-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
text-underline-offset: 3px;
}
.bcms-single__body ul,
.bcms-single__body ol {
padding-inline-start: 1.35em;
}
.bcms-single__body li + li {
margin-block-start: 0.5em;
}
.bcms-single__body li::marker {
color: var(--color-primary);
font-weight: var(--fw-bold);
}
.bcms-single__body blockquote {
padding: var(--space-6) var(--space-6);
border-inline-start: 4px solid var(--color-secondary);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background: var(--color-primary-light);
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h5);
line-height: 1.6;
}
[dir="rtl"] .bcms-single__body blockquote {
border-radius: var(--radius-md) 0 0 var(--radius-md);
font-family: var(--font-arabic);
}
.bcms-single__body img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
}
.bcms-single__body figcaption {
margin-block-start: var(--space-2);
color: var(--color-text-muted);
font-size: var(--fs-13);
line-height: 1.6;
text-align: center;
}
.bcms-single__body table {
display: block;
width: 100%;
overflow-x: auto;
border-spacing: 0;
border-collapse: collapse;
font-size: var(--fs-15);
}
.bcms-single__body th,
.bcms-single__body td {
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
text-align: start;
}
.bcms-single__body th {
background: var(--color-primary-light);
color: var(--color-heading);
}
.bcms-single__body pre {
max-width: 100%;
padding: var(--space-5);
overflow-x: auto;
border-radius: var(--radius-md);
background: var(--color-heading);
color: var(--color-white);
font-size: var(--fs-14);
line-height: 1.65;
}
.bcms-single__body iframe,
.bcms-single__body video {
max-width: 100%;
}
.bcms-single__gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-3);
width: min(100%, 820px);
margin: var(--space-7) auto 0;
}
.bcms-single__gallery-item {
display: block;
border-radius: var(--radius-md);
overflow: hidden;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.bcms-single__gallery-item:hover,
.bcms-single__gallery-item:focus-visible {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.bcms-single__gallery-item img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.bcms-single__tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
width: min(100%, 820px);
margin: var(--space-8) auto 0;
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-border);
color: var(--color-text-muted);
font-size: var(--fs-13);
}
.bcms-single__tags-label {
color: var(--color-heading);
font-weight: var(--fw-bold);
}
.bcms-single__tags a,
.bcms-page-links a,
.bcms-page-links > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
min-height: 34px;
padding-inline: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
color: var(--color-primary-dark);
font-weight: var(--fw-bold);
text-decoration: none;
}
.bcms-single .post-navigation {
margin-block-start: clamp(46px, 7vw, 76px);
padding-block-start: var(--space-7);
border-block-start: 1px solid var(--color-border);
}
.bcms-single .nav-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5);
}
.bcms-single .nav-previous,
.bcms-single .nav-next {
min-width: 0;
}
.bcms-single .nav-next {
text-align: end;
}
.bcms-single .post-navigation a {
display: flex;
min-height: 116px;
padding: var(--space-6) var(--space-6);
flex-direction: column;
justify-content: center;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
color: var(--color-heading);
text-decoration: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.bcms-single .post-navigation a:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
box-shadow: var(--shadow-sm);
}
.bcms-single__nav-label {
margin-block-end: var(--space-2);
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
}
[dir="rtl"] .bcms-single__nav-label {
letter-spacing: 0;
text-transform: none;
}
.bcms-single__nav-title {
display: -webkit-box;
overflow: hidden;
font-family: var(--font-body);
font-size: var(--fs-16);
font-weight: var(--fw-semibold);
line-height: 1.45;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
[dir="rtl"] .bcms-single__nav-title {
font-family: var(--font-arabic);
}
.bcms-comments {
margin-block-start: clamp(46px, 7vw, 76px);
padding: clamp(24px, 4vw, 42px);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-background);
}
.bcms-single__sidebar {
align-self: stretch;
min-width: 0;
}
.bcms-single__sidebar-inner {
position: sticky;
top: 118px;
display: grid;
gap: var(--space-6);
}
.bcms-single__widget {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow-sm);
}
.bcms-single__widget-head {
position: relative;
padding: var(--space-6) var(--space-6) var(--space-5);
border-block-end: 1px solid var(--color-border);
background: linear-gradient(135deg, var(--color-primary-light), var(--color-white));
}
.bcms-single__widget-head::after {
position: absolute;
inset-block-end: -1px;
inset-inline-start: 24px;
width: 44px;
height: 3px;
background: var(--color-secondary);
content: "";
}
.bcms-single__widget-head > span {
display: block;
margin-block-end: var(--space-2);
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.13em;
text-transform: uppercase;
}
[dir="rtl"] .bcms-single__widget-head > span {
letter-spacing: 0;
text-transform: none;
}
.bcms-single__widget-head h2 {
margin: 0;
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-22);
font-weight: var(--fw-semibold);
line-height: 1.25;
}
[dir="rtl"] .bcms-single__widget-head h2 {
font-family: var(--font-arabic);
}
.bcms-single__recent-list,
.bcms-single__category-list {
margin: 0;
padding: var(--space-3) var(--space-5);
list-style: none;
}
.bcms-single__recent-list li + li,
.bcms-single__category-list li + li {
border-block-start: 1px solid var(--color-border);
}
.bcms-single__recent-list a {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: var(--space-3);
align-items: center;
padding-block: var(--space-4);
color: var(--color-heading);
text-decoration: none;
}
.bcms-single__recent-media {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-primary-light);
color: var(--color-primary-dark);
}
.bcms-single__recent-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-fast);
}
.bcms-single__recent-list a:hover .bcms-single__recent-media img {
transform: scale(1.06);
}
.bcms-single__recent-copy {
display: grid;
gap: var(--space-1);
min-width: 0;
}
.bcms-single__recent-copy time {
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
[dir="rtl"] .bcms-single__recent-copy time {
letter-spacing: 0;
text-transform: none;
}
.bcms-single__recent-copy > span {
display: -webkit-box;
overflow: hidden;
font-family: var(--font-body);
font-size: var(--fs-14);
font-weight: var(--fw-semibold);
line-height: 1.45;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
[dir="rtl"] .bcms-single__recent-copy > span {
font-family: var(--font-arabic);
}
.bcms-single__category-list {
padding-block: var(--space-2);
}
.bcms-single__category-list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-block: var(--space-3);
color: var(--color-text-muted);
font-size: var(--fs-14);
font-weight: var(--fw-semibold);
text-decoration: none;
transition: color var(--transition-fast), padding var(--transition-fast);
}
.bcms-single__category-list a:hover {
padding-inline-start: var(--space-1);
color: var(--color-primary-dark);
}
.bcms-single__category-list a > span:last-child {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding-inline: var(--space-2);
border-radius: var(--radius-pill);
background: var(--color-primary-light);
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-comments__title,
.bcms-comments .comment-reply-title {
margin: 0 0 var(--space-6);
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h4);
}
[dir="rtl"] .bcms-comments__title,
[dir="rtl"] .bcms-comments .comment-reply-title {
font-family: var(--font-arabic);
}
.bcms-comments__list {
margin: 0 0 var(--space-8);
padding: 0;
list-style: none;
}
.bcms-comments .comment-body {
margin-block-end: var(--space-5);
padding: var(--space-5);
border-radius: var(--radius-md);
background: var(--color-white);
}
.bcms-comments .children {
margin-inline-start: var(--space-6);
padding: 0;
list-style: none;
}
.bcms-comment-form p {
margin-block: 0 var(--space-5);
}
.bcms-comment-form label {
display: block;
margin-block-end: var(--space-2);
color: var(--color-heading);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
}
.bcms-comment-form input:not([type="checkbox"]):not([type="submit"]),
.bcms-comment-form textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
color: var(--color-heading);
font: inherit;
}
.bcms-comment-form textarea {
min-height: 150px;
resize: vertical;
}
.bcms-single a:focus-visible,
.bcms-comment-form input:focus-visible,
.bcms-comment-form textarea:focus-visible {
outline: 3px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
outline-offset: 3px;
}
@media (max-width: 640px) {
.bcms-single__featured-image {
aspect-ratio: 4 / 3;
}
.bcms-single__meta {
align-items: flex-start;
flex-direction: column;
gap: var(--space-2);
}
.bcms-single__meta > span + span::before {
display: none;
}
.bcms-single .nav-links {
grid-template-columns: minmax(0, 1fr);
}
.bcms-single .nav-next {
text-align: start;
}
.bcms-comments .children {
margin-inline-start: var(--space-3);
}
}
@media (max-width: 1024px) {
.bcms-single__layout {
grid-template-columns: minmax(0, 1fr);
}
.bcms-single__sidebar-inner {
position: static;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.bcms-single__sidebar-inner {
grid-template-columns: minmax(0, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-single *,
.bcms-comments * {
transition: none !important;
}
}
/* ============================================================
Departments Directory (v2.1)
============================================================ */
.bcms-dept {
font-family: var(--font-body);
color: var(--color-heading);
margin: 0 auto;
}
.bcms-dept * {
box-sizing: border-box;
}
.bcms-dept h2 {
font-family: var(--font-body);
margin: 0;
font-weight: var(--fw-medium);
}
/* Head */
.bcms-dept__heading {
margin-bottom: var(--space-4);
}
.bcms-dept__intro {
margin: 0;
}
/* Featured Showcase — horizontal image + heading/description/button panels */
/* Controls */
.bcms-dept__controls {
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: var(--space-7);
border-bottom: 1px solid var(--color-border);
}
.bcms-dept__search {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 1 1 320px;
}
.bcms-dept__search input {
border: none;
outline: none;
font-size: var(--fs-14);
width: 100%;
font-family: var(--font-body);
color: var(--color-heading);
}
.bcms-dept__filters {
display: flex;
align-items: center;
flex: 1 1 auto;
flex-wrap: wrap;
}
@media (max-width: 760px) {
.bcms-dept__controls {
flex-direction: column;
align-items: stretch;
}
.bcms-dept__search {
max-width: none;
}
.bcms-dept__filters {
justify-content: flex-start;
}
}
.bcms-dept__filter {
border-radius: var(--radius-pill);
cursor: pointer;
transition: 0.2s;
font-family: var(--font-body);
}
/* Grid & Cards */
.bcms-dept__grid {
display: grid;
}
.bcms-dept__card {
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
text-decoration: none;
}
.bcms-dept__card:hover {
border-color: transparent;
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
}
.bcms-dept__icon {
display: block;
width: 100%;
overflow: hidden;
background: var(--color-background);
}
.bcms-dept__icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bcms-dept__card:hover .bcms-dept__icon img {
transform: scale(1.08);
}
.bcms-dept__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.bcms-dept__desc {
color: var(--color-text-muted);
margin-bottom: var(--space-1);
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bcms-dept__card-btn {
display: inline-flex;
align-items: center;
transition: background 0.2s ease, gap 0.2s ease;
}
.bcms-dept__card:hover .bcms-dept__card-btn {
background: var(--color-primary-dark);
gap: var(--space-3);
}
.bcms-dept__empty {
text-align: center;
font-size: var(--fs-15);
color: var(--color-text-muted);
}
/* Reveal */
.bcms-dept [data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.bcms-dept [data-reveal].bcms-dept--visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 980px) {
.bcms-dept__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================
Department Detail (page-department-detail.php)
Uses the shared .bcms-page-hero banner for the name/category —
this block styles the intro, services lists, doctor grid (reuses
.bcms-doctor-dir__card from the doctors directory) and CTA below it.
Scoped under .bcms-deptd
============================================================ */
.bcms-deptd {
font-family: var(--font-body);
color: var(--color-heading);
background: var(--color-background);
padding: var(--space-10) 6vw var(--space-11);
}
.bcms-deptd *,
.bcms-deptd *::before,
.bcms-deptd *::after {
box-sizing: border-box;
}
.bcms-deptd h2 {
font-family: var(--font-body);
margin: 0;
color: var(--color-heading);
}
[dir="rtl"] .bcms-deptd h2 {
font-family: var(--font-arabic);
}
.bcms-deptd__container {
max-width: 980px;
margin: 0 auto;
}
.bcms-deptd__intro {
margin-bottom: var(--space-9);
}
.bcms-deptd__intro p {
font-size: var(--fs-16);
line-height: 1.75;
color: var(--color-heading);
margin: 0 0 var(--space-4);
}
.bcms-deptd__intro p:last-child {
margin-bottom: 0;
}
.bcms-deptd__section {
margin-bottom: var(--space-9);
}
.bcms-deptd__section:last-child {
margin-bottom: 0;
}
.bcms-deptd__section-title {
position: relative;
font-size: var(--fs-22);
font-weight: var(--fw-bold);
padding-inline-start: var(--space-4);
margin-bottom: var(--space-5) !important;
}
.bcms-deptd__section-title::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 20px;
border-radius: var(--radius-sm);
background: var(--color-primary);
}
.bcms-deptd__text {
font-size: var(--fs-15);
line-height: 1.75;
color: var(--color-heading);
margin: 0 0 var(--space-4);
}
.bcms-deptd__text:last-child {
margin-bottom: 0;
}
.bcms-deptd__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-3) var(--space-5);
}
.bcms-deptd__list li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--fs-14);
line-height: 1.5;
color: var(--color-heading);
}
.bcms-deptd__list svg {
flex: none;
margin-top: 3px;
color: var(--color-primary);
}
.bcms-deptd__empty {
text-align: center;
color: var(--color-text-muted);
font-size: var(--fs-15);
padding: var(--space-9) var(--space-6);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-9);
}
/* ---------- CTA ---------- */
.bcms-deptd__cta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-6);
background: linear-gradient(120deg, var(--color-primary-light), color-mix(in srgb, var(--color-primary-light) 35%, transparent));
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
border-radius: var(--radius-lg);
padding: var(--space-7) var(--space-8);
}
.bcms-deptd__cta p {
font-family: var(--font-body);
font-size: var(--fs-20);
margin: 0;
max-width: 420px;
}
[dir="rtl"] .bcms-deptd__cta p {
font-family: var(--font-arabic);
}
.bcms-deptd__cta-actions {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
}
.bcms-deptd__btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: var(--fs-14);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-pill);
text-decoration: none;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
border: 1.5px solid transparent;
cursor: pointer;
}
.bcms-deptd__btn--primary {
background: var(--color-primary-dark);
color: var(--color-white);
}
.bcms-deptd__btn--primary:hover {
background: var(--color-heading);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.bcms-deptd__btn--outline {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.bcms-deptd__btn--outline:hover {
background: var(--color-heading);
color: var(--color-white);
}
.bcms-deptd__btn:focus-visible {
outline: 2px solid var(--color-primary-dark);
outline-offset: 3px;
}
/* Doctor grid reuses .bcms-doctor-dir__card/__photo/__body/__name/__role —
this page has no specialty badge on the photo since the page is already
scoped to one department. */
.bcms-deptd .bcms-doctor-dir__grid {
margin: 0;
}
/* ---------- Reveal Animation ---------- */
.bcms-deptd [data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.bcms-deptd [data-reveal].bcms-deptd--visible {
opacity: 1;
transform: translateY(0);
}
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
.bcms-deptd {
padding: var(--space-9) 6vw var(--space-10);
}
.bcms-deptd__cta {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 480px) {
.bcms-deptd {
padding: var(--space-7) 4vw var(--space-9);
}
.bcms-deptd__section-title {
font-size: var(--fs-18);
}
.bcms-deptd__list {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-deptd [data-reveal] {
transition: none;
opacity: 1;
transform: none;
}
}
/* ============================================================
Management Team (Gradient Frame)
============================================================ */
.bcms-mgmt {
font-family: var(--font-body);
color: var(--color-heading);
background: var(--color-background);
padding: var(--space-11) 6vw;
max-width: 1240px;
margin: 0 auto;
}
.bcms-mgmt * {
box-sizing: border-box;
}
.bcms-mgmt h2,
.bcms-mgmt h3 {
font-family: var(--font-body);
margin: 0;
color: var(--color-heading);
font-weight: var(--fw-medium);
}
/* Head */
/* Grid */
/* Card */
.bcms-mgmt__photo {
position: absolute;
inset: 0;
}
.bcms-mgmt__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(0.65) contrast(1.03);
transition: filter 0.4s ease, transform 0.5s ease;
}
.bcms-mgmt__name {
font-family: var(--font-body);
font-size: var(--fs-18);
font-weight: var(--fw-semibold);
color: var(--color-white);
line-height: 1.25;
}
.bcms-mgmt__title {
font-size: var(--fs-12);
font-weight: var(--fw-semibold);
color: var(--color-secondary-dark);
}
/* Modal Overlay */
/* Modal Dialog */
/* Reveal */
.bcms-mgmt [data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
/* ============================================================
Board of Directors (Gradient Frame)
============================================================ */
.bcms-board {
font-family: var(--font-body);
color: var(--color-heading);
background: var(--color-background);
padding: var(--space-11) 6vw;
max-width: 1240px;
margin: 0 auto;
}
.bcms-board * {
box-sizing: border-box;
}
.bcms-board h2,
.bcms-board h3 {
font-family: var(--font-body);
margin: 0;
color: var(--color-heading);
font-weight: var(--fw-medium);
}
/* Head */
/* Grid */
/* Card */
.bcms-board__photo {
position: absolute;
inset: 0;
}
.bcms-board__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(0.65) contrast(1.03);
transition: filter 0.4s ease, transform 0.5s ease;
}
.bcms-board__name {
font-family: var(--font-body);
font-size: var(--fs-16);
font-weight: var(--fw-semibold);
color: var(--color-white);
line-height: 1.25;
}
.bcms-board__title {
font-size: var(--fs-12);
font-weight: var(--fw-semibold);
color: var(--color-secondary-dark);
}
/* Modal Overlay */
/* Modal Dialog */
/* Reveal */
.bcms-board [data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
/* Shared Responsive — Management & Board */
@media (max-width: 620px) {
.bcms-mgmt,
.bcms-board {
padding: var(--space-10) 6vw;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-mgmt *,
.bcms-board * {
transition: none !important;
}
}
/* ============================================================
About — Board of Directors (Clean Card style)
============================================================ */
.bcms-team-pro {
box-sizing: border-box;
}
.bcms-team-pro *,
.bcms-team-pro *::before,
.bcms-team-pro *::after {
box-sizing: border-box;
}
.bcms-team-pro__grid {
margin: 0 auto;
}
.bcms-team-pro__card:hover {
border-color: color-mix(in srgb, var(--color-heading) 20%, transparent);
box-shadow: var(--shadow-md);
}
@media (max-width: 640px) {
.bcms-team-pro {
padding: var(--space-10) 5vw;
}
.bcms-team-pro__grid {
grid-template-columns: 1fr;
max-width: 360px;
}
}
/* ============================================================
About — Chairman's Message
============================================================ */
.bcms-chair {
font-family: var(--font-body);
color: var(--color-heading);
background: var(--color-background);
padding: var(--space-11) 6vw;
}
.bcms-chair * {
box-sizing: border-box;
}
.bcms-chair h2 {
font-family: var(--font-body);
margin-bottom: 15;
color: var(--color-heading);
font-weight: var(--fw-medium);
}
.bcms-chair__grid {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: var(--space-10);
align-items: start;
max-width: 1180px;
margin: 0 auto;
}
/* Portrait */
.bcms-chair__media {
position: relative;
}
.bcms-chair__frame {
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 4 / 4.7;
box-shadow: var(--shadow-md);
position: relative;
}
.bcms-chair__frame::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(0deg, color-mix(in srgb, var(--color-primary-dark) 55%, transparent) 0%, transparent 40%);
}
.bcms-chair__frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bcms-chair__quote-mark {
position: absolute;
inset-inline-start: -22px;
bottom: -22px;
width: 76px;
height: 76px;
background: var(--color-primary-dark);
color: var(--color-secondary);
border-radius: var(--radius-pill);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
}
/* Content */
.bcms-chair__eyebrow {
display: block;
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-secondary-dark);
margin-bottom: var(--space-4);
}
.bcms-chair__heading {
font-size: var(--fs-h2);
line-height: 1.2;
margin-bottom: var(--space-6);
}
.bcms-chair__content p {
font-size: var(--fs-15);
line-height: 1.8;
color: var(--color-text-muted);
margin: 0 0 var(--space-5);
}
.bcms-chair__content p:last-of-type {
margin-bottom: 0;
}
.bcms-chair__signature {
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.bcms-chair__signature-name {
font-family: var(--font-body);
font-style: italic;
font-weight: var(--fw-semibold);
font-size: var(--fs-22);
color: var(--color-primary-dark);
}
.bcms-chair__signature-title {
font-size: var(--fs-13);
color: var(--color-text-muted);
font-weight: var(--fw-semibold);
}
/* Reveal */
.bcms-chair [data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.bcms-chair [data-reveal].bcms-chair--visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 860px) {
.bcms-chair {
padding: var(--space-10) 6vw;
}
.bcms-chair__grid {
grid-template-columns: 1fr;
gap: var(--space-9);
}
.bcms-chair__frame {
max-width: 320px;
margin: 0 auto;
}
.bcms-chair__quote-mark {
inset-inline-start: calc(50% - 200px);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-chair * {
transition: none !important;
}
}
/* ============================================================
About — Institutional Profile
============================================================ */
.bcms-inst {
padding: clamp(72px, 8vw, 104px) 0;
}
.bcms-inst * {
box-sizing: border-box;
}
.bcms-inst h2,
.bcms-inst h3,
.bcms-inst h4 {
font-family: var(--font-body);
margin-bottom: var(--space-4);
color: var(--color-heading);
font-weight: var(--fw-medium);
}
[dir="rtl"] .bcms-inst h2,
[dir="rtl"] .bcms-inst h3,
[dir="rtl"] .bcms-inst h4 {
font-family: var(--font-arabic);
}
.bcms-inst em {
font-style: italic;
color: var(--color-secondary-dark);
}
.bcms-inst__eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-secondary-dark);
margin-bottom: var(--space-4);
}
[dir="rtl"] .bcms-inst__eyebrow {
font-family: var(--font-arabic);
letter-spacing: 0;
text-transform: none;
}
.bcms-inst__eyebrow--light {
color: var(--color-white);
}
.bcms-inst__btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: var(--fs-14);
background: var(--color-primary-dark);
color: var(--color-white);
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-sm);
text-decoration: none;
transition: background 0.18s ease, transform 0.18s ease;
margin-top: var(--space-2);
}
[dir="rtl"] .bcms-inst__btn {
font-family: var(--font-arabic);
}
.bcms-inst__btn:hover {
background: var(--color-heading);
transform: translateY(-2px);
}
.bcms-inst__btn--light {
background: var(--color-primary-dark);
color: var(--color-white);
}
.bcms-inst__btn--light:hover {
background: var(--color-heading);
}
/* ---------- Intro ---------- */
.bcms-inst__intro {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--space-10);
align-items: center;
padding: var(--space-11) 0 var(--space-11);
}
.bcms-inst__heading {
font-size: var(--fs-h2);
line-height: 1.16;
margin-bottom: var(--space-5);
}
.bcms-inst__heading .bcms-inst__word {
display: inline-block;
opacity: 0;
transform: translateY(0.4em);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.bcms-inst__heading .bcms-inst__word.bcms-inst--visible {
opacity: 1;
transform: translateY(0);
}
.bcms-inst__intro-text p {
font-size: var(--fs-15);
line-height: 1.75;
color: var(--color-text-muted);
margin: 0 0 var(--space-4);
}
.bcms-inst__collage {
position: relative;
}
.bcms-inst__collage-main {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: transform 0.5s ease;
}
.bcms-inst__collage-main img {
width: 100%;
display: block;
aspect-ratio: 4/3.2;
object-fit: cover;
transition: transform 0.7s ease;
}
.bcms-inst__collage:hover .bcms-inst__collage-main img {
transform: scale(1.04);
}
.bcms-inst__collage-sub {
position: absolute;
inset-inline-start: -40px;
bottom: -36px;
width: 46%;
border-radius: var(--radius-md);
overflow: hidden;
border: 5px solid var(--color-background);
box-shadow: var(--shadow-md);
}
[dir="rtl"] .bcms-inst__collage-sub {
inset-inline-start: auto;
inset-inline-end: -40px;
}
.bcms-inst__collage-sub img {
width: 100%;
display: block;
aspect-ratio: 5/4;
object-fit: cover;
transition: transform 0.7s ease;
}
.bcms-inst__collage:hover .bcms-inst__collage-sub img {
transform: scale(1.06);
}
.bcms-inst__collage-badge {
position: absolute;
top: -22px;
inset-inline-end: 20px;
background: var(--color-primary-dark);
color: var(--color-white);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
display: flex;
flex-direction: column;
align-items: center;
box-shadow: var(--shadow-sm);
}
[dir="rtl"] .bcms-inst__collage-badge {
inset-inline-end: auto;
inset-inline-start: 20px;
}
.bcms-inst__collage-badge strong {
font-family: var(--font-body);
font-size: var(--fs-22);
line-height: 1;
}
[dir="rtl"] .bcms-inst__collage-badge strong {
font-family: var(--font-arabic);
}
.bcms-inst__collage-badge span {
font-size: var(--fs-12);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-white);
margin-top: var(--space-1);
}
/* ---------- Specialities Ticker ---------- */
.bcms-inst__ticker {
overflow: hidden;
background: var(--color-primary-dark);
border-radius: var(--radius-pill);
padding: var(--space-5) 0;
margin-bottom: var(--space-11);
-webkit-mask-image: linear-gradient(90deg, transparent, var(--color-heading) 8%, var(--color-heading) 92%, transparent);
mask-image: linear-gradient(90deg, transparent, var(--color-heading) 8%, var(--color-heading) 92%, transparent);
}
.bcms-inst__ticker-track {
display: flex;
width: max-content;
animation: bcmsInstTicker 100s linear infinite;
}
[dir="rtl"] .bcms-inst__ticker-track {
animation-direction: reverse;
}
.bcms-inst__ticker:hover .bcms-inst__ticker-track {
animation-play-state: paused;
}
.bcms-inst__ticker-set {
display: inline-flex;
align-items: center;
flex: none;
}
.bcms-inst__ticker-item {
color: var(--color-white);
font-family: var(--font-body);
font-weight: var(--fw-semibold);
font-size: var(--fs-15);
white-space: nowrap;
padding-inline: var(--space-6);
}
[dir="rtl"] .bcms-inst__ticker-item {
font-family: var(--font-arabic);
}
.bcms-inst__ticker-dot {
color: color-mix(in srgb, var(--color-white) 55%, transparent);
font-size: var(--fs-15);
}
@keyframes bcmsInstTicker {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* ---------- Mission / Vision ---------- */
.bcms-inst__mv {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-9);
align-items: center;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-9) var(--space-10);
margin-bottom: var(--space-11);
}
.bcms-inst__mv-card {
position: relative;
overflow: hidden;
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-5);
transform-style: preserve-3d;
will-change: transform;
}
.bcms-inst__mv-card > *:not(.bcms-inst__mv-glow) {
position: relative;
z-index: 1;
}
.bcms-inst__mv-glow {
position: absolute;
inset: 0;
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 65%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.bcms-inst__mv-card:hover .bcms-inst__mv-glow {
opacity: 1;
}
.bcms-inst__mv-card p {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-20);
line-height: 1.55;
color: var(--color-primary-dark);
margin: 0;
}
[dir="rtl"] .bcms-inst__mv-card p {
font-family: var(--font-arabic);
}
.bcms-inst__mv-label {
display: block;
font-family: var(--font-body);
font-style: normal;
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary-dark);
margin-bottom: var(--space-4);
}
[dir="rtl"] .bcms-inst__mv-label {
font-family: var(--font-arabic);
letter-spacing: 0;
text-transform: none;
}
.bcms-inst__mv-divider {
width: 1px;
height: 100%;
background: var(--color-border);
}
/* ---------- Values ---------- */
.bcms-inst__section-head {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-9);
}
.bcms-inst__section-head h3 {
font-size: var(--fs-h3);
line-height: 1.3;
}
.bcms-inst__values {
padding-bottom: var(--space-11);
}
.bcms-inst__values-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--space-4);
}
.bcms-inst__value {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-7) var(--space-4) var(--space-6);
text-align: center;
opacity: 0;
transform: translateY(14px);
transition: border-color 0.2s ease, transform 0.5s ease, box-shadow 0.2s ease, opacity 0.5s ease;
}
.bcms-inst__values.bcms-inst--visible .bcms-inst__value {
opacity: 1;
transform: translateY(0);
}
.bcms-inst__values.bcms-inst--visible .bcms-inst__value:nth-child(2) { transition-delay: 0.06s; }
.bcms-inst__values.bcms-inst--visible .bcms-inst__value:nth-child(3) { transition-delay: 0.12s; }
.bcms-inst__values.bcms-inst--visible .bcms-inst__value:nth-child(4) { transition-delay: 0.18s; }
.bcms-inst__values.bcms-inst--visible .bcms-inst__value:nth-child(5) { transition-delay: 0.24s; }
.bcms-inst__values.bcms-inst--visible .bcms-inst__value:nth-child(6) { transition-delay: 0.3s; }
.bcms-inst__value:hover {
border-color: var(--color-primary);
transform: translateY(-4px);
box-shadow: var(--shadow-sm);
}
.bcms-inst__value-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: var(--radius-pill);
background: var(--color-primary-light);
color: var(--color-primary);
margin-bottom: var(--space-4);
}
.bcms-inst__value h4 {
font-size: var(--fs-15);
font-weight: var(--fw-semibold);
}
/* ---------- Stats ---------- */
.bcms-inst__stats {
background: var(--color-primary-dark);
border-radius: var(--radius-lg);
padding: var(--space-10);
display: grid;
grid-template-columns: 0.9fr 1.4fr;
gap: var(--space-8);
align-items: center;
margin-bottom: var(--space-11);
color: var(--color-white);
}
.bcms-inst__stats-text h3 {
color: var(--color-white);
font-size: var(--fs-h4);
line-height: 1.35;
margin-bottom: var(--space-6);
}
[dir="rtl"] .bcms-inst__stats-text h3 {
font-family: var(--font-arabic);
}
.bcms-inst__stats-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-5);
}
.bcms-inst__stat {
display: flex;
flex-direction: column;
gap: var(--space-2);
border-left: 2px solid color-mix(in srgb, var(--color-white) 18%, transparent);
padding-left: var(--space-4);
opacity: 0;
transform: translateY(14px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.bcms-inst__stats.bcms-inst--visible .bcms-inst__stat {
opacity: 1;
transform: translateY(0);
}
.bcms-inst__stats.bcms-inst--visible .bcms-inst__stat:nth-child(2) { transition-delay: 0.07s; }
.bcms-inst__stats.bcms-inst--visible .bcms-inst__stat:nth-child(3) { transition-delay: 0.14s; }
.bcms-inst__stats.bcms-inst--visible .bcms-inst__stat:nth-child(4) { transition-delay: 0.21s; }
.bcms-inst__stats.bcms-inst--visible .bcms-inst__stat:nth-child(5) { transition-delay: 0.28s; }
[dir="rtl"] .bcms-inst__stat {
border-left: none;
border-right: 2px solid color-mix(in srgb, var(--color-white) 18%, transparent);
padding-left: 0;
padding-right: var(--space-4);
}
.bcms-inst__stat-num {
font-family: var(--font-body);
font-size: var(--fs-h3);
font-weight: var(--fw-semibold);
color: var(--color-secondary-light);
line-height: 1;
}
[dir="rtl"] .bcms-inst__stat-num {
font-family: var(--font-arabic);
}
.bcms-inst__stat-label {
font-size: var(--fs-13);
color: color-mix(in srgb, var(--color-white) 75%, transparent);
font-weight: var(--fw-semibold);
}
/* ---------- Pillars — Sticky-Pinned Section ---------- */
.bcms-inst__sticky {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: var(--space-10);
padding-bottom: var(--space-11);
}
.bcms-inst__sticky-pin {
position: sticky;
top: 32px;
align-self: start;
height: fit-content;
}
.bcms-inst__sticky-pin h3 {
font-size: var(--fs-h3);
line-height: 1.3;
margin: var(--space-4) 0 var(--space-4);
}
.bcms-inst__sticky-pin p {
font-size: var(--fs-15);
line-height: 1.7;
color: var(--color-text-muted);
margin: 0;
max-width: 34ch;
}
.bcms-inst__sticky-scroll {
display: flex;
flex-direction: column;
gap: var(--space-7);
}
.bcms-inst__pillar {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-7) var(--space-7);
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.bcms-inst__pillar:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-sm);
border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.bcms-inst__pillar-index {
display: block;
font-family: var(--font-body);
font-size: var(--fs-14);
font-weight: var(--fw-semibold);
color: var(--color-secondary-dark);
letter-spacing: 0.05em;
margin-bottom: var(--space-4);
}
[dir="rtl"] .bcms-inst__pillar-index {
font-family: var(--font-arabic);
}
.bcms-inst__pillar h4 {
font-size: var(--fs-18);
margin-bottom: var(--space-3);
}
.bcms-inst__pillar p {
font-size: var(--fs-14);
line-height: 1.7;
color: var(--color-text-muted);
margin: 0;
}
/* ---------- Reveal ---------- */
.bcms-inst [data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bcms-inst [data-reveal].bcms-inst--visible {
opacity: 1;
transform: translateY(0);
}
.bcms-inst__pillar:nth-child(2) {
transition-delay: 0.08s;
}
.bcms-inst__pillar:nth-child(3) {
transition-delay: 0.16s;
}
@media (prefers-reduced-motion: reduce) {
.bcms-inst [data-reveal],
.bcms-inst__value,
.bcms-inst__stat {
opacity: 1;
transform: none;
transition: none;
}
.bcms-inst__pillar,
.bcms-inst__value,
.bcms-inst__collage-main,
.bcms-inst__collage-main img,
.bcms-inst__collage-sub img {
transition: none;
}
.bcms-inst__heading .bcms-inst__word {
opacity: 1;
transform: none;
transition: none;
}
.bcms-inst__ticker-track {
animation: none;
}
.bcms-inst__mv-card {
transform: none !important;
}
}
/* ---------- Institutional Responsive ---------- */
@media (max-width: 980px) {
.bcms-inst__intro {
grid-template-columns: 1fr;
gap: var(--space-9);
}
.bcms-inst__collage {
margin-top: var(--space-5);
}
.bcms-inst__mv {
grid-template-columns: 1fr;
gap: var(--space-7);
padding: var(--space-8) var(--space-7);
}
.bcms-inst__mv-divider {
display: none;
}
.bcms-inst__values-grid {
grid-template-columns: repeat(3, 1fr);
}
.bcms-inst__stats {
grid-template-columns: 1fr;
padding: var(--space-8) var(--space-7);
}
.bcms-inst__stats-grid {
grid-template-columns: repeat(3, 1fr);
row-gap: var(--space-6);
}
.bcms-inst__sticky {
grid-template-columns: 1fr;
gap: var(--space-7);
}
.bcms-inst__sticky-pin {
position: static;
}
.bcms-inst__sticky-pin p {
max-width: none;
}
}
@media (max-width: 620px) {
.bcms-inst__values-grid {
grid-template-columns: repeat(2, 1fr);
}
.bcms-inst__stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.bcms-inst__collage-sub {
inset-inline-start: -14px;
width: 56%;
}
[dir="rtl"] .bcms-inst__collage-sub {
inset-inline-start: auto;
inset-inline-end: -14px;
}
}
/* ============================================================
Facilities — Gallery + Lightbox
============================================================ */
.bcms-facilities {
box-sizing: border-box;
width: 100%;
padding: clamp(64px, 8vw, 112px) 6vw;
background:
radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-secondary) 9%, transparent), transparent 28rem),
linear-gradient(180deg, var(--color-white) 0%, var(--color-background) 100%);
}
.bcms-facilities *,
.bcms-facilities *::before,
.bcms-facilities *::after {
box-sizing: border-box;
}
.bcms-facilities__container {
max-width: 1240px;
margin: 0 auto;
}
.bcms-facilities__intro {
display: grid;
grid-template-columns: minmax(280px, 0.8fr) minmax(440px, 1.2fr);
gap: clamp(40px, 7vw, 96px);
align-items: start;
margin: 0 0 clamp(44px, 6vw, 72px);
}
.bcms-facilities__heading {
position: sticky;
top: 120px;
}
.bcms-facilities__eyebrow {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--color-secondary-dark);
margin-bottom: var(--space-5);
}
.bcms-facilities__eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: currentcolor;
}
.bcms-facilities__intro h2 {
max-width: 560px;
margin: 0 0 var(--space-6);
font-size: var(--fs-h2);
font-weight: var(--fw-medium);
line-height: 1.12;
letter-spacing: -0.035em;
color: var(--color-heading);
}
.bcms-facilities__accent {
display: block;
width: 56px;
height: 4px;
background: var(--color-secondary);
border-radius: var(--radius-pill);
}
.bcms-facilities__copy {
padding-inline-start: clamp(24px, 4vw, 48px);
border-inline-start: 1px solid color-mix(in srgb, var(--color-heading) 13%, transparent);
}
.bcms-facilities__copy p {
margin: 0 0 var(--space-4);
font-size: var(--fs-16);
line-height: 1.9;
color: var(--color-text-muted);
text-align: start;
}
.bcms-facilities__copy p:last-of-type {
margin-bottom: 0;
}
.bcms-facilities__copy a {
color: var(--color-heading);
font-weight: var(--fw-bold);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--color-heading) 30%, transparent);
transition: border-color 200ms ease, color 200ms ease;
}
.bcms-facilities__copy a:hover,
.bcms-facilities__copy a:focus-visible {
color: var(--color-secondary-dark);
border-color: var(--color-secondary);
}
.bcms-facilities__gallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 150px;
gap: var(--space-5);
}
.bcms-facilities__item {
position: relative;
grid-column: span 4;
grid-row: span 2;
display: block;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
border-radius: var(--radius-lg);
border: 0;
background: var(--color-heading);
box-shadow: var(--shadow-md);
font: inherit;
cursor: pointer;
text-align: start;
isolation: isolate;
transition: transform 300ms ease, box-shadow 300ms ease;
}
.bcms-facilities__item--wide {
grid-column: span 8;
}
.bcms-facilities__item--tall {
grid-row: span 3;
}
.bcms-facilities__item--featured {
grid-column: span 8;
grid-row: span 3;
}
.bcms-facilities__item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.bcms-facilities__item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.bcms-facilities__item::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top, color-mix(in srgb, var(--color-heading) 90%, transparent) 0%, color-mix(in srgb, var(--color-heading) 12%, transparent) 62%, transparent 100%);
transition: opacity 300ms ease;
}
.bcms-facilities__item:hover img,
.bcms-facilities__item:focus-visible img {
transform: scale(1.06);
}
.bcms-facilities__caption {
position: absolute;
z-index: 2;
inset-inline: 24px;
bottom: 22px;
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--color-white);
font-size: var(--fs-18);
font-weight: var(--fw-bold);
line-height: 1.35;
text-shadow: 0 2px 12px color-mix(in srgb, var(--color-heading) 24%, transparent);
}
.bcms-facilities__number {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid color-mix(in srgb, var(--color-white) 55%, transparent);
border-radius: var(--radius-pill);
color: var(--color-white);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.06em;
transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.bcms-facilities__item:hover .bcms-facilities__number {
border-color: var(--color-secondary);
background: var(--color-secondary);
color: var(--color-heading);
}
.bcms-facilities__item:focus-visible {
outline: 3px solid var(--color-secondary);
outline-offset: 4px;
}
/* Lightbox */
.bcms-facilities__lightbox {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--color-heading) 92%, transparent);
z-index: 9999;
padding: var(--space-8);
}
.bcms-facilities__lightbox.is-open {
display: flex;
}
.bcms-facilities__lightbox-img {
max-width: 90vw;
max-height: 82vh;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
}
.bcms-facilities__lightbox-caption {
position: absolute;
bottom: 28px;
inset-inline: 0;
text-align: center;
color: var(--color-background);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: 0.3px;
}
.bcms-facilities__lightbox-close {
position: absolute;
top: 22px;
inset-inline-end: 26px;
width: 40px;
height: 40px;
border: none;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-white) 10%, transparent);
color: var(--color-white);
font-size: var(--fs-h5);
line-height: 1;
cursor: pointer;
transition: background 200ms ease;
}
.bcms-facilities__lightbox-close:hover {
background: color-mix(in srgb, var(--color-white) 20%, transparent);
}
.bcms-facilities__lightbox-close:focus-visible,
.bcms-facilities__lightbox-nav:focus-visible {
outline: 3px solid var(--color-secondary);
outline-offset: 3px;
}
.bcms-facilities__lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border: none;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-white) 10%, transparent);
color: var(--color-white);
font-size: var(--fs-h4);
line-height: 1;
cursor: pointer;
transition: background 200ms ease;
}
.bcms-facilities__lightbox-nav:hover {
background: color-mix(in srgb, var(--color-white) 20%, transparent);
}
.bcms-facilities__lightbox-nav--prev {
inset-inline-start: 24px;
}
.bcms-facilities__lightbox-nav--next {
inset-inline-end: 24px;
}
@media (max-width: 900px) {
.bcms-facilities__intro {
grid-template-columns: 1fr;
gap: var(--space-7);
}
.bcms-facilities__heading {
position: static;
}
.bcms-facilities__copy {
padding-inline-start: var(--space-6);
}
.bcms-facilities__gallery {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 240px;
}
.bcms-facilities__item,
.bcms-facilities__item--featured,
.bcms-facilities__item--tall,
.bcms-facilities__item--wide {
grid-column: span 1;
grid-row: span 1;
}
}
@media (max-width: 560px) {
.bcms-facilities {
padding: var(--space-10) 5vw;
}
.bcms-facilities__intro h2 {
font-size: var(--fs-h2);
}
.bcms-facilities__copy {
padding-inline-start: var(--space-5);
}
.bcms-facilities__gallery {
grid-template-columns: 1fr;
grid-auto-rows: 260px;
gap: var(--space-4);
}
.bcms-facilities__item,
.bcms-facilities__item--featured,
.bcms-facilities__item--tall,
.bcms-facilities__item--wide {
grid-column: span 1;
grid-row: span 1;
}
.bcms-facilities__caption {
inset-inline: 18px;
bottom: 18px;
}
.bcms-facilities__lightbox-nav {
width: 38px;
height: 38px;
font-size: var(--fs-22);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-facilities__item img,
.bcms-facilities__item::after,
.bcms-facilities__caption,
.bcms-facilities__number {
transition: none;
}
.bcms-facilities__item:hover {
transform: none;
}
}
/* ============================================================
Home Care
============================================================ */
.bcms-homecare {
overflow: clip;
color: var(--color-heading);
background: var(--color-white);
}
.bcms-homecare__container {
width: min(100% - 40px, 1240px);
margin-inline: auto;
}
.bcms-homecare__section-label {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-5);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.bcms-homecare__section-label::before {
content: "";
flex: 0 0 30px;
width: 30px;
height: 1px;
background: currentcolor;
}
.bcms-homecare__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-5);
min-height: 54px;
padding: var(--space-4) var(--space-6);
border: 1px solid var(--color-primary);
border-radius: var(--radius-md);
background: var(--color-primary-dark);
color: var(--color-white);
font-size: var(--fs-14);
font-weight: var(--fw-bold);
text-decoration: none;
transition: color 200ms ease, background 200ms ease, transform 200ms ease;
}
.bcms-homecare__cta span {
font-size: var(--fs-18);
line-height: 1;
}
.bcms-homecare__cta:hover {
transform: translateY(-2px);
background: var(--color-heading);
}
.bcms-homecare__cta:focus-visible,
.bcms-homecare__acc-trigger:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
}
.bcms-homecare__overview {
padding: clamp(96px, 11vw, 156px) 0;
background:
radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 24rem),
var(--color-white);
}
.bcms-homecare__overview-grid {
display: grid;
grid-template-columns: minmax(240px, 0.72fr) minmax(400px, 1.15fr) minmax(260px, 0.72fr);
gap: clamp(32px, 4vw, 64px);
align-items: start;
}
.bcms-homecare__overview-heading {
position: sticky;
top: 120px;
}
.bcms-homecare__overview-heading h2,
.bcms-homecare__services-heading h2,
.bcms-homecare__contact h2 {
margin: 0 0 var(--space-6);
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.14;
letter-spacing: -0.035em;
}
.bcms-homecare__overview-heading > p,
.bcms-homecare__services-heading > p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-15);
line-height: 1.8;
}
.bcms-homecare__acc-item {
border-top: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
}
.bcms-homecare__acc-item:last-child {
border-bottom: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
}
.bcms-homecare__acc-item h3 {
margin: 0;
}
.bcms-homecare__acc-trigger {
display: grid;
grid-template-columns: 36px 1fr 34px;
gap: var(--space-4);
align-items: center;
width: 100%;
padding: var(--space-6) 0;
border: 0;
background: transparent;
color: var(--color-heading);
font: inherit;
font-size: var(--fs-16);
font-weight: var(--fw-bold);
text-align: start;
cursor: pointer;
}
.bcms-homecare__acc-index {
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
}
.bcms-homecare__acc-icon {
position: relative;
width: 34px;
height: 34px;
border: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
border-radius: var(--radius-pill);
transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.bcms-homecare__acc-icon::before,
.bcms-homecare__acc-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 1.5px;
transform: translate(-50%, -50%);
background: currentcolor;
}
.bcms-homecare__acc-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.bcms-homecare__acc-item.is-open .bcms-homecare__acc-icon {
transform: rotate(45deg);
border-color: var(--color-primary);
background: var(--color-primary-dark);
color: var(--color-white);
}
.bcms-homecare__acc-panel[hidden] {
display: none;
}
.bcms-homecare__acc-panel-inner {
padding: 0 var(--space-9) var(--space-6) var(--space-9);
}
[dir="rtl"] .bcms-homecare__acc-panel-inner {
padding: 0 var(--space-9) var(--space-6) var(--space-9);
}
.bcms-homecare__acc-panel p,
.bcms-homecare__acc-panel li {
margin: 0 0 var(--space-3);
color: var(--color-text-muted);
font-size: var(--fs-14);
line-height: 1.75;
}
.bcms-homecare__acc-panel p:last-child,
.bcms-homecare__acc-panel li:last-child {
margin-bottom: 0;
}
.bcms-homecare__acc-panel li {
position: relative;
padding-inline-start: var(--space-5);
}
.bcms-homecare__acc-panel li::before {
content: "";
position: absolute;
top: 0.65em;
inset-inline-start: 0;
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background: var(--color-primary);
}
.bcms-homecare__care-card {
position: sticky;
top: 120px;
margin: 0;
overflow: hidden;
border-radius: var(--radius-pill) var(--radius-pill) var(--radius-lg) var(--radius-lg);
background: var(--color-heading);
box-shadow: var(--shadow-lg);
}
.bcms-homecare__care-card img {
width: 100%;
aspect-ratio: 0.82;
object-fit: cover;
}
.bcms-homecare__care-card figcaption {
padding: var(--space-6) var(--space-6) var(--space-6);
color: var(--color-white);
}
.bcms-homecare__care-card figcaption span {
display: block;
margin-bottom: var(--space-1);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.bcms-homecare__care-card figcaption strong {
display: block;
font-size: var(--fs-15);
line-height: 1.55;
}
.bcms-homecare__services {
padding: clamp(80px, 9vw, 128px) 0;
background: var(--color-primary-light);
scroll-margin-top: 100px;
}
.bcms-homecare__services-heading {
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(300px, 0.75fr);
gap: var(--space-10);
align-items: end;
margin-bottom: var(--space-9);
}
.bcms-homecare__services-heading h2 {
margin-bottom: 0;
}
.bcms-homecare__services-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
}
.bcms-homecare__service-card {
position: relative;
min-width: 0;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-heading) 10%, transparent);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow-sm);
transition: transform 250ms ease, box-shadow 250ms ease;
}
.bcms-homecare__service-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.bcms-homecare__service-media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--color-background-alt);
}
.bcms-homecare__service-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--color-heading) 50%, transparent));
}
.bcms-homecare__service-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.bcms-homecare__service-card:hover img {
transform: scale(1.045);
}
.bcms-homecare__service-media span {
position: absolute;
z-index: 1;
inset-block-end: 14px;
inset-inline-end: 16px;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid color-mix(in srgb, var(--color-white) 55%, transparent);
border-radius: var(--radius-pill);
color: var(--color-white);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-homecare__service-content {
display: flex;
align-items: center;
min-height: 88px;
padding: var(--space-5) var(--space-6);
}
.bcms-homecare__service-content h3 {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-16);
line-height: 1.5;
}
.bcms-homecare__contact {
padding: clamp(70px, 8vw, 104px) 0;
background:
linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 38%),
var(--color-heading);
}
.bcms-homecare__contact-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-9);
}
.bcms-homecare__contact h2 {
max-width: 760px;
margin-bottom: 0;
color: var(--color-white);
}
.bcms-homecare__cta--light {
flex: 0 0 auto;
background: var(--color-white);
border-color: var(--color-white);
}
@media (max-width: 1100px) {
.bcms-homecare__overview-grid {
grid-template-columns: minmax(230px, 0.75fr) minmax(400px, 1.25fr);
}
.bcms-homecare__overview-heading {
position: static;
}
.bcms-homecare__care-card {
position: relative;
top: auto;
grid-column: 1 / -1;
display: grid;
grid-template-columns: 0.8fr 1.2fr;
align-items: center;
border-radius: var(--radius-lg);
}
.bcms-homecare__care-card img {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 820px) {
.bcms-homecare__overview-grid,
.bcms-homecare__services-heading {
grid-template-columns: 1fr;
}
.bcms-homecare__services-heading {
gap: var(--space-5);
}
.bcms-homecare__care-card {
grid-template-columns: 1fr;
}
.bcms-homecare__care-card img {
max-height: 420px;
}
.bcms-homecare__services-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bcms-homecare__contact-inner {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 540px) {
.bcms-homecare__container {
width: min(100% - 32px, 1240px);
}
.bcms-homecare__overview {
padding-block: var(--space-11);
}
.bcms-homecare__acc-trigger {
grid-template-columns: 28px 1fr 32px;
gap: var(--space-3);
font-size: var(--fs-15);
}
.bcms-homecare__acc-panel-inner,
[dir="rtl"] .bcms-homecare__acc-panel-inner {
padding-block: 0 var(--space-6);
padding-inline: var(--space-8) 0;
}
.bcms-homecare__services-grid {
grid-template-columns: 1fr;
}
.bcms-homecare__service-card {
display: grid;
grid-template-columns: 42% 58%;
}
.bcms-homecare__service-media {
height: 100%;
aspect-ratio: 1;
}
.bcms-homecare__service-content {
min-height: 128px;
padding: var(--space-5);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-homecare__cta,
.bcms-homecare__acc-icon,
.bcms-homecare__service-card,
.bcms-homecare__service-media img {
transition: none;
}
.bcms-homecare__service-card:hover,
.bcms-homecare__cta:hover {
transform: none;
}
}
/* ============================================================
Patient Rights and Responsibilities
============================================================ */
.bcms-rights {
overflow: clip;
color: var(--color-heading);
background: var(--color-white);
}
.bcms-rights__container {
width: min(100% - 40px, 1240px);
margin-inline: auto;
}
.bcms-rights__intro-section {
padding: clamp(72px, 9vw, 120px) 0;
background:
radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 25rem),
var(--color-white);
}
.bcms-rights__intro {
display: grid;
grid-template-columns: minmax(340px, 0.95fr) minmax(420px, 1.05fr);
gap: clamp(48px, 8vw, 110px);
align-items: start;
}
.bcms-rights__eyebrow,
.bcms-rights__panel-label,
.bcms-rights__tabs-label {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-5);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.15em;
text-transform: uppercase;
}
.bcms-rights__eyebrow::before {
content: "";
flex: 0 0 30px;
width: 30px;
height: 1px;
background: currentcolor;
}
.bcms-rights__intro h2,
.bcms-rights__support h2,
.bcms-rights__panel-body h3 {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-h3);
line-height: 1.18;
letter-spacing: -0.03em;
}
.bcms-rights__intro-copy {
padding-inline-start: clamp(24px, 4vw, 48px);
border-inline-start: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
}
.bcms-rights__intro-copy > p {
margin: 0 0 var(--space-7);
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.9;
}
.bcms-rights__principles {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.bcms-rights__principles span {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
border-radius: var(--radius-pill);
background: var(--color-primary-light);
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-rights__principles span::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background: var(--color-primary);
}
.bcms-rights__explorer {
padding: clamp(76px, 9vw, 120px) 0;
background: var(--color-primary-light);
}
.bcms-rights__layout {
display: grid;
grid-template-columns: minmax(270px, 0.7fr) minmax(0, 1.7fr);
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
.bcms-rights__tabs {
position: sticky;
top: 110px;
display: flex;
flex-direction: column;
}
.bcms-rights__tabs-label {
margin-bottom: var(--space-5);
color: var(--color-primary-dark);
}
.bcms-rights__tab {
position: relative;
display: grid;
grid-template-columns: 34px 1fr 24px;
gap: var(--space-3);
align-items: center;
width: 100%;
padding: var(--space-5) var(--space-1);
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
background: transparent;
color: var(--color-text-muted);
font: inherit;
font-size: var(--fs-14);
font-weight: var(--fw-semibold);
line-height: 1.45;
text-align: start;
cursor: pointer;
transition: color 200ms ease, padding 200ms ease;
}
.bcms-rights__tab::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: -16px;
width: 3px;
border-radius: var(--radius-pill);
background: var(--color-primary);
opacity: 0;
transform: scaleY(0.3);
transition: opacity 200ms ease, transform 200ms ease;
}
.bcms-rights__tab:hover {
color: var(--color-heading);
}
.bcms-rights__tab.is-active {
padding-inline-start: var(--space-2);
color: var(--color-heading);
}
.bcms-rights__tab.is-active::before {
opacity: 1;
transform: scaleY(0.68);
}
.bcms-rights__tab:focus-visible,
.bcms-rights__support-link:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
}
.bcms-rights__tab-number {
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
}
.bcms-rights__tab-arrow {
color: var(--color-secondary);
font-size: var(--fs-16);
opacity: 0;
transform: translate(-5px, 5px);
transition: opacity 200ms ease, transform 200ms ease;
}
[dir="rtl"] .bcms-rights__tab-arrow {
transform: translate(5px, 5px);
}
.bcms-rights__tab.is-active .bcms-rights__tab-arrow {
opacity: 1;
transform: translate(0, 0);
}
.bcms-rights__panel[hidden] {
display: none;
}
.bcms-rights__panel.is-active {
display: grid;
grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1.18fr);
min-height: 570px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-heading) 10%, transparent);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow-lg);
animation: bcmsRightsIn 350ms ease both;
}
@keyframes bcmsRightsIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bcms-rights__panel-media {
position: relative;
min-height: 100%;
overflow: hidden;
background: var(--color-heading);
}
.bcms-rights__panel-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, color-mix(in srgb, var(--color-heading) 70%, transparent), transparent 62%);
}
.bcms-rights__panel-media img {
width: 100%;
height: 100%;
min-height: 570px;
object-fit: cover;
}
.bcms-rights__panel-media > span {
position: absolute;
z-index: 1;
inset-block-end: 24px;
inset-inline-start: 24px;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border: 1px solid color-mix(in srgb, var(--color-white) 56%, transparent);
border-radius: var(--radius-pill);
color: var(--color-white);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
}
.bcms-rights__panel-body {
padding: clamp(34px, 5vw, 64px);
align-self: center;
}
.bcms-rights__panel-label {
color: var(--color-primary-dark);
}
.bcms-rights__panel-body h3 {
margin-block-end: var(--space-7);
}
.bcms-rights__panel-body ul {
display: grid;
gap: var(--space-4);
margin: 0;
padding: 0;
}
.bcms-rights__panel-body li {
display: grid;
grid-template-columns: 26px 1fr;
gap: var(--space-3);
align-items: start;
color: var(--color-text-muted);
font-size: var(--fs-14);
line-height: 1.72;
}
.bcms-rights__check {
display: grid;
place-items: center;
width: 24px;
height: 24px;
margin-top: 1px;
border-radius: var(--radius-pill);
background: var(--color-primary-light);
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-rights__panel-body > p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.9;
}
.bcms-rights__support {
padding: clamp(72px, 8vw, 108px) 0;
background:
linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 40%),
var(--color-heading);
}
.bcms-rights__support-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-10);
}
.bcms-rights__support h2 {
max-width: 760px;
color: var(--color-white);
}
.bcms-rights__support-link {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
gap: var(--space-5);
min-height: 54px;
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-md);
background: var(--color-primary-dark);
color: var(--color-white);
font-size: var(--fs-14);
font-weight: var(--fw-bold);
transition: background 200ms ease, transform 200ms ease;
}
.bcms-rights__support-link:hover {
transform: translateY(-2px);
background: var(--color-heading);
}
.bcms-rights__support-link span {
font-size: var(--fs-18);
}
@media (max-width: 1040px) {
.bcms-rights__layout {
grid-template-columns: 1fr;
gap: var(--space-7);
}
.bcms-rights__tabs {
position: static;
flex-direction: row;
gap: var(--space-3);
overflow-x: auto;
padding: var(--space-1) var(--space-1) var(--space-4);
scrollbar-width: thin;
scroll-snap-type: inline mandatory;
}
.bcms-rights__tabs-label {
display: none;
}
.bcms-rights__tab {
flex: 0 0 auto;
grid-template-columns: 28px auto;
width: auto;
min-height: 48px;
padding: var(--space-3) var(--space-4);
border: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
border-radius: var(--radius-pill);
background: var(--color-white);
white-space: nowrap;
scroll-snap-align: start;
}
.bcms-rights__tab::before,
.bcms-rights__tab-arrow {
display: none;
}
.bcms-rights__tab.is-active {
padding-inline: var(--space-4);
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary-dark);
}
.bcms-rights__tab.is-active .bcms-rights__tab-number {
color: var(--color-secondary-dark);
}
}
@media (max-width: 820px) {
.bcms-rights__intro {
grid-template-columns: 1fr;
gap: var(--space-7);
}
.bcms-rights__intro-copy {
padding-inline-start: var(--space-6);
}
.bcms-rights__panel.is-active {
grid-template-columns: 1fr;
min-height: auto;
}
.bcms-rights__panel-media {
min-height: 300px;
}
.bcms-rights__panel-media img {
height: 340px;
min-height: 0;
}
.bcms-rights__support-inner {
align-items: flex-start;
flex-direction: column;
gap: var(--space-8);
}
}
@media (max-width: 540px) {
.bcms-rights__container {
width: min(100% - 32px, 1240px);
}
.bcms-rights__intro-section {
padding-block: var(--space-10);
}
.bcms-rights__intro h2,
.bcms-rights__support h2,
.bcms-rights__panel-body h3 {
font-size: var(--fs-h2);
}
.bcms-rights__explorer {
padding-block: var(--space-10);
}
.bcms-rights__panel-media {
min-height: 240px;
}
.bcms-rights__panel-media img {
height: 260px;
}
.bcms-rights__panel-body {
padding: var(--space-7) var(--space-6) var(--space-7);
}
.bcms-rights__panel-body h3 {
margin-bottom: var(--space-6);
font-size: var(--fs-h3);
}
.bcms-rights__panel-body li {
grid-template-columns: 24px 1fr;
gap: var(--space-3);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-rights__panel.is-active {
animation: none;
}
.bcms-rights__tab,
.bcms-rights__tab::before,
.bcms-rights__tab-arrow,
.bcms-rights__support-link {
transition: none;
}
.bcms-rights__support-link:hover {
transform: none;
}
}
/* ============================================================
Health Packages
============================================================ */
.bcms-packages {
overflow: clip;
color: var(--color-heading);
background: var(--color-white);
}
.bcms-packages__container {
width: min(100% - 40px, 1240px);
margin-inline: auto;
}
.bcms-packages__intro {
padding: clamp(64px, 8vw, 104px) 0;
background:
radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 24rem),
linear-gradient(180deg, var(--color-background), var(--color-white));
}
.bcms-packages__intro-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
align-items: center;
min-height: 520px;
padding: clamp(38px, 6vw, 76px);
overflow: hidden;
border-radius: var(--radius-xl);
background:
linear-gradient(120deg, color-mix(in srgb, var(--color-heading) 99%, transparent), color-mix(in srgb, var(--color-primary-dark) 90%, transparent)),
var(--color-heading);
box-shadow: var(--shadow-lg);
}
.bcms-packages__intro-card::before,
.bcms-packages__intro-card::after {
content: "";
position: absolute;
border: 1px solid color-mix(in srgb, var(--color-white) 9%, transparent);
border-radius: var(--radius-pill);
pointer-events: none;
}
.bcms-packages__intro-card::before {
inset-block-start: -240px;
inset-inline-end: 90px;
width: 420px;
height: 420px;
}
.bcms-packages__intro-card::after {
inset-block-end: -80px;
inset-inline-end: -70px;
width: 230px;
height: 230px;
}
.bcms-packages__intro-content,
.bcms-packages__visual {
position: relative;
z-index: 1;
}
.bcms-packages__eyebrow,
.bcms-packages__kicker {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-5);
color: var(--color-primary-light);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.15em;
text-transform: uppercase;
}
.bcms-packages__eyebrow::before,
.bcms-packages__kicker::before {
content: "";
width: 7px;
height: 7px;
border-radius: var(--radius-pill);
background: var(--color-secondary);
box-shadow: var(--shadow-ring);
}
.bcms-packages__intro-content h2 {
max-width: 650px;
margin: 0 0 var(--space-6);
color: var(--color-white);
font-size: var(--fs-h2);
line-height: 1.07;
letter-spacing: -0.045em;
}
.bcms-packages__intro-content > p {
max-width: 610px;
margin: 0 0 var(--space-3);
color: color-mix(in srgb, var(--color-white) 68%, transparent);
font-size: var(--fs-15);
line-height: 1.75;
}
.bcms-packages__intro-content > .bcms-packages__lead {
color: color-mix(in srgb, var(--color-white) 90%, transparent);
font-size: var(--fs-18);
}
.bcms-packages__intro-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-6);
margin-top: var(--space-7);
}
.bcms-packages__primary-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
min-height: 54px;
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-md);
background: var(--color-primary-dark);
color: var(--color-white);
font-size: var(--fs-14);
font-weight: var(--fw-bold);
transition: background 200ms ease, transform 200ms ease;
}
.bcms-packages__primary-link:hover {
transform: translateY(-2px);
background: var(--color-heading);
}
.bcms-packages__phone {
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: var(--color-white);
}
.bcms-packages__phone > span:first-child {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid color-mix(in srgb, var(--color-white) 22%, transparent);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-white) 8%, transparent);
font-size: var(--fs-16);
}
.bcms-packages__phone small,
.bcms-packages__phone strong {
display: block;
}
.bcms-packages__phone small {
margin-bottom: 2px;
color: color-mix(in srgb, var(--color-white) 58%, transparent);
font-size: var(--fs-12);
}
.bcms-packages__phone strong {
font-size: var(--fs-14);
}
.bcms-packages__primary-link:focus-visible,
.bcms-packages__phone:focus-visible,
.bcms-packages__filters button:focus-visible,
.bcms-packages__cta a:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
}
.bcms-packages__visual {
display: grid;
place-items: center;
min-height: 340px;
}
.bcms-packages__visual::before {
content: "";
position: absolute;
width: 330px;
height: 330px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-primary) 20%, transparent);
filter: blur(24px);
}
.bcms-packages__health-card {
position: relative;
width: min(390px, 100%);
padding: var(--space-7);
border: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent);
border-radius: var(--radius-xl);
background: color-mix(in srgb, var(--color-white) 10%, transparent);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(14px);
transform: rotate(2deg);
}
[dir="rtl"] .bcms-packages__health-card {
transform: rotate(-2deg);
}
.bcms-packages__health-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
color: color-mix(in srgb, var(--color-white) 80%, transparent);
font-size: var(--fs-12);
font-weight: var(--fw-semibold);
}
.bcms-packages__heart {
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: var(--radius-lg);
background: var(--color-primary-dark);
color: var(--color-white);
font-size: var(--fs-h3);
line-height: 1;
}
.bcms-packages__pulse {
width: 100%;
height: 138px;
overflow: visible;
}
.bcms-packages__pulse path {
fill: none;
stroke: var(--color-primary-light);
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-primary-light) 50%, transparent));
stroke-dasharray: 600;
animation: bcmsPackagePulse 3s ease-in-out infinite;
}
@keyframes bcmsPackagePulse {
0% {
opacity: 0.3;
stroke-dashoffset: 600;
}
55%,
85% {
opacity: 1;
stroke-dashoffset: 0;
}
100% {
opacity: 0.3;
stroke-dashoffset: -600;
}
}
.bcms-packages__health-card-footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
.bcms-packages__health-card-footer div {
padding: var(--space-3) var(--space-2);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-white) 8%, transparent);
text-align: center;
}
.bcms-packages__health-card-footer strong,
.bcms-packages__health-card-footer span {
display: block;
}
.bcms-packages__health-card-footer strong {
color: var(--color-white);
font-size: var(--fs-15);
}
.bcms-packages__health-card-footer span {
margin-top: 3px;
color: color-mix(in srgb, var(--color-white) 52%, transparent);
font-size: var(--fs-12);
line-height: 1.35;
}
.bcms-packages__directory {
padding: clamp(76px, 9vw, 124px) 0;
background: var(--color-white);
scroll-margin-top: 100px;
}
.bcms-packages__toolbar {
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(280px, 360px);
gap: var(--space-10);
align-items: end;
margin-bottom: var(--space-7);
}
.bcms-packages__kicker {
margin-bottom: var(--space-3);
color: var(--color-primary-dark);
}
.bcms-packages__toolbar h2 {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.14;
letter-spacing: -0.035em;
}
.bcms-packages__search label {
display: block;
margin-bottom: var(--space-2);
color: var(--color-heading);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-packages__search > div {
display: flex;
align-items: center;
min-height: 54px;
padding-inline: var(--space-4);
border: 1px solid color-mix(in srgb, var(--color-heading) 11%, transparent);
border-radius: var(--radius-md);
background: var(--color-white);
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.bcms-packages__search > div:focus-within {
border-color: var(--color-primary);
box-shadow: var(--shadow-ring);
}
.bcms-packages__search > div > span {
flex: 0 0 auto;
color: var(--color-text-muted);
font-size: var(--fs-22);
line-height: 1;
}
.bcms-packages__search input {
width: 100%;
min-width: 0;
height: 52px;
padding-inline: var(--space-3);
border: 0;
outline: 0;
background: transparent;
color: var(--color-heading);
font: inherit;
}
.bcms-packages__filters {
display: flex;
gap: var(--space-3);
overflow-x: auto;
padding: var(--space-1) var(--space-1) var(--space-3);
scrollbar-width: thin;
}
.bcms-packages__filters button {
flex: 0 0 auto;
min-height: 44px;
padding: var(--space-3) var(--space-4);
border: 1px solid color-mix(in srgb, var(--color-heading) 11%, transparent);
border-radius: var(--radius-pill);
background: var(--color-white);
color: var(--color-text-muted);
font: inherit;
font-size: var(--fs-13);
font-weight: var(--fw-semibold);
cursor: pointer;
transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.bcms-packages__filters button:hover,
.bcms-packages__filters button.is-active {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary-dark);
}
.bcms-packages__result-count {
margin: var(--space-4) 0 var(--space-6);
color: var(--color-text-muted);
font-size: var(--fs-12);
}
.bcms-packages__grid {
display: grid;
}
.bcms-packages__card {
position: relative;
display: flex;
min-height: 390px;
flex-direction: column;
padding: clamp(24px, 2.5vw, 30px);
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-heading) 11%, transparent);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow-md);
transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}
.bcms-packages__card[hidden] {
display: none;
}
.bcms-packages__card::before {
content: "";
position: absolute;
inset-block-start: -62px;
inset-inline-end: -54px;
width: 120px;
height: 120px;
border-radius: var(--radius-pill);
background: var(--color-primary-light);
transition: transform 300ms ease;
}
.bcms-packages__card:hover::before {
transform: scale(1.3);
}
.bcms-packages__card-media::after {
content: "";
position: absolute;
inset: 0;
}
.bcms-packages__card-media img {
transition: transform 500ms ease;
}
.bcms-packages__card--image::before {
display: none;
}
.bcms-packages__card--image:hover .bcms-packages__card-media img {
transform: scale(1.045);
}
.bcms-packages__card h3 {
position: relative;
z-index: 1;
margin: var(--space-6) 0 var(--space-3);
color: var(--color-heading);
font-size: var(--fs-18);
line-height: 1.4;
}
.bcms-packages__card > p {
position: relative;
z-index: 1;
margin: 0 0 var(--space-6);
color: var(--color-text-muted);
font-size: var(--fs-13);
line-height: 1.7;
}
.bcms-packages__card--image h3 {
margin-top: auto;
margin-bottom: var(--space-3);
color: var(--color-white);
font-size: var(--fs-h5);
line-height: 1.3;
letter-spacing: -0.02em;
text-shadow: 0 2px 14px color-mix(in srgb, var(--color-heading) 28%, transparent);
}
.bcms-packages__card--image > p {
margin-bottom: 0;
color: color-mix(in srgb, var(--color-white) 90%, transparent);
font-size: var(--fs-14);
line-height: 1.75;
text-shadow: 0 1px 8px color-mix(in srgb, var(--color-heading) 24%, transparent);
}
.bcms-packages__empty {
padding: var(--space-10) var(--space-6);
border: 1px dashed color-mix(in srgb, var(--color-heading) 11%, transparent);
border-radius: var(--radius-lg);
text-align: center;
}
.bcms-packages__empty > span {
color: var(--color-primary);
font-size: var(--fs-h2);
}
.bcms-packages__empty h3 {
margin: var(--space-2) 0 var(--space-1);
color: var(--color-heading);
font-size: var(--fs-20);
}
.bcms-packages__empty p {
margin: 0;
color: var(--color-text-muted);
}
.bcms-packages__cta {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-6);
align-items: center;
margin-top: var(--space-10);
padding: var(--space-7) var(--space-8);
border-radius: var(--radius-lg);
background: var(--color-primary-light);
}
.bcms-packages__cta-icon {
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: var(--radius-lg);
background: var(--color-primary-dark);
color: var(--color-white);
font-size: var(--fs-22);
}
.bcms-packages__cta h2 {
margin: 0 0 var(--space-1);
color: var(--color-heading);
font-size: var(--fs-20);
}
.bcms-packages__cta p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-14);
}
.bcms-packages__cta a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
min-height: 50px;
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
background: var(--color-primary-dark);
color: var(--color-white);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
transition: background 200ms ease;
}
.bcms-packages__cta a:hover {
background: var(--color-heading);
}
@media (max-width: 980px) {
.bcms-packages__intro-card {
grid-template-columns: 1fr;
}
.bcms-packages__visual {
min-height: 300px;
margin-top: var(--space-7);
}
.bcms-packages__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ============================================================
Health Package Detail
============================================================ */
.bcms-package-detail {
overflow: clip;
color: var(--color-heading);
background: var(--color-white);
}
.bcms-package-detail__container {
width: min(100% - 40px, 1240px);
margin-inline: auto;
}
.bcms-package-detail__overview {
padding: clamp(54px, 7vw, 92px) 0 clamp(80px, 9vw, 128px);
background:
radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 26rem),
var(--color-white);
}
.bcms-package-detail__back {
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-7);
color: var(--color-primary-dark);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
}
[dir="rtl"] .bcms-package-detail__back span {
transform: rotate(180deg);
}
.bcms-package-detail__back:focus-visible,
.bcms-package-detail__call a:focus-visible,
.bcms-package-detail__form input:focus-visible,
.bcms-package-detail__form textarea:focus-visible,
.bcms-package-detail__form button:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
}
.bcms-package-detail__hero {
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
min-height: 560px;
overflow: hidden;
border-radius: var(--radius-xl);
background: var(--color-heading);
box-shadow: var(--shadow-lg);
}
.bcms-package-detail__media {
position: relative;
min-height: 560px;
overflow: hidden;
}
.bcms-package-detail__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 62%, color-mix(in srgb, var(--color-heading) 50%, transparent));
}
[dir="rtl"] .bcms-package-detail__media::after {
background: linear-gradient(-90deg, transparent 62%, color-mix(in srgb, var(--color-heading) 50%, transparent));
}
.bcms-package-detail__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bcms-package-detail__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(40px, 6vw, 72px);
color: var(--color-white);
}
.bcms-package-detail__type,
.bcms-package-detail__information-heading > span,
.bcms-package-detail__inquiry-copy > span {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.bcms-package-detail__type::before,
.bcms-package-detail__information-heading > span::before,
.bcms-package-detail__inquiry-copy > span::before {
content: "";
width: 30px;
height: 1px;
background: currentcolor;
}
.bcms-package-detail__content h2 {
color:var(--color-white);
margin: 0 0 var(--space-6);
font-size: var(--fs-h2);
line-height: 1.08;
letter-spacing: -0.04em;
}
.bcms-package-detail__content > p {
margin: 0;
color: color-mix(in srgb, var(--color-white) 75%, transparent);
font-size: var(--fs-16);
line-height: 1.82;
}
.bcms-package-detail__price {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--space-5);
margin-top: var(--space-7);
padding-top: var(--space-6);
border-top: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent);
}
.bcms-package-detail__price > span {
color: color-mix(in srgb, var(--color-white) 62%, transparent);
font-size: var(--fs-12);
}
.bcms-package-detail__price strong {
color: var(--color-white);
font-size: var(--fs-h4);
}
.bcms-package-detail__price abbr {
border: 0;
font-size: var(--fs-12);
text-decoration: none;
}
.bcms-package-detail__information {
display: grid;
grid-template-columns: minmax(300px, 0.8fr) minmax(480px, 1.2fr);
gap: clamp(48px, 8vw, 110px);
margin-top: clamp(72px, 9vw, 120px);
}
.bcms-package-detail__information-heading {
align-self: start;
}
.bcms-package-detail__information-heading > span,
.bcms-package-detail__inquiry-copy > span {
color: var(--color-primary-dark);
}
.bcms-package-detail__information-heading h2,
.bcms-package-detail__inquiry-copy h2 {
margin: 0 0 var(--space-5);
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.15;
letter-spacing: -0.035em;
}
.bcms-package-detail__information-heading p,
.bcms-package-detail__inquiry-copy > p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-15);
line-height: 1.85;
}
.bcms-package-detail__facts {
margin: 0;
border-top: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
}
.bcms-package-detail__facts > div {
display: grid;
grid-template-columns: minmax(150px, 0.45fr) minmax(0, 1fr);
gap: var(--space-6);
padding: var(--space-6) 0;
border-bottom: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
}
.bcms-package-detail__facts dt {
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.bcms-package-detail__facts dd {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-14);
line-height: 1.75;
}
.bcms-package-detail__inquiry {
padding: clamp(80px, 9vw, 126px) 0;
background: var(--color-primary-light);
}
.bcms-package-detail__inquiry-grid {
display: grid;
grid-template-columns: minmax(300px, 0.8fr) minmax(520px, 1.2fr);
gap: clamp(48px, 8vw, 110px);
align-items: start;
}
.bcms-package-detail__call {
margin-top: var(--space-6) !important;
padding: var(--space-5) var(--space-5);
border-inline-start: 3px solid var(--color-secondary);
background: var(--color-white);
}
.bcms-package-detail__call a {
color: var(--color-primary-dark);
font-weight: var(--fw-bold);
white-space: nowrap;
}
.bcms-package-detail__note {
margin-top: var(--space-7);
padding-top: var(--space-6);
border-top: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
}
.bcms-package-detail__note p {
margin: 0 0 var(--space-3);
color: var(--color-text-muted);
font-size: var(--fs-13);
line-height: 1.75;
}
.bcms-package-detail__note small {
color: var(--color-heading);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-package-detail__form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
padding: clamp(28px, 4vw, 46px);
border: 1px solid color-mix(in srgb, var(--color-heading) 10%, transparent);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow-lg);
}
.bcms-package-detail__field {
min-width: 0;
}
.bcms-package-detail__field--full,
.bcms-package-detail__form-footer,
.bcms-package-detail__status {
grid-column: 1 / -1;
}
.bcms-package-detail__field label {
display: block;
margin-bottom: var(--space-2);
color: var(--color-heading);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-package-detail__field label span {
color: var(--color-emergency-dark);
}
.bcms-package-detail__field input,
.bcms-package-detail__field textarea {
width: 100%;
border: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
border-radius: var(--radius-md);
background: var(--color-white);
color: var(--color-heading);
font: inherit;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.bcms-package-detail__field input {
height: 52px;
padding-inline: var(--space-4);
}
.bcms-package-detail__field textarea {
display: block;
min-height: 130px;
padding: var(--space-4);
resize: vertical;
}
.bcms-package-detail__field input:focus,
.bcms-package-detail__field textarea:focus {
border-color: var(--color-primary);
outline: 0;
box-shadow: var(--shadow-ring);
}
.bcms-package-detail__form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
padding-top: var(--space-2);
}
.bcms-package-detail__form-footer p {
max-width: 330px;
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-12);
line-height: 1.6;
}
.bcms-package-detail__form button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
min-height: 52px;
padding: var(--space-3) var(--space-6);
border: 0;
border-radius: var(--radius-md);
background: var(--color-primary-dark);
color: var(--color-white);
font: inherit;
font-size: var(--fs-13);
font-weight: var(--fw-bold);
cursor: pointer;
transition: background 200ms ease, transform 200ms ease;
}
.bcms-package-detail__form button:hover {
transform: translateY(-2px);
background: var(--color-heading);
}
.bcms-package-detail__status {
min-height: 1.5em;
margin: 0;
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-semibold);
}
@media (max-width: 940px) {
.bcms-package-detail__hero {
grid-template-columns: 1fr;
}
.bcms-package-detail__media {
min-height: 390px;
}
.bcms-package-detail__media::after {
background: linear-gradient(0deg, color-mix(in srgb, var(--color-heading) 58%, transparent), transparent 62%);
}
.bcms-package-detail__information,
.bcms-package-detail__inquiry-grid {
grid-template-columns: 1fr;
gap: var(--space-8);
}
}
@media (max-width: 620px) {
.bcms-package-detail__container {
width: min(100% - 32px, 1240px);
}
.bcms-package-detail__hero {
border-radius: var(--radius-lg);
}
.bcms-package-detail__media {
min-height: 280px;
}
.bcms-package-detail__content {
padding: var(--space-7) var(--space-6) var(--space-8);
}
.bcms-package-detail__facts > div {
grid-template-columns: 1fr;
gap: var(--space-2);
}
.bcms-package-detail__form {
grid-template-columns: 1fr;
padding: var(--space-6) var(--space-5);
}
.bcms-package-detail__field--full,
.bcms-package-detail__form-footer,
.bcms-package-detail__status {
grid-column: auto;
}
.bcms-package-detail__form-footer {
align-items: stretch;
flex-direction: column;
}
.bcms-package-detail__form button {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-package-detail__field input,
.bcms-package-detail__field textarea,
.bcms-package-detail__form button {
transition: none;
}
.bcms-package-detail__form button:hover {
transform: none;
}
}
/* ============================================================
Insurance Providers
============================================================ */
.bcms-insurance {
overflow: clip;
color: var(--color-heading);
background: var(--color-white);
}
.bcms-insurance__container {
width: min(100% - 40px, 1240px);
margin-inline: auto;
}
.bcms-insurance__introduction {
padding: clamp(72px, 9vw, 124px) 0;
background:
radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 25rem),
var(--color-white);
}
.bcms-insurance__intro {
display: grid;
grid-template-columns: minmax(330px, 0.9fr) minmax(440px, 1.1fr);
gap: clamp(48px, 8vw, 112px);
align-items: start;
}
.bcms-insurance__eyebrow {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-5);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.15em;
text-transform: uppercase;
}
.bcms-insurance__eyebrow::before {
content: "";
flex: 0 0 30px;
width: 30px;
height: 1px;
background: currentcolor;
}
.bcms-insurance__intro h2,
.bcms-insurance__providers-heading h2,
.bcms-insurance__confirmation h2 {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.13;
letter-spacing: -0.04em;
}
.bcms-insurance__accent {
width: 58px;
height: 4px;
margin-top: var(--space-6);
border-radius: var(--radius-pill);
background: var(--color-primary);
}
.bcms-insurance__intro-copy {
padding-inline-start: clamp(24px, 4vw, 48px);
border-inline-start: 1px solid color-mix(in srgb, var(--color-heading) 11%, transparent);
}
.bcms-insurance__intro-copy > p {
margin: 0 0 var(--space-5);
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.9;
}
.bcms-insurance__intro-copy > .bcms-insurance__lead {
color: var(--color-primary-dark);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.bcms-insurance__notice {
display: grid;
grid-template-columns: 30px 1fr;
gap: var(--space-4);
margin-top: var(--space-7);
padding: var(--space-5) var(--space-5);
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
border-radius: var(--radius-lg);
background: var(--color-primary-light);
}
.bcms-insurance__notice > span {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: var(--radius-pill);
background: var(--color-primary-dark);
color: var(--color-white);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-insurance__notice p {
margin: 0;
color: var(--color-primary-dark);
font-size: var(--fs-12);
line-height: 1.7;
}
.bcms-insurance__providers {
padding: clamp(76px, 9vw, 124px) 0;
background: var(--color-primary-light);
}
.bcms-insurance__providers-heading {
display: grid;
grid-template-columns: minmax(320px, 1fr) minmax(280px, 0.65fr);
gap: var(--space-10);
align-items: end;
margin-bottom: var(--space-9);
}
.bcms-insurance__providers-heading h2 {
font-size: var(--fs-h2);
}
.bcms-insurance__providers-heading > p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-14);
line-height: 1.8;
}
.bcms-insurance__logos {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5);
}
.bcms-insurance__logo {
position: relative;
display: grid;
place-items: center;
min-height: 150px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-heading) 10%, transparent);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow-md);
transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}
.bcms-insurance__logo:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
box-shadow: var(--shadow-md);
}
.bcms-insurance__logo-mark {
display: grid;
place-items: center;
width: 100%;
height: 100%;
padding: var(--space-7);
background:
radial-gradient(circle at center, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 65%),
var(--color-white);
}
.bcms-insurance__logo-mark img {
width: auto;
max-width: 150px;
max-height: 58px;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.78;
transition: filter 250ms ease, opacity 250ms ease;
}
.bcms-insurance__logo:hover .bcms-insurance__logo-mark img {
filter: grayscale(0);
opacity: 1;
}
.bcms-insurance__logo-mark > span {
color: var(--color-heading);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
letter-spacing: -0.04em;
}
.bcms-insurance__confirmation {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-6);
align-items: center;
margin-top: var(--space-10);
padding: clamp(28px, 4vw, 42px);
border-radius: var(--radius-lg);
background:
linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 42%),
var(--color-heading);
color: var(--color-white);
}
.bcms-insurance__confirmation-icon {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: var(--radius-lg);
background: var(--color-primary);
font-size: var(--fs-h5);
}
.bcms-insurance__confirmation > div:nth-child(2) > span {
display: block;
margin-bottom: var(--space-2);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.bcms-insurance__confirmation h2 {
margin-bottom: var(--space-2);
color: var(--color-white);
font-size: var(--fs-h2);
}
.bcms-insurance__confirmation p {
max-width: 680px;
margin: 0;
color: color-mix(in srgb, var(--color-white) 68%, transparent);
font-size: var(--fs-13);
line-height: 1.7;
}
.bcms-insurance__confirmation > a {
display: inline-flex;
align-items: center;
gap: var(--space-5);
min-height: 54px;
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
background: var(--color-primary-dark);
color: var(--color-white);
}
.bcms-insurance__confirmation > a small,
.bcms-insurance__confirmation > a strong {
display: block;
}
.bcms-insurance__confirmation > a small {
margin-bottom: 2px;
font-size: var(--fs-12);
}
.bcms-insurance__confirmation > a strong {
font-size: var(--fs-13);
}
.bcms-insurance__confirmation > a:focus-visible {
outline: 3px solid var(--color-white);
outline-offset: 4px;
}
@media (max-width: 900px) {
.bcms-insurance__intro,
.bcms-insurance__providers-heading {
grid-template-columns: 1fr;
gap: var(--space-7);
}
.bcms-insurance__logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bcms-insurance__confirmation {
grid-template-columns: auto 1fr;
}
.bcms-insurance__confirmation > a {
grid-column: 1 / -1;
justify-self: start;
}
}
@media (max-width: 560px) {
.bcms-insurance__container {
width: min(100% - 32px, 1240px);
}
.bcms-insurance__introduction,
.bcms-insurance__providers {
padding-block: var(--space-10);
}
.bcms-insurance__intro-copy {
padding-inline-start: var(--space-5);
}
.bcms-insurance__logos {
grid-template-columns: 1fr;
}
.bcms-insurance__confirmation {
grid-template-columns: 1fr;
}
.bcms-insurance__confirmation > a {
grid-column: auto;
justify-self: stretch;
justify-content: space-between;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-insurance__logo,
.bcms-insurance__logo-mark img {
transition: none;
}
.bcms-insurance__logo:hover {
transform: none;
}
}
/* ============================================================
Feedback Survey
============================================================ */
.bcms-feedback {
overflow: clip;
color: var(--color-heading);
background: var(--color-white);
}
.bcms-feedback__container {
width: min(100% - 40px, 1240px);
margin-inline: auto;
}
.bcms-feedback__introduction {
padding: clamp(72px, 9vw, 120px) 0;
background:
radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 25rem),
var(--color-white);
}
.bcms-feedback__intro {
display: grid;
grid-template-columns: minmax(340px, 0.9fr) minmax(440px, 1.1fr);
gap: clamp(48px, 8vw, 112px);
align-items: start;
}
.bcms-feedback__eyebrow {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-5);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.15em;
text-transform: uppercase;
}
.bcms-feedback__eyebrow::before {
content: "";
flex: 0 0 30px;
width: 30px;
height: 1px;
background: currentcolor;
}
.bcms-feedback__intro h2,
.bcms-feedback__choice-heading h2,
.bcms-feedback__survey-copy h2 {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.13;
letter-spacing: -0.04em;
}
.bcms-feedback__intro-copy {
padding-inline-start: clamp(24px, 4vw, 48px);
border-inline-start: 1px solid color-mix(in srgb, var(--color-heading) 11%, transparent);
}
.bcms-feedback__intro-copy > p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.9;
}
.bcms-feedback__privacy {
display: grid;
grid-template-columns: 30px 1fr;
gap: var(--space-4);
margin-top: var(--space-7);
padding: var(--space-5) var(--space-5);
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
border-radius: var(--radius-lg);
background: var(--color-primary-light);
}
.bcms-feedback__privacy > span {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: var(--radius-pill);
background: var(--color-primary-dark);
color: var(--color-white);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-feedback__privacy p {
margin: 0;
color: var(--color-primary-dark);
font-size: var(--fs-12);
line-height: 1.7;
}
.bcms-feedback__choices {
padding: clamp(76px, 9vw, 120px) 0;
background:
linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 3.5%, transparent), transparent 34%),
var(--color-primary-light);
}
.bcms-feedback__choice-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--space-7);
margin-bottom: var(--space-8);
}
.bcms-feedback__choice-heading h2 {
max-width: 700px;
font-size: var(--fs-h2);
}
.bcms-feedback__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
}
.bcms-feedback__card {
position: relative;
display: grid;
grid-template-rows: 270px 1fr;
min-width: 0;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-heading) 11%, transparent);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow-md);
transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}
.bcms-feedback__card.is-active {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.bcms-feedback__card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
box-shadow: var(--shadow-lg);
}
.bcms-feedback__card-media {
position: relative;
overflow: hidden;
}
.bcms-feedback__card-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--color-heading) 48%, transparent));
}
.bcms-feedback__card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 550ms ease;
}
.bcms-feedback__card:hover .bcms-feedback__card-media img {
transform: scale(1.04);
}
.bcms-feedback__card-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: clamp(26px, 3.5vw, 38px);
color: var(--color-heading);
}
.bcms-feedback__card-number {
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin-bottom: var(--space-5);
border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
border-radius: var(--radius-pill);
background: var(--color-primary-light);
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
}
.bcms-feedback__card-label {
margin-bottom: var(--space-2);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.bcms-feedback__card h3 {
margin: 0 0 var(--space-3);
color: var(--color-heading);
font-size: var(--fs-h3);
line-height: 1.16;
letter-spacing: -0.03em;
}
.bcms-feedback__card p {
max-width: 560px;
margin: 0 0 var(--space-6);
color: var(--color-text-muted);
font-size: var(--fs-14);
line-height: 1.75;
}
.bcms-feedback__card a {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: var(--space-4);
min-height: 50px;
margin-top: auto;
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
background: var(--color-primary-dark);
color: var(--color-white);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
transition: background 200ms ease, transform 200ms ease;
}
.bcms-feedback__card a:hover {
transform: translateY(-2px);
background: var(--color-heading);
}
.bcms-feedback__card a:focus-visible,
.bcms-feedback__form input:focus-visible,
.bcms-feedback__form textarea:focus-visible,
.bcms-feedback__form button:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
}
.bcms-feedback__survey {
padding: clamp(80px, 9vw, 128px) 0;
background: var(--color-white);
scroll-margin-top: 100px;
}
.bcms-feedback__survey-grid {
display: grid;
grid-template-columns: minmax(300px, 0.75fr) minmax(520px, 1.25fr);
gap: clamp(48px, 8vw, 110px);
align-items: start;
}
.bcms-feedback__survey-copy {
position: sticky;
top: 120px;
}
.bcms-feedback__survey-copy h2 {
font-size: var(--fs-h2);
}
.bcms-feedback__survey-copy > p {
margin: var(--space-5) 0 0;
color: var(--color-text-muted);
font-size: var(--fs-15);
line-height: 1.8;
}
.bcms-feedback__survey-note {
margin-top: var(--space-7);
padding: var(--space-5);
border-inline-start: 3px solid var(--color-primary);
background: var(--color-primary-light);
}
.bcms-feedback__survey-note strong {
display: block;
margin-bottom: var(--space-1);
color: var(--color-primary-dark);
font-size: var(--fs-12);
}
.bcms-feedback__survey-note p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-12);
line-height: 1.7;
}
.bcms-feedback__form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
padding: clamp(28px, 4vw, 46px);
border: 1px solid color-mix(in srgb, var(--color-heading) 10%, transparent);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow-lg);
}
.bcms-feedback__field {
min-width: 0;
}
.bcms-feedback__field--full,
.bcms-feedback__rating,
.bcms-feedback__form-footer,
.bcms-feedback__status {
grid-column: 1 / -1;
}
.bcms-feedback__field label,
.bcms-feedback__rating legend {
display: block;
margin-bottom: var(--space-2);
color: var(--color-heading);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-feedback__field label > span,
.bcms-feedback__rating legend > span {
color: var(--color-emergency-dark);
}
.bcms-feedback__field input,
.bcms-feedback__field textarea {
width: 100%;
border: 1px solid color-mix(in srgb, var(--color-heading) 11%, transparent);
border-radius: var(--radius-md);
background: var(--color-white);
color: var(--color-heading);
font: inherit;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.bcms-feedback__field input {
height: 52px;
padding-inline: var(--space-4);
}
.bcms-feedback__field textarea {
display: block;
min-height: 150px;
padding: var(--space-4);
resize: vertical;
}
.bcms-feedback__field input:focus,
.bcms-feedback__field textarea:focus {
border-color: var(--color-primary);
outline: 0;
box-shadow: var(--shadow-ring);
}
.bcms-feedback__rating {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.bcms-feedback__rating > div {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-3);
}
.bcms-feedback__rating label {
position: relative;
cursor: pointer;
}
.bcms-feedback__rating input {
position: absolute;
opacity: 0;
}
.bcms-feedback__rating label > span {
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 1.3;
border: 1px solid color-mix(in srgb, var(--color-heading) 11%, transparent);
border-radius: var(--radius-md);
background: var(--color-white);
color: var(--color-text-muted);
font-size: var(--fs-18);
font-weight: var(--fw-bold);
transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.bcms-feedback__rating label > small {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.bcms-feedback__rating input:checked + span {
border-color: var(--color-primary);
background: var(--color-primary-dark);
color: var(--color-white);
}
.bcms-feedback__rating input:focus-visible + span {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
.bcms-feedback__form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
padding-top: var(--space-2);
}
.bcms-feedback__form-footer p {
max-width: 320px;
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-12);
line-height: 1.6;
}
.bcms-feedback__form button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
min-height: 52px;
padding: var(--space-3) var(--space-6);
border: 0;
border-radius: var(--radius-md);
background: var(--color-primary-dark);
color: var(--color-white);
font: inherit;
font-size: var(--fs-13);
font-weight: var(--fw-bold);
cursor: pointer;
transition: background 200ms ease, transform 200ms ease;
}
.bcms-feedback__form button:hover {
transform: translateY(-2px);
background: var(--color-heading);
}
.bcms-feedback__status {
min-height: 1.5em;
margin: 0;
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-semibold);
}
@media (max-width: 900px) {
.bcms-feedback__intro,
.bcms-feedback__survey-grid {
grid-template-columns: 1fr;
gap: var(--space-8);
}
.bcms-feedback__survey-copy {
position: static;
}
}
@media (max-width: 680px) {
.bcms-feedback__cards {
grid-template-columns: 1fr;
}
.bcms-feedback__card {
grid-template-rows: 240px 1fr;
}
}
@media (max-width: 560px) {
.bcms-feedback__container {
width: min(100% - 32px, 1240px);
}
.bcms-feedback__introduction,
.bcms-feedback__choices,
.bcms-feedback__survey {
padding-block: var(--space-10);
}
.bcms-feedback__intro-copy {
padding-inline-start: var(--space-5);
}
.bcms-feedback__choice-heading {
align-items: flex-start;
flex-direction: column;
}
.bcms-feedback__card {
grid-template-rows: 210px 1fr;
}
.bcms-feedback__form {
grid-template-columns: 1fr;
padding: var(--space-6) var(--space-5);
}
.bcms-feedback__field--full,
.bcms-feedback__rating,
.bcms-feedback__form-footer,
.bcms-feedback__status {
grid-column: auto;
}
.bcms-feedback__form-footer {
align-items: stretch;
flex-direction: column;
}
.bcms-feedback__form button {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-feedback__card,
.bcms-feedback__card-media img,
.bcms-feedback__card a,
.bcms-feedback__field input,
.bcms-feedback__field textarea,
.bcms-feedback__rating label > span,
.bcms-feedback__form button {
transition: none;
}
.bcms-feedback__card:hover,
.bcms-feedback__card a:hover,
.bcms-feedback__form button:hover {
transform: none;
}
}
/* ============================================================
Newsletter Archive
============================================================ */
.bcms-newsletter {
overflow: clip;
color: var(--color-heading);
background: var(--color-white);
}
.bcms-newsletter__container {
width: min(100% - 40px, 1240px);
margin-inline: auto;
}
.bcms-newsletter__introduction {
padding: clamp(72px, 9vw, 120px) 0;
background:
radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 25rem),
var(--color-white);
}
.bcms-newsletter__intro {
display: grid;
grid-template-columns: minmax(340px, 0.9fr) minmax(440px, 1.1fr);
gap: clamp(48px, 8vw, 112px);
align-items: start;
}
.bcms-newsletter__eyebrow {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-5);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.15em;
text-transform: uppercase;
}
.bcms-newsletter__eyebrow::before {
content: "";
flex: 0 0 30px;
width: 30px;
height: 1px;
background: currentcolor;
}
.bcms-newsletter__intro h2,
.bcms-newsletter__archive-heading h2 {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.13;
letter-spacing: -0.04em;
}
.bcms-newsletter__intro-copy {
padding-inline-start: clamp(24px, 4vw, 48px);
border-inline-start: 1px solid color-mix(in srgb, var(--color-heading) 11%, transparent);
}
.bcms-newsletter__intro-copy > p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.9;
}
.bcms-newsletter__archive-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
margin-top: var(--space-7);
}
.bcms-newsletter__archive-summary div {
padding: var(--space-4) var(--space-3);
border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
border-radius: var(--radius-lg);
background: var(--color-primary-light);
text-align: center;
}
.bcms-newsletter__archive-summary strong,
.bcms-newsletter__archive-summary span {
display: block;
}
.bcms-newsletter__archive-summary strong {
color: var(--color-primary-dark);
font-size: var(--fs-20);
}
.bcms-newsletter__archive-summary span {
margin-top: 3px;
color: var(--color-text-muted);
font-size: var(--fs-12);
line-height: 1.4;
}
.bcms-newsletter__archive {
padding: clamp(76px, 9vw, 124px) 0;
background: var(--color-primary-light);
}
.bcms-newsletter__archive-heading {
display: grid;
grid-template-columns: minmax(320px, 1fr) minmax(280px, 0.65fr);
gap: var(--space-10);
align-items: end;
margin-bottom: var(--space-8);
}
.bcms-newsletter__archive-heading h2 {
font-size: var(--fs-h2);
}
.bcms-newsletter__archive-heading > p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-14);
line-height: 1.8;
}
.bcms-newsletter__year-tabs {
display: flex;
gap: var(--space-3);
margin-bottom: var(--space-7);
overflow-x: auto;
padding: var(--space-1) var(--space-1) var(--space-3);
scrollbar-width: thin;
}
.bcms-newsletter__year-tab {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: var(--space-3);
min-height: 52px;
padding: var(--space-3) var(--space-5);
border: 1px solid color-mix(in srgb, var(--color-heading) 11%, transparent);
border-radius: var(--radius-pill);
background: var(--color-white);
color: var(--color-text-muted);
font: inherit;
cursor: pointer;
transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.bcms-newsletter__year-tab > span {
font-size: var(--fs-15);
font-weight: var(--fw-bold);
}
.bcms-newsletter__year-tab small {
font-size: var(--fs-12);
font-weight: var(--fw-semibold);
}
.bcms-newsletter__year-tab:hover,
.bcms-newsletter__year-tab.is-active {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary-dark);
}
.bcms-newsletter__year-tab.is-active small {
color: var(--color-secondary-dark);
}
.bcms-newsletter__year-tab:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
.bcms-newsletter__year-panel[hidden] {
display: none;
}
.bcms-newsletter__year-panel.is-active {
animation: bcmsNewsletterIn 350ms ease both;
}
@keyframes bcmsNewsletterIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bcms-newsletter__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5);
}
.bcms-newsletter__card {
display: grid;
grid-template-rows: 260px 1fr;
min-width: 0;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-heading) 10%, transparent);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow-md);
transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}
.bcms-newsletter__card:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
box-shadow: var(--shadow-md);
}
.bcms-newsletter__card--featured {
grid-column: span 2;
grid-template-columns: minmax(240px, 0.9fr) minmax(260px, 1.1fr);
grid-template-rows: 1fr;
}
.bcms-newsletter__cover {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 260px;
padding: var(--space-6);
overflow: hidden;
background:
radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--color-secondary) 26%, transparent), transparent 9rem),
linear-gradient(145deg, var(--color-heading), var(--color-primary-dark));
color: var(--color-white);
}
.bcms-newsletter__cover::before,
.bcms-newsletter__cover::after {
content: "";
position: absolute;
border: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent);
border-radius: var(--radius-pill);
}
.bcms-newsletter__cover::before {
inset-block-start: -100px;
inset-inline-end: -80px;
width: 230px;
height: 230px;
}
.bcms-newsletter__cover::after {
inset-block-end: -80px;
inset-inline-start: -70px;
width: 180px;
height: 180px;
}
.bcms-newsletter__cover-brand,
.bcms-newsletter__cover-mark,
.bcms-newsletter__cover > div,
.bcms-newsletter__cover svg {
position: relative;
z-index: 1;
}
.bcms-newsletter__cover-brand {
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.bcms-newsletter__cover-mark {
position: absolute;
inset-block-start: 50%;
inset-inline-end: 24px;
transform: translateY(-50%);
color: color-mix(in srgb, var(--color-white) 8%, transparent);
font-size: var(--fs-display);
font-weight: var(--fw-bold);
letter-spacing: -0.08em;
}
.bcms-newsletter__cover > div strong,
.bcms-newsletter__cover > div span {
display: block;
}
.bcms-newsletter__cover > div strong {
font-size: var(--fs-h4);
line-height: 1.05;
}
.bcms-newsletter__cover > div span {
margin-top: var(--space-1);
color: var(--color-secondary-dark);
font-size: var(--fs-14);
font-weight: var(--fw-bold);
}
.bcms-newsletter__cover svg {
width: 100%;
height: 42px;
margin-top: var(--space-4);
}
.bcms-newsletter__cover path {
fill: none;
stroke: color-mix(in srgb, var(--color-white) 50%, transparent);
stroke-width: 2;
}
.bcms-newsletter__card-body {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-6);
padding: var(--space-6);
}
.bcms-newsletter__month {
display: block;
margin-bottom: var(--space-2);
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.bcms-newsletter__card h3 {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-18);
line-height: 1.45;
}
.bcms-newsletter__format {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-muted);
font-size: var(--fs-12);
font-weight: var(--fw-semibold);
}
/* ============================================================
Podcast archive and episode detail
============================================================ */
.bcms-podcast,
.bcms-podcast-detail {
color: var(--color-heading);
background: var(--color-white);
}
.bcms-podcast *,
.bcms-podcast-detail * {
box-sizing: border-box;
}
.bcms-podcast__container,
.bcms-podcast-detail__container {
width: min(100% - 40px, 1180px);
margin-inline: auto;
}
.bcms-podcast__intro {
padding-block: clamp(64px, 8vw, 104px);
}
.bcms-podcast__intro-grid,
.bcms-podcast__section-heading,
.bcms-podcast-detail__story {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(32px, 7vw, 100px);
align-items: start;
}
.bcms-podcast__eyebrow,
.bcms-podcast__episode-label {
display: block;
margin-block-end: var(--space-4);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: .14em;
line-height: 1.4;
text-transform: uppercase;
}
.bcms-podcast h2,
.bcms-podcast-detail h2 {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.15;
}
.bcms-podcast__intro-copy > p,
.bcms-podcast__section-heading > p,
.bcms-podcast-detail__story p,
.bcms-podcast-detail__section-heading p,
.bcms-podcast-detail__youtube-copy p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.8;
}
.bcms-podcast__facts {
display: flex;
gap: var(--space-8);
margin-block-start: var(--space-7);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-border);
}
.bcms-podcast__facts div {
display: grid;
gap: 3px;
}
.bcms-podcast__facts strong {
color: var(--color-heading);
font-size: var(--fs-h4);
}
.bcms-podcast__facts span {
color: var(--color-text-muted);
font-size: var(--fs-13);
}
.bcms-podcast__latest {
padding-block: clamp(54px, 7vw, 86px);
background: var(--color-background);
}
.bcms-podcast__feature {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
overflow: hidden;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.bcms-podcast__feature-media,
.bcms-podcast__card-media {
position: relative;
display: block;
overflow: hidden;
background: var(--color-heading);
}
.bcms-podcast__feature-media {
min-height: 500px;
}
.bcms-podcast__feature-media img,
.bcms-podcast__card-media img,
.bcms-podcast-detail__image img {
width: 100%;
height: 100%;
/* Episode covers have baked-in title text: show them whole on the brand card. */
object-fit: contain;
transition: transform .5s ease;
}
.bcms-podcast__feature-media::after,
.bcms-podcast__card-media::after {
position: absolute;
inset: 0;
content: "";
background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--color-heading) 60%, transparent));
}
.bcms-podcast__feature-media:hover img,
.bcms-podcast__card-media:hover img {
transform: scale(1.035);
}
.bcms-podcast__play {
position: absolute;
z-index: 1;
inset-block-end: 30px;
inset-inline-start: 30px;
display: grid;
width: 64px;
height: 64px;
place-items: center;
color: var(--color-heading);
background: var(--color-white);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-md);
}
.bcms-podcast__play svg,
.bcms-podcast-detail__video-play svg {
width: 24px;
fill: currentColor;
}
.bcms-podcast__feature-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(34px, 5vw, 66px);
}
.bcms-podcast__feature-content h2 {
font-size: var(--fs-h2);
}
.bcms-podcast__feature-content > p:not(.bcms-podcast__guests) {
margin: var(--space-5) 0 var(--space-7);
color: var(--color-text-muted);
line-height: 1.75;
}
.bcms-podcast__guests {
margin: var(--space-4) 0 0;
font-size: var(--fs-14);
line-height: 1.6;
}
.bcms-podcast__button {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: var(--space-4);
min-height: 48px;
padding-inline: var(--space-6);
color: var(--color-white);
background: var(--color-primary-dark);
border-radius: var(--radius-pill);
font-size: var(--fs-14);
font-weight: var(--fw-bold);
text-decoration: none;
transition: background .25s ease, transform .25s ease;
}
.bcms-podcast__button:hover,
.bcms-podcast__button:focus-visible {
color: var(--color-white);
background: var(--color-heading);
transform: translateY(-2px);
}
.bcms-podcast__archive {
padding-block: clamp(72px, 9vw, 118px);
}
.bcms-podcast__section-heading {
margin-block-end: var(--space-8);
align-items: end;
}
.bcms-podcast__section-heading h2 {
font-size: var(--fs-h2);
}
.bcms-podcast__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-7);
}
.bcms-podcast__card {
overflow: hidden;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.bcms-podcast__card:hover {
border-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.bcms-podcast__card-media {
aspect-ratio: 16 / 9;
}
.bcms-podcast__card-media > span {
position: absolute;
z-index: 1;
inset-block-end: 18px;
inset-inline-start: 20px;
color: var(--color-white);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: 1;
}
.bcms-podcast__card-content {
padding: var(--space-6);
}
.bcms-podcast__card-content h3 {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-22);
line-height: 1.3;
}
.bcms-podcast__card-content h3 a {
color: inherit;
text-decoration: none;
}
.bcms-podcast__text-link {
display: inline-flex;
gap: var(--space-3);
margin-block-start: var(--space-6);
color: var(--color-heading);
font-size: var(--fs-14);
font-weight: var(--fw-bold);
text-decoration: none;
}
.bcms-podcast__text-link:hover {
color: var(--color-secondary-dark);
}
.bcms-podcast-detail {
padding-block: clamp(52px, 7vw, 92px) clamp(80px, 10vw, 130px);
}
.bcms-podcast-detail__back {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-block-end: var(--space-7);
color: var(--color-heading);
font-size: var(--fs-14);
font-weight: var(--fw-bold);
text-decoration: none;
}
.bcms-podcast-detail__masthead {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
overflow: hidden;
background: var(--color-heading);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.bcms-podcast-detail__image {
position: relative;
min-height: 520px;
}
.bcms-podcast-detail__number {
position: absolute;
inset-block-end: 24px;
inset-inline-start: 28px;
color: color-mix(in srgb, var(--color-white) 90%, transparent);
font-size: var(--fs-h1);
font-weight: var(--fw-bold);
}
.bcms-podcast-detail__heading {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(34px, 5vw, 64px);
}
.bcms-podcast-detail__heading h2 {
color: var(--color-white);
font-size: var(--fs-h2);
}
.bcms-podcast-detail__heading > p:last-child {
margin: var(--space-6) 0 0;
color: color-mix(in srgb, var(--color-white) 70%, transparent);
line-height: 1.8;
}
.bcms-podcast-detail__guests {
margin: var(--space-5) 0 0;
color: var(--color-secondary-light);
font-weight: var(--fw-bold);
line-height: 1.6;
}
.bcms-podcast-detail__story {
padding-block: clamp(70px, 9vw, 112px);
}
.bcms-podcast-detail__story h2 {
font-size: var(--fs-h2);
}
.bcms-podcast-detail__story p + p {
margin-block-start: var(--space-5);
}
.bcms-podcast-detail__media {
padding: clamp(40px, 6vw, 70px);
background: var(--color-background);
border-radius: var(--radius-xl);
}
.bcms-podcast-detail__section-heading {
max-width: 720px;
margin-block-end: var(--space-7);
}
.bcms-podcast-detail__section-heading h2,
.bcms-podcast-detail__youtube-copy h2 {
margin-block-end: var(--space-4);
font-size: var(--fs-h2);
}
.bcms-podcast-detail__instagram-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5);
}
.bcms-podcast-detail__social-card {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-5);
padding: var(--space-7);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.bcms-podcast-detail__social-icon {
display: grid;
width: 44px;
height: 44px;
place-items: center;
color: var(--color-white);
background: var(--color-primary-dark);
border-radius: var(--radius-md);
font-size: var(--fs-h5);
}
.bcms-podcast-detail__social-card h3,
.bcms-podcast-detail__media-empty h3 {
margin: 0 0 var(--space-2);
color: var(--color-heading);
font-size: var(--fs-18);
}
.bcms-podcast-detail__social-card p,
.bcms-podcast-detail__media-empty p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-14);
line-height: 1.65;
}
.bcms-podcast-detail__social-card a {
grid-column: 2;
display: inline-flex;
gap: var(--space-2);
justify-self: start;
color: var(--color-heading);
font-size: var(--fs-14);
font-weight: var(--fw-bold);
text-decoration: none;
}
.bcms-podcast-detail__media-empty {
display: flex;
gap: var(--space-5);
align-items: center;
padding: var(--space-7);
background: var(--color-white);
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
}
.bcms-podcast-detail__media-empty > span {
color: var(--color-secondary);
font-size: var(--fs-h3);
}
.bcms-podcast-detail__youtube {
display: grid;
grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
gap: clamp(40px, 7vw, 90px);
align-items: center;
padding-block-start: clamp(72px, 9vw, 112px);
}
.bcms-podcast-detail__video-placeholder {
display: flex;
aspect-ratio: 16 / 9;
flex-direction: column;
gap: var(--space-5);
align-items: center;
justify-content: center;
color: var(--color-white);
background:
linear-gradient(color-mix(in srgb, var(--color-heading) 82%, transparent), color-mix(in srgb, var(--color-heading) 90%, transparent)),
var(--bcms-podcast-video-bg, none) center/cover; /* set from the Media Library in section-podcast-detail.php */
border-radius: var(--radius-lg);
text-align: center;
}
.bcms-podcast-detail__video-play {
display: grid;
width: 68px;
height: 68px;
place-items: center;
color: var(--color-heading);
background: var(--color-white);
border-radius: var(--radius-pill);
}
.bcms-podcast-detail__video-embed {
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.bcms-podcast-detail__video-embed iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
[dir="rtl"] .bcms-podcast__button span,
[dir="rtl"] .bcms-podcast__text-link span,
[dir="rtl"] .bcms-podcast-detail__back span {
transform: scaleX(-1);
}
@media (max-width: 900px) {
.bcms-podcast__feature,
.bcms-podcast-detail__masthead {
grid-template-columns: 1fr;
}
.bcms-podcast__feature-media,
.bcms-podcast-detail__image {
min-height: 420px;
}
.bcms-podcast-detail__youtube {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.bcms-podcast__intro-grid,
.bcms-podcast__section-heading,
.bcms-podcast-detail__story,
.bcms-podcast__grid,
.bcms-podcast-detail__instagram-grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.bcms-podcast__feature-media,
.bcms-podcast-detail__image {
min-height: auto;
aspect-ratio: 4 / 3;
}
.bcms-podcast-detail__media {
padding: var(--space-7) var(--space-5);
}
}
@media (max-width: 480px) {
.bcms-podcast__container,
.bcms-podcast-detail__container {
width: min(100% - 28px, 1180px);
}
.bcms-podcast__facts {
gap: var(--space-7);
}
.bcms-podcast__feature,
.bcms-podcast__card,
.bcms-podcast-detail__masthead,
.bcms-podcast-detail__media,
.bcms-podcast-detail__video-placeholder,
.bcms-podcast-detail__video-embed {
border-radius: var(--radius-md);
}
.bcms-podcast-detail__social-card {
grid-template-columns: 1fr;
}
.bcms-podcast-detail__social-card a {
grid-column: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-podcast__feature-media img,
.bcms-podcast__card-media img,
.bcms-podcast__button,
.bcms-podcast__card {
transition: none;
}
.bcms-podcast__feature-media:hover img,
.bcms-podcast__card-media:hover img,
.bcms-podcast__button:hover,
.bcms-podcast__card:hover {
transform: none;
}
}
/* ============================================================
Frequently Asked Questions
============================================================ */
.bcms-faqs {
color: var(--color-heading);
background: var(--color-white);
}
.bcms-faqs *,
.bcms-faqs *::before,
.bcms-faqs *::after {
box-sizing: border-box;
}
.bcms-faqs__container {
width: min(100% - 40px, 1160px);
margin-inline: auto;
}
.bcms-faqs__intro {
padding-block: clamp(64px, 8vw, 104px);
}
.bcms-faqs__intro-grid {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(34px, 8vw, 110px);
align-items: start;
}
.bcms-faqs__eyebrow {
display: block;
margin-block-end: var(--space-3);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: .14em;
line-height: 1.4;
text-transform: uppercase;
}
.bcms-faqs h2 {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.16;
}
.bcms-faqs__intro-copy > p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.8;
}
.bcms-faqs__quick-info {
display: flex;
gap: var(--space-9);
margin-block-start: var(--space-7);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-border);
}
.bcms-faqs__quick-info div {
display: grid;
gap: 3px;
}
.bcms-faqs__quick-info strong {
font-size: var(--fs-h4);
}
.bcms-faqs__quick-info span {
color: var(--color-text-muted);
font-size: var(--fs-13);
}
.bcms-faqs__content {
padding-block: clamp(64px, 8vw, 108px);
background: var(--color-background);
}
.bcms-faqs__content-grid {
display: grid;
grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
gap: clamp(36px, 7vw, 88px);
align-items: start;
}
.bcms-faqs__support {
position: sticky;
inset-block-start: 120px;
padding: clamp(28px, 4vw, 42px);
color: var(--color-white);
background:
radial-gradient(circle at 100% 0, color-mix(in srgb, var(--color-secondary) 25%, transparent), transparent 42%),
var(--color-heading);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.bcms-faqs__support-icon {
display: grid;
width: 54px;
height: 54px;
margin-block-end: var(--space-7);
place-items: center;
color: var(--color-heading);
background: var(--color-white);
border-radius: var(--radius-pill);
}
.bcms-faqs__support-icon svg {
width: 25px;
fill: currentColor;
}
.bcms-faqs__support h2 {
color: var(--color-white);
font-size: var(--fs-h2);
}
.bcms-faqs__support > p {
margin: var(--space-4) 0 var(--space-7);
color: color-mix(in srgb, var(--color-white) 70%, transparent);
line-height: 1.75;
}
.bcms-faqs__phone {
display: grid;
gap: 3px;
padding-block: var(--space-5);
color: var(--color-white);
border-block: 1px solid color-mix(in srgb, var(--color-white) 16%, transparent);
text-decoration: none;
}
.bcms-faqs__phone span {
color: color-mix(in srgb, var(--color-white) 70%, transparent);
font-size: var(--fs-12);
}
.bcms-faqs__phone strong {
font-size: var(--fs-20);
letter-spacing: .02em;
}
.bcms-faqs__contact {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-height: 46px;
margin-block-start: var(--space-7);
padding-inline: var(--space-5);
color: var(--color-heading);
background: var(--color-white);
border-radius: var(--radius-pill);
font-size: var(--fs-14);
font-weight: var(--fw-bold);
text-decoration: none;
transition: background .2s ease, transform .2s ease;
}
.bcms-faqs__contact:hover,
.bcms-faqs__contact:focus-visible {
color: var(--color-heading);
background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
transform: translateY(-2px);
}
.bcms-faqs__list-heading {
margin-block-end: var(--space-7);
}
.bcms-faqs__list-heading h2 {
font-size: var(--fs-h2);
}
.bcms-faqs__accordion {
display: grid;
gap: var(--space-3);
}
.bcms-faqs__item {
overflow: hidden;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color .2s ease, box-shadow .2s ease;
}
.bcms-faqs__item.is-open {
border-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
background: color-mix(in srgb, var(--color-primary-light) 50%, transparent);
box-shadow: var(--shadow-md);
}
.bcms-faqs__item h3 {
margin: 0;
}
.bcms-faqs__trigger {
display: grid;
width: 100%;
grid-template-columns: 40px 1fr 28px;
gap: var(--space-4);
align-items: center;
padding: var(--space-6) var(--space-6);
color: var(--color-heading);
background: transparent;
border: 0;
font: inherit;
font-size: var(--fs-16);
font-weight: var(--fw-bold);
line-height: 1.45;
text-align: start;
cursor: pointer;
}
.bcms-faqs__trigger:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: -3px;
}
.bcms-faqs__number {
color: var(--color-secondary-dark);
font-size: var(--fs-12);
letter-spacing: .08em;
}
.bcms-faqs__toggle {
position: relative;
width: 28px;
height: 28px;
background: var(--color-background);
border-radius: var(--radius-pill);
}
.bcms-faqs__toggle::before,
.bcms-faqs__toggle::after {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
width: 11px;
height: 2px;
content: "";
background: var(--color-heading);
transform: translate(-50%, -50%);
}
.bcms-faqs__toggle::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: transform .2s ease;
}
.bcms-faqs__trigger[aria-expanded="true"] .bcms-faqs__toggle::after {
transform: translate(-50%, -50%) rotate(0);
}
.bcms-faqs__item.is-open .bcms-faqs__toggle {
background: var(--color-primary-light);
}
.bcms-faqs__item.is-open .bcms-faqs__toggle::before,
.bcms-faqs__item.is-open .bcms-faqs__toggle::after {
background: var(--color-primary);
}
.bcms-faqs__panel {
padding: 0 var(--space-6) var(--space-6) var(--space-11);
}
.bcms-faqs__panel p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-15);
line-height: 1.8;
}
[dir="rtl"] .bcms-faqs__contact span {
transform: scaleX(-1);
}
[dir="rtl"] .bcms-faqs__toggle::before,
[dir="rtl"] .bcms-faqs__toggle::after {
transform: translate(50%, -50%);
}
[dir="rtl"] .bcms-faqs__toggle::after {
transform: translate(50%, -50%) rotate(90deg);
}
[dir="rtl"] .bcms-faqs__trigger[aria-expanded="true"] .bcms-faqs__toggle::after {
transform: translate(50%, -50%) rotate(0);
}
@media (max-width: 820px) {
.bcms-faqs__intro-grid,
.bcms-faqs__content-grid {
grid-template-columns: 1fr;
}
.bcms-faqs__support {
position: static;
}
}
@media (max-width: 560px) {
.bcms-faqs__container {
width: min(100% - 28px, 1160px);
}
.bcms-faqs__quick-info {
gap: var(--space-7);
}
.bcms-faqs__trigger {
grid-template-columns: 32px 1fr 28px;
gap: var(--space-3);
padding: var(--space-5) var(--space-4);
}
.bcms-faqs__panel {
padding: 0 var(--space-4) var(--space-6) var(--space-10);
}
[dir="rtl"] .bcms-faqs__panel {
padding: 0 var(--space-10) var(--space-6) var(--space-4);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-faqs__item,
.bcms-faqs__contact,
.bcms-faqs__toggle::after {
transition: none;
}
}
/* ============================================================
Brochures
============================================================ */
.bcms-brochures {
color: var(--color-heading);
background: var(--color-white);
}
.bcms-brochures *,
.bcms-brochures *::before,
.bcms-brochures *::after {
box-sizing: border-box;
}
.bcms-brochures__container {
width: min(100% - 40px, 1160px);
margin-inline: auto;
}
.bcms-brochures__intro {
padding-block: clamp(64px, 8vw, 104px);
}
.bcms-brochures__intro-grid,
.bcms-brochures__library-heading {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(34px, 8vw, 110px);
align-items: start;
}
.bcms-brochures__eyebrow {
display: block;
margin-block-end: var(--space-3);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: .14em;
line-height: 1.4;
text-transform: uppercase;
}
.bcms-brochures h2 {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.16;
}
.bcms-brochures__intro-copy > p,
.bcms-brochures__library-heading > p,
.bcms-brochures__help-panel p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.8;
}
.bcms-brochures__summary {
display: flex;
gap: var(--space-9);
margin-block-start: var(--space-7);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-border);
}
.bcms-brochures__summary div {
display: grid;
gap: 3px;
}
.bcms-brochures__summary strong {
font-size: var(--fs-h4);
}
.bcms-brochures__summary span {
color: var(--color-text-muted);
font-size: var(--fs-13);
}
.bcms-brochures__library {
padding-block: clamp(64px, 8vw, 108px);
background: var(--color-background);
}
.bcms-brochures__library-heading {
margin-block-end: var(--space-8);
align-items: end;
}
.bcms-brochures__library-heading h2 {
font-size: var(--fs-h2);
}
.bcms-brochures__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
}
.bcms-brochures__card {
overflow: hidden;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.bcms-brochures__card:hover {
border-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
box-shadow: var(--shadow-lg);
transform: translateY(-5px);
}
.bcms-brochures__cover {
position: relative;
display: flex;
aspect-ratio: 4 / 3;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
padding: var(--space-6);
color: var(--color-white);
background:
radial-gradient(circle at 100% 0, color-mix(in srgb, var(--color-secondary) 42%, transparent), transparent 38%),
linear-gradient(145deg, var(--color-heading), var(--color-primary-dark));
}
.bcms-brochures__cover::after {
position: absolute;
inset-inline-end: -50px;
inset-block-end: -78px;
width: 230px;
height: 230px;
content: "";
border: 34px solid color-mix(in srgb, var(--color-white) 6%, transparent);
border-radius: var(--radius-pill);
}
.bcms-brochures__cover-brand {
position: relative;
z-index: 1;
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: .08em;
text-transform: uppercase;
}
.bcms-brochures__cover-mark {
position: absolute;
inset-block-start: 22px;
inset-inline-end: 22px;
display: grid;
width: 36px;
height: 36px;
place-items: center;
color: var(--color-heading);
background: var(--color-white);
border-radius: var(--radius-pill);
}
.bcms-brochures__cover-mark svg {
width: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.bcms-brochures__cover > div {
position: relative;
z-index: 1;
display: grid;
gap: var(--space-2);
max-width: 84%;
}
.bcms-brochures__cover small {
color: var(--color-secondary-light);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: .1em;
text-transform: uppercase;
}
.bcms-brochures__cover strong {
font-size: var(--fs-h4);
line-height: 1.18;
}
.bcms-brochures__cover-number {
position: absolute;
z-index: 1;
inset-inline-end: 22px;
inset-block-end: 18px;
color: color-mix(in srgb, var(--color-white) 25%, transparent);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: 1;
}
.bcms-brochures__card-content {
display: flex;
min-height: 280px;
flex-direction: column;
padding: var(--space-6);
}
.bcms-brochures__format {
display: inline-flex;
gap: var(--space-2);
align-items: center;
align-self: flex-start;
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: .08em;
text-transform: uppercase;
}
.bcms-brochures__format svg,
.bcms-brochures__action svg {
width: 17px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.7;
}
.bcms-brochures__card h3 {
margin: var(--space-4) 0 var(--space-3);
font-size: var(--fs-20);
line-height: 1.3;
}
.bcms-brochures__card p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-14);
line-height: 1.7;
}
.bcms-brochures__action {
display: inline-flex;
gap: var(--space-2);
align-items: center;
align-self: flex-start;
margin-block-start: auto;
padding-block-start: var(--space-6);
color: var(--color-heading);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
text-decoration: none;
}
.bcms-brochures__action--pending {
color: var(--color-text-muted);
}
.bcms-brochures__help {
padding-block: clamp(64px, 8vw, 100px);
}
.bcms-brochures__help-panel {
display: grid;
grid-template-columns: minmax(0, 1.1fr) auto;
gap: var(--space-9);
align-items: center;
padding: clamp(34px, 5vw, 58px);
color: var(--color-white);
background:
radial-gradient(circle at 100% 0, color-mix(in srgb, var(--color-secondary) 25%, transparent), transparent 42%),
var(--color-heading);
border-radius: var(--radius-lg);
}
.bcms-brochures__help-panel h2 {
margin-block-end: var(--space-4);
color: var(--color-white);
font-size: var(--fs-h2);
}
.bcms-brochures__help-panel p {
max-width: 680px;
color: color-mix(in srgb, var(--color-white) 70%, transparent);
}
.bcms-brochures__help-actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
justify-content: flex-end;
}
.bcms-brochures__button {
display: inline-flex;
min-height: 48px;
gap: var(--space-3);
align-items: center;
justify-content: center;
padding-inline: var(--space-5);
border: 1px solid var(--color-white);
border-radius: var(--radius-pill);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
text-decoration: none;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.bcms-brochures__button--light {
color: var(--color-heading);
background: var(--color-white);
}
.bcms-brochures__button--outline {
color: var(--color-white);
background: transparent;
}
.bcms-brochures__button:hover,
.bcms-brochures__button:focus-visible {
transform: translateY(-2px);
}
.bcms-brochures__button--light:hover {
color: var(--color-heading);
background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
}
.bcms-brochures__button--outline:hover {
color: var(--color-heading);
background: var(--color-white);
}
[dir="rtl"] .bcms-brochures__button span {
transform: scaleX(-1);
}
@media (max-width: 900px) {
.bcms-brochures__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bcms-brochures__help-panel {
grid-template-columns: 1fr;
}
.bcms-brochures__help-actions {
justify-content: flex-start;
}
}
@media (max-width: 680px) {
.bcms-brochures__intro-grid,
.bcms-brochures__library-heading,
.bcms-brochures__grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
}
@media (max-width: 480px) {
.bcms-brochures__container {
width: min(100% - 28px, 1160px);
}
.bcms-brochures__summary {
gap: var(--space-7);
}
.bcms-brochures__card,
.bcms-brochures__help-panel {
border-radius: var(--radius-md);
}
.bcms-brochures__help-actions,
.bcms-brochures__button {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-brochures__card,
.bcms-brochures__button {
transition: none;
}
.bcms-brochures__card:hover,
.bcms-brochures__button:hover {
transform: none;
}
}
/* ============================================================
Patient Testimonials
============================================================ */
.bcms-testimonials {
color: var(--color-heading);
background: var(--color-white);
}
.bcms-testimonials *,
.bcms-testimonials *::before,
.bcms-testimonials *::after {
box-sizing: border-box;
}
.bcms-testimonials__container {
width: min(100% - 40px, 1160px);
margin-inline: auto;
}
.bcms-testimonials__intro {
padding-block: clamp(64px, 8vw, 104px);
}
.bcms-testimonials__intro-grid,
.bcms-testimonials__stories-heading {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(34px, 8vw, 110px);
align-items: start;
}
.bcms-testimonials__eyebrow {
display: block;
margin-block-end: var(--space-3);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: .14em;
line-height: 1.4;
text-transform: uppercase;
}
.bcms-testimonials h2 {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.16;
}
.bcms-testimonials__intro-copy > p,
.bcms-testimonials__stories-heading > p,
.bcms-testimonials__feedback-panel p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.8;
}
.bcms-testimonials__values {
display: flex;
gap: var(--space-9);
margin-block-start: var(--space-7);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-border);
}
.bcms-testimonials__values div {
display: grid;
gap: 3px;
}
.bcms-testimonials__values strong {
font-size: var(--fs-20);
}
.bcms-testimonials__values span {
color: var(--color-text-muted);
font-size: var(--fs-13);
}
.bcms-testimonials__stories {
padding-block: clamp(64px, 8vw, 108px);
background: var(--color-background);
}
.bcms-testimonials__stories-heading {
margin-block-end: var(--space-8);
align-items: end;
}
.bcms-testimonials__stories-heading h2 {
font-size: var(--fs-h2);
}
.bcms-testimonials__carousel {
position: relative;
}
.bcms-testimonials__track {
box-shadow: var(--shadow-lg);
}
.bcms-testimonials__slide {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(230px, .45fr);
min-height: 440px;
overflow: hidden;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
animation: bcmsTestimonialIn .35s ease;
}
.bcms-testimonials__slide[hidden] {
display: none;
}
@keyframes bcmsTestimonialIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bcms-testimonials__quote-panel {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(38px, 6vw, 76px);
}
.bcms-testimonials__quote-mark {
position: absolute;
inset-block-start: 23px;
inset-inline-start: 42px;
color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
font-family: var(--font-editorial);
font-size: var(--fs-display);
line-height: 1;
}
.bcms-testimonials__rating {
position: relative;
color: var(--color-primary-dark);
font-size: var(--fs-16);
letter-spacing: .24em;
}
.bcms-testimonials__quote-panel blockquote {
position: relative;
margin: var(--space-6) 0 var(--space-7);
}
.bcms-testimonials__quote-panel blockquote p {
margin: 0;
color: var(--color-heading);
font-family: var(--font-editorial);
font-size: var(--fs-h4);
font-weight: var(--fw-regular);
line-height: 1.55;
}
.bcms-testimonials__author {
display: flex;
gap: var(--space-3);
align-items: center;
}
.bcms-testimonials__avatar {
display: grid;
width: 48px;
height: 48px;
flex: 0 0 auto;
place-items: center;
color: var(--color-white);
background: var(--color-heading);
border-radius: var(--radius-pill);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
}
.bcms-testimonials__author > div {
display: grid;
gap: 3px;
}
.bcms-testimonials__author strong {
font-size: var(--fs-15);
}
.bcms-testimonials__author div span {
color: var(--color-text-muted);
font-size: var(--fs-12);
}
.bcms-testimonials__side-panel {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
padding: var(--space-7) var(--space-7);
color: var(--color-white);
background:
radial-gradient(circle at 100% 0, color-mix(in srgb, var(--color-secondary) 35%, transparent), transparent 40%),
var(--color-heading);
}
.bcms-testimonials__side-panel span {
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: .12em;
text-transform: uppercase;
}
.bcms-testimonials__side-panel strong {
color: color-mix(in srgb, var(--color-white) 17%, transparent);
font-size: var(--fs-display);
line-height: 1;
}
.bcms-testimonials__side-panel svg {
position: absolute;
inset-inline: 0;
inset-block-end: 38px;
width: 100%;
height: 80px;
fill: none;
stroke: color-mix(in srgb, var(--color-white) 16%, transparent);
stroke-width: 2;
}
.bcms-testimonials__controls {
display: flex;
gap: var(--space-6);
align-items: center;
justify-content: center;
margin-block-start: var(--space-7);
}
.bcms-testimonials__arrows,
.bcms-testimonials__dots {
display: flex;
gap: var(--space-2);
align-items: center;
}
.bcms-testimonials__arrow {
display: grid;
width: 43px;
height: 43px;
padding: 0;
place-items: center;
color: var(--color-heading);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
cursor: pointer;
transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.bcms-testimonials__arrow svg {
width: 18px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.bcms-testimonials__arrow:hover,
.bcms-testimonials__arrow:focus-visible {
color: var(--color-white);
background: var(--color-heading);
border-color: var(--color-heading);
}
.bcms-testimonials__dot {
width: 9px;
height: 9px;
padding: 0;
background: var(--color-border);
border: 0;
border-radius: var(--radius-pill);
cursor: pointer;
transition: width .2s ease, background .2s ease;
}
.bcms-testimonials__dot.is-active {
width: 25px;
background: var(--color-secondary);
border-radius: var(--radius-pill);
}
.bcms-testimonials__status {
display: flex;
gap: var(--space-2);
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-12);
}
.bcms-testimonials__status span:first-child {
color: var(--color-heading);
font-weight: var(--fw-bold);
}
.bcms-testimonials__feedback {
padding-block: clamp(64px, 8vw, 100px);
}
.bcms-testimonials__feedback-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-9);
align-items: center;
padding: clamp(34px, 5vw, 58px);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.bcms-testimonials__feedback-panel h2 {
margin-block-end: var(--space-4);
font-size: var(--fs-h2);
}
.bcms-testimonials__feedback-panel > a {
display: inline-flex;
min-height: 50px;
gap: var(--space-3);
align-items: center;
justify-content: center;
padding-inline: var(--space-6);
color: var(--color-white);
background: var(--color-primary-dark);
border-radius: var(--radius-pill);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
text-decoration: none;
white-space: nowrap;
transition: background .2s ease, transform .2s ease;
}
.bcms-testimonials__feedback-panel > a:hover,
.bcms-testimonials__feedback-panel > a:focus-visible {
color: var(--color-white);
background: var(--color-heading);
transform: translateY(-2px);
}
[dir="rtl"] .bcms-testimonials__arrow svg,
[dir="rtl"] .bcms-testimonials__feedback-panel > a span {
transform: scaleX(-1);
}
@media (max-width: 820px) {
.bcms-testimonials__slide {
grid-template-columns: 1fr;
}
.bcms-testimonials__side-panel {
display: none;
}
.bcms-testimonials__feedback-panel {
grid-template-columns: 1fr;
}
.bcms-testimonials__feedback-panel > a {
justify-self: start;
}
}
@media (max-width: 680px) {
.bcms-testimonials__intro-grid,
.bcms-testimonials__stories-heading {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.bcms-testimonials__quote-panel {
padding: var(--space-8) var(--space-6) var(--space-7);
}
.bcms-testimonials__quote-mark {
inset-inline-start: 18px;
}
}
@media (max-width: 480px) {
.bcms-testimonials__container {
width: min(100% - 28px, 1160px);
}
.bcms-testimonials__values {
gap: var(--space-6);
}
.bcms-testimonials__slide,
.bcms-testimonials__feedback-panel {
border-radius: var(--radius-md);
}
.bcms-testimonials__controls {
gap: var(--space-4);
justify-content: space-between;
}
.bcms-testimonials__feedback-panel > a {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-testimonials__slide {
animation: none;
}
.bcms-testimonials__arrow,
.bcms-testimonials__dot,
.bcms-testimonials__feedback-panel > a {
transition: none;
}
}
/* ============================================================
Contact Us
============================================================ */
.bcms-contact {
color: var(--color-heading);
background: var(--color-white);
}
.bcms-contact *,
.bcms-contact *::before,
.bcms-contact *::after {
box-sizing: border-box;
}
.bcms-contact__container {
width: min(100% - 40px, 1160px);
margin-inline: auto;
}
.bcms-contact__intro {
padding-block: clamp(64px, 8vw, 104px);
}
.bcms-contact__intro-grid,
.bcms-contact__section-heading {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(34px, 8vw, 110px);
align-items: start;
}
.bcms-contact__eyebrow {
display: block;
margin-block-end: var(--space-3);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: .14em;
line-height: 1.4;
text-transform: uppercase;
}
.bcms-contact h2 {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.16;
}
.bcms-contact__intro-copy > p,
.bcms-contact__section-heading > p,
.bcms-contact__form-panel > p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.8;
}
.bcms-contact__summary {
display: flex;
gap: var(--space-9);
margin-block-start: var(--space-7);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-border);
}
.bcms-contact__summary div {
display: grid;
gap: 3px;
}
.bcms-contact__summary strong {
font-size: var(--fs-22);
}
.bcms-contact__summary span {
color: var(--color-text-muted);
font-size: var(--fs-13);
}
.bcms-contact__directory {
padding-block: clamp(64px, 8vw, 108px);
background: var(--color-background);
}
.bcms-contact__section-heading {
margin-block-end: var(--space-8);
align-items: end;
}
.bcms-contact__section-heading h2 {
font-size: var(--fs-h2);
}
.bcms-contact__cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-5);
}
.bcms-contact__card {
display: flex;
min-height: 245px;
flex-direction: column;
align-items: flex-start;
padding: var(--space-6);
color: var(--color-heading);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
text-decoration: none;
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.bcms-contact__card:hover,
.bcms-contact__card:focus-visible {
color: var(--color-heading);
border-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.bcms-contact__icon {
display: grid;
width: 46px;
height: 46px;
margin-block-end: var(--space-7);
place-items: center;
color: var(--color-primary);
background: var(--color-primary-light);
border-radius: var(--radius-pill);
}
.bcms-contact__icon svg,
.bcms-contact__location-icon svg {
width: 20px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.7;
}
.bcms-contact__card-label {
margin-block-end: var(--space-2);
color: var(--color-text-muted);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: .1em;
text-transform: uppercase;
}
.bcms-contact__card strong {
overflow-wrap: anywhere;
font-size: var(--fs-18);
}
.bcms-contact__card-action {
display: inline-flex;
gap: var(--space-2);
margin-block-start: auto;
padding-block-start: var(--space-6);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-contact__connect {
padding-block: clamp(72px, 9vw, 118px);
}
.bcms-contact__connect-panel {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
overflow: hidden;
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.bcms-contact__form-panel {
padding: clamp(35px, 5vw, 62px);
}
.bcms-contact__form-panel h2 {
margin-block-end: var(--space-3);
font-size: var(--fs-h2);
}
.bcms-contact__form {
display: grid;
gap: var(--space-5);
margin-block-start: var(--space-7);
}
.bcms-contact__form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.bcms-contact__field {
display: grid;
gap: var(--space-2);
}
.bcms-contact__field label {
color: var(--color-heading);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-contact__field label span {
color: var(--color-emergency-dark);
}
.bcms-contact__field input,
.bcms-contact__field textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
color: var(--color-heading);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font: inherit;
font-size: var(--fs-14);
transition: border-color .2s ease, box-shadow .2s ease;
}
.bcms-contact__field textarea {
min-height: 120px;
resize: vertical;
}
.bcms-contact__field input:focus,
.bcms-contact__field textarea:focus {
border-color: var(--color-primary);
box-shadow: var(--shadow-ring);
outline: 0;
}
.bcms-contact__field small,
.bcms-contact__form-status {
color: var(--color-text-muted);
font-size: var(--fs-12);
line-height: 1.5;
}
.bcms-contact__submit {
justify-self: start;
min-height: 49px;
padding-inline: var(--space-6);
color: var(--color-white);
background: var(--color-primary-dark);
border: 0;
border-radius: var(--radius-pill);
font: inherit;
font-size: var(--fs-13);
font-weight: var(--fw-bold);
}
.bcms-contact__submit:disabled {
cursor: not-allowed;
opacity: .55;
}
.bcms-contact__form-status {
margin: calc(-1 * var(--space-2)) 0 0;
}
.bcms-contact__map-panel {
display: grid;
grid-template-rows: minmax(460px, 1fr) auto;
background: var(--color-white);
}
.bcms-contact__map iframe {
display: block;
width: 100%;
height: 100%;
min-height: 460px;
border: 0;
}
.bcms-contact__location {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
align-items: center;
padding: var(--space-6) var(--space-6);
border-block-start: 1px solid var(--color-border);
}
.bcms-contact__location-icon {
display: grid;
width: 42px;
height: 42px;
place-items: center;
color: var(--color-white);
background: var(--color-heading);
border-radius: var(--radius-pill);
}
.bcms-contact__location > div {
display: grid;
gap: 3px;
}
.bcms-contact__location > div span {
color: var(--color-text-muted);
font-size: var(--fs-12);
}
.bcms-contact__location > div strong {
font-size: var(--fs-13);
}
.bcms-contact__location > a {
grid-column: 2;
display: inline-flex;
gap: var(--space-2);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
text-decoration: none;
}
.bcms-contact__specialist {
padding-block: 0 clamp(72px, 9vw, 118px);
}
.bcms-contact__specialist-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5);
}
.bcms-contact__specialist-grid > a {
display: grid;
gap: var(--space-2);
padding: var(--space-7);
color: var(--color-heading);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
text-decoration: none;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.bcms-contact__specialist-grid > a:hover {
color: var(--color-heading);
border-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.bcms-contact__specialist-grid span {
color: var(--color-text-muted);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-contact__specialist-grid strong {
overflow-wrap: anywhere;
font-size: var(--fs-20);
}
.bcms-contact__specialist-grid em {
margin-block-start: var(--space-3);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-style: normal;
font-weight: var(--fw-bold);
}
[dir="rtl"] .bcms-contact__card-action span,
[dir="rtl"] .bcms-contact__specialist-grid em,
[dir="rtl"] .bcms-contact__location > a span {
transform: scaleX(-1);
}
@media (max-width: 960px) {
.bcms-contact__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bcms-contact__connect-panel {
grid-template-columns: 1fr;
}
.bcms-contact__map-panel {
grid-template-rows: minmax(350px, 1fr) auto;
}
.bcms-contact__map iframe {
min-height: 350px;
}
}
@media (max-width: 680px) {
.bcms-contact__intro-grid,
.bcms-contact__section-heading,
.bcms-contact__cards,
.bcms-contact__specialist-grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.bcms-contact__form-row {
grid-template-columns: 1fr;
}
.bcms-contact__card {
min-height: 215px;
}
}
@media (max-width: 480px) {
.bcms-contact__container {
width: min(100% - 28px, 1160px);
}
.bcms-contact__summary {
gap: var(--space-6);
}
.bcms-contact__connect-panel,
.bcms-contact__card,
.bcms-contact__specialist-grid > a {
border-radius: var(--radius-md);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-contact__card,
.bcms-contact__field input,
.bcms-contact__field textarea,
.bcms-contact__specialist-grid > a {
transition: none;
}
.bcms-contact__card:hover,
.bcms-contact__specialist-grid > a:hover {
transform: none;
}
}
.bcms-newsletter__format > span,
.bcms-newsletter__view > span:first-child {
display: grid;
place-items: center;
width: 34px;
height: 26px;
border-radius: var(--radius-sm);
background: var(--color-primary-light);
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-newsletter__view {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: var(--space-2);
min-height: 42px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
background: var(--color-primary-dark);
color: var(--color-white);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
transition: background 200ms ease, transform 200ms ease;
}
.bcms-newsletter__view:hover {
transform: translateY(-2px);
background: var(--color-heading);
}
.bcms-newsletter__view:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
.bcms-newsletter__notice {
display: grid;
grid-template-columns: 34px 1fr;
gap: var(--space-4);
margin-top: var(--space-9);
padding: var(--space-6) var(--space-6);
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
border-radius: var(--radius-lg);
background: var(--color-white);
}
.bcms-newsletter__notice > span {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: var(--radius-pill);
background: var(--color-primary-dark);
color: var(--color-white);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.bcms-newsletter__notice h2 {
margin: 0 0 var(--space-1);
color: var(--color-heading);
font-size: var(--fs-16);
}
.bcms-newsletter__notice p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-12);
line-height: 1.7;
}
@media (max-width: 900px) {
.bcms-newsletter__intro,
.bcms-newsletter__archive-heading {
grid-template-columns: 1fr;
gap: var(--space-7);
}
.bcms-newsletter__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bcms-newsletter__card--featured {
grid-column: 1 / -1;
}
}
@media (max-width: 620px) {
.bcms-newsletter__container {
width: min(100% - 32px, 1240px);
}
.bcms-newsletter__introduction,
.bcms-newsletter__archive {
padding-block: var(--space-10);
}
.bcms-newsletter__intro-copy {
padding-inline-start: var(--space-5);
}
.bcms-newsletter__archive-summary {
grid-template-columns: 1fr;
}
.bcms-newsletter__grid {
grid-template-columns: 1fr;
}
.bcms-newsletter__card,
.bcms-newsletter__card--featured {
grid-column: auto;
grid-template-columns: 1fr;
grid-template-rows: 220px 1fr;
}
.bcms-newsletter__cover {
min-height: 220px;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-newsletter__year-tab,
.bcms-newsletter__year-panel.is-active,
.bcms-newsletter__card,
.bcms-newsletter__view {
transition: none;
animation: none;
}
.bcms-newsletter__card:hover,
.bcms-newsletter__view:hover {
transform: none;
}
}
@media (max-width: 720px) {
.bcms-packages__intro-card {
min-height: auto;
padding: var(--space-8) var(--space-6);
border-radius: var(--radius-lg);
}
.bcms-packages__intro-content h2 {
font-size: var(--fs-h2);
}
.bcms-packages__intro-actions,
.bcms-packages__toolbar {
align-items: stretch;
grid-template-columns: 1fr;
}
.bcms-packages__intro-actions {
flex-direction: column;
}
.bcms-packages__primary-link {
align-self: stretch;
}
.bcms-packages__visual {
min-height: 270px;
}
.bcms-packages__health-card {
padding: var(--space-5);
}
.bcms-packages__toolbar {
gap: var(--space-7);
}
.bcms-packages__cta {
grid-template-columns: 1fr;
padding: var(--space-7);
}
.bcms-packages__cta a {
justify-self: start;
}
}
@media (max-width: 560px) {
.bcms-packages__container {
width: min(100% - 32px, 1240px);
}
.bcms-packages__intro {
padding-block: var(--space-9);
}
.bcms-packages__health-card-footer {
gap: var(--space-2);
}
.bcms-packages__grid {
grid-template-columns: 1fr;
}
.bcms-packages__card {
min-height: 360px;
padding: var(--space-6);
}
.bcms-packages__cta a {
justify-self: stretch;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-packages__pulse path {
animation: none;
stroke-dashoffset: 0;
}
.bcms-packages__primary-link,
.bcms-packages__card,
.bcms-packages__card::before,
.bcms-packages__card-media img,
.bcms-packages__filters button,
.bcms-packages__cta a {
transition: none;
}
.bcms-packages__primary-link:hover,
.bcms-packages__card:hover {
transform: none;
}
}
/* ============================================================
Corporate Governance — DearFlip Flipbook
============================================================ */
.bcms-flipbook {
box-sizing: border-box;
width: 100%;
padding: var(--space-11) 6vw;
background: var(--color-background);
}
.bcms-flipbook *,
.bcms-flipbook *::before,
.bcms-flipbook *::after {
box-sizing: border-box;
}
.bcms-flipbook__container {
width: min(100% - 40px, 960px);
margin-inline: auto;
}
.bcms-flipbook__header {
text-align: center;
margin-bottom: var(--space-8);
}
.bcms-flipbook__accent {
display: inline-block;
width: 40px;
height: 3px;
margin-bottom: var(--space-4);
background: var(--color-secondary);
}
.bcms-flipbook__header h2 {
margin: 0 0 var(--space-2);
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
color: var(--color-heading);
}
.bcms-flipbook__header p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-15);
}
.bcms-flipbook__stage {
width: 100%;
}
.bcms-flipbook__stage .df-outer {
margin-inline: auto;
}
@media (max-width: 640px) {
.bcms-flipbook {
padding: var(--space-10) 5vw;
}
.bcms-flipbook__container {
width: min(100% - 24px, 960px);
}
}
/* ============================================================
Departments Directory — Modern Editorial Layout
============================================================ */
.bcms-dept {
width: min(100% - 48px, 1360px);
max-width: none;
margin-inline: auto;
padding: clamp(76px, 8vw, 120px) 0 clamp(88px, 10vw, 144px);
background: var(--color-white);
}
.bcms-dept__head {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
align-items: end;
gap: clamp(36px, 7vw, 104px);
max-width: none;
margin: 0 0 clamp(48px, 6vw, 72px);
text-align: start;
}
.bcms-dept__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
line-height: 1.2;
text-transform: uppercase;
}
.bcms-dept__eyebrow::before {
width: 28px;
height: 2px;
background: currentColor;
content: '';
}
.bcms-dept__heading {
max-width: 720px;
color: var(--color-heading);
font-size: var(--fs-h2);
font-weight: var(--fw-semibold);
letter-spacing: -0.045em;
line-height: 1.06;
text-wrap: balance;
}
.bcms-dept__head-copy {
padding-inline-start: clamp(0px, 2vw, 28px);
border-inline-start: 1px solid var(--color-border);
}
.bcms-dept__intro {
max-width: 54ch;
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.75;
}
.bcms-dept__result {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin: var(--space-6) 0 0;
color: var(--color-text-muted);
font-size: var(--fs-13);
font-weight: var(--fw-semibold);
}
.bcms-dept__result span {
color: var(--color-primary-dark);
font-family: var(--font-body);
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
line-height: 1;
}
.bcms-dept__controls {
display: grid;
grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
align-items: center;
gap: var(--space-6);
margin-bottom: var(--space-8);
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-primary-light) 50%, transparent);
box-shadow: var(--shadow-md);
}
.bcms-dept__search {
flex-basis: auto;
max-width: none;
min-height: 54px;
padding: 0 var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
color: var(--color-primary-dark);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.bcms-dept__search:focus-within {
border-color: var(--color-primary);
box-shadow: var(--shadow-ring);
}
.bcms-dept .bcms-dept__search input {
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
font-size: var(--fs-14);
}
.bcms-dept__filters {
gap: var(--space-2);
justify-content: flex-end;
}
.bcms-dept__filter {
min-height: 42px;
padding: var(--space-2) var(--space-4);
border: 1px solid transparent;
background: transparent;
color: var(--color-text-muted);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
white-space: nowrap;
}
.bcms-dept__filter:hover {
border-color: var(--color-border);
background: var(--color-white);
color: var(--color-heading);
}
.bcms-dept__filter.is-active {
border-color: var(--color-primary);
background: var(--color-primary-dark);
color: var(--color-white);
box-shadow: var(--shadow-sm);
}
.bcms-dept__filter span {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
margin-inline-start: var(--space-2);
padding-inline: var(--space-1);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-white) 20%, transparent);
font-size: var(--fs-12);
}
.bcms-dept__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(22px, 2.5vw, 34px);
}
.bcms-dept__card {
position: relative;
min-width: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.bcms-dept__icon {
position: relative;
aspect-ratio: 16 / 10;
}
.bcms-dept__icon::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--color-heading) 35%, transparent) 100%);
content: '';
pointer-events: none;
}
.bcms-dept__icon img {
transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bcms-dept__category {
position: absolute;
z-index: 1;
inset-inline-start: 18px;
inset-block-end: 16px;
padding: var(--space-2) var(--space-3);
border: 1px solid color-mix(in srgb, var(--color-white) 38%, transparent);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-white) 90%, transparent);
backdrop-filter: blur(8px);
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
}
.bcms-dept__body {
gap: var(--space-3);
padding: clamp(24px, 2.5vw, 32px);
}
.bcms-dept__name {
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h5);
font-weight: var(--fw-semibold);
letter-spacing: -0.025em;
line-height: 1.25;
}
.bcms-dept__desc {
margin: 0 0 var(--space-4);
font-size: var(--fs-14);
line-height: 1.7;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.bcms-dept__card-btn {
gap: var(--space-3);
margin-top: auto;
padding: 0;
border-radius: 0;
background: transparent;
color: var(--color-primary-dark);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
}
.bcms-dept__card-btn svg {
transition: transform var(--transition-fast);
}
@media (hover: hover) and (pointer: fine) {
.bcms-dept__card:hover {
border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
box-shadow: var(--shadow-lg);
transform: translateY(-6px);
}
.bcms-dept__card:hover .bcms-dept__icon img {
transform: scale(1.045);
}
.bcms-dept__card:hover .bcms-dept__card-btn {
gap: var(--space-3);
background: transparent;
color: var(--color-primary-dark);
}
.bcms-dept__card:hover .bcms-dept__card-btn svg {
transform: translateX(4px);
}
}
[dir="rtl"] .bcms-dept__heading,
[dir="rtl"] .bcms-dept__category {
letter-spacing: normal;
}
[dir="rtl"] .bcms-dept__card-btn svg {
transform: scaleX(-1);
}
.bcms-dept__empty {
margin: var(--space-6) 0 0;
padding: var(--space-10) var(--space-6);
border: 1px dashed color-mix(in srgb, var(--color-text-muted) 40%, transparent);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-primary-light) 50%, transparent);
}
.bcms-dept__empty[hidden] {
display: none;
}
@media (max-width: 1100px) {
.bcms-dept__head {
grid-template-columns: 1fr 0.75fr;
}
.bcms-dept__controls {
grid-template-columns: 1fr;
}
.bcms-dept__filters {
justify-content: flex-start;
}
}
@media (max-width: 820px) {
.bcms-dept {
width: min(100% - 36px, 1360px);
}
.bcms-dept__head {
grid-template-columns: 1fr;
gap: var(--space-7);
}
.bcms-dept__head-copy {
max-width: 620px;
padding-block-start: var(--space-6);
padding-inline-start: 0;
border-block-start: 1px solid var(--color-border);
border-inline-start: 0;
}
.bcms-dept__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.bcms-dept {
width: min(100% - 28px, 1360px);
padding-block-start: var(--space-10);
}
.bcms-dept__heading {
font-size: var(--fs-h2);
}
.bcms-dept__controls {
gap: var(--space-4);
padding: var(--space-3);
border-radius: var(--radius-lg);
}
.bcms-dept__filters {
flex-wrap: nowrap;
overflow-x: auto;
margin-inline: calc(-1 * var(--space-3));
padding: 2px var(--space-3) var(--space-2);
scrollbar-width: none;
scroll-snap-type: inline proximity;
}
.bcms-dept__filters::-webkit-scrollbar {
display: none;
}
.bcms-dept__filter {
flex: 0 0 auto;
scroll-snap-align: start;
}
.bcms-dept__grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
Board of Directors — Modern Editorial Portraits
============================================================ */
.bcms-team-pro {
--btp-transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
padding: clamp(80px, 9vw, 132px) 6vw clamp(96px, 11vw, 156px);
background: linear-gradient(180deg, var(--color-background) 0%, var(--color-white) 38%, var(--color-white) 100%);
}
.bcms-team-pro__header {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
align-items: end;
gap: clamp(40px, 8vw, 120px);
max-width: var(--container-width);
margin: 0 auto clamp(52px, 7vw, 84px);
}
.bcms-team-pro__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
line-height: 1.2;
text-transform: uppercase;
}
.bcms-team-pro__eyebrow::before {
width: 30px;
height: 2px;
background: currentColor;
content: '';
}
.bcms-team-pro__heading {
max-width: 700px;
margin: 0;
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h2);
font-weight: var(--fw-semibold);
letter-spacing: -0.05em;
line-height: 1.04;
text-wrap: balance;
}
.bcms-team-pro__header-copy {
padding-inline-start: clamp(0px, 2.5vw, 34px);
border-inline-start: 1px solid var(--color-border);
}
.bcms-team-pro__header-copy p {
max-width: 54ch;
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.75;
}
.bcms-team-pro__count {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin-top: var(--space-6);
color: var(--color-text-muted);
font-size: var(--fs-13);
font-weight: var(--fw-semibold);
}
.bcms-team-pro__count strong {
color: var(--color-primary-dark);
font-family: var(--font-body);
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
line-height: 1;
}
.bcms-team-pro__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
justify-content: stretch;
gap: clamp(22px, 2.6vw, 36px);
max-width: var(--container-width);
margin-inline: auto;
}
.bcms-team-pro__card {
position: relative;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow-md);
transition: border-color var(--btp-transition), box-shadow var(--btp-transition), transform var(--btp-transition);
animation: bcms-team-pro-in 650ms both cubic-bezier(0.22, 1, 0.36, 1);
}
.bcms-team-pro__card:nth-child(2) { animation-delay: 70ms; }
.bcms-team-pro__card:nth-child(3) { animation-delay: 140ms; }
.bcms-team-pro__card:nth-child(4) { animation-delay: 210ms; }
.bcms-team-pro__card:nth-child(n + 5) { animation-delay: 280ms; }
.bcms-team-pro__card--lead {
grid-column: span 2;
display: grid;
grid-template-columns: minmax(220px, 0.9fr) minmax(220px, 1.1fr);
align-items: stretch;
}
.bcms-team-pro__photo {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
background: linear-gradient(145deg, var(--color-primary-light), var(--color-background-alt));
filter: none;
}
.bcms-team-pro__card--lead .bcms-team-pro__photo {
aspect-ratio: auto;
min-height: 390px;
}
.bcms-team-pro__photo::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--color-heading) 20%, transparent) 100%);
content: '';
pointer-events: none;
}
.bcms-team-pro__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1), filter var(--btp-transition);
}
.bcms-team-pro__index {
position: absolute;
z-index: 1;
inset-inline-start: 16px;
inset-block-start: 16px;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid color-mix(in srgb, var(--color-white) 55%, transparent);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-white) 88%, transparent);
backdrop-filter: blur(8px);
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.06em;
}
.bcms-team-pro__info {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-width: 0;
padding: clamp(24px, 2.5vw, 32px);
text-align: start;
}
.bcms-team-pro__card--lead .bcms-team-pro__info {
padding: clamp(30px, 4vw, 52px);
}
.bcms-team-pro__accent {
display: block;
width: 38px;
height: 2px;
margin-bottom: var(--space-4);
background: var(--color-secondary);
transition: width var(--btp-transition);
}
.bcms-team-pro__info h3 {
margin: 0 0 var(--space-2);
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h5);
font-weight: var(--fw-semibold);
letter-spacing: -0.025em;
line-height: 1.25;
}
.bcms-team-pro__card--lead .bcms-team-pro__info h3 {
font-size: var(--fs-h3);
}
.bcms-team-pro__info p {
margin: 0;
color: var(--color-primary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.11em;
line-height: 1.45;
text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
.bcms-team-pro__card:hover {
border-color: color-mix(in srgb, var(--color-primary) 32%, transparent);
box-shadow: var(--shadow-lg);
transform: translateY(-6px);
}
.bcms-team-pro__card:hover .bcms-team-pro__photo img {
transform: scale(1.045);
}
.bcms-team-pro__card:hover .bcms-team-pro__accent {
width: 60px;
}
}
@keyframes bcms-team-pro-in {
from {
opacity: 0;
transform: translateY(22px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
[dir="rtl"] .bcms-team-pro__heading,
[dir="rtl"] .bcms-team-pro__eyebrow,
[dir="rtl"] .bcms-team-pro__info h3,
[dir="rtl"] .bcms-team-pro__info p {
letter-spacing: normal;
}
@media (max-width: 1080px) {
.bcms-team-pro__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bcms-team-pro__card--lead {
grid-column: span 3;
}
}
@media (max-width: 780px) {
.bcms-team-pro__header {
grid-template-columns: 1fr;
gap: var(--space-7);
}
.bcms-team-pro__header-copy {
max-width: 620px;
padding-block-start: var(--space-6);
padding-inline-start: 0;
border-block-start: 1px solid var(--color-border);
border-inline-start: 0;
}
.bcms-team-pro__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bcms-team-pro__card--lead {
grid-column: span 2;
}
}
@media (max-width: 580px) {
.bcms-team-pro {
padding-inline: var(--space-5);
}
.bcms-team-pro__heading {
font-size: var(--fs-h2);
}
.bcms-team-pro__grid {
grid-template-columns: 1fr;
max-width: 390px;
}
.bcms-team-pro__card--lead {
grid-column: auto;
grid-template-columns: 1fr;
}
.bcms-team-pro__card--lead .bcms-team-pro__photo {
aspect-ratio: 4 / 5;
min-height: 0;
}
.bcms-team-pro__card--lead .bcms-team-pro__info {
padding: var(--space-7);
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-team-pro__card {
animation: none;
transition: none;
}
.bcms-team-pro__photo img,
.bcms-team-pro__accent {
transition: none;
}
}
/* ============================================================
About Page — Cohesive Editorial Experience
============================================================ */
.bcms-about-page {
background: var(--color-white);
}
.bcms-about-page :where(#about-story, #about-purpose, #about-leadership, #about-board) {
scroll-margin-top: 110px;
}
.bcms-about-nav {
position: relative;
z-index: 5;
border-block-end: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-white) 96%, transparent);
backdrop-filter: blur(12px);
}
.bcms-about-nav__inner {
display: flex;
align-items: center;
gap: var(--space-2);
width: min(100% - 40px, var(--container-width));
min-height: 72px;
margin-inline: auto;
}
.bcms-about-nav__label {
margin-inline-end: auto;
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.13em;
text-transform: uppercase;
}
.bcms-about-nav a {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-pill);
color: var(--color-text-muted);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
white-space: nowrap;
transition: color var(--transition-fast), background-color var(--transition-fast);
}
.bcms-about-nav a:hover,
.bcms-about-nav a:focus-visible {
background: var(--color-primary-light);
color: var(--color-primary-dark);
}
.bcms-about-page .bcms-about-intro__inner {
grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
gap: clamp(56px, 8vw, 116px);
max-width: var(--container-width);
padding-block-start: clamp(88px, 10vw, 140px);
}
.bcms-about-page .bcms-about-intro__title {
max-width: 720px;
font-size: var(--fs-h2);
font-weight: var(--fw-semibold);
letter-spacing: -0.05em;
line-height: 1.04;
}
.bcms-about-page .bcms-about-intro__text {
max-width: 60ch;
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.78;
}
.bcms-about-page .bcms-about-intro__portrait {
min-height: 720px;
border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-sm);
box-shadow: var(--shadow-lg);
}
.bcms-about-page .bcms-about-intro__small-media {
max-width: 520px;
margin-block-end: calc(-1 * var(--space-12));
border-width: 7px;
border-radius: var(--radius-lg);
}
.bcms-about-page .bcms-about-intro__features {
gap: var(--space-7);
}
.bcms-about-page .bcms-about-intro__feature {
padding-inline: 0 var(--space-6);
}
.bcms-about-page .bcms-about-intro__feature-icon {
width: 54px;
height: 54px;
border-radius: var(--radius-pill);
}
.bcms-about-page .bcms-about-intro__band {
height: 116px;
margin-block-start: var(--space-10);
background: var(--color-heading);
}
.bcms-about-page .bcms-about-content {
padding-block: clamp(76px, 9vw, 120px);
}
.bcms-about-page .bcms-about-content__inner {
max-width: 920px;
font-size: var(--fs-16);
line-height: 1.85;
}
.bcms-about-page .bcms-inst {
padding-block: clamp(84px, 10vw, 144px);
background:
linear-gradient(180deg, color-mix(in srgb, var(--color-primary-light) 50%, transparent) 0%, var(--color-white) 24%, var(--color-white) 100%);
}
.bcms-about-page .bcms-inst > .bcms-container {
width: min(100% - 48px, var(--container-width));
}
.bcms-about-page .bcms-inst__intro {
grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
gap: clamp(52px, 7vw, 96px);
padding: var(--space-6) 0 clamp(96px, 10vw, 140px);
}
.bcms-about-page .bcms-inst__heading {
max-width: 760px;
font-size: var(--fs-h2);
font-weight: var(--fw-semibold);
letter-spacing: -0.045em;
line-height: 1.06;
}
.bcms-about-page .bcms-inst__intro-text p {
max-width: 66ch;
font-size: var(--fs-16);
line-height: 1.8;
}
.bcms-about-page .bcms-inst__collage-main {
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.bcms-about-page .bcms-inst__collage-sub {
inset-inline-start: -52px;
inset-block-end: -42px;
border-width: 7px;
border-radius: var(--radius-lg);
}
[dir="rtl"] .bcms-about-page .bcms-inst__collage-sub {
inset-inline-start: auto;
inset-inline-end: -52px;
}
.bcms-about-page .bcms-inst__collage-badge {
inset-block-start: -28px;
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-lg);
background: var(--color-primary-dark);
}
.bcms-about-page .bcms-inst__ticker {
margin-bottom: clamp(88px, 10vw, 132px);
padding-block: var(--space-5);
border-radius: var(--radius-lg);
}
.bcms-about-page .bcms-inst__mv {
gap: clamp(32px, 5vw, 72px);
margin-bottom: clamp(88px, 10vw, 132px);
padding: clamp(42px, 6vw, 72px);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.bcms-about-page .bcms-inst__mv-card {
min-height: 250px;
padding: clamp(26px, 3.5vw, 44px);
border: 1px solid transparent;
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-primary-light) 50%, transparent);
}
.bcms-about-page .bcms-inst__mv-card:last-child {
background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
}
.bcms-about-page .bcms-inst__mv-card p {
font-size: var(--fs-h4);
font-style: normal;
line-height: 1.5;
}
.bcms-about-page .bcms-inst__section-head {
max-width: 760px;
margin-bottom: var(--space-9);
}
.bcms-about-page .bcms-inst__section-head h3 {
font-size: var(--fs-h3);
line-height: 1.16;
}
.bcms-about-page .bcms-inst__values {
padding-bottom: clamp(96px, 10vw, 132px);
}
.bcms-about-page .bcms-inst__values-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5);
}
.bcms-about-page .bcms-inst__value {
display: flex;
align-items: center;
gap: var(--space-4);
min-height: 112px;
padding: var(--space-6);
border-radius: var(--radius-lg);
text-align: start;
}
.bcms-about-page .bcms-inst__value-icon {
flex: 0 0 auto;
margin: 0;
}
.bcms-about-page .bcms-inst__value h4 {
margin: 0;
font-size: var(--fs-16);
}
.bcms-about-page .bcms-inst__stats {
position: relative;
overflow: hidden;
grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.5fr);
gap: clamp(40px, 6vw, 84px);
margin-bottom: clamp(96px, 11vw, 144px);
padding: clamp(48px, 6vw, 78px);
border-radius: var(--radius-xl);
background: var(--color-heading);
}
.bcms-about-page .bcms-inst__stats::after {
position: absolute;
inset-inline-end: -120px;
inset-block-end: -180px;
width: 420px;
height: 420px;
border: 1px solid color-mix(in srgb, var(--color-white) 9%, transparent);
border-radius: var(--radius-pill);
box-shadow: none;
content: '';
pointer-events: none;
}
.bcms-about-page .bcms-inst__stats > * {
position: relative;
z-index: 1;
}
.bcms-about-page .bcms-inst__stat {
padding-inline-start: var(--space-5);
border-inline-start: 1px solid color-mix(in srgb, var(--color-white) 22%, transparent);
border-left: 0;
}
.bcms-about-page .bcms-inst__stat-num {
font-size: var(--fs-h2);
}
.bcms-about-page .bcms-inst__sticky {
grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
gap: clamp(48px, 8vw, 112px);
padding-bottom: var(--space-6);
}
.bcms-about-page .bcms-inst__sticky-pin {
top: 112px;
}
.bcms-about-page .bcms-inst__sticky-pin h3 {
font-size: var(--fs-h3);
line-height: 1.1;
}
.bcms-about-page .bcms-inst__pillar {
min-height: 230px;
padding: clamp(32px, 4vw, 48px);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.bcms-about-page .bcms-inst__pillar h4 {
font-size: var(--fs-h4);
}
.bcms-about-page .bcms-mgmt {
width: min(100% - 48px, var(--container-width));
max-width: none;
margin-inline: auto;
padding: clamp(92px, 10vw, 144px) 0;
background: var(--color-white);
}
.bcms-about-page .bcms-team-pro {
border-block-start: 1px solid var(--color-border);
background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-light) 50%, transparent), var(--color-white) 34%);
}
[dir="rtl"] .bcms-about-nav__label {
letter-spacing: normal;
}
@media (max-width: 980px) {
.bcms-about-page .bcms-about-intro__inner,
.bcms-about-page .bcms-inst__intro {
grid-template-columns: 1fr;
}
.bcms-about-page .bcms-about-intro__portrait {
grid-row: 1;
min-height: 520px;
}
.bcms-about-page .bcms-inst__collage {
max-width: 760px;
margin-inline: auto;
}
.bcms-about-page .bcms-inst__stats,
.bcms-about-page .bcms-inst__sticky {
grid-template-columns: 1fr;
}
.bcms-about-page .bcms-inst__sticky-pin {
position: static;
}
}
@media (max-width: 720px) {
.bcms-about-nav {
overflow-x: auto;
scrollbar-width: none;
}
.bcms-about-nav::-webkit-scrollbar {
display: none;
}
.bcms-about-nav__inner {
width: max-content;
min-width: 100%;
padding-inline: var(--space-4);
}
.bcms-about-nav__label {
display: none;
}
.bcms-about-page .bcms-inst > .bcms-container,
.bcms-about-page .bcms-mgmt {
width: min(100% - 32px, var(--container-width));
}
.bcms-about-page .bcms-inst__values-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bcms-about-page .bcms-inst__stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.bcms-about-page .bcms-about-intro__inner {
padding-inline: var(--space-4);
}
.bcms-about-page .bcms-about-intro__portrait {
min-height: 380px;
border-radius: var(--radius-lg);
}
.bcms-about-page .bcms-about-intro__title {
font-size: var(--fs-h2);
}
.bcms-about-page .bcms-about-intro__small-media {
margin-block-end: 0;
}
.bcms-about-page .bcms-inst__collage-sub {
inset-inline-start: 12px;
inset-block-end: -30px;
}
[dir="rtl"] .bcms-about-page .bcms-inst__collage-sub {
inset-inline-start: auto;
inset-inline-end: 12px;
}
.bcms-about-page .bcms-inst__mv,
.bcms-about-page .bcms-inst__stats {
padding: var(--space-7) var(--space-6);
border-radius: var(--radius-lg);
}
.bcms-about-page .bcms-inst__values-grid {
grid-template-columns: 1fr;
}
.bcms-about-page .bcms-inst__value {
min-height: 96px;
}
}
@media (prefers-reduced-motion: reduce) {
.bcms-about-page {
scroll-behavior: auto;
}
}
/* ============================================================
Plan Your Visit
============================================================ */
.bcms-visit { background: var(--color-white); }
.bcms-visit__container { width: min(1240px, calc(100% - 12vw)); margin-inline: auto; }
.bcms-visit__welcome { padding-block: clamp(64px, 8vw, 112px); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 28rem), var(--color-white); }
.bcms-visit__welcome-grid { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(440px, 1.15fr); gap: clamp(40px, 7vw, 96px); align-items: start; }
.bcms-visit__heading { position: sticky; top: 120px; }
.bcms-visit__eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-5); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: 1.8px; text-transform: uppercase; color: var(--color-secondary-dark); }
.bcms-visit__eyebrow::before { content: ""; width: 32px; height: 1px; background: currentcolor; }
.bcms-visit h2 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: 1.12; letter-spacing: -.035em; color: var(--color-heading); }
.bcms-visit__accent { display: block; width: 56px; height: 4px; margin-block-start: var(--space-6); border-radius: var(--radius-pill); background: var(--color-secondary); }
.bcms-visit__copy { padding-inline-start: clamp(24px, 4vw, 48px); border-inline-start: 1px solid color-mix(in srgb, var(--color-heading) 13%, transparent); }
.bcms-visit__copy p { margin: 0 0 var(--space-5); font-size: var(--fs-16); line-height: 1.9; color: var(--color-text-muted); }
.bcms-visit__inline-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-7); margin-block-start: var(--space-7); }
.bcms-visit__inline-links a { display: inline-flex; align-items: center; gap: var(--space-2); padding-block-end: var(--space-1); border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 40%, transparent); font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--color-heading); }
.bcms-visit__inline-links a:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.bcms-visit__guide { padding-block-start: 0; padding-block-end: clamp(72px, 9vw, 120px); background: var(--color-white); }
.bcms-visit__contact { padding-block: clamp(64px, 8vw, 104px); background: var(--color-background); }
.bcms-visit__contact-heading { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, .65fr); gap: var(--space-8); align-items: end; margin-block-end: clamp(36px, 5vw, 56px); }
.bcms-visit__contact-heading p { margin: 0; font-size: var(--fs-16); color: var(--color-text-muted); }
.bcms-visit__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.bcms-visit__card { position: relative; display: flex; min-height: 230px; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 34px); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease; }
.bcms-visit__card::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--color-primary); transform: scaleX(0); transform-origin: var(--transform-origin-start); transition: transform 250ms ease; }
.bcms-visit__card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--color-text-muted) 40%, transparent); box-shadow: var(--shadow-md); }
.bcms-visit__card:hover::after { transform: scaleX(1); }
.bcms-visit__icon { display: grid; width: 54px; height: 54px; place-items: center; margin-block-end: var(--space-7); border-radius: var(--radius-lg); background: var(--color-primary-light); color: var(--color-primary-dark); }
.bcms-visit__icon svg { width: 23px; height: 23px; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bcms-visit__card-content { display: flex; min-width: 0; flex-direction: column; }
.bcms-visit__card-label { margin-block-end: var(--space-2); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-secondary-dark); }
.bcms-visit__card strong { font-size: var(--fs-22); line-height: 1.35; color: var(--color-heading); }
.bcms-visit__card small { display: block; margin-block-start: var(--space-2); overflow-wrap: anywhere; font-size: var(--fs-13); line-height: 1.55; color: var(--color-text-muted); }
.bcms-visit__arrow { position: absolute; top: 30px; inset-inline-end: 30px; font-size: var(--fs-20); color: var(--color-text-muted); transition: color 200ms ease, transform 200ms ease; }
.bcms-visit__card:hover .bcms-visit__arrow { color: var(--color-primary); transform: translate(2px, -2px); }
.bcms-visit__appointment { display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); margin-block-start: var(--space-6); padding: clamp(24px, 3.5vw, 40px); border-radius: var(--radius-lg); background: var(--color-heading); color: var(--color-white); }
.bcms-visit__appointment div { display: flex; flex-direction: column; gap: var(--space-1); }
.bcms-visit__appointment div span { font-size: var(--fs-13); color: var(--color-secondary-light); }
.bcms-visit__appointment div strong { font-size: var(--fs-h5); line-height: 1.35; }
.bcms-visit__appointment a { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: var(--space-3); padding-inline: var(--space-6); border-radius: var(--radius-pill); font-size: var(--fs-14); font-weight: var(--fw-bold); white-space: nowrap; }
@media (max-width: 900px) {
.bcms-visit__welcome-grid, .bcms-visit__contact-heading { grid-template-columns: 1fr; gap: var(--space-7); }
.bcms-visit__heading { position: static; }
.bcms-visit__copy { padding-inline-start: var(--space-6); }
.bcms-visit__actions { grid-template-columns: 1fr; }
.bcms-visit__card { min-height: 0; }
}
@media (max-width: 600px) {
.bcms-visit__container { width: min(calc(100% - 40px), 1240px); }
.bcms-visit__copy { padding-inline-start: 0; border-inline-start: 0; }
.bcms-visit__appointment { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.bcms-visit__card, .bcms-visit__card::after, .bcms-visit__arrow { transition: none; }
}
/* Health package cards — pastel split-card layout. */
.bcms-packages__card::before,
.bcms-packages__card-media {
display: none;
}
@media (max-width: 760px) {
.bcms-packages__grid { grid-template-columns: 1fr; }
}
/* Health package cards — image-led booking card treatment. */
.bcms-packages__card,
.bcms-packages__card--image {
padding: 0;
border: 0;
background: var(--color-heading);
isolation: isolate;
}
.bcms-packages__card-media {
display: block;
position: absolute;
z-index: 0;
inset: 0;
}
.bcms-packages__card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.bcms-packages__card:hover {
border-color: transparent;
}
@media (max-width: 1080px) {
.bcms-packages__card, .bcms-packages__card--image { min-height: 520px; }
}
@media (max-width: 760px) {
.bcms-packages__card, .bcms-packages__card--image { min-height: 500px; }
}
/* Supplied listing-card proportions and spacing. */
.bcms-packages__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-7);
}
.bcms-packages__card,
.bcms-packages__card--image {
min-height: 0;
aspect-ratio: 3 / 4.2;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.bcms-packages__card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.bcms-packages__card-media::after {
background: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--color-heading) 55%, transparent) 62%, color-mix(in srgb, var(--color-heading) 92%, transparent) 100%);
}
@media (max-width: 1080px) {
.bcms-packages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.bcms-packages__grid { grid-template-columns: minmax(0, 360px); justify-content: center; }
.bcms-packages__card, .bcms-packages__card--image { aspect-ratio: 3 / 4.2; min-height: 0; }
}
/* ==========================================================================
Content visible by default (audit A3)
Sections used to start at opacity 0 and wait for a scroll observer, so
content stayed hidden if JavaScript failed and Lighthouse found no LCP.
Reveal effects are removed; slider transitions keep their own states.
========================================================================== */
.bcms-hero__content,
.bcms-hero__doctors,
.bcms-carex__card,
.bcms-heal__text,
.bcms-heal__media,
.bcms-news__card,
.bcms-about-intro__feature,
.bcms-about-pillars__card,
.bcms-inst__heading .bcms-inst__word,
.bcms-inst__value,
.bcms-inst__stat,
[data-reveal][data-reveal] {
opacity: 1;
transform: none;
animation: none;
}
/* ==========================================================================
Mobile header actions (audit U1): Call and Book stay visible on phones;
Emergency, Ambulance and Search live in the mobile menu.
========================================================================== */
/* Numbers with a suffix (80+, 95%) keep their order in Arabic; theme.js
rewrites the text while counting up, so the isolation lives in CSS. */
.bcms-inst__stat-num {
direction: ltr;
unicode-bidi: isolate;
}
/* ============================================================
AA overrides (polish pass). Contexts a rule-level colour pass cannot
see, found with the contrast scan (C:/ibnalnafees-qa/tools/
polish-contrast.js). Every value is a token.
============================================================ */
/* Gold labels on navy panels: the light gold (about 11:1). */
.bcms-package-detail__hero .bcms-package-detail__type,
.bcms-podcast-detail__masthead .bcms-podcast__episode-label {
color: var(--color-secondary-light);
}
/* The currency after a price follows the price colour. */
/* Plan Your Visit "Book" button inside the navy panel. */
.bcms-visit__appointment a {
background: var(--color-primary-dark);
color: var(--color-white);
}
.bcms-visit__appointment a:hover {
background: var(--color-primary-light);
color: var(--color-heading);
}
/* Count badge inside the active (dark green) department filter. */
.bcms-dept__filter.is-active span {
background: color-mix(in srgb, var(--color-heading) 30%, transparent);
}
/* News category tag over photos: solid dark green. */
.bcms-newsroom__tag {
background: var(--color-primary-dark);
}
/* Home hero doctor cards over the photo: a denser navy glass. */
.bcms-hero__doctor {
background: color-mix(in srgb, var(--color-heading) 66%, transparent);
}
.bcms-hero__doctor:hover {
background: color-mix(in srgb, var(--color-heading) 78%, transparent);
}
/* Muted grey is AA only on white / #F8FAFC; on the green tint it
becomes body text. */
.bcms-locations__item-sub,
.bcms-homecare__services-heading > p,
.bcms-package-detail__inquiry-copy > p,
.bcms-package-detail__note p,
.bcms-insurance__providers-heading > p,
.bcms-rights__tab,
.bcms-feedback__survey-note p,
.bcms-newsletter__archive-heading p,
.bcms-packages__cta p,
.bcms-newsletter__archive-summary span {
color: var(--color-text);
}
/* Home Care photo caption (navy): the light gold label. */
.bcms-homecare__care-card figcaption span {
color: var(--color-secondary-light);
}
/* Home hero: the slide arrows sat over the start of the text (72 px
from the edge vs text from 104 px at 1440); keep them at the edges. */
.bcms-hero__arrow--prev {
inset-inline-start: var(--space-4);
}
.bcms-hero__arrow--next {
inset-inline-end: var(--space-4);
}
/* Home hero text over the photo: mirrored scrim in Arabic, a stronger
flat scrim on phones (text runs the full width), 90 % white intro.
Measured with polish-hero-contrast.js (HOME_HERO=1). */
[dir="rtl"] .bcms-hero__overlay {
background: linear-gradient(245deg, color-mix(in srgb, var(--color-heading) 76%, transparent) 0%, color-mix(in srgb, var(--color-heading) 52%, transparent) 55%, color-mix(in srgb, var(--color-heading) 18%, transparent) 100%);
}
.bcms-hero__subtitle {
color: color-mix(in srgb, var(--color-white) 90%, transparent);
}
@media (max-width: 768px) {
.bcms-hero__overlay,
[dir="rtl"] .bcms-hero__overlay {
background:
linear-gradient(0deg, var(--scrim-strong) 0%, color-mix(in srgb, var(--color-heading) 62%, transparent) 55%, color-mix(in srgb, var(--color-heading) 40%, transparent) 100%);
}
}
/* One H1 size everywhere (the hero dropped to the H3 size under 480 px). */
@media (max-width: 480px) {
.bcms-hero__title {
font-size: var(--fs-h1);
}
}
/* ============================================================
Same everywhere (polish Step 5.3)
============================================================ */
/* Buttons: one size, weight and shape for every page-level action
(primary = dark green fill, secondary = outline, call = navy; colours
set per component above and AA-checked). Padding stays per layout. */
:is(.bcms-hero__cta, .bcms-hero__cta-secondary, .bcms-heal__cta, .bcms-about-intro__button, .bcms-doc__btn, .bcms-newsroom__more-btn,
.bcms-deptd__btn, .bcms-inst__btn, .bcms-homecare__cta, .bcms-rights__support-link, .bcms-packages__primary-link, .bcms-packages__cta > a,
.bcms-package-detail__form button[type="submit"], .bcms-feedback__form button[type="submit"], .bcms-podcast__button, .bcms-contact__submit,
.bcms-visit__appointment a) {
min-height: 48px;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: var(--fs-14);
font-weight: var(--fw-bold);
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
}
/* The light Home Care button had white text on its white fill. */
.bcms-homecare__cta--light {
color: var(--color-heading);
}
.bcms-homecare__cta--light:hover {
background: var(--color-primary-light);
border-color: var(--color-primary-light);
color: var(--color-heading);
}
/* Eyebrows and small section labels: one style (dark gold, AA). Labels
on dark panels keep their light colour through their own, more
specific rules. */
[class*="__eyebrow"] {
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
:is(.bcms-heal, .bcms-carex, .bcms-doctors, .bcms-locations, .bcms-news, .bcms-resources, .bcms-dept, .bcms-deptd, .bcms-newsroom, .bcms-facilities,
.bcms-visit__welcome, .bcms-chair, .bcms-feedback__introduction, .bcms-feedback__choices, .bcms-newsletter__introduction, .bcms-rights__intro-section,
.bcms-brochures__library, .bcms-contact__directory, .bcms-faqs__content, .bcms-testimonials__stories, .bcms-insurance__introduction,
.bcms-podcast__archive, .bcms-contact__connect, .bcms-faqs__intro, .bcms-contact__intro, .bcms-brochures__intro, .bcms-podcast__intro,
.bcms-testimonials__intro, .bcms-homecare__services, .bcms-feedback__survey, .bcms-podcast__latest, .bcms-podcast-detail__story,
.bcms-package-detail__inquiry) [class*="__eyebrow"] {
color: var(--color-secondary-dark);
}
/* One vertical rhythm: every original content section uses the same
block padding (64-104 px, tokens.css --section-space). */
:is(.bcms-heal, .bcms-carex, .bcms-doctors, .bcms-highlights, .bcms-locations, .bcms-news, .bcms-resources,
.bcms-dept, .bcms-deptd, .bcms-newsroom, .bcms-facilities, .bcms-inst, .bcms-team-pro, .bcms-chair, .bcms-flipbook,
.bcms-brochures__intro, .bcms-brochures__library, .bcms-brochures__help, .bcms-contact__intro, .bcms-contact__directory, .bcms-contact__connect,
.bcms-faqs__intro, .bcms-faqs__content, .bcms-packages__intro, .bcms-packages__directory, .bcms-package-detail__overview, .bcms-package-detail__inquiry,
.bcms-podcast__intro, .bcms-podcast__latest, .bcms-podcast__archive, .bcms-podcast-detail__story,
.bcms-testimonials__intro, .bcms-testimonials__stories, .bcms-testimonials__feedback,
.bcms-visit__welcome, .bcms-visit__contact, .bcms-feedback__introduction, .bcms-feedback__choices, .bcms-feedback__survey,
.bcms-newsletter__introduction, .bcms-newsletter__archive, .bcms-rights__intro-section, .bcms-rights__explorer, .bcms-rights__support,
.bcms-insurance__introduction, .bcms-insurance__providers, .bcms-homecare__overview, .bcms-homecare__services, .bcms-homecare__contact) {
padding-block: var(--section-space);
}
/* ============================================================
Cards (polish Step 6). Every card type keeps its own layout
(news, podcast, brochures, packages, facilities, home care,
doctors) and shares one base: radius, border, shadow, inner
padding, title and text styles (clamped), a fixed image ratio per
type, equal heights in a row, links and buttons on the bottom edge,
and one grid gap. The doctor and news cards set the pattern.
============================================================ */
/* Grid gaps */
:is(.bcms-news__cards, .bcms-newsroom__grid, .bcms-podcast__grid, .bcms-brochures__grid, .bcms-packages__grid,
.bcms-facilities__gallery, .bcms-homecare__services-grid, .bcms-doctor-dir__grid, .bcms-doctors__track) {
gap: var(--space-6);
}
/* Shell: radius, border, shadow; full height of its grid row */
:is(.bcms-news__card, .bcms-newsroom__card, .bcms-podcast__card, .bcms-brochures__card, .bcms-packages__card,
.bcms-facilities__item, .bcms-homecare__service-card, .bcms-doctors__card, .bcms-doctor-dir__card) {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
:is(.bcms-news__card, .bcms-newsroom__card, .bcms-podcast__card, .bcms-brochures__card, .bcms-packages__card,
.bcms-facilities__item, .bcms-homecare__service-card, .bcms-doctors__card, .bcms-doctor-dir__card):hover {
border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
box-shadow: var(--shadow-md);
}
:is(.bcms-news__card, .bcms-newsroom__card, .bcms-podcast__card, .bcms-brochures__card, .bcms-homecare__service-card,
.bcms-doctor-dir__card) {
display: flex;
flex-direction: column;
height: 100%;
}
.bcms-doctors__card,
.bcms-doctors__card-link {
display: flex;
flex-direction: column;
height: 100%;
}
/* Body: same padding; grows so links and buttons sit on the bottom edge */
:is(.bcms-news__card-body, .bcms-newsroom__card-body, .bcms-podcast__card-content, .bcms-brochures__card-content,
.bcms-homecare__service-content, .bcms-doctors__body, .bcms-doctor-dir__body) {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: var(--space-6);
}
.bcms-news__card-link {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
:is(.bcms-newsroom__link, .bcms-podcast__text-link, .bcms-brochures__action, .bcms-doctors__profile) {
margin-block-start: auto;
padding-block-start: var(--space-4);
color: var(--color-primary-dark);
font-size: var(--fs-14);
font-weight: var(--fw-bold);
}
/* Titles: one style, two lines at most */
/* Text: one style, three lines at most */
.bcms-podcast__guests {
color: var(--color-text);
font-weight: var(--fw-medium);
}
/* A fixed image ratio per card type */
.bcms-news__card-media img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.bcms-newsroom__card-media img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.bcms-podcast__card-media img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.bcms-doctors__photo img,
.bcms-doctor-dir__photo img { width: 100%; aspect-ratio: 11 / 12; height: auto; object-fit: cover; object-position: center top; }
/* Card titles and text where the original rule is more specific */
.bcms-doctors__card .bcms-doctors__name,
.bcms-doctor-dir__card .bcms-doctor-dir__name {
font-size: var(--fs-20);
font-weight: var(--fw-semibold);
}
/* ============================================================
Arabic and RTL (polish Step 8)
IBM Plex Sans Arabic (tokens.css switches --font-body), about 1.7
line height, no letter-spacing and no capitals anywhere, and the
horizontal arrows mirrored.
============================================================ */
[dir="rtl"] *,
[dir="rtl"] *::before,
[dir="rtl"] *::after {
letter-spacing: normal !important;
text-transform: none !important;
}
[dir="rtl"] :is(p, li, dd, blockquote, figcaption, label) {
line-height: var(--lh-body);
}
[dir="rtl"] :is(.bcms-dir-arrow, .bcms-rights__tab-arrow, .bcms-visit__arrow) {
display: inline-block;
transform: scaleX(-1);
}
/* The doctors slider: no CSS smooth scrolling. With scroll snapping it
animated a scroll on load, which stops Chrome's Largest Contentful Paint
measurement (Lighthouse "NO_LCP" on home and doctor pages). The slider
buttons still scroll smoothly (theme.js, reduced motion respected). */
.bcms-doctors__track {
scroll-behavior: auto;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* ============================================================
Buttons: four variants (fixes round 1, item 1)
Primary (#177C61 fill, white text), Secondary (green outline),
Call (navy fill with a phone icon, same size as primary) and Text
link (green text with an arrow). On dark or photo backgrounds the
same shapes use a white scheme. One hover, one focus and one
disabled style each. ':not(#_)' lifts these rules above the older
per-section button rules without !important.
============================================================ */
:where(.btn--primary, .bcms-hd__finder-btn, .bcms-about-intro__button, .bcms-inst__btn:not(.bcms-inst__btn--light), .bcms-deptd__btn:not([href^="tel:"]),
.bcms-doc__btn--primary, a.bcms-btn, .bcms-package-detail__form button[type="submit"], .bcms-feedback__form-footer button, .bcms-feedback__card-content > a,
.bcms-podcast__button, .bcms-testimonials__feedback-panel a, .bcms-contact__submit, .bcms-newsroom__more-btn, .bcms-locations__glass-cta,
.bcms-search-form__submit, .bcms-packages__cta > a:not([href^="tel:"]), .bcms-packages__card-cta,
.btn--secondary, .bcms-heal__cta, .bcms-newsletter__view,
.bcms-deptd__btn[href^="tel:"], .bcms-doc__btn--ghost, .bcms-packages__cta > a[href^="tel:"],
.bcms-hero__cta, .bcms-inst__btn--light, .bcms-homecare__cta, .bcms-packages__primary-link,
.bcms-visit__appointment a, .bcms-rights__support-link, .bcms-brochures__button:not([href^="tel:"]), .bcms-faqs__contact,
.bcms-hero__cta-secondary,
.bcms-insurance__confirmation > a, .bcms-brochures__button[href^="tel:"], .bcms-faqs__phone):not(#_) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
box-sizing: border-box;
min-width: 0;
height: auto;
min-height: 48px;
margin: 0;
padding: 0 var(--space-6);
border: 1px solid transparent;
border-radius: var(--radius-pill);
box-shadow: none;
font-family: var(--font-body);
font-size: var(--fs-15);
font-weight: var(--fw-bold);
line-height: 1.2;
letter-spacing: 0;
text-align: center;
text-decoration: none;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transform: none;
transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
:where(.btn--primary, .bcms-hd__finder-btn, .bcms-about-intro__button, .bcms-inst__btn:not(.bcms-inst__btn--light), .bcms-deptd__btn:not([href^="tel:"]),
.bcms-doc__btn--primary, a.bcms-btn, .bcms-package-detail__form button[type="submit"], .bcms-feedback__form-footer button, .bcms-feedback__card-content > a,
.bcms-podcast__button, .bcms-testimonials__feedback-panel a, .bcms-contact__submit, .bcms-newsroom__more-btn, .bcms-locations__glass-cta,
.bcms-search-form__submit, .bcms-packages__cta > a:not([href^="tel:"]), .bcms-packages__card-cta,
.btn--secondary, .bcms-heal__cta, .bcms-newsletter__view,
.bcms-deptd__btn[href^="tel:"], .bcms-doc__btn--ghost, .bcms-packages__cta > a[href^="tel:"],
.bcms-hero__cta, .bcms-inst__btn--light, .bcms-homecare__cta, .bcms-packages__primary-link,
.bcms-visit__appointment a, .bcms-rights__support-link, .bcms-brochures__button:not([href^="tel:"]), .bcms-faqs__contact,
.bcms-hero__cta-secondary,
.bcms-insurance__confirmation > a, .bcms-brochures__button[href^="tel:"], .bcms-faqs__phone):not(#_) :is(span, small, strong, em):not(.bcms-dir-arrow) {
margin: 0;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
letter-spacing: 0;
text-transform: none;
}
:where(.btn--primary, .bcms-hd__finder-btn, .bcms-about-intro__button, .bcms-inst__btn:not(.bcms-inst__btn--light), .bcms-deptd__btn:not([href^="tel:"]),
.bcms-doc__btn--primary, a.bcms-btn, .bcms-package-detail__form button[type="submit"], .bcms-feedback__form-footer button, .bcms-feedback__card-content > a,
.bcms-podcast__button, .bcms-testimonials__feedback-panel a, .bcms-contact__submit, .bcms-newsroom__more-btn, .bcms-locations__glass-cta,
.bcms-search-form__submit, .bcms-packages__cta > a:not([href^="tel:"]), .bcms-packages__card-cta,
.btn--secondary, .bcms-heal__cta, .bcms-newsletter__view,
.bcms-deptd__btn[href^="tel:"], .bcms-doc__btn--ghost, .bcms-packages__cta > a[href^="tel:"],
.bcms-hero__cta, .bcms-inst__btn--light, .bcms-homecare__cta, .bcms-packages__primary-link,
.bcms-visit__appointment a, .bcms-rights__support-link, .bcms-brochures__button:not([href^="tel:"]), .bcms-faqs__contact,
.bcms-hero__cta-secondary,
.bcms-insurance__confirmation > a, .bcms-brochures__button[href^="tel:"], .bcms-faqs__phone):not(#_) :is(svg, .bcms-dir-arrow) {
flex-shrink: 0;
width: 1em;
height: 1em;
margin: 0;
color: inherit;
}
/* Primary */
:is(.btn--primary, .bcms-hd__finder-btn, .bcms-about-intro__button, .bcms-inst__btn:not(.bcms-inst__btn--light), .bcms-deptd__btn:not([href^="tel:"]),
.bcms-doc__btn--primary, a.bcms-btn, .bcms-package-detail__form button[type="submit"], .bcms-feedback__form-footer button, .bcms-feedback__card-content > a,
.bcms-podcast__button, .bcms-testimonials__feedback-panel a, .bcms-contact__submit, .bcms-newsroom__more-btn, .bcms-locations__glass-cta,
.bcms-search-form__submit, .bcms-packages__cta > a:not([href^="tel:"]), .bcms-packages__card-cta):not(#_) {
border-color: var(--color-primary-dark);
background: var(--color-primary-dark);
color: var(--color-white);
}
:is(.btn--primary, .bcms-hd__finder-btn, .bcms-about-intro__button, .bcms-inst__btn:not(.bcms-inst__btn--light), .bcms-deptd__btn:not([href^="tel:"]),
.bcms-doc__btn--primary, a.bcms-btn, .bcms-package-detail__form button[type="submit"], .bcms-feedback__form-footer button, .bcms-feedback__card-content > a,
.bcms-podcast__button, .bcms-testimonials__feedback-panel a, .bcms-contact__submit, .bcms-newsroom__more-btn, .bcms-locations__glass-cta,
.bcms-search-form__submit, .bcms-packages__cta > a:not([href^="tel:"]), .bcms-packages__card-cta):not(#_):hover {
border-color: var(--color-heading);
background: var(--color-heading);
color: var(--color-white);
}
/* Secondary (outline) */
:is(.btn--secondary, .bcms-heal__cta, .bcms-newsletter__view):not(#_) {
border-color: var(--color-primary-dark);
background: transparent;
color: var(--color-primary-dark);
}
:is(.btn--secondary, .bcms-heal__cta, .bcms-newsletter__view):not(#_):hover {
border-color: var(--color-primary-dark);
background: var(--color-primary-light);
color: var(--color-primary-dark);
}
/* Call: navy fill, phone icon */
:is(.bcms-deptd__btn[href^="tel:"], .bcms-doc__btn--ghost, .bcms-packages__cta > a[href^="tel:"]):not(#_) {
border-color: var(--color-heading);
background: var(--color-heading);
color: var(--color-white);
}
:is(.bcms-deptd__btn[href^="tel:"], .bcms-doc__btn--ghost, .bcms-packages__cta > a[href^="tel:"]):not(#_):hover {
border-color: var(--color-primary-dark);
background: var(--color-primary-dark);
color: var(--color-white);
}
/* On dark or photo backgrounds: the same shapes in white */
:is(.bcms-hero__cta, .bcms-inst__btn--light, .bcms-homecare__cta, .bcms-packages__primary-link,
.bcms-visit__appointment a, .bcms-rights__support-link, .bcms-brochures__button:not([href^="tel:"]), .bcms-faqs__contact):not(#_) {
border-color: var(--color-white);
background: var(--color-white);
color: var(--color-heading);
}
:is(.bcms-hero__cta, .bcms-inst__btn--light, .bcms-homecare__cta, .bcms-packages__primary-link,
.bcms-visit__appointment a, .bcms-rights__support-link, .bcms-brochures__button:not([href^="tel:"]), .bcms-faqs__contact):not(#_):hover {
border-color: var(--color-primary-light);
background: var(--color-primary-light);
color: var(--color-heading);
}
:is(.bcms-hero__cta-secondary):not(#_) {
border-color: var(--color-white);
background: transparent;
color: var(--color-white);
}
:is(.bcms-hero__cta-secondary):not(#_):hover {
border-color: var(--color-white);
background: var(--color-white);
color: var(--color-heading);
}
/* Phone icon on every call button (the arrow glyphs inside are dropped) */
:is(.bcms-deptd__btn[href^="tel:"], .bcms-doc__btn--ghost, .bcms-packages__cta > a[href^="tel:"], .bcms-insurance__confirmation > a, .bcms-brochures__button[href^="tel:"], .bcms-faqs__phone):not(#_)::before {
content: "";
flex-shrink: 0;
width: 16px;
height: 16px;
background-color: currentColor;
-webkit-mask: var(--icon-phone) center / contain no-repeat;
mask: var(--icon-phone) center / contain no-repeat;
}
:is(.bcms-deptd__btn[href^="tel:"], .bcms-doc__btn--ghost, .bcms-packages__cta > a[href^="tel:"], .bcms-insurance__confirmation > a, .bcms-brochures__button[href^="tel:"], .bcms-faqs__phone):not(#_) :is(svg, .bcms-dir-arrow) {
display: none;
}
/* Text link: green text with an arrow */
:is(.bcms-highlights__link, .bcms-heal__link, .bcms-podcast__text-link, .bcms-brochures__action, .bcms-dept__card-btn,
.bcms-visit__inline-links > a, .bcms-newsroom__link, .bcms-doctors__profile):not(#_) {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--color-primary-dark);
font-family: var(--font-body);
font-size: var(--fs-15);
font-weight: var(--fw-bold);
line-height: 1.4;
letter-spacing: 0;
text-decoration: none;
text-transform: none;
transform: none;
}
:is(.bcms-highlights__link, .bcms-heal__link, .bcms-podcast__text-link, .bcms-brochures__action, .bcms-dept__card-btn,
.bcms-visit__inline-links > a, .bcms-newsroom__link, .bcms-doctors__profile):not(#_):hover {
background: none;
color: var(--color-primary-dark);
text-decoration: underline;
text-underline-offset: 0.25em;
}
:is(.bcms-highlights__link, .bcms-heal__link, .bcms-podcast__text-link, .bcms-brochures__action, .bcms-dept__card-btn,
.bcms-visit__inline-links > a, .bcms-newsroom__link, .bcms-doctors__profile):not(#_) :is(span, svg):not(.bcms-dir-arrow) {
color: inherit;
}
:is(.bcms-highlights__link, .bcms-heal__link, .bcms-podcast__text-link, .bcms-brochures__action, .bcms-dept__card-btn,
.bcms-visit__inline-links > a, .bcms-newsroom__link, .bcms-doctors__profile):not(#_):not(:has(svg, .bcms-dir-arrow, [class*="arrow"]))::after {
content: "92";
font-weight: var(--fw-bold);
}
[dir="rtl"] :is(.bcms-highlights__link, .bcms-heal__link, .bcms-podcast__text-link, .bcms-brochures__action, .bcms-dept__card-btn,
.bcms-visit__inline-links > a, .bcms-newsroom__link, .bcms-doctors__profile):not(#_):not(:has(svg, .bcms-dir-arrow, [class*="arrow"]))::after {
content: "90";
}
/* One focus style (keyboard) */
:is(.btn--primary, .bcms-hd__finder-btn, .bcms-about-intro__button, .bcms-inst__btn:not(.bcms-inst__btn--light), .bcms-deptd__btn:not([href^="tel:"]),
.bcms-doc__btn--primary, a.bcms-btn, .bcms-package-detail__form button[type="submit"], .bcms-feedback__form-footer button, .bcms-feedback__card-content > a,
.bcms-podcast__button, .bcms-testimonials__feedback-panel a, .bcms-contact__submit, .bcms-newsroom__more-btn, .bcms-locations__glass-cta,
.bcms-search-form__submit, .bcms-packages__cta > a:not([href^="tel:"]), .bcms-packages__card-cta,
.btn--secondary, .bcms-heal__cta, .bcms-newsletter__view,
.bcms-deptd__btn[href^="tel:"], .bcms-doc__btn--ghost, .bcms-packages__cta > a[href^="tel:"],
.bcms-hero__cta, .bcms-inst__btn--light, .bcms-homecare__cta, .bcms-packages__primary-link,
.bcms-visit__appointment a, .bcms-rights__support-link, .bcms-brochures__button:not([href^="tel:"]), .bcms-faqs__contact,
.bcms-hero__cta-secondary,
.bcms-insurance__confirmation > a, .bcms-brochures__button[href^="tel:"], .bcms-faqs__phone, .bcms-highlights__link, .bcms-heal__link, .bcms-podcast__text-link, .bcms-brochures__action, .bcms-dept__card-btn,
.bcms-visit__inline-links > a, .bcms-newsroom__link, .bcms-doctors__profile):not(#_):focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
/* One disabled style */
:is(.btn--primary, .bcms-hd__finder-btn, .bcms-about-intro__button, .bcms-inst__btn:not(.bcms-inst__btn--light), .bcms-deptd__btn:not([href^="tel:"]),
.bcms-doc__btn--primary, a.bcms-btn, .bcms-package-detail__form button[type="submit"], .bcms-feedback__form-footer button, .bcms-feedback__card-content > a,
.bcms-podcast__button, .bcms-testimonials__feedback-panel a, .bcms-contact__submit, .bcms-newsroom__more-btn, .bcms-locations__glass-cta,
.bcms-search-form__submit, .bcms-packages__cta > a:not([href^="tel:"]), .bcms-packages__card-cta,
.btn--secondary, .bcms-heal__cta, .bcms-newsletter__view,
.bcms-deptd__btn[href^="tel:"], .bcms-doc__btn--ghost, .bcms-packages__cta > a[href^="tel:"],
.bcms-hero__cta, .bcms-inst__btn--light, .bcms-homecare__cta, .bcms-packages__primary-link,
.bcms-visit__appointment a, .bcms-rights__support-link, .bcms-brochures__button:not([href^="tel:"]), .bcms-faqs__contact,
.bcms-hero__cta-secondary,
.bcms-insurance__confirmation > a, .bcms-brochures__button[href^="tel:"], .bcms-faqs__phone):not(#_):is(:disabled, [aria-disabled="true"]),
:is(.btn--primary, .bcms-hd__finder-btn, .bcms-about-intro__button, .bcms-inst__btn:not(.bcms-inst__btn--light), .bcms-deptd__btn:not([href^="tel:"]),
.bcms-doc__btn--primary, a.bcms-btn, .bcms-package-detail__form button[type="submit"], .bcms-feedback__form-footer button, .bcms-feedback__card-content > a,
.bcms-podcast__button, .bcms-testimonials__feedback-panel a, .bcms-contact__submit, .bcms-newsroom__more-btn, .bcms-locations__glass-cta,
.bcms-search-form__submit, .bcms-packages__cta > a:not([href^="tel:"]), .bcms-packages__card-cta,
.btn--secondary, .bcms-heal__cta, .bcms-newsletter__view,
.bcms-deptd__btn[href^="tel:"], .bcms-doc__btn--ghost, .bcms-packages__cta > a[href^="tel:"],
.bcms-hero__cta, .bcms-inst__btn--light, .bcms-homecare__cta, .bcms-packages__primary-link,
.bcms-visit__appointment a, .bcms-rights__support-link, .bcms-brochures__button:not([href^="tel:"]), .bcms-faqs__contact,
.bcms-hero__cta-secondary,
.bcms-insurance__confirmation > a, .bcms-brochures__button[href^="tel:"], .bcms-faqs__phone):not(#_):is(:disabled, [aria-disabled="true"]):hover {
border-color: var(--color-primary-dark);
background: var(--color-primary-dark);
color: var(--color-white);
cursor: not-allowed;
opacity: 0.5;
}
/* Call buttons whose label and number were stacked: one line. */
:is(.bcms-insurance__confirmation > a, .bcms-faqs__phone):not(#_) :is(span, small, strong):not(.bcms-dir-arrow) {
display: inline;
}
:is(.bcms-insurance__confirmation > a, .bcms-faqs__phone):not(#_) > span:not(.bcms-dir-arrow) {
display: inline-flex;
gap: var(--space-2);
}
/* ============================================================
Filter pills (fixes round 1, items 1 and 6): one clean pill row
for every filter or tab row (departments, news, health packages,
newsletter years), with a clear active state.
============================================================ */
:is(.bcms-dept__filter, .bcms-newsroom__filter, .bcms-packages__filters button, .bcms-newsletter__year-tab):not(#_) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 40px;
margin: 0;
padding: 0 var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-white);
box-shadow: none;
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--fs-14);
font-weight: var(--fw-semibold);
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
:is(.bcms-dept__filter, .bcms-newsroom__filter, .bcms-packages__filters button, .bcms-newsletter__year-tab):not(#_):hover {
border-color: var(--color-primary-dark);
background: var(--color-white);
color: var(--color-primary-dark);
}
:is(.bcms-dept__filter, .bcms-newsroom__filter, .bcms-packages__filters button, .bcms-newsletter__year-tab):not(#_):is(.is-active, [aria-selected="true"], [aria-pressed="true"]) {
border-color: var(--color-primary-dark);
background: var(--color-primary-dark);
color: var(--color-white);
}
:is(.bcms-dept__filter, .bcms-newsroom__filter, .bcms-packages__filters button, .bcms-newsletter__year-tab):not(#_):focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
:is(.bcms-dept__filter, .bcms-newsroom__filter, .bcms-packages__filters button, .bcms-newsletter__year-tab):not(#_) :is(span, small) {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
margin: 0;
padding: 0 var(--space-1);
border-radius: var(--radius-pill);
background: var(--color-background-alt);
color: inherit;
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
:is(.bcms-dept__filter, .bcms-newsroom__filter, .bcms-packages__filters button, .bcms-newsletter__year-tab):not(#_):is(.is-active, [aria-selected="true"], [aria-pressed="true"]) :is(span, small) {
background: color-mix(in srgb, var(--color-heading) 30%, transparent);
color: var(--color-white);
}
/* ============================================================
Search form in the page body (searchform.php: 404, news sidebar).
It had no styles left (browser-default greys); now the shared field
and the primary button.
============================================================ */
.bcms-search-form {
width: 100%;
max-width: 560px;
}
.bcms-search-form__inner {
display: flex;
align-items: center;
gap: var(--space-2);
}
.bcms-search-form__input {
flex: 1 1 auto;
min-width: 0;
min-height: 48px;
padding: 0 var(--space-5);
border: 1px solid var(--color-text-muted);
border-radius: var(--radius-pill);
background: var(--color-white);
color: var(--color-heading);
font: inherit;
font-size: var(--fs-16);
}
.bcms-search-form__input::placeholder {
color: var(--color-text-muted);
opacity: 1;
}
.bcms-search-form__input:hover {
border-color: var(--color-heading);
}
.bcms-search-form__input:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 0;
}
.bcms-search-form__submit {
flex: 0 0 auto;
}
/* ============================================================
Home hero at full screen height (fixes round 1, item 2).
Fills the viewport below the header (73 px on phones; utility bar
and masthead from 768 px: 122 px). The doctor finder follows the
banner (round 2), so it is not part of the offset. svh keeps
mobile browser bars from causing a jump; vh is the fallback. The
content is centred; on short screens the spacing shrinks (never the
type) and the hero grows with its content instead of cutting it.
============================================================ */
.bcms-hero {
--hero-offset: 73px;
align-items: center;
}
@media (min-width: 768px) {
.bcms-hero {
--hero-offset: 122px;
}
}
.bcms-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bcms-hero__inner {
align-items: center;
padding-block: clamp(40px, 8svh, 104px);
}
@media (max-width: 768px) {
.bcms-hero__inner {
padding-block: clamp(32px, 6svh, 64px);
}
}
/* Short screens (1366 x 768 laptops, landscape phones) */
@media (max-height: 800px) {
.bcms-hero__inner {
padding-block: var(--space-7);
}
.bcms-hero__tags {
margin-bottom: var(--space-4);
}
.bcms-hero__title {
margin-bottom: var(--space-3);
}
.bcms-hero__subtitle {
margin-bottom: var(--space-4);
}
.bcms-hero__pulse {
margin-block: 0 var(--space-4);
}
.bcms-hero__scroll {
display: none;
}
}
@media (max-height: 500px) {
.bcms-hero__inner {
padding-block: var(--space-5);
}
.bcms-hero__pulse {
display: none;
}
}
/* ============================================================
Sections above the footer (fixes round 1, item 4).
One container for every page section (the header and footer use it
too), so section edges line up with the footer; narrow reading
columns (department text, About text, flipbook) keep their width
inside it. Before the light footer: solid token backgrounds only
(no gradient next to it), navy for dark call-to-action bands, and
never the footer's own grey; the footer's top border is the single
divider. One vertical rhythm for these sections too.
============================================================ */
:is(.bcms-highlights__inner, .bcms-about-intro__inner, .bcms-facilities__container, .bcms-homecare__container, .bcms-rights__container,
.bcms-packages__container, .bcms-package-detail__container, .bcms-insurance__container, .bcms-feedback__container, .bcms-newsletter__container,
.bcms-podcast__container, .bcms-podcast-detail__container, .bcms-faqs__container, .bcms-brochures__container, .bcms-testimonials__container,
.bcms-contact__container, .bcms-visit__container):not(#_) {
width: var(--container);
max-width: none;
margin-inline: auto;
padding-inline: 0;
}
/* Dark call-to-action bands: solid navy */
/* Gradient sections that end a page: solid light neutral */
:is(.bcms-inst, .bcms-team-pro, .bcms-facilities):last-child:not(#_) {
background: var(--color-background);
background-image: none;
}
/* The doctor page ended in the footer's own grey: white instead */
.single-doctor .bcms-doctors:not(#_) {
background: var(--color-white);
}
/* Rhythm for the last sections that kept their own paddings */
:is(.bcms-inst, .bcms-podcast-detail, .bcms-contact__specialist, .bcms-homecare__contact, .bcms-rights__support, .bcms-brochures__help,
.bcms-testimonials__feedback, .bcms-visit__contact, .bcms-faqs__content, .bcms-newsletter__archive, .bcms-insurance__providers,
.bcms-package-detail__inquiry, .bcms-feedback__survey, .bcms-packages__directory, .bcms-podcast__archive, .bcms-newsroom,
.bcms-facilities, .bcms-team-pro, .bcms-chair, .bcms-flipbook, .bcms-deptd):not(#_) {
padding-block: var(--section-space);
}
/* Labels on the navy bands: the light gold (AA). */
/* FAQ answers on the green tint: body text colour (muted fails AA there). */
.bcms-faqs__panel p:not(#_) {
color: var(--color-text);
}
/* The packages intro is both a container and the dark card: it keeps the
shared outer width but its own inner padding (the container reset above
removed it), with a gap between the text and the health card. */
.bcms-packages__container.bcms-packages__intro-card:not(#_) {
column-gap: clamp(32px, 5vw, 72px);
padding: clamp(38px, 6vw, 76px);
}
@media (max-width: 980px) {
.bcms-packages__container.bcms-packages__intro-card:not(#_) {
row-gap: var(--space-7);
}
.bcms-packages__intro-card .bcms-packages__visual {
margin-top: 0;
}
}
@media (max-width: 720px) {
.bcms-packages__container.bcms-packages__intro-card:not(#_) {
padding: var(--space-8) var(--space-6);
}
}
/* ============================================================
Facilities gallery (fixes round 1, item 5).
Numbers: one calm chip (dark green, white text, 5.13:1) that only
deepens to navy on hover or focus. Tiles: the shared card hover (a
3 px lift, border tint, 180 ms), a gentle image zoom, and keyboard
focus showing the same state plus the standard focus ring.
============================================================ */
.bcms-facilities__number:not(#_) {
width: 36px;
height: 36px;
border: 1px solid var(--color-primary-dark);
border-radius: var(--radius-pill);
background: var(--color-primary-dark);
color: var(--color-white);
font-size: var(--fs-13);
font-weight: var(--fw-bold);
letter-spacing: 0;
text-shadow: none;
transition: background-color 180ms ease, border-color 180ms ease;
}
.bcms-facilities__item:is(:hover, :focus-visible) .bcms-facilities__number:not(#_) {
border-color: var(--color-heading);
background: var(--color-heading);
color: var(--color-white);
}
.bcms-facilities__item:not(#_) {
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.bcms-facilities__item:is(:hover, :focus-visible):not(#_) {
border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.bcms-facilities__item:not(#_) img {
transition: transform 180ms ease;
}
.bcms-facilities__item:is(:hover, :focus-visible):not(#_) img {
transform: scale(1.03);
}
.bcms-facilities__item:focus-visible:not(#_) {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.bcms-facilities__item:is(:hover, :focus-visible):not(#_),
.bcms-facilities__item:is(:hover, :focus-visible):not(#_) img {
transform: none;
}
}
/* ============================================================
Health package cards (fixes round 1, item 6).
Flyer image on top at one ratio (7:5, the flyers' own), then a clear
hierarchy: category and type, the package name (2 lines), what is
included (4 items, then "and more"), the price in one format
("From BHD 45") and one primary button on the bottom edge. Equal
heights and one gap in the grid; filters use the shared pill row.
============================================================ */
.bcms-packages__grid:not(#_) {
align-items: stretch;
gap: var(--space-6);
}
.bcms-packages__card--v2:not(#_) {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow-sm);
aspect-ratio: auto;
color: var(--color-text);
}
.bcms-packages__card--v2:not(#_):hover {
border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
box-shadow: var(--shadow-md);
}
.bcms-packages__card--v2 .bcms-packages__card-media:not(#_) {
position: relative;
inset: auto;
flex: 0 0 auto;
overflow: hidden;
border-block-end: 1px solid var(--color-border);
background: var(--color-background-alt);
}
.bcms-packages__card--v2 .bcms-packages__card-media:not(#_)::after {
content: none;
}
.bcms-packages__card--v2 .bcms-packages__card-media:not(#_) img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: none;
}
.bcms-packages__card-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
}
.bcms-packages__card-category {
margin: 0;
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.bcms-packages__card-title:not(#_) {
display: -webkit-box;
overflow: hidden;
margin: 0;
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-20);
font-weight: var(--fw-semibold);
line-height: 1.3;
letter-spacing: -0.01em;
text-shadow: none;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.bcms-packages__card-includes {
display: grid;
gap: var(--space-1);
margin: 0;
padding: 0;
list-style: none;
color: var(--color-text);
font-size: var(--fs-14);
line-height: 1.5;
}
.bcms-packages__card-includes li {
position: relative;
padding-inline-start: var(--space-6);
}
.bcms-packages__card-includes li::before {
content: "";
position: absolute;
inset-block-start: 0.35em;
inset-inline-start: 0;
width: 14px;
height: 14px;
box-sizing: border-box;
border: 4px solid var(--color-primary-light);
border-radius: var(--radius-pill);
background: var(--color-primary-dark);
}
.bcms-packages__card-includes .bcms-packages__card-more {
color: var(--color-text-muted);
font-style: italic;
}
.bcms-packages__card-includes .bcms-packages__card-more::before {
content: none;
}
.bcms-packages__card-text {
display: -webkit-box;
overflow: hidden;
margin: 0;
color: var(--color-text);
font-size: var(--fs-14);
line-height: 1.6;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.bcms-packages__card-price {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin: auto 0 0;
padding-block-start: var(--space-3);
border-block-start: 1px solid var(--color-border);
}
.bcms-packages__card-price span {
color: var(--color-text-muted);
font-size: var(--fs-13);
font-weight: var(--fw-semibold);
}
.bcms-packages__card-price strong {
color: var(--color-heading);
font-size: var(--fs-22);
font-weight: var(--fw-bold);
line-height: 1.2;
}
.bcms-packages__card-cta:not(#_) {
width: 100%;
margin-block-start: var(--space-1);
}
/* ============================================================
Doctor profile (fixes round 1, item 7).
Top: portrait (3:4, standard radius) beside the breadcrumb,
specialty, name (H1), title, Book + Call buttons and the facts that
exist. Below: About / Qualifications / Areas of expertise /
Certifications in a reading column, one heading style. Related:
up to 4 original doctor cards in a grid. Phones: photo, name,
buttons within the first screen.
============================================================ */
.bcms-doc:not(#_) {
width: auto;
max-width: none;
margin: 0;
padding: 0;
background: none;
}
.bcms-doc__top {
width: var(--container);
margin-inline: auto;
display: grid;
grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
align-items: start;
gap: var(--space-9);
padding-block: var(--space-9) var(--space-10);
}
.bcms-doc__portrait {
margin: 0;
overflow: hidden;
aspect-ratio: 3 / 4;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-background-alt);
box-shadow: var(--shadow-sm);
}
.bcms-doc__portrait img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.bcms-doc__summary {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
min-width: 0;
}
.bcms-doc__summary .breadcrumbs {
margin-block-end: var(--space-3);
}
.bcms-doc__summary .breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--space-2);
margin: 0;
padding: 0;
list-style: none;
color: var(--color-text-muted);
font-size: var(--fs-13);
font-weight: var(--fw-medium);
}
.bcms-doc__summary .breadcrumbs__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.bcms-doc__summary .breadcrumbs a {
color: var(--color-text);
text-decoration: underline;
text-decoration-color: var(--color-border);
text-underline-offset: 0.25em;
}
.bcms-doc__summary .breadcrumbs a:hover {
color: var(--color-primary-dark);
text-decoration-color: currentColor;
}
.bcms-doc__summary .breadcrumbs .icon {
width: 14px;
height: 14px;
color: var(--color-text-muted);
}
[dir="rtl"] .bcms-doc__summary .breadcrumbs .icon--dir {
transform: scaleX(-1);
}
.bcms-doc__eyebrow:not(#_) {
display: block;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.bcms-doc__name:not(#_) {
margin: 0;
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h1);
font-weight: var(--fw-semibold);
line-height: 1.08;
letter-spacing: -0.03em;
text-wrap: balance;
}
.bcms-doc__title:not(#_) {
margin: 0;
color: var(--color-text);
font-size: var(--fs-18);
line-height: 1.5;
}
.bcms-doc__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-block: var(--space-3);
}
.bcms-doc__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4) var(--space-6);
width: 100%;
margin: var(--space-3) 0 0;
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-border);
}
.bcms-doc__fact {
display: grid;
gap: var(--space-1);
}
.bcms-doc__fact dt {
color: var(--color-text-muted);
font-size: var(--fs-13);
font-weight: var(--fw-semibold);
}
.bcms-doc__fact dd {
margin: 0;
color: var(--color-heading);
font-size: var(--fs-16);
font-weight: var(--fw-semibold);
}
.bcms-doc__fact dd a {
color: var(--color-primary-dark);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--color-primary-dark) 35%, transparent);
text-underline-offset: 0.25em;
}
.bcms-doc__fact dd a:hover {
text-decoration-color: currentColor;
}
.bcms-doc__content {
width: var(--container);
margin-inline: auto;
padding-block: 0 var(--section-space);
}
.bcms-doc__content > * {
max-width: 760px;
}
.bcms-doc__section:not(#_) {
margin: 0;
padding: 0;
border: 0;
background: none;
}
.bcms-doc__section + .bcms-doc__section:not(#_) {
margin-block-start: var(--space-9);
padding-block-start: var(--space-9);
border-block-start: 1px solid var(--color-border);
}
.bcms-doc__section:not(#_) h2 {
margin: 0 0 var(--space-4);
color: var(--color-heading);
font-family: var(--font-body);
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
line-height: 1.3;
letter-spacing: -0.01em;
}
.bcms-doc__section p {
margin: 0;
color: var(--color-text);
font-size: var(--fs-16);
line-height: var(--lh-body);
}
.bcms-doc__list {
display: grid;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
color: var(--color-text);
font-size: var(--fs-16);
line-height: 1.6;
}
.bcms-doc__list li {
position: relative;
padding-inline-start: var(--space-7);
}
.bcms-doc__list li::before {
content: "";
position: absolute;
inset-block-start: 0.4em;
inset-inline-start: 0;
width: 16px;
height: 16px;
box-sizing: border-box;
border: 5px solid var(--color-primary-light);
border-radius: var(--radius-pill);
background: var(--color-primary-dark);
}
/* Related doctors: a grid of the original doctor cards */
.bcms-doctors--related .bcms-doctors__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-6);
margin: 0;
padding: 0;
list-style: none;
}
.bcms-doctors--related .bcms-doctors__grid > li {
display: flex;
min-width: 0;
}
.bcms-doctors--related .bcms-doctors__card {
width: 100%;
}
@media (max-width: 1024px) {
.bcms-doc__top {
grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
gap: var(--space-7);
}
.bcms-doctors--related .bcms-doctors__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.bcms-doc__top {
grid-template-columns: 1fr;
gap: var(--space-4);
padding-block: var(--space-5) var(--space-9);
}
.bcms-doc__portrait {
width: min(180px, 50%);
justify-self: center;
}
.bcms-doc__summary {
align-items: stretch;
gap: var(--space-2);
}
.bcms-doc__summary .breadcrumbs {
margin-block-end: var(--space-1);
}
.bcms-doc__actions {
margin-block: var(--space-2) 0;
}
.bcms-doc__summary .breadcrumbs {
order: -1;
}
.bcms-doc__actions > * {
flex: 1 1 180px;
}
}
@media (max-width: 480px) {
.bcms-doctors--related .bcms-doctors__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
}
/* ============================================================
Health package cards, round 2.
The flyers are square and print the price and tests, so the image is
1:1 and never cropped (photos cover the same square). A price field
shows as a badge on the image, where the flyers carry theirs; there
is no "Price on request" line. The body has one rhythm: category,
name (2 lines), a 3-line summary (2 tests + "and more", or up to 3 lines of
text), then the button on the bottom edge.
============================================================ */
.bcms-packages__card--v2 .bcms-packages__card-media:not(#_) {
aspect-ratio: 1 / 1;
}
.bcms-packages__card--v2 .bcms-packages__card-media:not(#_) img {
transition: transform var(--transition-normal);
}
.bcms-packages__card--v2:not(#_):hover .bcms-packages__card-media img {
transform: scale(1.03);
}
.bcms-packages__card--v2 .bcms-packages__card-price:not(#_) {
position: absolute;
inset-block-end: var(--space-4);
inset-inline-start: var(--space-4);
z-index: 1;
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
margin: 0;
padding: var(--space-2) var(--space-4);
border: 0;
border-radius: var(--radius-pill);
background: var(--color-white);
box-shadow: var(--shadow-md);
}
.bcms-packages__card--v2 .bcms-packages__card-price:not(#_) span {
color: var(--color-text-muted);
font-size: var(--fs-13);
font-weight: var(--fw-semibold);
}
.bcms-packages__card--v2 .bcms-packages__card-price:not(#_) strong {
color: var(--color-primary-dark);
font-size: var(--fs-18);
font-weight: var(--fw-bold);
line-height: 1.2;
}
.bcms-packages__card--v2 .bcms-packages__card-body:not(#_) {
gap: var(--space-2);
padding: var(--space-5) var(--space-6) var(--space-6);
}
.bcms-packages__card--v2 .bcms-packages__card-title:not(#_) {
margin-block-end: var(--space-1);
}
/* One summary height on every card: 3 lines of 14 px at 1.5. */
.bcms-packages__card--v2 :is(.bcms-packages__card-includes, .bcms-packages__card-text):not(#_) {
min-height: calc(3 * 1.5em);
margin-block-end: var(--space-4);
font-size: var(--fs-14);
line-height: 1.5;
}
.bcms-packages__card--v2 .bcms-packages__card-includes:not(#_) {
gap: 0;
}
.bcms-packages__card--v2 .bcms-packages__card-includes:not(#_) li {
overflow: hidden;
line-height: inherit;
text-overflow: ellipsis;
white-space: nowrap;
}
.bcms-packages__card--v2 .bcms-packages__card-text:not(#_) {
-webkit-line-clamp: 3;
}
.bcms-packages__card--v2 .bcms-packages__card-cta:not(#_) {
margin-block-start: auto;
}
/* ============================================================
Quick-access rail hover (round 2; timings round 3; rebuilt 2026-09-28).
Each tab always has its full width (icon + label) and rests pushed off
the screen edge so only the 40 px icon shows. Hover or keyboard focus
slides the whole tab in with `transform` only (composited, no layout
work per frame), then the label fades in; leaving fades the label out
first, then slides the tab back. A short open delay stops tabs from
opening when the pointer just passes over the rail.
Only the tabs take pointer events (not the empty list box beside the
short ones). Reduced motion: no transitions.
============================================================ */
.bcms-qside {
--qside-open: 600ms;
--qside-close: 450ms;
--qside-ease-in: cubic-bezier(0.33, 1, 0.68, 1); /* gentle ease-out when opening */
--qside-ease-out: cubic-bezier(0.4, 0, 0.2, 1); /* smooth when closing */
--qside-open-delay: 80ms;
--qside-text-in: 320ms;
--qside-text-in-delay: 220ms;
--qside-text-out: 180ms;
--qside-close-delay: 120ms;
--qside-rest: translateX(calc(100% - 40px));
}
[dir="rtl"] .bcms-qside {
--qside-rest: translateX(calc(-100% + 40px));
}
.bcms-qside__list:not(#_) {
pointer-events: none;
}
/* Rest state = closing timings */
.bcms-qside__item:not(#_) {
gap: var(--space-3);
padding-inline: var(--space-2) var(--space-5);
transform: var(--qside-rest);
pointer-events: auto;
will-change: transform;
transition:
transform var(--qside-close) var(--qside-ease-out) var(--qside-close-delay),
background-color var(--qside-close) ease var(--qside-close-delay),
box-shadow var(--qside-close) ease var(--qside-close-delay);
}
.bcms-qside__icon:not(#_) {
transition: transform var(--qside-close) var(--qside-ease-out) var(--qside-close-delay);
}
.bcms-qside__label:not(#_) {
display: block;
max-width: none;
overflow: visible;
opacity: 1;
transition: none;
}
.bcms-qside__label > span {
display: block;
opacity: 0;
transition: opacity var(--qside-text-out) ease;
}
/* Hover / keyboard focus = opening timings */
.bcms-qside__item:not(#_):is(:hover, :focus-visible) {
gap: var(--space-3);
padding-inline: var(--space-2) var(--space-5);
background: var(--color-heading);
box-shadow: var(--shadow-lg);
transform: translateX(0);
transition:
transform var(--qside-open) var(--qside-ease-in) var(--qside-open-delay),
background-color var(--qside-open) ease var(--qside-open-delay),
box-shadow var(--qside-open) ease var(--qside-open-delay);
}
.bcms-qside__item:is(:hover, :focus-visible) .bcms-qside__icon:not(#_) {
transform: scale(1.06);
transition: transform var(--qside-open) var(--qside-ease-in) var(--qside-open-delay);
}
.bcms-qside__item:is(:hover, :focus-visible) .bcms-qside__label:not(#_) {
max-width: none;
}
.bcms-qside__item:is(:hover, :focus-visible) .bcms-qside__label > span {
opacity: 1;
transition: opacity var(--qside-text-in) ease var(--qside-text-in-delay);
}
/* Keyboard focus opens at once */
.bcms-qside__item:not(#_):focus-visible {
transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
.bcms-qside__item:not(#_),
.bcms-qside__item:not(#_):is(:hover, :focus-visible),
.bcms-qside__icon:not(#_),
.bcms-qside__item:is(:hover, :focus-visible) .bcms-qside__icon:not(#_),
.bcms-qside__label > span,
.bcms-qside__item:is(:hover, :focus-visible) .bcms-qside__label > span {
transition: none;
}
}
/* ============================================================
Home doctors carousel: mouse drag (round 2, theme.js).
A grab cursor on devices with a fine pointer; while dragging, snap
and text selection are off and the card links ignore the pointer.
============================================================ */
@media (hover: hover) and (pointer: fine) {
.bcms-doctors__track:not(#_) {
cursor: grab;
}
}
.bcms-doctors__track.is-dragging:not(#_) {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
user-select: none;
}
.bcms-doctors__track.is-dragging:not(#_) a {
cursor: grabbing;
pointer-events: none;
}
/* ============================================================
Light, fresh look (fixes round 3, item 1).
Every navy/black area becomes light (dark-areas.md lists them):
- panels and bands: the soft mint tint (--color-mint) or white, with
a light border; one soft green (--color-primary-light) CTA band
at most per page;
- text on photos: a white gradient only on the text side, dark text;
- small labels on photos: white chips with dark text, so the dark
photo gradients are gone;
- designed covers: mint to green-tint gradients with dark text.
Buttons inside use the normal variants (the white on-dark ones are
re-mapped below). Header and footer are in site-chrome.css.
============================================================ */
/* ---------- Light context: shared text colours inside converted areas */
:is(.bcms-about-intro__band, .bcms-about-page .bcms-inst__stats, .bcms-inst__stats, .bcms-homecare__care-card, .bcms-homecare__contact,
.bcms-packages__intro-card, .bcms-package-detail__hero, .bcms-insurance__confirmation, .bcms-visit__appointment,
.bcms-rights__support, .bcms-podcast-detail__masthead, .bcms-faqs__support, .bcms-brochures__help-panel,
.bcms-testimonials__side-panel, .bcms-newsletter__cover, .bcms-brochures__cover):not(#_) {
color: var(--color-text);
text-shadow: none;
}
:is(.bcms-about-intro__band, .bcms-inst__stats, .bcms-homecare__care-card, .bcms-homecare__contact,
.bcms-packages__intro-card, .bcms-package-detail__hero, .bcms-insurance__confirmation, .bcms-visit__appointment,
.bcms-rights__support, .bcms-podcast-detail__masthead, .bcms-faqs__support, .bcms-brochures__help-panel,
.bcms-testimonials__side-panel, .bcms-newsletter__cover, .bcms-brochures__cover)
:is(h1, h2, h3, h4, figcaption, [class*="__title"], [class*="__name"]):not(#_):not(:is(a, button) *) {
color: var(--color-heading);
text-shadow: none;
}
:is(.bcms-about-intro__band, .bcms-inst__stats, .bcms-homecare__care-card, .bcms-homecare__contact,
.bcms-packages__intro-card, .bcms-package-detail__hero, .bcms-insurance__confirmation, .bcms-visit__appointment,
.bcms-rights__support, .bcms-podcast-detail__masthead, .bcms-faqs__support, .bcms-brochures__help-panel,
.bcms-testimonials__side-panel, .bcms-newsletter__cover, .bcms-brochures__cover)
:is(p, li, dd, dt, small, time, [class*="__lead"], [class*="__text"], [class*="-label"], [class*="__meta"], [class*="__guests"]):not(#_):not(:is(a, button) *):not(a, button) {
color: var(--color-text);
}
:is(.bcms-about-intro__band, .bcms-inst__stats, .bcms-homecare__care-card, .bcms-homecare__contact,
.bcms-packages__intro-card, .bcms-package-detail__hero, .bcms-insurance__confirmation, .bcms-visit__appointment,
.bcms-rights__support, .bcms-podcast-detail__masthead, .bcms-faqs__support, .bcms-brochures__help-panel,
.bcms-testimonials__side-panel, .bcms-newsletter__cover, .bcms-brochures__cover)
:is([class*="__eyebrow"], [class*="__kicker"], [class*="section-label"], [class*="__type"], .bcms-podcast__episode-label, figcaption span):not(#_):not(#_) {
color: var(--color-secondary-dark);
}
/* ---------- Page header (inner pages): keeps its dark photo overlay and
white text, like the home banner (client, 2026-09-27; F27). */
/* A soft local scrim behind the text block (breadcrumb, H1, intro): the
same navy, darkest behind the text and fading out towards the image, so
the small breadcrumb links pass AA over the lightest photos (the first
crumb measured 3.4-4.5:1). The overlay itself is unchanged. */
.bcms-page-hero__content:not(#_) {
position: relative;
}
.bcms-page-hero__content:not(#_)::before {
content: "";
position: absolute;
/* The box leans towards the text's start and top (where the small
breadcrumb sits); logical insets mirror it in Arabic. The ellipse
fits the box (closest-side), so it fades to nothing at every edge. */
inset-block: -60% -20%;
inset-inline: -30% 10%;
z-index: -1;
background: radial-gradient(closest-side,
color-mix(in srgb, var(--color-heading) 75%, transparent) 0%,
color-mix(in srgb, var(--color-heading) 65%, transparent) 55%,
color-mix(in srgb, var(--color-heading) 32%, transparent) 82%,
transparent 100%);
pointer-events: none;
}
@media (max-width: 768px) {
.bcms-page-hero__content:not(#_)::before {
inset-block: -45% -15%;
inset-inline: -25% 0;
}
}
/* ---------- Home hero: keeps its dark photo overlay and white text
(client, 2026-09-27: the earlier overlay looked better; F27). */
/* ---------- Buttons that were white on dark: back to the normal variants */
:is(.bcms-inst__btn--light, .bcms-homecare__cta, .bcms-packages__primary-link,
.bcms-visit__appointment a, .bcms-rights__support-link, .bcms-brochures__button:not([href^="tel:"]), .bcms-faqs__contact):not(#_) {
border-color: var(--color-primary-dark);
background: var(--color-primary-dark);
color: var(--color-white);
}
:is(.bcms-inst__btn--light, .bcms-homecare__cta, .bcms-packages__primary-link,
.bcms-visit__appointment a, .bcms-rights__support-link, .bcms-brochures__button:not([href^="tel:"]), .bcms-faqs__contact):not(#_):hover {
border-color: var(--color-heading);
background: var(--color-heading);
color: var(--color-white);
}
:is(.bcms-insurance__confirmation > a, .bcms-brochures__button[href^="tel:"], .bcms-faqs__phone):not(#_) {
border-color: var(--color-heading);
background: var(--color-heading);
color: var(--color-white);
}
:is(.bcms-insurance__confirmation > a, .bcms-brochures__button[href^="tel:"], .bcms-faqs__phone):not(#_):hover {
border-color: var(--color-primary-dark);
background: var(--color-primary-dark);
color: var(--color-white);
}
/* ---------- Photo labels: white chips, no dark photo gradients */
:is(.bcms-carex__media, .bcms-dept__icon, .bcms-homecare__service-media, .bcms-feedback__card-media,
.bcms-package-detail__media, .bcms-rights__panel-media, .bcms-podcast__feature-media, .bcms-podcast__card-media):not(#_)::after {
content: none;
}
.bcms-locations__slide:not(#_)::after {
background: linear-gradient(0deg, color-mix(in srgb, var(--color-white) 30%, transparent) 0%, transparent 40%);
}
:is(.bcms-homecare__service-media > span, .bcms-rights__panel-media > span, .bcms-podcast__card-media > span, .bcms-locations__meta):not(#_) {
border: 1px solid var(--color-border);
background: var(--color-white);
box-shadow: var(--shadow-sm);
color: var(--color-heading);
text-shadow: none;
}
.bcms-locations__meta:not(#_) svg {
stroke: var(--color-primary-dark);
}
:is(.bcms-rights__panel-media, .bcms-podcast__feature-media, .bcms-podcast__card-media):not(#_) {
background: var(--color-mint);
}
/* ---------- Facilities tiles: caption on a white gradient at the foot of the photo */
.bcms-facilities__item:not(#_) {
background: var(--color-mint);
}
.bcms-facilities__item:not(#_)::after {
background: linear-gradient(to top,
color-mix(in srgb, var(--color-white) 94%, transparent) 0%,
color-mix(in srgb, var(--color-white) 80%, transparent) 26%,
transparent 52%);
}
.bcms-facilities__caption:not(#_) {
color: var(--color-heading);
text-shadow: none;
}
/* ---------- About: story band and the stats row */
.bcms-about-page .bcms-about-intro__band:not(#_),
.bcms-about-intro__band:not(#_) {
border-block: 1px solid var(--color-border);
background: var(--color-mint);
}
.bcms-about-intro__band:not(#_) polyline {
stroke: var(--color-primary);
}
.bcms-about-intro__band:not(#_) svg {
opacity: 0.45;
}
.bcms-about-page .bcms-inst__stats:not(#_),
.bcms-inst__stats:not(#_) {
border: 1px solid var(--color-border);
background: var(--color-mint);
box-shadow: none;
}
.bcms-about-page .bcms-inst__stats:not(#_)::after {
border-color: var(--color-border);
}
.bcms-about-page .bcms-inst__stat:not(#_) {
border-inline-start-color: var(--color-mint-strong);
}
.bcms-inst__stat-num:not(#_) {
color: var(--color-primary-dark);
}
.bcms-inst__stat-label:not(#_),
.bcms-inst__stats-text:not(#_) p {
color: var(--color-text);
}
/* ---------- Home Care */
.bcms-homecare__care-card:not(#_) {
border: 1px solid var(--color-border);
background: var(--color-white);
box-shadow: var(--shadow-md);
}
/* CTA bands that end Home Care and Patient Rights: the page's one soft
green band, a different tone from the mint footer. */
:is(.bcms-homecare__contact, .bcms-rights__support):not(#_) {
border-block-start: 1px solid var(--color-border);
background: var(--color-primary-light);
background-image: none;
}
:is(.bcms-homecare__contact, .bcms-rights__support) :is([class*="__eyebrow"], [class*="section-label"]):not(#_) {
color: var(--color-secondary-dark);
}
/* ---------- Health packages: intro card and package hero */
.bcms-packages__intro-card:not(#_),
.bcms-package-detail__hero:not(#_) {
border: 1px solid var(--color-border);
background: var(--color-mint);
box-shadow: var(--shadow-sm);
}
.bcms-packages__intro-card:not(#_)::before,
.bcms-packages__intro-card:not(#_)::after {
border-color: var(--color-mint-strong);
}
.bcms-packages__intro-content:not(#_) > p,
.bcms-packages__intro-content > .bcms-packages__lead:not(#_) {
color: var(--color-text);
}
.bcms-packages__intro-content:not(#_) h2 {
color: var(--color-heading);
}
.bcms-packages__intro-card :is(.bcms-packages__eyebrow, .bcms-packages__kicker):not(#_) {
color: var(--color-secondary-dark);
}
.bcms-packages__visual:not(#_)::before {
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.bcms-packages__health-card:not(#_) {
border-color: var(--color-border);
background: var(--color-white);
box-shadow: var(--shadow-md);
}
.bcms-packages__health-card-top:not(#_) {
color: var(--color-text);
}
.bcms-packages__health-card-footer:not(#_) div {
background: var(--color-mint);
}
.bcms-packages__health-card-footer:not(#_) strong {
color: var(--color-heading);
}
.bcms-packages__health-card-footer:not(#_) span {
color: var(--color-text);
}
.bcms-package-detail__content:not(#_),
.bcms-package-detail__content:not(#_) > p,
.bcms-package-detail__price:not(#_) > span {
color: var(--color-text);
}
.bcms-package-detail__content:not(#_) h2,
.bcms-package-detail__price:not(#_) strong {
color: var(--color-heading);
}
.bcms-package-detail__hero .bcms-package-detail__type:not(#_),
.bcms-podcast-detail__masthead .bcms-podcast__episode-label:not(#_) {
color: var(--color-secondary-dark);
}
/* ---------- Boxes: insurance confirmation, visit appointment, FAQ support,
brochures help, testimonials side panel, podcast masthead */
:is(.bcms-insurance__confirmation, .bcms-visit__appointment, .bcms-faqs__support, .bcms-brochures__help-panel,
.bcms-testimonials__side-panel, .bcms-podcast-detail__masthead):not(#_) {
border: 1px solid var(--color-border);
background: var(--color-mint);
box-shadow: none;
}
.bcms-insurance__confirmation:not(#_) p,
.bcms-faqs__support:not(#_) > p,
.bcms-brochures__help-panel:not(#_) p {
color: var(--color-text);
}
.bcms-visit__appointment:not(#_) div span {
color: var(--color-secondary-dark);
}
.bcms-faqs__support-icon:not(#_) {
border: 1px solid var(--color-border);
background: var(--color-white);
color: var(--color-primary-dark);
}
.bcms-faqs__phone:not(#_) span {
color: inherit;
}
.bcms-testimonials__side-panel:not(#_) strong {
color: color-mix(in srgb, var(--color-primary-dark) 16%, transparent);
}
.bcms-testimonials__side-panel:not(#_) svg {
stroke: color-mix(in srgb, var(--color-primary-dark) 22%, transparent);
}
.bcms-podcast-detail__video-placeholder:not(#_) {
background:
linear-gradient(color-mix(in srgb, var(--color-white) 82%, transparent), color-mix(in srgb, var(--color-white) 88%, transparent)),
var(--bcms-podcast-video-bg, none) center / cover;
color: var(--color-heading);
}
.bcms-podcast-detail__video-play:not(#_) {
background: var(--color-primary-dark);
color: var(--color-white);
}
/* ---------- Designed covers (newsletter issues, brochures) */
:is(.bcms-newsletter__cover, .bcms-brochures__cover):not(#_) {
background:
radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--color-secondary) 16%, transparent), transparent 9rem),
linear-gradient(145deg, var(--color-mint), var(--color-primary-light));
color: var(--color-heading);
}
.bcms-newsletter__cover:not(#_)::before,
.bcms-newsletter__cover:not(#_)::after {
border-color: color-mix(in srgb, var(--color-primary-dark) 12%, transparent);
}
.bcms-brochures__cover:not(#_)::after {
border-color: color-mix(in srgb, var(--color-primary-dark) 6%, transparent);
}
:is(.bcms-newsletter__cover-mark, .bcms-brochures__cover-number):not(#_) {
color: color-mix(in srgb, var(--color-primary-dark) 14%, transparent);
}
.bcms-newsletter__cover:not(#_) path {
stroke: color-mix(in srgb, var(--color-primary-dark) 40%, transparent);
}
.bcms-brochures__cover-mark:not(#_) {
border: 1px solid var(--color-border);
background: var(--color-white);
color: var(--color-primary-dark);
}
:is(.bcms-newsletter__cover > div span, .bcms-brochures__cover small):not(#_) {
color: var(--color-secondary-dark);
}
/* Packages intro: the phone line under the buttons */
.bcms-packages__phone:not(#_) {
color: var(--color-heading);
}
.bcms-packages__phone:not(#_) > span:first-child {
border-color: var(--color-border);
background: var(--color-white);
color: var(--color-primary-dark);
}
.bcms-packages__phone:not(#_) small {
color: var(--color-text);
}
.bcms-packages__phone:not(#_) strong {
color: var(--color-heading);
}
/* Podcast episode masthead: the large episode number */
.bcms-podcast-detail__number:not(#_) {
color: var(--color-primary-dark);
}
/* Podcast cards: the episode number as a small chip like the other photo labels */
.bcms-podcast__card-media:not(#_) > span {
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
font-size: var(--fs-16);
font-weight: var(--fw-bold);
line-height: 1.4;
}
/* ============================================================
No sideways scrolling (fixes round 3, QA).
FAQs on phones: the one-column grid was `1fr`, which cannot shrink
below its widest unbreakable line (the support panel's call button),
so the page was 6-13 px wider than the screen. About (Arabic, 1440):
the collage's offset image ran 12 px past the inline-start edge.
============================================================ */
@media (max-width: 820px) {
.bcms-faqs__content-grid:not(#_) {
grid-template-columns: minmax(0, 1fr);
}
}
.bcms-faqs__support:not(#_) :is(a, button) {
max-width: 100%;
white-space: normal;
}
.bcms-about-page .bcms-inst:not(#_),
.bcms-inst:not(#_) {
overflow-x: clip;
}
/* ============================================================
Home doctors carousel: no visible scrollbar (client, 2026-09-28).
The track still scrolls by mouse drag, touch swipe, trackpad and the
Prev/Next buttons (and the arrow keys when focused); only the bar under
the cards is hidden. The bottom padding that made room for the bar is
reduced, keeping space for the cards' hover shadow.
============================================================ */
.bcms-doctors__track:not(#_) {
padding-block-end: var(--space-5);
scrollbar-width: none;
-ms-overflow-style: none;
}
.bcms-doctors__track:not(#_)::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/* ============================================================
Home hero fills the visible screen (client request, 2026-09-28;
peek strip removed 2026-09-29). Only the banner shows on load;
the doctor finder bar starts at the bottom edge of the screen and
is reached by scrolling:
screen height - header (--hero-offset, fixes1-4-hero.css)
- the WordPress toolbar for logged-in users.
It stays a min-height, so on very short screens the hero grows
with its content instead of cutting it.
============================================================ */
.bcms-hero {
--hero-admin: 0px;
min-height: calc(100vh - var(--hero-offset) - var(--hero-admin));
min-height: calc(100svh - var(--hero-offset) - var(--hero-admin));
}
body.admin-bar .bcms-hero {
--hero-admin: 32px;
}
@media (max-width: 782px) {
body.admin-bar .bcms-hero {
--hero-admin: 46px;
}
}
/* 993-1199 px: the two banner doctor cards side by side left the text
column 280 px wide (tags and buttons stacked, the banner taller than
the screen). Stacked, the cards take one card's width. */
@media (min-width: 993px) and (max-width: 1199px) {
.bcms-hero__doctors {
flex-direction: column;
gap: var(--space-3);
}
}
/* ============================================================
Book an Appointment page (.bcms-book, 2026-09-28) and the
new-tab icon of links to the booking portal (.inh-newtab).
Buttons follow CLAUDE.md: primary #177C61 (hover navy), Call
navy (hover #177C61), outline #177C61; emergency text #B81118.
============================================================ */
.inh-newtab {
display: inline-block;
flex-shrink: 0;
width: 0.9em;
height: 0.9em;
margin-inline-start: 0.35em;
vertical-align: -0.08em;
}
[dir="rtl"] .inh-newtab {
transform: scaleX(-1);
}
.bcms-book__container {
width: min(100% - 40px, 1160px);
margin-inline: auto;
}
.bcms-book__main {
padding-block: clamp(56px, 7vw, 96px);
}
.bcms-book__grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: clamp(32px, 6vw, 88px);
align-items: start;
}
.bcms-book__eyebrow {
display: block;
margin-block-end: var(--space-3);
color: var(--color-secondary-dark);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
line-height: 1.4;
text-transform: uppercase;
}
.bcms-book h2 {
margin: 0 0 var(--space-4);
color: var(--color-heading);
font-size: var(--fs-h2);
line-height: 1.16;
}
.bcms-book__lead {
margin: 0;
max-width: 560px;
color: var(--color-text-muted);
font-size: var(--fs-16);
line-height: 1.8;
}
.bcms-book__online {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4) var(--space-6);
margin-block-start: var(--space-8);
}
.bcms-book__online p {
flex: 1 1 220px;
margin: 0;
color: var(--color-text-muted);
font-size: var(--fs-14);
line-height: 1.6;
}
.bcms-book__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 52px;
padding: var(--space-3) var(--space-7);
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-size: var(--fs-16);
font-weight: var(--fw-bold);
line-height: 1.2;
text-decoration: none;
transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.bcms-book__btn svg:not(.inh-newtab) {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.bcms-book__btn--primary {
background: var(--color-primary-dark);
color: var(--color-white);
}
.bcms-book__btn--primary:hover,
.bcms-book__btn--primary:focus-visible {
background: var(--color-heading);
color: var(--color-white);
}
.bcms-book__btn--call {
background: var(--color-heading);
color: var(--color-white);
}
.bcms-book__btn--call:hover,
.bcms-book__btn--call:focus-visible {
background: var(--color-primary-dark);
color: var(--color-white);
}
.bcms-book__btn--outline {
border-color: var(--color-primary-dark);
background: transparent;
color: var(--color-primary-dark);
}
.bcms-book__btn--outline:hover,
.bcms-book__btn--outline:focus-visible {
background: var(--color-primary-light);
color: var(--color-primary-dark);
}
.bcms-book__phone {
padding: clamp(28px, 4vw, 40px);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.bcms-book__phone-icon {
display: grid;
width: 52px;
height: 52px;
margin-block-end: var(--space-5);
place-items: center;
color: var(--color-primary-dark);
background: var(--color-primary-light);
border-radius: var(--radius-pill);
}
.bcms-book__phone h2 {
font-size: var(--fs-h3);
}
.bcms-book__phone p {
margin: 0 0 var(--space-6);
color: var(--color-text-muted);
font-size: var(--fs-15);
line-height: 1.7;
}
.bcms-book__phone-actions {
display: grid;
gap: var(--space-3);
}
.bcms-book__phone-actions .bcms-book__btn {
width: 100%;
}
.bcms-book__info {
padding-block: clamp(48px, 6vw, 80px);
background: var(--color-background-alt);
}
.bcms-book__cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-6);
}
.bcms-book__card {
padding: var(--space-7);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.bcms-book__card h3 {
margin: 0 0 var(--space-3);
color: var(--color-heading);
font-size: var(--fs-h5);
line-height: 1.3;
}
.bcms-book__card p {
margin: 0 0 var(--space-3);
color: var(--color-text);
font-size: var(--fs-15);
line-height: 1.7;
}
.bcms-book__card ul {
margin: 0;
padding: 0;
list-style: none;
}
.bcms-book__card li + li {
margin-block-start: var(--space-2);
}
.bcms-book__list li {
position: relative;
padding-inline-start: var(--space-5);
color: var(--color-text);
font-size: var(--fs-15);
line-height: 1.6;
}
.bcms-book__list li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0.6em;
width: 7px;
height: 7px;
border-radius: var(--radius-pill);
background: var(--color-primary);
}
.bcms-book__card--emergency {
border-inline-start: 4px solid var(--color-emergency);
}
.bcms-book__card--emergency .emergency-link {
color: var(--color-emergency-dark);
font-weight: var(--fw-bold);
text-decoration: none;
}
.bcms-book__card--emergency .emergency-link:hover,
.bcms-book__card--emergency .emergency-link:focus-visible {
text-decoration: underline;
}
@media (max-width: 860px) {
.bcms-book__grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* Home hero: from 1440 px the quick-access side bar is fixed on the
inline-end edge, its tabs showing 40 px at rest (inc. .bcms-qside
--qside-rest), and it covered the "next" slide arrow (16 px from the
edge). Move that arrow clear of the tabs; the same edge in Arabic. */
@media (min-width: 1440px) {
.bcms-hero__arrow--next {
inset-inline-end: calc(40px + var(--space-3));
}
}