/* ============================================================================
ASGUHM — Premium Visual Layer
Drop-in override that lifts the satellite theme to acibademinternational.com
quality. Loaded AFTER uhm.css so it wins on specificity, no markup changes.
Author: built for DGS Healthcare
Scope: all ~17 localized Acibadem satellite sites (shared markup)
========================================================================== */
/* ---- 1. Design tokens --------------------------------------------------- */
:root {
--acb-navy: #0a2d72; /* primary brand navy (matches int. theme-color) */
--acb-navy-700: #103a8c; /* lighter navy for gradients / hovers */
--acb-navy-900: #061b46; /* deep navy: footer, hero, facts */
--acb-ink: #14233f; /* headings */
--acb-slate: #51617d; /* body copy */
--acb-coral: #0c53c6; /* CTA accent */
--acb-coral-600: #0a46a6; /* CTA hover */
--acb-mist: #e9eff7; /* cool section background (visible vs white) */
--acb-mist-2: #eef3fb; /* alt section background */
--acb-line: #e3eaf4; /* hairline borders */
--acb-radius: 16px;
--acb-radius-sm: 12px;
--acb-shadow: 0 18px 48px -24px rgba(10, 45, 114, .35);
--acb-shadow-sm: 0 8px 24px -16px rgba(10, 45, 114, .30);
--acb-ease: cubic-bezier(.22, .61, .36, 1);
--acb-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
--acb-body: "Inter", "Segoe UI", system-ui, sans-serif;
}
/* ---- 2. Base typography ------------------------------------------------- */
body.lyt-default {
font-family: var(--acb-body);
color: var(--acb-slate);
font-size: 16px;
line-height: 1.7;
letter-spacing: .005em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.lyt-default h1, body.lyt-default h2, body.lyt-default h3,
body.lyt-default h4, body.lyt-default h5, body.lyt-default .h4 {
font-family: var(--acb-display);
color: var(--acb-ink);
letter-spacing: -.012em;
line-height: 1.18;
}
body.lyt-default .home_box p { font-size: 16px; line-height: 1.75; color: var(--acb-slate); }
body.lyt-default a { transition: color .2s var(--acb-ease); }
/* generic premium section backgrounds */
.bg-light { background-color: var(--acb-mist) !important; }
/* ---- 3. Top utility bar ------------------------------------------------- */
#tophead.bg-primary {
background: var(--acb-navy-900) !important;
padding: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
#tophead .container { display: flex; align-items: center; min-height: 44px; }
#tophead .text-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }
#tophead .openBtn {
color: rgba(255, 255, 255, .85);
font-size: 14px; cursor: pointer; transition: color .2s var(--acb-ease);
}
#tophead .openBtn:hover { color: #fff; }
#tophead .social-media .links { display: flex; gap: 6px; }
#tophead .social-media .links a {
width: 30px; height: 30px; display: inline-flex; align-items: center;
justify-content: center; border-radius: 50%; color: rgba(255, 255, 255, .82);
font-size: 13px; transition: all .2s var(--acb-ease);
}
#tophead .social-media .links a:hover { background: var(--acb-coral); color: #fff; transform: translateY(-1px); }
#tophead .lang-dropdown .dropdown-toggle {
color: rgba(255, 255, 255, .9) !important; font-weight: 600; font-size: 13px;
letter-spacing: .03em; text-transform: uppercase; padding: 6px 4px;
}
#tophead .lang-dropdown .dropdown-toggle:hover { color: #fff !important; }
/* Trust ribbon (optional …
; degrades gracefully) */
#acb-trust {
display: flex; align-items: center; gap: 22px;
font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
color: rgba(255, 255, 255, .82); text-transform: uppercase;
}
#acb-trust span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#acb-trust span::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--acb-coral); flex: none;
}
@media (max-width: 991px) { #acb-trust { display: none; } }
/* ---- 4. Primary navigation --------------------------------------------- */
nav.navbar,
#site-header .navbar {
background: #fff !important;
padding: 30px 0 !important;
box-shadow: 0 1px 0 var(--acb-line);
transition: box-shadow .25s var(--acb-ease), padding .25s var(--acb-ease);
}
nav.navbar.acb-stuck,
#site-header .navbar.acb-stuck {
position: sticky; top: 0; z-index: 1030;
box-shadow: 0 10px 30px -18px rgba(10, 45, 114, .5);
padding: 14px 0 !important;
}
.navbar-brand img { height: 46px; width: auto; transition: height .25s var(--acb-ease); }
nav.navbar.acb-stuck .navbar-brand img { height: 40px; }
.navbar-nav .nav-link {
font-family: var(--acb-display);
font-weight: 600 !important;
font-size: 14px !important;
letter-spacing: .02em;
color: var(--acb-ink) !important;
text-transform: uppercase;
padding: 10px 14px !important;
position: relative;
}
.navbar-nav > .nav-item > .nav-link::after {
content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
height: 2px; background: var(--acb-coral); border-radius: 2px;
transform: scaleX(0); transform-origin: left; transition: transform .25s var(--acb-ease);
}
.navbar-nav > .nav-item > .nav-link:hover { color: var(--acb-navy) !important; }
.navbar-nav > .nav-item > .nav-link:hover::after { transform: scaleX(1); }
/* dropdowns */
.navbar .dropdown-menu {
border: 1px solid var(--acb-line) !important;
border-radius: var(--acb-radius-sm) !important;
box-shadow: var(--acb-shadow) !important;
padding: 8px !important; margin-top: 8px !important;
overflow: hidden;
}
.navbar .dropdown-menu .nav-link {
text-transform: none !important; font-size: 13.5px !important;
border-radius: 8px; padding: 8px 12px !important; color: var(--acb-slate) !important;
}
.navbar .dropdown-menu .nav-link:hover { background: var(--acb-mist); color: var(--acb-navy) !important; }
/* ---- 5. Section title system ------------------------------------------- */
.sectionTitle,
.sectionTitle.semiBorderBottom {
font-family: var(--acb-display);
font-weight: 800;
color: var(--acb-ink);
font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
border: 0 !important;
position: relative;
padding-bottom: 18px;
margin-bottom: 22px;
}
.sectionTitle.semiBorderBottom::after {
content: ""; position: absolute; left: 0; bottom: 0; margin: 0 !important;
width: 56px !important; height: 4px; border: 0 !important; border-radius: 4px;
background: linear-gradient(90deg, var(--acb-coral), var(--acb-coral-600));
}
.sectionTitle.border-center { text-align: center; }
.sectionTitle.border-center::after { left: 50%; transform: translateX(-50%); }
/* ---- 6. Buttons --------------------------------------------------------- */
.btn {
font-family: var(--acb-display);
font-weight: 700; letter-spacing: .015em;
border-radius: 999px !important;
padding: 12px 26px;
transition: all .22s var(--acb-ease);
border: 0;
}
.btn-secondary {
background: var(--acb-navy) !important; color: #fff !important;
box-shadow: 0 12px 26px -16px rgba(10, 45, 114, .8);
}
.btn-secondary:hover {
background: var(--acb-navy-700) !important;
transform: translateY(-2px);
box-shadow: 0 18px 34px -16px rgba(10, 45, 114, .85);
}
.btn-orange, .btn-success {
background: linear-gradient(135deg, var(--acb-coral), var(--acb-coral-600)) !important;
color: #fff !important;
box-shadow: 0 14px 28px -14px rgba(12,83,198, .75);
}
.btn-orange:hover, .btn-success:hover {
transform: translateY(-2px); filter: saturate(1.05);
box-shadow: 0 20px 38px -14px rgba(12,83,198, .8);
}
.btn.with-icon i { transition: transform .22s var(--acb-ease); }
.btn.with-icon:hover i { transform: translateX(4px); }
.btn:not(.btn-secondary):not(.btn-orange):not(.btn-success):not(.btn-block) {
color: var(--acb-navy);
}
/* ---- 7. Hero / Second-opinion (symmetric, equal-height columns) -------- */
#home-welcome.bg-light {
background: linear-gradient(120deg, var(--acb-navy-900) 0%, var(--acb-navy) 56%, var(--acb-navy-700) 100%) !important;
padding: 68px 0 !important;
position: relative; overflow: hidden;
}
#home-welcome::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(760px 420px at 8% -5%, rgba(255, 255, 255, .06), transparent 62%),
radial-gradient(620px 520px at 104% 108%, rgba(12,83,198, .12), transparent 60%);
pointer-events: none;
}
/* balanced, centered two-column layout — equal heights, even gutter */
#home-welcome > .row.no-gutters {
max-width: 1200px; margin: 0 auto; padding: 0 24px;
display: flex !important; flex-wrap: nowrap;
align-items: stretch; gap: 36px;
position: relative; z-index: 2;
}
#home-welcome .wimage {
flex: 1 1 0 !important; max-width: none !important;
border-radius: 20px; min-height: 540px;
background-size: cover !important; background-position: center !important;
position: relative; box-shadow: var(--acb-shadow); overflow: hidden;
}
#home-welcome .wimage::after {
content: ""; position: absolute; inset: 0; border-radius: 20px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); pointer-events: none;
}
#home-welcome .wimage .l-gradient-trans-bg {
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(6, 27, 70, .34), transparent 55%);
}
/* the form is an elevated white card, equal height to the image, no overlap */
#home-secondOpinion.form {
flex: 1 1 0 !important; max-width: none !important;
margin: 0 !important; position: relative; z-index: 3;
background: #fff; border-radius: 20px;
box-shadow: 0 40px 90px -45px rgba(0, 0, 0, .6);
padding: 40px 44px !important;
display: flex; flex-direction: column; justify-content: center;
}
#home-secondOpinion .sectionTitle {
font-size: clamp(1.4rem, 1.1rem + .8vw, 1.7rem);
margin: 0 0 22px !important; padding-bottom: 18px;
}
.uhmCustomForm .form-row { margin-left: -8px; margin-right: -8px; }
.uhmCustomForm .form-row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
.uhmCustomForm .form-group { margin-bottom: 15px; }
.uhmCustomForm label {
font-family: var(--acb-display); font-weight: 700; font-size: 12px;
color: var(--acb-ink); letter-spacing: .02em; margin-bottom: 6px; display: block;
}
.uhmCustomForm .form-control {
border: 1.5px solid var(--acb-line);
border-radius: 11px;
padding: 12px 14px; height: auto; font-size: 14.5px; width: 100%;
color: var(--acb-ink); background: var(--acb-mist);
transition: border-color .2s var(--acb-ease), box-shadow .2s var(--acb-ease), background .2s var(--acb-ease);
}
.uhmCustomForm textarea.form-control { min-height: 92px; resize: vertical; }
.uhmCustomForm .form-control:focus {
border-color: var(--acb-navy); background: #fff;
box-shadow: 0 0 0 4px rgba(10, 45, 114, .12); outline: none;
}
.uhmCustomForm select.form-control { cursor: pointer; }
.uhmCustomForm .form-check-label { font-size: 12px; color: var(--acb-slate); line-height: 1.55; }
#second-form-button.btn-orange { padding: 14px 18px; font-size: 15px; }
/* mobile hero collapse trigger */
#home-welcome .atbottom { padding: 22px; }
#home-welcome .atbottom .h4 { color: #fff; }
@media (max-width: 991px) {
#home-welcome > .row.no-gutters { flex-wrap: wrap; gap: 22px; }
#home-welcome .wimage { flex: 1 1 100% !important; min-height: 260px; }
#home-secondOpinion.form { flex: 1 1 100% !important; padding: 30px 24px !important; }
}
/* ---- 8. Quick action tiles --------------------------------------------- */
#home-distribution {
max-width: 1180px; margin: -34px auto 0; padding: 0 20px;
position: relative; z-index: 4;
}
#home-distribution .row.no-gutters {
background: #fff; border-radius: var(--acb-radius);
box-shadow: var(--acb-shadow-sm); overflow: hidden;
border: 1px solid var(--acb-line);
}
#home-distribution .item { border-right: 1px solid var(--acb-line); }
#home-distribution .item:last-child { border-right: 0; }
#home-distribution .item a {
display: flex; align-items: center; gap: 14px;
padding: 22px 24px; color: var(--acb-ink);
font-family: var(--acb-display); font-weight: 700; font-size: 15px;
transition: background .2s var(--acb-ease);
}
#home-distribution .item a:hover { background: var(--acb-mist); }
#home-distribution .item img { width: 34px; height: 34px; object-fit: contain; }
#home-distribution .item span { flex: 1; }
#home-distribution .item .fa-angle-right {
color: var(--acb-coral); transition: transform .2s var(--acb-ease);
}
#home-distribution .item a:hover .fa-angle-right { transform: translateX(4px); }
@media (max-width: 767px) { #home-distribution .item { border-right: 0; border-bottom: 1px solid var(--acb-line); } }
/* ---- 9. Why / content split cards -------------------------------------- */
#index-why .card, #index-hospitals .card, #index-ips .card {
border: 0 !important; background: transparent !important;
}
#index-why { padding-top: 64px !important; }
#index-why .home_box, #index-ips .home_box { padding: 0; }
#index-why .col-md-5 .home_box p {
display: flex; align-items: center; gap: 6px;
background: #fff; border: 1px solid var(--acb-line);
border-radius: var(--acb-radius-sm); padding: 16px 18px !important;
margin: 0 0 14px !important; box-shadow: var(--acb-shadow-sm);
font-family: var(--acb-display); font-weight: 600; color: var(--acb-ink); font-size: 15px;
}
#index-why .col-md-5 .home_box p i {
color: var(--acb-coral) !important; background: rgba(12,83,198, .1);
border-radius: 12px; padding: 14px !important; font-size: 1.25rem !important;
}
/* ---- 10. Services grid -------------------------------------------------- */
/* Base CSS orders .col-sm-6 after .col-lg-3, so it wins at desktop; pin the
intended 4-up layout (matches the reference design across all satellites). */
@media (min-width: 992px) {
.service-list .service-item.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
}
#find-service { padding: 72px 0 !important; }
/* Equal-height cards WITHOUT the stretch-explosion bug: a wrapping flex row
defaults to align-content:stretch, so if any ancestor gives the row extra
height every line inflates. Pin lines to content height. */
.service-list.uhm-cards { align-content: flex-start !important; }
.service-list.uhm-cards .service-item { margin-bottom: 26px; display: flex; align-items: stretch; }
.service-list .service-item > .card { width: 100%; }
.service-list .service-item .card-body {
display: flex; flex-direction: column; min-height: 210px; justify-content: flex-start;
}
.service-list .service-item .card,
#service-slider .card {
border: 1px solid var(--acb-line) !important;
border-radius: var(--acb-radius) !important;
background: #fff !important;
box-shadow: var(--acb-shadow-sm);
height: 100%;
position: relative; overflow: hidden;
transition: transform .28s var(--acb-ease), box-shadow .28s var(--acb-ease), border-color .28s var(--acb-ease);
}
.service-list .service-item .card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--acb-coral), var(--acb-coral-600));
transform: scaleX(0); transform-origin: left; transition: transform .3s var(--acb-ease);
}
.service-list .service-item:hover .card {
transform: translateY(-6px);
box-shadow: var(--acb-shadow); border-color: transparent !important;
}
.service-list .service-item:hover .card::before { transform: scaleX(1); }
.service-list .service-item .card-body { padding: 26px 22px; }
.card-title.semiBorderBottom {
font-family: var(--acb-display); font-weight: 800;
font-size: 1.06rem !important; color: var(--acb-ink);
border: 0 !important; padding-bottom: 14px; margin-bottom: 12px; position: relative;
}
.card-title.semiBorderBottom::after,
.card-title.semiBorderBottom.border-center::after {
content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
margin: 0 !important; width: 38px !important; height: 3px; border: 0 !important;
border-radius: 3px; background: var(--acb-coral);
}
.service-list .service-item .card p {
font-size: 14px; color: var(--acb-slate); line-height: 1.65;
display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
overflow: hidden;
}
.service-item { text-decoration: none !important; }
/* ---- 11. Facts band ----------------------------------------------------- */
#home-facts.bg-primary {
background: linear-gradient(120deg, var(--acb-navy-900), var(--acb-navy) 60%, var(--acb-navy-700)) !important;
padding: 56px 0 !important; position: relative; overflow: hidden;
}
#home-facts::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(700px 300px at 80% 0%, rgba(12,83,198, .14), transparent 60%);
}
#home-facts .facts-list { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
#home-facts .fact {
text-align: center; color: #fff; padding: 6px 12px;
position: relative; font-size: 14px; font-weight: 500;
color: rgba(255, 255, 255, .8); line-height: 1.4;
}
#home-facts .col + .col .fact::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
height: 52px; width: 1px; background: rgba(255, 255, 255, .15);
}
#home-facts .counter {
display: block; font-family: var(--acb-display); font-weight: 800;
font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); color: #fff;
letter-spacing: -.02em; margin-bottom: 4px;
}
/* ---- 12. Hospitals / IPC / Insurance imagery --------------------------- */
#index-hospitals img, #index-ips img,
#index-why img {
border-radius: var(--acb-radius) !important; box-shadow: var(--acb-shadow-sm);
}
#index-hospitals, #index-ips { padding-top: 64px !important; padding-bottom: 8px; }
/* ---- 13. Stories / News / Service cards (other links) ------------------ */
#home-otherlinks { padding: 72px 0 !important; }
#home-otherlinks .eq-card, #home-otherlinks .card {
border: 1px solid var(--acb-line) !important;
border-radius: var(--acb-radius) !important;
overflow: hidden; box-shadow: var(--acb-shadow-sm);
background: #fff !important;
transition: transform .25s var(--acb-ease), box-shadow .25s var(--acb-ease);
}
#home-otherlinks .eq-card:hover, #home-otherlinks .card:hover {
transform: translateY(-4px); box-shadow: var(--acb-shadow);
}
#home-otherlinks .top.bg-wrapper {
height: 168px; background-size: cover !important; background-position: center !important;
position: relative;
}
#home-otherlinks .overlay-title.bg-primary {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10, 45, 114, .12) 30%, rgba(6, 27, 70, .82) 100%) !important;
}
#home-otherlinks .absTitle {
position: relative; margin-top: -56px !important; padding: 0 22px 14px; z-index: 2;
}
#home-otherlinks .absTitle a {
font-family: var(--acb-display); font-weight: 800; font-size: 1.18rem; color: #fff !important;
text-shadow: 0 2px 10px rgba(6, 27, 70, .55);
}
#home-otherlinks p a { font-size: 1rem !important; color: var(--acb-ink) !important; font-weight: 600; }
#home-otherlinks p a:hover { color: var(--acb-navy) !important; }
#home-otherlinks img { border-radius: 10px; max-height: 180px; }
#home-otherlinks .pt-item { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--acb-line); }
#home-otherlinks .card-sm .card-title {
font-family: var(--acb-display); font-weight: 800; color: var(--acb-ink); font-size: 1.1rem;
}
#home-otherlinks .banner img { border-radius: var(--acb-radius) !important; box-shadow: var(--acb-shadow-sm); }
/* ---- 14. Footer sitemap + bar ------------------------------------------ */
#sitemap {
background: linear-gradient(180deg, var(--acb-navy) 0%, var(--acb-navy-900) 100%) !important;
padding-top: 64px !important; padding-bottom: 40px !important;
}
#sitemap h3 {
font-family: var(--acb-display); font-weight: 800; font-size: 1rem;
letter-spacing: .06em; text-transform: uppercase; color: #fff;
padding-bottom: 14px; margin-bottom: 12px; position: relative;
}
#sitemap h3::after {
content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px;
border-radius: 3px; background: var(--acb-coral);
}
#sitemap a { color: rgba(255, 255, 255, .72) !important; font-size: 14px; line-height: 32px !important; }
#sitemap a:hover { color: #fff !important; padding-left: 4px; transition: all .18s var(--acb-ease); }
#site-footer.bg-primary {
background: var(--acb-navy-900) !important;
border-top: 1px solid rgba(255, 255, 255, .08);
padding: 22px 0;
}
#site-footer p { color: rgba(255, 255, 255, .6); font-size: 13px; margin: 0; }
#site-footer #impressum p, #site-footer h4 a { color: rgba(255, 255, 255, .85) !important; }
/* ---- 15. Scroll-to-top + WhatsApp -------------------------------------- */
.scrollToTop {
background: var(--acb-navy) !important; color: #fff !important;
border-radius: 50% !important; box-shadow: var(--acb-shadow-sm);
width: 46px; height: 46px; display: flex !important; align-items: center; justify-content: center;
transition: all .2s var(--acb-ease);
}
.scrollToTop:hover { background: var(--acb-coral) !important; transform: translateY(-3px); }
.kulakcik .kulakcik_button {
border-radius: 999px !important;
box-shadow: 0 16px 30px -14px rgba(12,83,198, .7) !important;
font-family: var(--acb-display) !important;
}
/* ---- 16. JCI-line note at footer --------------------------------------- */
blockquote .ahp-net-lead { color: var(--acb-slate); font-weight: 500; }
blockquote .ahp-net-link { color: var(--acb-navy); font-weight: 700; }
/* ---- 17. Search overlay ------------------------------------------------- */
#searchOverlay.overlay { background: rgba(6, 27, 70, .97) !important; }
#site-search {
border: 0; border-bottom: 2px solid rgba(255, 255, 255, .4); background: transparent;
color: #fff; font-family: var(--acb-display); font-size: 2rem; text-align: center;
}
#site-search:focus { border-color: var(--acb-coral); outline: none; }
/* ---- 18. Accessibility & motion ---------------------------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible {
outline: 3px solid rgba(12,83,198, .55); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* ---- 19. Title casing — UPPERCASE → Capitalize ------------------------- */
/* The base theme forces UPPERCASE on headings, nav, labels and footer titles.
We switch those to Capitalize. CSS only touches the first letter of each
word, so existing acronyms in mixed-case source (IVF, Pet CT, da Vinci…)
are preserved. Body copy and post/news titles are intentionally untouched.
Strings stored fully-uppercase in .po files are additionally corrected by
the smartTitleCase pass (see functions.php inline script). */
#site-header .nav-link,
.navbar-nav .nav-link,
.navbar .dropdown-menu .nav-link,
#tophead .lang-dropdown .dropdown-toggle,
#acb-trust, #acb-trust span,
.sectionTitle, .subTitle,
.card-title, .card-title.semiBorderBottom,
.card .absTitle, .card .absTitle a, #home-otherlinks .absTitle a,
#sitemap h3, #sitemap h4,
#page-content h1,
.uhmCustomForm label,
#home-distribution a, #home-distribution .item span,
.btn, input[type="submit"].btn {
text-transform: capitalize !important;
}
/* Keep post/news titles, consent text and body copy exactly as authored */
#home-otherlinks .pt-item p a,
.uhmCustomForm .form-check-label,
.form-check-label,
.home_box p {
text-transform: none !important;
}
/* ---- 20. Wrapping-row safety guards ------------------------------------ */
/* Prevent align-content:stretch from inflating cards when an ancestor (admin
bar, plugin wrappers, full-height flex contexts) hands the row extra height. */
#find-service .row,
#home-otherlinks .row,
#index-why .row,
#home-facts .facts-list,
#home-distribution .row,
#index-hospitals .row,
#index-ips .row {
align-content: flex-start !important;
}
/* ===========================================================================
21. CONSOLIDATION + QUALITY PASS (single source of truth — loaded last)
Fixes inconsistent section widths and lifts the overall polish.
=========================================================================== */
:root {
--acb-gutter: 24px;
--acb-section-y: 96px; /* consistent vertical rhythm */
}
/* --- Consistency WITHOUT narrowing: do NOT cap .container (the theme uses a
responsive 960 / 1140 / 1440 container). Instead, make the custom full-bleed
rows (hero, distribution tiles, facts band) follow the SAME responsive width
so every section's edges line up at every breakpoint. --- */
#home-welcome > .row.no-gutters,
#home-distribution,
#home-facts .facts-list {
width: 100%; margin-left: auto !important; margin-right: auto !important;
max-width: 960px;
padding-left: 15px; padding-right: 15px;
}
@media (min-width: 1200px) {
#home-welcome > .row.no-gutters,
#home-distribution,
#home-facts .facts-list { max-width: 1140px; }
}
@media (min-width: 1440px) {
#home-welcome > .row.no-gutters,
#home-distribution,
#home-facts .facts-list { max-width: 1440px; }
}
/* --- Consistent vertical rhythm across the homepage sections --- */
#index-why,
#find-service,
#index-hospitals,
#index-ips,
#home-otherlinks {
padding-top: var(--acb-section-y) !important;
padding-bottom: var(--acb-section-y) !important;
}
#home-search { padding-top: 56px !important; padding-bottom: 0 !important; }
/* --- Heading scale refinement (premium, tighter, more confident) --- */
.sectionTitle,
.sectionTitle.semiBorderBottom {
font-weight: 800;
font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.15rem);
line-height: 1.16; letter-spacing: -.018em;
margin-bottom: 26px; padding-bottom: 20px;
}
.home_box p, .card-text, .service-list .service-item .card p {
color: var(--acb-slate); line-height: 1.78;
}
/* --- Content split sections: frame imagery --- */
#index-hospitals img, #index-ips img, #index-why img {
border-radius: 18px !important;
box-shadow: 0 24px 60px -34px rgba(10,45,114,.45) !important;
}
/* --- Search bar polish --- */
#home-search .search-form, #home-search form { position: relative; }
#home-search input[type="search"], #home-search .form-control {
border: 1.5px solid var(--acb-line) !important; border-radius: 999px !important;
padding: 15px 24px !important; height: auto !important; background: #fff !important;
box-shadow: 0 10px 30px -22px rgba(10,45,114,.4);
}
#home-search input:focus { border-color: var(--acb-navy) !important; box-shadow: 0 0 0 4px rgba(10,45,114,.12) !important; }
/* --- Buttons: a touch more presence --- */
.btn { padding: 13px 30px; letter-spacing: .01em; }
.btn-secondary, .btn-orange, .btn-success { font-weight: 700; }
/* --- Service cards: deeper polish + a quiet "read more" cue --- */
.service-list .service-item .card { border-radius: 18px !important; }
.service-list .service-item .card-body { padding: 30px 26px; min-height: 220px; }
.card-title.semiBorderBottom { font-size: 1.12rem !important; margin-bottom: 14px; padding-bottom: 16px; }
/* --- Otherlinks / IPC cards --- */
#home-otherlinks .eq-card, #home-otherlinks .card { border-radius: 18px !important; }
#home-otherlinks .card-sm .card-body { padding: 30px 26px; }
/* --- Footer: even, premium columns --- */
#sitemap { padding-top: var(--acb-section-y) !important; padding-bottom: 56px !important; }
#sitemap .row > [class*="col-"] { margin-bottom: 8px; }
/* --- Subtle, safe scroll-reveal (only active once JS opts in) --- */
body.acb-js .acb-anim { opacity: 0; transform: translateY(18px); }
body.acb-js .acb-anim.is-in {
opacity: 1; transform: none;
transition: opacity .7s var(--acb-ease), transform .7s var(--acb-ease);
}
@media (prefers-reduced-motion: reduce) {
body.acb-js .acb-anim { opacity: 1 !important; transform: none !important; }
}
/* ===========================================================================
22. PREMIUM AMPLIFICATION
=========================================================================== */
/* Bolder, more confident typographic hierarchy */
.sectionTitle, .sectionTitle.semiBorderBottom {
font-weight: 800;
font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem) !important;
line-height: 1.12; letter-spacing: -.022em;
margin-bottom: 28px; padding-bottom: 22px;
}
.sectionTitle.semiBorderBottom::after { width: 64px !important; height: 4px; }
body.lyt-default { font-size: 16.5px; }
.home_box p { font-size: 16.5px; line-height: 1.82; }
/* Cinematic hero */
#home-welcome.bg-light { padding: 80px 0 !important; }
#home-welcome .wimage { min-height: 600px; }
#home-secondOpinion.form { padding: 46px 48px !important; box-shadow: 0 50px 100px -50px rgba(0,0,0,.62); }
#home-secondOpinion .sectionTitle { font-size: clamp(1.45rem, 1.1rem + .9vw, 1.85rem) !important; }
/* Optional hero copy overlay (renders only if the ACF fields are filled) */
.acb-hero-copy {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: 40px 40px 36px; color: #fff;
background: linear-gradient(180deg, transparent, rgba(6,27,70,.82) 78%);
}
.acb-hero-eyebrow {
display: inline-block; font-family: var(--acb-display); font-weight: 700;
font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
color: #fff; background: rgba(12,83,198,.92); padding: 7px 14px; border-radius: 999px;
margin-bottom: 14px;
}
.acb-hero-title {
font-family: var(--acb-display); font-weight: 800; color: #fff !important;
font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.12;
letter-spacing: -.02em; margin: 0 0 10px; text-shadow: 0 2px 18px rgba(6,27,70,.5);
}
.acb-hero-sub { color: rgba(255,255,255,.92); font-size: 16px; line-height: 1.6; margin: 0; max-width: 30em; }
/* More generous, premium cards */
.service-list .service-item .card-body { padding: 34px 28px; min-height: 230px; }
.service-list .service-item .card { border-radius: 20px !important; }
.service-list .service-item .card::before { height: 4px; }
.service-list .service-item:hover .card { transform: translateY(-8px); }
#home-otherlinks .eq-card, #home-otherlinks .card, #find-service .card { box-shadow: 0 14px 40px -26px rgba(10,45,114,.35); }
/* Quick-action tiles: a touch more presence */
#home-distribution .item a { padding: 26px 28px; font-size: 16px; }
/* Facts: more air */
#home-facts.bg-primary { padding: 72px 0 !important; }
#home-facts .counter { font-size: clamp(2rem, 1.3rem + 2vw, 3rem); }
/* Section rhythm a touch larger for breathing room */
#index-why, #find-service, #index-hospitals, #index-ips, #home-otherlinks {
padding-top: 104px !important; padding-bottom: 104px !important;
}
/* ===========================================================================
23. SITE-WIDE INNER PAGES (treatments, technology, doctors, news, single,
search, contact …) — they share #page-details / #page-content / aside,
so styling these makes the WHOLE site premium, not just the homepage.
=========================================================================== */
/* Page shell */
#page-details { background: var(--acb-mist) !important; padding: 64px 0 96px !important; }
/* Premium breadcrumb band (templates that include it) */
#page-breadcrumb {
background: linear-gradient(120deg, var(--acb-navy-900), var(--acb-navy) 65%, var(--acb-navy-700)) !important;
padding: 20px 0 !important; margin-bottom: 0;
}
#page-breadcrumb .container { }
#page-breadcrumb .breadcrumb { background: transparent !important; padding: 0 !important; margin: 0; }
#page-breadcrumb .breadcrumb-item a { color: rgba(255,255,255,.82) !important; font-weight: 600; }
#page-breadcrumb .breadcrumb-item a:hover { color: #fff !important; }
#page-breadcrumb .breadcrumb-item.active,
#page-breadcrumb .breadcrumb-item.active h1 { color: #fff !important; }
#page-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5) !important; }
/* Banner image */
.page-banner, .page-banner.with-shadow {
border-radius: 18px !important;
box-shadow: 0 24px 60px -34px rgba(10,45,114,.45) !important;
border: 0 !important;
}
/* Page title */
#page-content h1, .page-context h1, #page-content h1.semiBorderBottom {
font-family: var(--acb-display); font-weight: 800; color: var(--acb-ink) !important;
font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem); line-height: 1.14;
letter-spacing: -.02em; border: 0 !important;
padding-bottom: 20px; margin-bottom: 26px; position: relative; text-transform: none;
}
#page-content h1.semiBorderBottom::after, .page-context h1.semiBorderBottom::after {
content: ""; position: absolute; left: 0; bottom: 0; margin: 0 !important;
width: 64px !important; height: 4px; border: 0 !important; border-radius: 4px;
background: linear-gradient(90deg, var(--acb-coral), var(--acb-coral-600));
}
/* Content card */
#page-content .page-context, #page-content .page-context.uhm-box {
background: #fff !important; border: 1px solid var(--acb-line) !important;
border-radius: 18px !important; box-shadow: 0 18px 48px -30px rgba(10,45,114,.30) !important;
padding: 44px 48px !important; margin-bottom: 28px;
}
/* Editorial typography inside content */
.page-context h2 { font-family: var(--acb-display); font-weight: 800; color: var(--acb-ink);
font-size: 1.55rem; line-height: 1.2; margin: 1.7em 0 .55em; letter-spacing: -.01em; }
.page-context h3 { font-family: var(--acb-display); font-weight: 700; color: var(--acb-ink);
font-size: 1.25rem; margin: 1.5em 0 .5em; }
.page-context h4 { font-family: var(--acb-display); font-weight: 700; color: var(--acb-ink); font-size: 1.1rem; margin: 1.4em 0 .5em; }
.page-context p, .page-context li { font-size: 16.5px; line-height: 1.85; color: var(--acb-slate); }
.page-context p { margin: 0 0 1.15em; }
.page-context a { color: var(--acb-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.page-context a:hover { color: var(--acb-coral); }
.page-context ul, .page-context ol { margin: 0 0 1.3em 1.25em; padding: 0; }
.page-context li { margin-bottom: .55em; }
.page-context ul li::marker { color: var(--acb-coral); }
.page-context img { border-radius: 12px; max-width: 100%; height: auto; }
.page-context blockquote {
border-left: 4px solid var(--acb-coral); background: var(--acb-mist);
padding: 18px 24px; border-radius: 0 12px 12px 0; margin: 1.5em 0; color: var(--acb-ink);
}
.page-context table { width: 100%; border-collapse: collapse; margin: 1.4em 0; border-radius: 12px; overflow: hidden; }
.page-context th { background: var(--acb-navy); color: #fff; font-family: var(--acb-display); font-weight: 700; }
.page-context th, .page-context td { border: 1px solid var(--acb-line); padding: 12px 16px; text-align: left; }
.page-context tr:nth-child(even) td { background: var(--acb-mist); }
.page-context iframe { border-radius: 12px; }
/* Sidebar (list-group navigation) */
#page-details aside .list-group, #page-details aside .list-group.with-shadow {
border-radius: 16px !important; overflow: hidden;
border: 1px solid var(--acb-line) !important;
box-shadow: 0 18px 48px -30px rgba(10,45,114,.30) !important;
}
#page-details aside .list-group-item {
border: 0 !important; border-bottom: 1px solid var(--acb-line) !important;
padding: 15px 18px !important; font-family: var(--acb-display); font-weight: 600;
color: var(--acb-ink) !important; font-size: 14.5px; background: #fff;
}
#page-details aside .list-group-item:last-child { border-bottom: 0 !important; }
#page-details aside .list-group-item-action:hover {
background: var(--acb-mist) !important; color: var(--acb-navy) !important; padding-left: 22px !important;
}
#page-details aside .list-group-item.active {
background: linear-gradient(120deg, var(--acb-navy), var(--acb-navy-700)) !important;
color: #fff !important; border-color: transparent !important;
}
#page-details aside .banner img { border-radius: 16px !important; box-shadow: 0 18px 48px -30px rgba(10,45,114,.30); }
#page-details aside .btn-outline-orange {
border: 1.5px solid var(--acb-coral) !important; color: var(--acb-coral) !important;
background: transparent !important; border-radius: 999px !important; margin-top: 14px;
}
#page-details aside .btn-outline-orange:hover { background: var(--acb-coral) !important; color: #fff !important; }
/* Listing / doctor cards on inner pages */
.uhm-list-item .card {
border: 1px solid var(--acb-line) !important; border-radius: 16px !important;
overflow: hidden; box-shadow: 0 14px 40px -26px rgba(10,45,114,.35);
transition: transform .25s var(--acb-ease), box-shadow .25s var(--acb-ease);
}
.uhm-list-item:hover .card, .uhm-list-item .card:hover {
transform: translateY(-6px); box-shadow: 0 24px 60px -30px rgba(10,45,114,.45);
}
.uhm-list-item .card-img-top { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.uhm-list-item .card-body.bg-primary {
background: linear-gradient(120deg, var(--acb-navy), var(--acb-navy-700)) !important;
}
.uhm-list-item .card-body .h6 { font-family: var(--acb-display); font-weight: 700; }
/* Tabs, alerts, pagination polish (used on some inner pages) */
.tab-content.with-shadow { border-radius: 0 0 16px 16px !important; box-shadow: 0 18px 48px -30px rgba(10,45,114,.3) !important; }
.pagination .page-link { border: 1px solid var(--acb-line); color: var(--acb-navy); border-radius: 10px !important; margin: 0 4px; font-weight: 700; }
.pagination .page-item.active .page-link { background: var(--acb-navy) !important; border-color: var(--acb-navy) !important; }
/* Search results + 404 readability on the mist shell */
#page-content, #page-content .page-context { color: var(--acb-slate); }
/* ===========================================================================
24. LISTING GRIDS (treatment / technology / physicians / doctor cards)
Equal-height premium cards with a readable, centered navy caption.
=========================================================================== */
#treatment, #technology, #physicians, .uhm-list-grid { background: var(--acb-mist) !important; }
#treatment, #technology { padding: 64px 0 96px !important; }
/* Make every card in a listing row the same height regardless of title length */
#treatment-units, #treatment .row, #technology .row, #physicians .row {
align-content: flex-start !important;
}
.uhm-list-item { display: flex !important; }
.uhm-list-item > .card { display: flex; flex-direction: column; width: 100%; height: 100%; }
.uhm-list-item > .card > a { display: flex; flex-direction: column; height: 100%; color: inherit; }
/* Consistent image crop */
.uhm-list-item .card-img-top {
aspect-ratio: 4 / 3 !important; object-fit: cover !important; width: 100% !important;
display: block; transition: transform .5s var(--acb-ease);
}
.uhm-list-item .card { overflow: hidden; }
.uhm-list-item:hover .card-img-top { transform: scale(1.05); }
/* Navy caption: fills remaining space so all cards align; WHITE, bold, centered */
.uhm-list-item .card-body.bg-primary {
flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
min-height: 92px; padding: 20px 18px !important;
background: linear-gradient(120deg, var(--acb-navy), var(--acb-navy-700)) !important;
}
.uhm-list-item .card-body.bg-primary,
.uhm-list-item .card-body.bg-primary p,
.uhm-list-item .card-body .card-text,
.uhm-list-item .card-body .h6 {
color: #fff !important;
}
.uhm-list-item .card-text.h6, .uhm-list-item .card-body .h6 {
font-family: var(--acb-display); font-weight: 700; font-size: 1rem;
line-height: 1.35; margin: 0; letter-spacing: -.005em;
}
.uhm-list-item .card-body p + p { color: rgba(255,255,255,.85) !important; font-weight: 500; font-size: .9rem; }
/* Breadcrumb: align the band's content exactly with the page container, kill
the legacy 80px side padding, and give it comfortable height. */
#page-breadcrumb { padding: 20px 0 !important; }
#page-breadcrumb .breadcrumb-item h1 { font-family: var(--acb-display); font-weight: 700; letter-spacing: .01em; }
/* ===========================================================================
25. TOP-TIER PREMIUM LISTING CARDS
Full-bleed image + gradient scrim + white title overlay + hover motion.
Overrides the simple navy-caption layout from §24.
=========================================================================== */
.uhm-list-item { display: flex !important; }
.uhm-list-item > .card {
position: relative; width: 100%; height: 100%;
border: 0 !important; border-radius: 22px !important; overflow: hidden;
box-shadow: 0 20px 54px -30px rgba(10,45,114,.45);
transition: transform .35s var(--acb-ease), box-shadow .35s var(--acb-ease);
background: var(--acb-navy-900);
}
.uhm-list-item > .card > a { display: block; position: relative; height: 100%; color: inherit; }
.uhm-list-item .card-img-top {
aspect-ratio: 4 / 5 !important; object-fit: cover !important;
width: 100% !important; height: 100% !important; display: block;
transition: transform .65s var(--acb-ease); will-change: transform;
}
.uhm-list-item:hover .card-img-top { transform: scale(1.07); }
/* Title overlay on a strong navy scrim (always readable) */
.uhm-list-item .card-body.bg-primary {
position: absolute !important; inset: auto 0 0 0; z-index: 2;
min-height: 0 !important; padding: 80px 20px 26px !important;
display: flex; align-items: flex-end; justify-content: center;
background: linear-gradient(180deg, rgba(6,27,70,0) 0%, rgba(6,27,70,.45) 42%, rgba(6,27,70,.93) 100%) !important;
}
.uhm-list-item .card-text.h6, .uhm-list-item .card-body .h6 {
color: #fff !important; font-family: var(--acb-display); font-weight: 700;
font-size: 1.08rem; line-height: 1.32; margin: 0; letter-spacing: -.005em;
text-shadow: 0 2px 12px rgba(6,27,70,.65);
}
/* Coral accent line grows on hover */
.uhm-list-item > .card::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3;
background: linear-gradient(90deg, var(--acb-coral), var(--acb-coral-600));
transform: scaleX(0); transform-origin: left; transition: transform .45s var(--acb-ease);
}
.uhm-list-item:hover > .card::after { transform: scaleX(1); }
.uhm-list-item:hover > .card {
transform: translateY(-8px);
box-shadow: 0 34px 80px -32px rgba(10,45,114,.6);
}
/* ===========================================================================
26. COMPREHENSIVE STATES + MOBILE MENU + NEWS LIST (cohesion pass)
=========================================================================== */
/* --- Link states: never white-on-white / dark-on-dark; coral accents ----- */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link.show { color: var(--acb-coral) !important; }
/* Kill the legacy bright-blue (#0af) accents site-wide → premium navy/coral */
a.text-secondary, .text-secondary { color: var(--acb-navy) !important; }
.btn-secondary, .btn.btn-secondary {
background: linear-gradient(120deg, var(--acb-navy), var(--acb-navy-700)) !important;
border: 0 !important; color: #fff !important;
}
.btn-secondary:hover { filter: brightness(1.08); color: #fff !important; }
/* --- PREMIUM MOBILE MENU (collapse panel under the navbar, <992px) -------- */
.navbar-toggler { border: 0 !important; padding: 8px 10px !important; position: relative; z-index: 2001; }
.navbar-toggler:focus { box-shadow: none !important; outline: none; }
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='%230a2d72' stroke-width='2.4' stroke-linecap='round' d='M5 8h20M5 15h20M5 22h20'/%3E%3C/svg%3E") !important;
}
@media (max-width: 991.98px) {
/* logo + close stay above the overlay */
.navbar-brand { position: relative; z-index: 2001; }
.navbar-toggler[aria-expanded="true"] { position: fixed; top: 16px; right: 16px; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='%230a2d72' stroke-width='2.6' stroke-linecap='round' d='M7 7l16 16M23 7L7 23'/%3E%3C/svg%3E") !important;
}
/* ── FULL-SCREEN LIGHT PREMIUM MOBILE MENU ─────────────────────────── */
.mobile-menu {
position: fixed !important; inset: 0 !important; z-index: 2000 !important;
background: linear-gradient(170deg, #ffffff 0%, #eef3fb 58%, #e6eef9 100%) !important;
margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
padding: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
}
.mobile-menu .navbar-nav { width: 100%; padding: 92px 0 48px; }
/* menu items: large rows, divider, navy, left icon, right chevron */
.mobile-menu .navbar-nav > .nav-item {
width: calc(100% - 44px); margin: 0 22px;
border-bottom: 1px solid rgba(10, 45, 114, .08);
}
.mobile-menu .navbar-nav > .nav-item > .nav-link {
text-align: left !important; padding: 19px 4px !important;
font-size: 19px !important; font-family: var(--acb-display); font-weight: 600;
color: var(--acb-ink) !important;
display: flex; align-items: center; gap: 16px; justify-content: flex-start;
position: relative;
}
/* per-item icons (FontAwesome, by order) */
.mobile-menu .navbar-nav > li.nav-item > .nav-link::before {
font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 18px;
color: var(--acb-coral); width: 26px; text-align: center; flex: 0 0 26px;
}
.mobile-menu .navbar-nav > li.nav-item:nth-of-type(1) > .nav-link::before { content: "\f015"; }
.mobile-menu .navbar-nav > li.nav-item:nth-of-type(2) > .nav-link::before { content: "\f05a"; }
.mobile-menu .navbar-nav > li.nav-item:nth-of-type(3) > .nav-link::before { content: "\f0f0"; }
.mobile-menu .navbar-nav > li.nav-item:nth-of-type(4) > .nav-link::before { content: "\f21e"; }
.mobile-menu .navbar-nav > li.nav-item:nth-of-type(5) > .nav-link::before { content: "\f610"; }
.mobile-menu .navbar-nav > li.nav-item:nth-of-type(6) > .nav-link::before { content: "\f02d"; }
.mobile-menu .navbar-nav > li.nav-item:nth-of-type(7) > .nav-link::before { content: "\f1ea"; }
.mobile-menu .navbar-nav > li.nav-item:nth-of-type(8) > .nav-link::before { content: "\f0e0"; }
/* chevron for items with submenus */
.mobile-menu .nav-item.dropdown > .nav-link::after {
content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900;
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
color: var(--acb-slate); margin: 0; background: none; width: auto; height: auto;
}
.mobile-menu .nav-link::after { display: none; }
.mobile-menu .nav-item.dropdown > .nav-link::after { display: inline-block; }
/* submenus, indented under their parent */
.mobile-menu .dropdown-menu {
position: static !important; display: block !important; float: none;
border: 0 !important; box-shadow: none !important; background: transparent !important;
margin: 0 0 10px 42px !important; padding: 0 !important;
}
.mobile-menu .dropdown-menu .nav-link {
text-align: left !important; padding: 10px 4px !important;
font-size: 15px !important; color: var(--acb-slate) !important;
}
.mobile-menu .dropdown-menu .nav-link:hover { color: var(--acb-coral) !important; }
/* language, search, social — premium spacing on light bg */
.mobile-menu .lang-dropdown { margin: 18px 22px 4px !important; padding: 0 !important; }
.mobile-menu .lang-dropdown .dropdown-toggle {
background: var(--acb-navy) !important; color: #fff !important;
border-radius: 12px !important; padding: 12px 18px !important; text-align: left !important;
}
.mobile-menu .social-media { padding: 20px 22px !important; }
.mobile-menu .social-media a i, .mobile-menu .openBtn { color: var(--acb-navy) !important; font-size: 22px; }
}
/* --- Service cards: consistent coral top-accent on hover (intentional) ---- */
.service-list .service-item .card { position: relative; }
.service-list .service-item .card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
background: linear-gradient(90deg, var(--acb-coral), var(--acb-coral-600));
transform: scaleX(0); transform-origin: left;
transition: transform .4s var(--acb-ease); border-radius: 20px 20px 0 0;
}
.service-list .service-item:hover .card::before { transform: scaleX(1); }
/* --- NEWS / BLOG LIST (page-news) — premium media cards ------------------- */
.news-item.card {
border: 1px solid var(--acb-line) !important; border-radius: 18px !important;
box-shadow: 0 16px 44px -28px rgba(10,45,114,.32) !important; overflow: hidden;
padding: 0 !important; transition: transform .25s var(--acb-ease), box-shadow .25s var(--acb-ease);
}
.news-item.card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -30px rgba(10,45,114,.42) !important; }
.news-item .container-fluid, .news-item .row { height: 100%; }
.news-item .col-md-4 { padding: 0 !important; }
.news-item .col-md-4 img {
width: 100% !important; height: 100% !important; min-height: 200px;
object-fit: cover !important; aspect-ratio: 4 / 3;
}
.news-item .col-md-8 { padding: 26px 30px !important; }
.news-item h5 { margin: 0 0 8px; font-family: var(--acb-display); font-weight: 800; line-height: 1.25; }
.news-item h5 a { color: var(--acb-ink) !important; }
.news-item h5 a:hover { color: var(--acb-coral) !important; }
.news-item h5 + br { display: none; }
.news-item .col-md-8 { color: var(--acb-slate); font-size: 15.5px; line-height: 1.7; }
.news-item .bottom-read-more, .news-item a.btn.text-secondary {
display: inline-flex; align-items: center; gap: 8px; margin-top: 16px !important;
color: var(--acb-coral) !important; font-family: var(--acb-display); font-weight: 700; padding: 0;
}
.news-item .bottom-read-more:hover { color: var(--acb-coral-600) !important; gap: 12px; }
/* §41 — read-more link pinned to the card's bottom-right corner (absolute) */
.news-item .col-md-8{ position:relative; padding-bottom:60px !important; }
.news-item .bottom-read-more, .news-item a.btn.text-secondary{
position:absolute; right:30px; bottom:22px; width:auto;
margin:0 !important; float:none !important;
display:inline-flex; align-items:center; gap:8px;
}
.news-item .bottom-read-more i{
font-size:1.25rem; line-height:1; transition:transform .18s var(--acb-ease);
}
.news-item .bottom-read-more:hover i{ transform:translateX(4px); }
/* ===========================================================================
27. TECH BARS + MOBILE LANG FIX + LOGO SAFETY (definitive, !important)
=========================================================================== */
/* --- Technology listing bars (page-technology .tech-bar) → premium rows --- */
#technology .row { row-gap: 4px; }
.tech-bar {
display: flex !important; align-items: center; justify-content: space-between; gap: 16px;
background: #fff !important; border: 1px solid var(--acb-line) !important;
border-radius: 14px !important; padding: 20px 24px !important; min-height: 74px;
color: var(--acb-navy) !important; font-family: var(--acb-display);
font-weight: 700 !important; text-decoration: none !important;
box-shadow: 0 10px 30px -24px rgba(10,45,114,.35) !important;
transition: transform .25s var(--acb-ease), box-shadow .25s var(--acb-ease), background .25s var(--acb-ease) !important;
position: relative; overflow: hidden; margin-bottom: 10px !important;
}
.tech-bar::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: linear-gradient(180deg, var(--acb-coral), var(--acb-coral-600));
transform: scaleY(0); transform-origin: top; transition: transform .3s var(--acb-ease);
}
.tech-bar strong { font-weight: 700 !important; line-height: 1.3; letter-spacing: -.005em; }
.tech-bar i { color: var(--acb-coral) !important; font-size: 16px; transition: transform .25s var(--acb-ease); flex: none; }
.tech-bar:hover {
background: linear-gradient(120deg, var(--acb-navy), var(--acb-navy-700)) !important;
color: #fff !important; transform: translateY(-3px);
box-shadow: 0 24px 50px -28px rgba(10,45,114,.55) !important; border-color: transparent !important;
}
.tech-bar:hover strong { color: #fff !important; }
.tech-bar:hover i { color: #fff !important; transform: translateX(5px); }
.tech-bar:hover::before { transform: scaleY(1); }
/* --- FIX "white link" #1: language switcher inside the mobile menu --------- */
.mobile-menu .lang-dropdown .dropdown-toggle,
.mobile-menu .lang-dropdown a,
.mobile-menu .text-white,
.mobile-menu .btn.text-white {
color: var(--acb-navy) !important;
}
.mobile-menu .lang-dropdown { padding: 14px 24px 6px !important; }
.mobile-menu .lang-dropdown .dropdown-menu a { color: var(--acb-slate) !important; }
/* Global guard: any .text-white that ends up on a light surface stays legible
only inside known light components (menu/cards); dark sections keep white. */
#sitemap .text-white { color: var(--acb-navy) !important; }
/* --- LOGO: never collapse to a placeholder; always show, sized consistently */
.navbar-brand { display: inline-flex !important; align-items: center; min-height: 48px; }
.navbar-brand img,
#site-header .navbar-brand img {
height: 48px !important; width: auto !important; max-width: none !important;
opacity: 1 !important; visibility: visible !important; background: none !important;
}
nav.navbar.acb-stuck .navbar-brand img { height: 42px !important; }
/* ===========================================================================
28. DEFINITIVE HOVER FIX + FULL MOBILE PASS (!important throughout)
=========================================================================== */
/* --- HOVER BUG: base turns card-title/body WHITE on hover (invisible on a
white card). Keep card white with dark, readable text on hover. ------ */
.cards-hovered .card:hover,
.service-list .service-item .card:hover { background: #fff !important; }
.cards-hovered .card:hover .card-title,
.cards-hovered .card:hover .card-title a,
.service-list .service-item:hover .card-title {
color: var(--acb-navy) !important;
}
.cards-hovered .card:hover .card-body,
.cards-hovered .card:hover .card-body p,
.cards-hovered .card:hover p,
.service-list .service-item:hover .card-body,
.service-list .service-item:hover .card-body p { color: var(--acb-slate) !important; }
.cards-hovered .card:hover .semiBorderBottom::after {
border: 0 !important;
background: linear-gradient(90deg, var(--acb-coral), var(--acb-coral-600)) !important;
}
/* --- OTHER-LINKS card titles: sit cleanly at image bottom (no straddle) --- */
#home-otherlinks .eq-card { position: relative; }
#home-otherlinks .absTitle {
position: absolute !important; top: 0; left: 0; right: 0; height: 168px;
display: flex; align-items: flex-end; justify-content: center;
margin: 0 !important; padding: 0 20px 16px !important; z-index: 3; pointer-events: none;
}
#home-otherlinks .absTitle a { pointer-events: auto; }
/* ========================== MOBILE (≤767px) =============================== */
@media (max-width: 767.98px) {
/* Mobile hero: readable title + button on a navy scrim */
#home-welcome .wimage { min-height: 360px; position: relative; }
#home-welcome .atbottom.v-gradient-trans-white {
position: absolute !important; left: 0; right: 0; bottom: 0; top: auto !important;
padding: 60px 20px 26px !important;
background: linear-gradient(180deg, transparent, rgba(6,27,70,.88) 70%) !important;
}
#home-welcome .atbottom h2 {
color: #fff !important; font-family: var(--acb-display); font-weight: 800 !important;
text-shadow: 0 2px 14px rgba(6,27,70,.6); margin-bottom: 16px !important; font-size: 1.4rem !important;
}
#home-secondOpinion.form { padding: 30px 22px !important; }
/* Quick-action tiles: STACK full width (was 3 cramped columns) */
#home-distribution { margin-top: -28px !important; padding: 0 16px !important; }
#home-distribution .row.no-gutters { flex-direction: column !important; }
#home-distribution .item {
width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important;
border-right: 0 !important; border-bottom: 1px solid var(--acb-line) !important;
}
#home-distribution .item:last-child { border-bottom: 0 !important; }
#home-distribution .item a {
justify-content: flex-start !important; text-align: left !important;
padding: 18px 22px !important; font-size: 15px !important; text-transform: none !important;
}
#home-distribution .item .fa-angle-right { margin-left: auto; }
/* Facts band: 2 per row, big numbers fit, clean dividers */
#home-facts.bg-primary { padding: 44px 0 !important; }
#home-facts .facts-list { flex-wrap: wrap !important; padding: 0 16px !important; }
#home-facts .facts-list > .col {
flex: 0 0 50% !important; max-width: 50% !important; margin-bottom: 22px;
padding: 0 12px !important;
}
#home-facts .col + .col .fact::before { display: none !important; }
#home-facts .counter { font-size: 1.7rem !important; word-break: break-word; }
/* Section rhythm: tighter on mobile */
#index-why, #find-service, #index-hospitals, #index-ips, #home-otherlinks {
padding-top: 56px !important; padding-bottom: 56px !important;
}
/* Section titles: scale down so they don't dominate */
.sectionTitle, .sectionTitle.semiBorderBottom { font-size: 1.7rem !important; }
/* Content split sections stack with comfortable spacing */
#index-why .card, #index-hospitals .card, #index-ips .card { margin-bottom: 18px; }
/* IPC / service "card-sm" text: left-align (centered wrapped badly) */
#home-otherlinks .card-sm .card-body { text-align: left !important; padding: 26px 24px !important; }
#home-otherlinks .card-sm .card-title { text-align: left !important; }
/* Service cards: comfy single-column rhythm */
.service-list .service-item { margin-bottom: 18px !important; }
.service-list .service-item .card-body { min-height: 0 !important; padding: 26px 24px !important; }
/* Inner pages: reduce side padding so content card isn't cramped */
#page-content .page-context, #page-content .page-context.uhm-box { padding: 26px 22px !important; }
#page-details { padding: 36px 0 56px !important; }
/* Listing image cards: a touch shorter on phones */
.uhm-list-item .card-img-top { aspect-ratio: 1 / 1 !important; }
/* Tech bars full width already (col-lg-6 → 100% on mobile) */
.tech-bar { min-height: 64px; padding: 16px 18px !important; }
}
/* ===========================================================================
29. PREMIUM ELEVATION — icon badges, header, footer, sidebar
=========================================================================== */
/* --- Premium icon badges: why-bullets (coral gradient chips) ------------- */
#index-why .col-md-5 .home_box p {
gap: 16px !important; padding: 18px 20px !important; border-radius: 16px !important;
align-items: center; box-shadow: 0 14px 40px -28px rgba(10,45,114,.32) !important;
transition: transform .25s var(--acb-ease), box-shadow .25s var(--acb-ease);
}
#index-why .col-md-5 .home_box p:hover {
transform: translateY(-3px); box-shadow: 0 22px 50px -28px rgba(10,45,114,.42) !important;
}
#index-why .col-md-5 .home_box p i {
width: 50px !important; height: 50px !important; min-width: 50px;
display: inline-flex !important; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--acb-coral), var(--acb-coral-600)) !important;
color: #fff !important; border-radius: 15px !important; padding: 0 !important;
font-size: 1.2rem !important; box-shadow: 0 12px 26px -12px rgba(12,83,198,.65);
}
/* --- Premium icon badges: quick-action tiles (mist rounded badge) -------- */
#home-distribution .item img {
width: 26px !important; height: 26px !important; padding: 13px !important;
background: var(--acb-mist) !important; border-radius: 14px !important;
box-sizing: content-box; object-fit: contain;
transition: background .2s var(--acb-ease);
}
#home-distribution .item a:hover img {
background: rgba(12,83,198,.12) !important;
}
/* --- HEADER: refined topbar trust strip + actions ----------------------- */
#tophead.bg-primary {
background: linear-gradient(120deg, var(--acb-navy-900), var(--acb-navy)) !important;
}
#acb-trust span { position: relative; padding-left: 18px; }
#acb-trust span::before {
content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
width: 6px; height: 6px; border-radius: 50%; background: var(--acb-coral);
}
#tophead .social-media .links a {
width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 9px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.85);
}
/* --- FOOTER: premium structure + top accent + social -------------------- */
#sitemap {
position: relative;
background: linear-gradient(180deg, var(--acb-navy-900), var(--acb-navy)) !important;
}
#sitemap::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, var(--acb-coral), var(--acb-coral-600), transparent);
}
#sitemap h3 {
font-family: var(--acb-display); font-weight: 800; color: #fff !important;
font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; padding-bottom: 10px;
}
#sitemap h3::after {
content: ""; display: block; width: 34px; height: 3px; margin-top: 10px;
background: var(--acb-coral); border-radius: 3px;
}
#sitemap a { transition: color .18s var(--acb-ease), padding-left .18s var(--acb-ease); }
#sitemap a:hover { color: #fff !important; padding-left: 6px; }
#site-footer.bg-primary {
background: var(--acb-navy-900) !important; border-top: 1px solid rgba(255,255,255,.08);
}
/* --- SIDEBAR (inner pages): premium with chevron + active accent -------- */
#page-details aside .list-group-item {
position: relative; padding-right: 38px !important;
}
#page-details aside .list-group-item-action::after {
content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900;
position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
color: var(--acb-line); transition: color .2s var(--acb-ease), transform .2s var(--acb-ease);
}
#page-details aside .list-group-item-action:hover::after { color: var(--acb-coral); transform: translateY(-50%) translateX(3px); }
#page-details aside .list-group-item.active::after { color: rgba(255,255,255,.9); }
#page-details aside .list-group-item.active {
position: relative;
}
#page-details aside .list-group-item.active::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--acb-coral);
}
/* ===========================================================================
30. CORPORATE POLISH — sidebar single-line, logo guard, header/footer
=========================================================================== */
/* --- SIDEBAR: premium card + STRICT single line (ellipsis) --------------- */
#page-details aside .list-group {
border-radius: 18px !important; overflow: hidden;
border: 1px solid var(--acb-line) !important; box-shadow: var(--acb-shadow-sm) !important;
}
#page-details aside .list-group-item {
white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
padding: 15px 42px 15px 22px !important; font-size: 14.5px !important;
font-family: var(--acb-display) !important; font-weight: 600 !important;
color: var(--acb-ink) !important; background: #fff !important;
border: 0 !important; border-bottom: 1px solid var(--acb-line) !important;
transition: background .18s var(--acb-ease), color .18s var(--acb-ease), padding-left .18s var(--acb-ease);
}
#page-details aside .list-group-item:last-child { border-bottom: 0 !important; }
#page-details aside .list-group-item:hover {
background: var(--acb-mist) !important; color: var(--acb-navy) !important; padding-left: 26px !important;
}
#page-details aside .list-group-item.active {
background: linear-gradient(120deg, var(--acb-navy), var(--acb-navy-700)) !important;
color: #fff !important; border-color: transparent !important;
}
/* --- LOGO guard: navbar stays white, navy logo always visible ----------- */
#site-header nav.navbar, #site-header .navbar { background: #fff !important; }
#site-header .navbar-brand img {
filter: none !important; opacity: 1 !important; visibility: visible !important;
-webkit-filter: none !important; mix-blend-mode: normal !important;
}
@media (max-width: 991.98px) {
#site-header .navbar { background: #fff !important; }
#site-header .navbar-brand img { width: auto !important; height: 42px !important; max-width: 220px; }
}
/* --- HEADER corporate: clean navy top strip, generous nav --------------- */
#tophead.bg-primary { background: var(--acb-navy-900) !important; min-height: 46px; }
#tophead .container { min-height: 46px; }
nav.navbar, #site-header .navbar { padding: 22px 0 !important; }
nav.navbar.acb-stuck, #site-header .navbar.acb-stuck { padding: 12px 0 !important; }
.navbar-nav > .nav-item > .nav-link { letter-spacing: .03em; }
/* --- FOOTER corporate: structured Acıbadem identity --------------------- */
#sitemap { padding-top: 56px !important; padding-bottom: 40px !important; }
#sitemap .sitemap-item { padding: 0 !important; }
#site-footer.bg-primary {
background: var(--acb-navy-900) !important;
border-top: 1px solid rgba(255,255,255,.08) !important; padding: 22px 0 !important;
}
#site-footer img { max-height: 40px; width: auto; opacity: .95; }
#site-footer p { letter-spacing: .01em; }
/* ===========================================================================
31. BULLETPROOF LOGO + ALTERNATING SECTIONS WITH PREMIUM DIVIDERS
=========================================================================== */
/* --- LOGO: paint the navy mark as a background so it can NEVER render white
or vanish (independent of lazy-load / img optimization / whitening). - */
#site-header .navbar-brand {
display: inline-block !important;
width: 220px; height: 50px;
background: url(../transparent-bg-blueface.png) left center / contain no-repeat !important;
flex: none;
}
#site-header .navbar-brand h1 { margin: 0 !important; padding: 0 !important; line-height: 0; }
#site-header .navbar-brand img { opacity: 0 !important; width: 100% !important; height: 100% !important; }
nav.navbar.acb-stuck .navbar-brand { height: 44px; }
@media (max-width: 575.98px) {
#site-header .navbar-brand { width: 184px; height: 42px; }
}
/* --- ALTERNATING SECTION BACKGROUNDS (visual rhythm + separation) -------- */
#index-why { background: #ffffff !important; }
#home-search { background: var(--acb-mist) !important; }
#index-hospitals { background: var(--acb-mist) !important; }
#index-ips { background: #ffffff !important; }
#find-service { background: var(--acb-mist) !important; }
#home-otherlinks { background: #ffffff !important; }
/* --- PREMIUM DIVIDER between stacked content sections -------------------- */
#index-why, #index-hospitals, #index-ips, #find-service, #home-otherlinks {
position: relative;
}
#index-hospitals::before, #index-ips::before,
#find-service::before, #home-otherlinks::before {
content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: min(1180px, 90%); height: 1px;
background: linear-gradient(90deg, transparent, var(--acb-line) 18%, var(--acb-line) 82%, transparent);
}
/* A small coral accent dot centered on the divider for a premium touch */
#index-hospitals::after, #index-ips::after,
#find-service::after, #home-otherlinks::after {
content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
width: 7px; height: 7px; border-radius: 50%;
background: linear-gradient(135deg, var(--acb-coral), var(--acb-coral-600));
box-shadow: 0 0 0 4px rgba(12,83,198,.12);
}
/* Keep the split sections perfectly symmetric and aligned */
#index-hospitals .row, #index-ips .row, #index-why .row { align-items: center !important; }
#index-hospitals img, #index-ips img, #index-why img {
border-radius: var(--acb-radius) !important; box-shadow: var(--acb-shadow-sm) !important;
width: 100% !important; object-fit: cover !important;
}
/* ===========================================================================
32. PREMIUM SEARCH BAR (#home-search) — make it intentional & high-end
=========================================================================== */
#home-search {
background: linear-gradient(180deg, #ffffff 0%, var(--acb-mist) 100%) !important;
padding: 66px 0 58px !important;
}
#home-search .container { max-width: 860px; }
#home-search .col-md-8 { flex: 0 0 100%; max-width: 100%; }
#home-search form { position: relative; margin: 0; }
#home-search .input-group.search {
display: flex; align-items: center; flex-wrap: nowrap;
background: #fff !important; border: 1px solid var(--acb-line) !important;
border-radius: 999px !important; padding: 8px 8px 8px 30px !important;
box-shadow: 0 26px 60px -30px rgba(10,45,114,.45) !important;
transition: box-shadow .25s var(--acb-ease), border-color .25s var(--acb-ease), transform .25s var(--acb-ease);
}
#home-search .input-group.search:focus-within {
border-color: var(--acb-navy) !important;
box-shadow: 0 30px 72px -28px rgba(10,45,114,.55) !important; transform: translateY(-1px);
}
#home-search .input-group.search::before {
content: "\f002"; font-family: "Font Awesome 5 Free"; font-weight: 900;
color: var(--acb-slate); font-size: 16px; margin-right: 4px; flex: none;
}
#home-search input.form-control {
border: 0 !important; background: transparent !important; box-shadow: none !important;
height: 58px !important; padding: 0 18px !important; font-size: 1.06rem !important;
font-family: var(--acb-body); color: var(--acb-ink) !important; flex: 1 1 auto;
}
#home-search input.form-control::placeholder { color: var(--acb-slate); opacity: .9; }
#home-search .input-group-append { margin: 0 !important; flex: none; }
#home-search .input-group-append .btn {
width: 56px !important; height: 56px !important; min-width: 56px;
border-radius: 50% !important; border: 0 !important;
background: linear-gradient(135deg, var(--acb-coral), var(--acb-coral-600)) !important;
color: #fff !important; display: inline-flex !important; align-items: center; justify-content: center;
box-shadow: 0 12px 26px -12px rgba(12,83,198,.6) !important;
transition: transform .2s var(--acb-ease), filter .2s var(--acb-ease);
}
#home-search .input-group-append .btn:hover { transform: scale(1.06); filter: brightness(1.06); }
#home-search .input-group-append .btn i { font-size: 18px; color: #fff !important; }
/* ===========================================================================
33. PHYSICIANS PAGE — premium filters + polished doctor cards
=========================================================================== */
/* --- Premium filter selects + search --------------------------------------*/
#physicians .uhm-filter-form .form-control,
#physicians select.form-control,
#physicians #search_dr {
height: 56px !important; border-radius: 14px !important;
border: 1px solid var(--acb-line) !important; background-color: #fff !important;
color: var(--acb-navy) !important; font-family: var(--acb-display) !important;
font-weight: 600 !important; font-size: 15px !important; padding: 0 18px !important;
box-shadow: 0 10px 30px -24px rgba(10,45,114,.35) !important;
transition: border-color .2s var(--acb-ease), box-shadow .2s var(--acb-ease);
}
#physicians select.form-control {
-webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230a2d72' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: right 18px center !important;
padding-right: 44px !important;
}
#physicians .uhm-filter-form .form-control:focus,
#physicians #search_dr:focus {
border-color: var(--acb-navy) !important;
box-shadow: 0 0 0 4px rgba(10,45,114,.12) !important; outline: none !important;
}
#physicians .uhm-filter-form .col, #physicians .uhm-filter-form [class*="col-"] { margin-bottom: 14px; }
/* --- Doctor cards: premium image cards (inherit §25) + graceful fallback --*/
#physicians .uhm-list-item .card { cursor: pointer; }
#physicians .uhm-list-item .doc-img,
.uhm-list-item .doc-img {
aspect-ratio: 3 / 4 !important; object-fit: cover !important; width: 100% !important;
background: linear-gradient(180deg, #eaf2fb 0%, #d7e6f6 100%) !important; /* fallback if photo missing */
}
#physicians .uhm-list-item .card-body.bg-primary {
background: linear-gradient(180deg, rgba(6,27,70,0) 0%, rgba(6,27,70,.5) 40%, rgba(6,27,70,.94) 100%) !important;
}
#physicians .uhm-list-item .card-body .h6,
.uhm-list-item .card-body .h6 {
color: #fff !important; font-family: var(--acb-display); font-weight: 700;
font-size: 1rem; line-height: 1.3; text-shadow: 0 2px 10px rgba(6,27,70,.6); margin: 0;
}
/* "view profile" arrow that appears on hover (top-right) */
#physicians .uhm-list-item .card::before {
content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 13px;
position: absolute; top: 14px; right: 14px; z-index: 4;
width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--acb-coral), var(--acb-coral-600)); color: #fff;
opacity: 0; transform: translateY(-6px) scale(.9); transition: all .28s var(--acb-ease);
box-shadow: 0 10px 22px -10px rgba(12,83,198,.7);
}
#physicians .uhm-list-item:hover .card::before { opacity: 1; transform: translateY(0) scale(1); }
/* ===========================================================================
34. PREMIUM FLAG LANGUAGE MENU (matches acibademinternational.com)
=========================================================================== */
/* Layout for the panel (display handled only in open states below) */
.lang-dropdown .acb-lang-menu {
grid-template-columns: 1fr 1fr; gap: 2px;
min-width: 460px; padding: 16px !important; margin-top: 12px !important;
border: 0 !important; border-radius: 18px !important; background: #fff !important;
box-shadow: 0 36px 80px -30px rgba(10,45,114,.55), 0 8px 24px -14px rgba(10,45,114,.22) !important;
}
.lang-dropdown .acb-lang-menu { display: none !important; }
.lang-dropdown:hover .acb-lang-menu,
.lang-dropdown .acb-lang-menu.show { display: grid !important; }
@media (max-width: 991.98px) { .lang-dropdown:hover .acb-lang-menu { display: none !important; }
.lang-dropdown .acb-lang-menu.show { display: grid !important; } }
.lang-dropdown .acb-lang-menu .dropdown-item {
display: flex !important; align-items: center; gap: 14px;
padding: 12px 16px !important; border-radius: 12px; white-space: nowrap; line-height: 1.2;
font-family: var(--acb-display) !important; font-weight: 600 !important; font-size: 16px !important;
color: var(--acb-ink) !important;
}
.lang-dropdown .acb-lang-menu .dropdown-item:hover {
background: var(--acb-mist) !important; color: var(--acb-navy) !important;
}
.lang-dropdown .acb-lang-menu .acb-flag {
width: 26px !important; height: 19px !important; border-radius: 4px; flex: none;
object-fit: cover; margin: 0 !important; top: 0 !important; position: static !important;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* Desktop topbar: align panel to the right edge of the toggle + globe icon */
#tophead .lang-dropdown { position: relative; }
/* Force a stable right-aligned position and neutralize Bootstrap/Popper's
inline transform (which otherwise locks the panel to the left on click). */
#tophead .lang-dropdown .acb-lang-menu {
position: absolute !important;
top: 100% !important; right: 0 !important; left: auto !important;
transform: none !important; margin-top: 10px !important;
}
/* Invisible bridge across the toggle→panel gap so hover doesn't drop while
moving the cursor down into the menu. */
#tophead .lang-dropdown .acb-lang-menu::before {
content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 16px; background: transparent;
}
#tophead .lang-dropdown .dropdown-toggle::before {
content: "\f0ac"; font-family: "Font Awesome 5 Free"; font-weight: 900;
margin-right: 8px; font-size: 14px; opacity: .92; vertical-align: -1px;
}
/* Mobile (inside collapsed menu): single column, full width */
.mobile-menu .acb-lang-menu, .acb-lang-menu.acb-lang-mobile {
grid-template-columns: 1fr !important; min-width: 0 !important; width: 100%;
box-shadow: none !important; padding: 8px !important; margin-top: 6px !important;
}
.mobile-menu .acb-lang-menu .dropdown-item,
.acb-lang-menu.acb-lang-mobile .dropdown-item { color: var(--acb-ink) !important; }
/* ============================================================================
24. PREMIUM HOME v2 — sections aligned to acibademinternational.com
(journey / about / why / figures / network / services).
Shared shells use the .acb-* namespace; tokens from §1.
========================================================================== */
.acb-section{ padding: 78px 0; }
.acb-section--mist{ background: var(--acb-mist); }
@media (max-width:991px){ .acb-section{ padding: 52px 0; } }
/* Section heads */
.acb-head{ margin-bottom: 44px; }
.acb-head--center{ text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.acb-eyebrow{
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--acb-display); font-weight: 800; font-size: .78rem;
letter-spacing: .14em; text-transform: uppercase; color: #2f6bff; margin-bottom: 14px;
}
.acb-head--center .acb-eyebrow{ justify-content: center; }
.acb-eyebrow-line{ width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.acb-title{
font-family: var(--acb-display); font-weight: 800; color: var(--acb-ink) !important;
font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem); line-height: 1.14; letter-spacing: -.02em; margin: 0;
}
.acb-section p{ color: var(--acb-slate); }
/* Buttons */
.acb-btn{
display: inline-flex; align-items: center; gap: 8px; font-family: var(--acb-display);
font-weight: 700; font-size: 1rem; padding: 14px 28px; border-radius: 999px;
text-decoration: none !important; transition: transform .15s var(--acb-ease), box-shadow .15s var(--acb-ease), filter .15s var(--acb-ease);
}
.acb-btn--navy{ background: var(--acb-navy); color: #fff !important; box-shadow: 0 14px 30px -14px rgba(10,45,114,.6); }
.acb-btn--navy:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.acb-btn--coral{ background: var(--acb-coral); color: #fff !important; box-shadow: 0 14px 30px -14px rgba(12,83,198,.6); }
.acb-btn--coral:hover{ transform: translateY(-2px); filter: brightness(1.04); }
/* 2 — Treatment journey (numbered) */
.acb-journey{ display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.acb-journey-card{
position: relative; display: flex; align-items: flex-start; gap: 16px;
background: #fff; border: 1px solid var(--acb-line); border-radius: var(--acb-radius);
padding: 24px 24px 24px 22px; box-shadow: var(--acb-shadow-sm); transition: transform .18s var(--acb-ease), box-shadow .18s var(--acb-ease);
}
.acb-journey-card:hover{ transform: translateY(-3px); box-shadow: var(--acb-shadow); }
.acb-journey-num{
position: absolute; top: -10px; left: 20px; width: 26px; height: 26px; border-radius: 50%;
background: var(--acb-coral); color: #fff; font-family: var(--acb-display); font-weight: 800;
font-size: .82rem; display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 14px -4px rgba(12,83,198,.6);
}
.acb-journey-ico{
flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: #eef4ff; color: var(--acb-navy); margin-top: 4px;
}
.acb-journey-ico svg{ width: 24px; height: 24px; }
.acb-journey-txt h3{ font-family: var(--acb-display); font-size: 1.04rem; font-weight: 700; color: var(--acb-ink); margin: 0 0 4px; }
.acb-journey-txt p{ font-size: .92rem; line-height: 1.55; margin: 0; color: var(--acb-slate); }
/* 3 — About / human touch */
.acb-about{ display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.acb-about-media{ position: relative; }
.acb-about-media img{ width: 100%; border-radius: var(--acb-radius); box-shadow: var(--acb-shadow); object-fit: cover; aspect-ratio: 4/3; }
.acb-about-badge{
position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px;
background: rgba(10,31,74,.92); color: #fff; padding: 12px 18px; border-radius: 14px;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 16px 36px -18px rgba(2,12,40,.7);
}
.acb-about-badge b{ font-family: var(--acb-display); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.acb-about-badge span{ font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.acb-about-body .acb-title{ margin-bottom: 16px; }
.acb-about-body > p{ font-size: 1.02rem; line-height: 1.75; margin: 0 0 18px; }
/* Checklist (about + network) */
.acb-checklist{ list-style: none; margin: 0 0 26px; padding: 0; }
.acb-checklist li{ position: relative; padding-left: 32px; margin-bottom: 12px; color: var(--acb-ink); font-weight: 600; font-size: .98rem; }
.acb-checklist li::before{
content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%;
background: #e7f0ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%232f6bff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/13px no-repeat;
}
/* 4 — Why choose (value cards) */
.acb-values{ display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.acb-value{ background: #fff; border: 1px solid var(--acb-line); border-radius: var(--acb-radius); padding: 28px 24px; transition: transform .18s var(--acb-ease), box-shadow .18s var(--acb-ease); }
.acb-value:hover{ transform: translateY(-3px); box-shadow: var(--acb-shadow); }
.acb-value-ico{ width: 46px; height: 46px; border-radius: 12px; background: #eef4ff; color: var(--acb-navy); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.acb-value-ico svg{ width: 23px; height: 23px; }
.acb-value h3{ font-family: var(--acb-display); font-size: 1.08rem; font-weight: 700; color: var(--acb-ink); margin: 0 0 8px; }
.acb-value p{ font-size: .93rem; line-height: 1.6; margin: 0; color: var(--acb-slate); }
/* 5 — Key figures */
.acb-figures{ display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.acb-figure{ display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--acb-line); border-radius: 14px; padding: 18px 18px; box-shadow: var(--acb-shadow-sm); }
.acb-figure-ico{ flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(160deg, var(--acb-navy), var(--acb-navy-700)); color: #fff; display: flex; align-items: center; justify-content: center; }
.acb-figure-ico svg{ width: 23px; height: 23px; }
.acb-figure-txt b{ display: block; font-family: var(--acb-display); font-size: 1.45rem; font-weight: 800; color: var(--acb-ink); line-height: 1.05; }
.acb-figure-txt span{ display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--acb-slate); font-weight: 600; margin-top: 3px; }
/* 6 — Global network */
.acb-network{ display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.acb-network-body .acb-title{ margin-bottom: 16px; }
.acb-network-body > p{ font-size: 1.02rem; line-height: 1.75; margin: 0 0 18px; }
.acb-network-media{
position: relative; min-height: 320px; border-radius: var(--acb-radius); overflow: hidden;
background: radial-gradient(120% 120% at 70% 20%, #1746c4 0%, #0a2d72 45%, #061b46 100%);
display: flex; align-items: center; justify-content: center; box-shadow: var(--acb-shadow);
}
.acb-network-media img{ width: 100%; height: 100%; object-fit: cover; }
.acb-network-globe{ position: relative; color: rgba(255,255,255,.55); }
.acb-network-globe svg{ width: 230px; height: 230px; }
.acb-network-plane{ position: absolute; right: -18px; top: 38%; color: #fff; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); animation: acbFloat 4s ease-in-out infinite; }
.acb-network-plane svg{ width: 56px; height: 56px; }
@keyframes acbFloat{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }
.acb-network-chip{
position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px;
background: #fff; padding: 12px 16px; border-radius: 14px; box-shadow: 0 16px 40px -18px rgba(2,12,40,.55);
}
.acb-network-chip-ico{ width: 36px; height: 36px; border-radius: 10px; background: #eef4ff; color: var(--acb-navy); display: flex; align-items: center; justify-content: center; }
.acb-network-chip-ico svg{ width: 19px; height: 19px; }
.acb-network-chip b{ display: block; font-family: var(--acb-display); font-size: .92rem; color: var(--acb-ink); }
.acb-network-chip span{ display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acb-slate); }
/* 7 — Services (centers of excellence) */
.acb-services{ display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.acb-service{
display: flex; flex-direction: column; background: #fff; border: 1px solid var(--acb-line);
border-radius: var(--acb-radius); padding: 26px 22px; text-decoration: none !important;
transition: transform .18s var(--acb-ease), box-shadow .18s var(--acb-ease), border-color .18s var(--acb-ease);
}
.acb-service:hover{ transform: translateY(-3px); box-shadow: var(--acb-shadow); border-color: #cfe0ff; }
.acb-service h3{ font-family: var(--acb-display); font-size: 1.04rem; font-weight: 700; color: var(--acb-ink) !important; margin: 0 0 10px; }
.acb-service p{ font-size: .9rem; line-height: 1.55; color: var(--acb-slate); margin: 0 0 16px; flex: 1; }
.acb-service-go{ font-family: var(--acb-display); font-weight: 700; font-size: .88rem; color: var(--acb-coral); display: inline-flex; align-items: center; gap: 6px; }
.acb-service-go i{ transition: transform .15s var(--acb-ease); }
.acb-service:hover .acb-service-go i{ transform: translateX(4px); }
/* Responsive */
@media (max-width:991px){
.acb-journey,.acb-values,.acb-figures,.acb-services{ grid-template-columns: repeat(2,1fr); }
.acb-about,.acb-network{ grid-template-columns: 1fr; gap: 32px; }
.acb-network-media{ min-height: 260px; order: -1; }
}
@media (max-width:575px){
.acb-journey,.acb-values,.acb-figures,.acb-services{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion:reduce){ .acb-network-plane{ animation: none; } }
/* ============================================================
§25 — PRESERVED RICH CONTENT SECTIONS (why / hospitals / ips
/ insurance / group). Premium feature layout for long-form
copy carried over from the legacy homepage.
============================================================ */
.acb-feature{
display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.acb-feature--reverse .acb-feature-media{ order: 2; }
.acb-feature-body{ min-width: 0; }
.acb-feature-body--wide{ grid-column: span 1; }
.acb-feature .acb-eyebrow{ margin-bottom: 14px; }
.acb-feature .acb-title{ margin: 0 0 18px; }
.acb-feature-body p{
font-size: .98rem; line-height: 1.72; color: var(--acb-slate); margin: 0 0 16px;
}
.acb-feature-body .acb-btn{ margin-top: 8px; }
/* media: single image, stacked images, video embed */
.acb-feature-media{ min-width: 0; }
.acb-feature-single,
.acb-feature-imgs img{
width: 100%; height: auto; display: block; border-radius: var(--acb-radius);
box-shadow: var(--acb-shadow); object-fit: cover;
}
.acb-feature-imgs{ display: grid; gap: 18px; }
.acb-feature-imgs img:first-child{ aspect-ratio: 16/10; }
.acb-feature-imgs img:last-child{ aspect-ratio: 16/7; }
.acb-embed{
position: relative; width: 100%; padding-top: 62%; border-radius: var(--acb-radius);
overflow: hidden; box-shadow: var(--acb-shadow); background: var(--acb-navy);
}
.acb-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* WHY: highlight cards beside the wide copy column */
#index-why .acb-feature{ grid-template-columns: 1.4fr 1fr; align-items: center; }
.acb-highlights{ display: grid; gap: 16px; }
.acb-highlight{
display: flex; align-items: center; gap: 16px; background: #fff;
border: 1px solid var(--acb-line); border-radius: var(--acb-radius);
padding: 18px 20px; box-shadow: 0 6px 22px rgba(10,45,114,.05);
}
.acb-highlight-ico{
flex: none; width: 46px; height: 46px; border-radius: 12px;
display: grid; place-items: center; color: var(--acb-coral);
background: rgba(12,83,198,.10);
}
.acb-highlight-ico svg{ width: 24px; height: 24px; }
.acb-highlight p{
margin: 0; font-family: var(--acb-display); font-weight: 600; font-size: .96rem;
line-height: 1.4; color: var(--acb-ink);
}
/* GROUP: centered long-form prose */
.acb-prose{ max-width: 880px; margin: 0 auto; }
.acb-prose .acb-head{ margin-bottom: 26px; }
.acb-eyebrow--center{ justify-content: center; }
.acb-prose p{
font-size: .98rem; line-height: 1.78; color: var(--acb-slate);
margin: 0 0 18px; text-align: left;
}
/* Responsive — rich sections */
@media (max-width:991px){
.acb-feature{ grid-template-columns: 1fr; gap: 34px; }
#index-why .acb-feature{ grid-template-columns: 1fr; }
.acb-feature--reverse .acb-feature-media{ order: -1; }
}
/* ============================================================
§26 — page-main.php premium homepage extras
(quick-action cards + navy key-figures band)
============================================================ */
.acb-quick-sec{ padding-top: 34px; padding-bottom: 6px; }
.acb-quick{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.acb-quick-card{
display: flex; align-items: center; gap: 16px; background: #fff;
border: 1px solid var(--acb-line); border-radius: var(--acb-radius);
padding: 20px 24px; text-decoration: none !important; color: var(--acb-ink) !important;
box-shadow: 0 6px 22px rgba(10,45,114,.05);
transition: transform .18s var(--acb-ease), box-shadow .18s var(--acb-ease), border-color .18s var(--acb-ease);
}
.acb-quick-card:hover{ transform: translateY(-3px); box-shadow: var(--acb-shadow); border-color: #cfe0ff; }
.acb-quick-ico{
flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
color: var(--acb-navy); background: rgba(10,45,114,.07);
}
.acb-quick-ico svg{ width: 24px; height: 24px; }
.acb-quick-txt{ flex: 1; font-family: var(--acb-display); font-weight: 700; font-size: 1rem; line-height: 1.3; }
.acb-quick-card i{ color: var(--acb-coral); transition: transform .15s var(--acb-ease); }
.acb-quick-card:hover i{ transform: translateX(4px); }
/* Navy key-figures band */
.acb-section--navy{ background: var(--acb-navy); color: #fff; }
.acb-stats{ display: grid; grid-template-columns: repeat(5,1fr); gap: 26px; text-align: center; }
.acb-stat{ display: flex; flex-direction: column; gap: 8px; padding: 6px 4px; }
.acb-stat-num{
font-family: var(--acb-display); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.5rem);
line-height: 1; color: #fff;
}
.acb-stat-lbl{ font-size: .9rem; line-height: 1.4; color: rgba(255,255,255,.82); }
.acb-stat + .acb-stat{ border-left: 1px solid rgba(255,255,255,.14); }
/* News/stories cards — premium polish over legacy markup */
.acb-news-card{ border-radius: var(--acb-radius); overflow: hidden; }
@media (max-width:991px){
.acb-quick{ grid-template-columns: 1fr; }
.acb-stats{ grid-template-columns: repeat(2,1fr); gap: 22px 16px; }
.acb-stat + .acb-stat{ border-left: 0; }
}
@media (max-width:575px){
.acb-stats{ grid-template-columns: 1fr; }
}
/* ============================================================
§27 — overflow & alignment safety (prevents horizontal
overflow that shifts the whole page; flex/grid min-width fix)
============================================================ */
.acb-feature, .acb-journey, .acb-values, .acb-network,
.acb-stats, .acb-services, .acb-highlights{ min-width: 0; }
.acb-feature > *, .acb-journey-card, .acb-journey-txt,
.acb-feature-body, .acb-feature-body--wide, .acb-network-body, .acb-stat, .acb-value{ min-width: 0; }
.acb-feature-body p, .acb-feature-body h2,
.acb-journey-txt h3, .acb-journey-txt p,
.acb-value h3, .acb-value p, .acb-highlight p{ overflow-wrap: anywhere; }
.acb-section img{ max-width: 100%; height: auto; }
.acb-stat{ text-align: center; }
.acb-stat-num{ white-space: nowrap; }
.acb-stat-lbl{ overflow-wrap: anywhere; }
/* hard stop: never let a homepage section push the page wider than the viewport */
.template-content{ overflow-x: clip; }
/* ============================================================
§28 — UNIFIED SPACING RHYTHM + RESPONSIVE (final pass)
Tutarlı dikey ritim ve eksiksiz mobil/tablet uyumu.
Bu blok en sonda olduğu için önceki responsive kurallarını
netleştirir ve tek bir kaynak hâline getirir.
============================================================ */
/* Tutarlı dikey nefes — her bölüm aynı ritim */
.acb-section{ padding: 78px 0; }
.acb-head--center{ margin-bottom: 42px; }
/* Bölümler arası ince ayraç çizgisi (ardışık aynı zeminli bölümlerde) */
.acb-section + .acb-section:not(.acb-section--navy):not(.acb-section--mist){
border-top: 1px solid var(--acb-line);
}
/* ---- TABLET (≤ 991px) ---- */
@media (max-width: 991px){
.acb-section{ padding: 52px 0; }
.acb-head--center{ margin-bottom: 24px; }
.acb-journey{ grid-template-columns: repeat(2,1fr); }
.acb-values{ grid-template-columns: repeat(2,1fr); }
.acb-services{ grid-template-columns: repeat(2,1fr); }
.acb-quick{ grid-template-columns: 1fr; }
.acb-stats{ grid-template-columns: repeat(3,1fr); gap: 30px 14px; }
.acb-stat + .acb-stat{ border-left: 0; }
.acb-feature,
#index-why .acb-feature,
.acb-network{ grid-template-columns: 1fr; gap: 34px; }
.acb-feature--reverse .acb-feature-media{ order: -1; }
.acb-network-media{ min-height: 280px; order: -1; }
}
/* ---- PHONE (≤ 575px) ---- */
@media (max-width: 575px){
.acb-section{ padding: 44px 0; }
.container{ padding: 0 18px; }
.acb-head--center{ margin-bottom: 26px; }
.acb-journey,
.acb-values,
.acb-services,
.acb-stats{ grid-template-columns: 1fr; }
.acb-stats{ gap: 0; }
.acb-stat{ padding: 16px 0; }
.acb-stat + .acb-stat{ border-top: 1px solid rgba(255,255,255,.16); }
.acb-feature{ gap: 26px; }
.acb-feature-imgs img:first-child,
.acb-feature-imgs img:last-child{ aspect-ratio: 16/9; }
.acb-btn{ display: inline-block; }
.acb-title{ font-size: clamp(1.5rem, 1.2rem + 3vw, 2rem); }
}
/* ============================================================
§29 — REAL SPACING FIX
uhm.css has ".template-content section{ padding:0 80px }" which
(higher specificity) was overriding .acb-section vertical padding
to ZERO. We win with a more specific selector. THIS is what makes
the breathing room between sections actually appear.
============================================================ */
.template-content .acb-section{ padding-top: 92px; padding-bottom: 92px; }
@media (max-width: 991px){ .template-content .acb-section{ padding-top: 58px; padding-bottom: 58px; } }
@media (max-width: 575px){ .template-content .acb-section{ padding-top: 46px; padding-bottom: 46px; } }
/* ============================================================
§30 — PREMIUM HERO (mockup): left copy + CTAs + stat tiles,
right glass consultation wizard, dark gradient + bg image.
Overrides earlier #home-welcome rules (loaded later).
============================================================ */
#home-welcome.bg-light{
background:
linear-gradient(125deg, rgba(6,18,50,.90) 0%, rgba(10,45,114,.78) 54%, rgba(16,58,138,.66) 100%),
url(../hero-bg.avif) center / cover no-repeat,
#0a2d72 !important;
padding: 0 !important; position: relative; overflow: hidden;
}
#home-welcome::before{ display: none !important; }
#home-welcome::after{ display: none !important; }
#home-welcome > .row.no-gutters{
max-width: 1260px; margin: 0 auto !important; padding: 76px 28px !important;
display: flex !important; flex-wrap: nowrap; align-items: center; gap: 50px;
position: relative; z-index: 2;
}
/* ---- LEFT: copy + CTAs + stats ---- */
.acb-hero-left{
flex: 1 1 50% !important; max-width: none !important;
color: #fff; display: flex; flex-direction: column;
}
.acb-hero-left .acb-hero-eyebrow{
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--acb-display); font-weight: 700; font-size: 13px;
letter-spacing: .16em; text-transform: uppercase; color: #9ec0ff; margin-bottom: 22px;
}
.acb-hero-left .acb-hero-eyebrow-line{ width: 38px; height: 2px; background: #5b8def; display: inline-block; border-radius: 2px; }
.acb-hero-title{
font-family: var(--acb-display); font-weight: 800; color: #fff !important;
font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.3rem); line-height: 1.05; letter-spacing: -.02em;
margin: 0 0 24px;
}
.acb-hero-sub{
color: rgba(255,255,255,.82); font-size: 1.1rem; line-height: 1.66;
margin: 0 0 34px; max-width: 33em;
}
.acb-hero-actions{ display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 46px; }
.acb-hero-btn{
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--acb-display); font-weight: 700; font-size: 1.02rem;
padding: 16px 30px; border-radius: 50px; text-decoration: none;
transition: transform .2s var(--acb-ease), box-shadow .2s var(--acb-ease), background .2s var(--acb-ease);
}
.acb-hero-btn svg{ width: 18px; height: 18px; }
.acb-hero-btn--primary{ background: linear-gradient(120deg,#2f6bff,#1b4fd6); color: #fff; box-shadow: 0 16px 36px -14px rgba(47,107,255,.85); }
.acb-hero-btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 22px 46px -14px rgba(47,107,255,.95); color: #fff; }
.acb-hero-btn--ghost{ background: rgba(255,255,255,.06); color: #fff; border: 1.5px solid rgba(255,255,255,.30); }
.acb-hero-btn--ghost:hover{ background: rgba(255,255,255,.14); color: #fff; }
.acb-hero-stats{ display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.acb-hero-stat{
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13);
border-radius: 14px; padding: 16px 16px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
display: flex; flex-direction: column;
}
.acb-hero-stat b{ display: block; font-family: var(--acb-display); font-weight: 800; font-size: 1.7rem; color: #fff; line-height: 1; margin-bottom: 6px; }
.acb-hero-stat span{ font-size: .82rem; color: rgba(255,255,255,.66); line-height: 1.22; min-height: 2.44em; }
/* ---- RIGHT: glass form, strip white wrapper ---- */
#home-secondOpinion.form{
flex: 1 1 50% !important; max-width: none !important;
background: transparent !important; box-shadow: none !important;
padding: 0 !important; margin: 0 !important; position: relative; z-index: 3;
display: flex; flex-direction: column; justify-content: center;
}
/* ---- responsive ---- */
@media (max-width: 991px){
#home-welcome > .row.no-gutters{ flex-wrap: wrap; gap: 34px; padding: 50px 22px !important; }
.acb-hero-left, #home-secondOpinion.form{ flex: 1 1 100% !important; }
.acb-hero-stats{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 575px){
.acb-hero-actions{ gap: 12px; }
.acb-hero-actions .acb-hero-btn{ flex: 1 1 100%; justify-content: center; }
}
/* ============================================================
§31 — Header must always sit above the hero and any late-loading
overlay (cookie banner / captcha), so the top menu stays clickable.
============================================================ */
#site-header{ position: relative; z-index: 1000; }
#site-header nav.navbar{ position: relative; z-index: 1001; }
#home-welcome.bg-light{ z-index: 1; }
/* never let a full-page transparent layer eat clicks over the menu */
#site-header, #site-header *{ pointer-events: auto; }
/* ============================================================
§32 — FORM PREMIUM in the THEME (theme-only upload is enough).
Targets the plugin glass form via #home-secondOpinion and beats
plugin CSS with specificity + !important. No plugin upload needed.
============================================================ */
#home-secondOpinion .asg-form--glass{
width:100% !important; max-width:100% !important; margin:0 !important;
padding:38px 36px !important;
background:linear-gradient(180deg, rgba(10,28,72,.96), rgba(6,18,48,.975)) !important;
border:1px solid rgba(125,165,255,.32) !important;
border-radius:26px !important;
box-shadow:0 44px 110px rgba(2,10,32,.62), inset 0 1px 0 rgba(255,255,255,.12) !important;
-webkit-backdrop-filter:blur(20px) !important; backdrop-filter:blur(20px) !important;
}
#home-secondOpinion .asg-form-title{ font-size:1.55rem !important; white-space:nowrap; }
@media (max-width:560px){ #home-secondOpinion .asg-form-title{ white-space:normal !important; font-size:1.35rem !important; } }
/* Tiles — defined cards, premium hover (lift + glow + accent), selected state */
#home-secondOpinion .asg-tiles{ display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:13px !important; }
@media (max-width:560px){ #home-secondOpinion .asg-tiles{ gap:9px !important; } }
@media (max-width:560px){
#home-secondOpinion .asg-tile{ padding:14px 6px 12px !important; gap:7px !important; border-radius:12px !important; }
#home-secondOpinion .asg-tile svg{ width:22px !important; height:22px !important; }
#home-secondOpinion .asg-tile span{ font-size:.72rem !important; line-height:1.2 !important; }
}
#home-secondOpinion .asg-tile{
padding:22px 12px 18px !important; border-radius:16px !important; gap:11px !important;
background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03)) !important;
border:1px solid rgba(150,185,255,.20) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.07) !important;
position:relative; overflow:hidden;
}
#home-secondOpinion .asg-tile::before{
content:""; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg, transparent, #6f9bff, transparent); opacity:0; transition:opacity .18s;
}
#home-secondOpinion .asg-tile svg{ width:28px !important; height:28px !important; color:#9ec0ff !important; transition:color .18s, transform .18s; }
#home-secondOpinion .asg-tile span{ font-size:.9rem !important; font-weight:600 !important; color:#eaf0ff !important; max-width:100%; overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }
#home-secondOpinion .asg-tile:hover{
transform:translateY(-3px);
background:linear-gradient(180deg, rgba(91,139,255,.18), rgba(91,139,255,.07)) !important;
border-color:rgba(130,170,255,.5) !important;
box-shadow:0 16px 34px -14px rgba(18,48,130,.7), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#home-secondOpinion .asg-tile:hover::before{ opacity:1; }
#home-secondOpinion .asg-tile:hover svg{ color:#fff !important; transform:scale(1.08); }
#home-secondOpinion .asg-tile.is-selected{
background:linear-gradient(180deg, rgba(47,107,255,.34), rgba(47,107,255,.18)) !important;
border-color:#6f9bff !important;
box-shadow:0 0 0 2px rgba(111,155,255,.55) inset, 0 14px 30px -12px rgba(20,50,130,.7) !important;
}
#home-secondOpinion .asg-tile.is-selected svg{ color:#fff !important; }
/* Progress — thicker + glow */
#home-secondOpinion .asg-progress>span{ height:5px !important; border-radius:5px !important; }
#home-secondOpinion .asg-progress>span.is-active{
background:linear-gradient(90deg,#6f9bff,#2f6bff) !important; box-shadow:0 0 12px rgba(47,107,255,.6) !important;
}
#home-secondOpinion .asg-btn{
background:linear-gradient(120deg,#3b78ff,#1746c4) !important;
box-shadow:0 16px 34px -10px rgba(23,70,196,.6) !important;
}
/* ============================================================
§33 — ACIBADEM WELTWEIT (balanced two-column: copy + world map).
Light band; no duplicated stats. Symmetric and premium.
============================================================ */
#home-facts.acb-world{
background:
radial-gradient(900px 480px at 78% 32%, rgba(47,107,255,.07), transparent 60%),
var(--acb-mist) !important;
color:#16213d !important; overflow:hidden;
}
.acb-world-grid{
display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:48px;
max-width:1180px; margin:0 auto;
}
.acb-world-copy{ text-align:left; }
.acb-world .acb-eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
color:#2f6bff; margin-bottom:16px;
}
.acb-world .acb-eyebrow::after{ content:""; width:26px; height:2px; background:currentColor; border-radius:2px; opacity:.55; }
.acb-world .acb-title{ color:#0a2d72 !important; margin:0 0 16px; }
.acb-world-sub{ font-size:1.06rem; line-height:1.65; color:#516079; margin:0 0 26px; max-width:520px; }
.acb-world-map{ position:relative; text-align:center; }
.acb-world-map img{ width:100%; height:auto; max-width:560px; display:block; margin:0 auto;
filter:drop-shadow(0 26px 52px rgba(20,60,150,.20)); }
@media (max-width:860px){
.acb-world-grid{ grid-template-columns:1fr; gap:28px; text-align:center; }
.acb-world-copy{ text-align:center; }
.acb-world .acb-eyebrow{ justify-content:center; }
.acb-world-sub{ margin-left:auto; margin-right:auto; }
.acb-world-map img{ max-width:420px; }
}
/* §34 — World map image inside the network section (replaces globe card) */
.acb-network-img{
width:100%; height:auto; max-width:560px; display:block; margin:0 auto;
filter:drop-shadow(0 24px 50px rgba(20,60,150,.20));
}
@media (max-width:860px){ .acb-network-img{ max-width:440px; } }
/* ============================================================
§35 — Dienstleistungen (service cards) + Acibadem Healthcare
Group (prose): premium polish + strict symmetry.
============================================================ */
/* --- Service cards: equal height, CTA pinned to bottom, premium hover --- */
.acb-services{ gap:22px; align-items:stretch; }
.acb-service{
position:relative; overflow:hidden; padding:28px 24px; border-radius:18px;
box-shadow:0 10px 30px -18px rgba(20,50,120,.22);
}
.acb-service::before{
content:""; position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg, var(--acb-coral), #5ea3f0);
transform:scaleX(0); transform-origin:left; transition:transform .22s var(--acb-ease);
}
.acb-service:hover::before{ transform:scaleX(1); }
.acb-service:hover{
transform:translateY(-5px); box-shadow:0 26px 50px -22px rgba(20,50,120,.40); border-color:#cfe0ff;
}
.acb-service h3{
font-size:1.08rem; margin:0 0 12px; padding-bottom:12px;
border-bottom:1px solid var(--acb-line); min-height:2.6em; display:flex; align-items:flex-end;
}
.acb-service p{ flex:1 1 auto; margin:0 0 16px; }
.acb-service-go{ margin-top:auto; padding-top:6px; }
/* --- Healthcare Group prose: narrower, centered, premium lead paragraph --- */
#index-group .acb-prose{ max-width:780px; }
#index-group .acb-prose .acb-title{ text-align:center; }
#index-group .acb-prose p{ font-size:1.02rem; line-height:1.78; color:#46536b; margin:0 0 18px; }
#index-group .acb-prose p:first-of-type{
font-size:1.16rem; line-height:1.7; color:#27314c; font-weight:500;
border-left:3px solid var(--acb-coral); padding-left:20px;
}
/* ============================================================
§36 — Service cards redesign: big left icon + right content,
description clamped to 3 lines. Premium + symmetric.
============================================================ */
.acb-services{ grid-template-columns:repeat(4,1fr); gap:20px; }
.acb-service{ flex-direction:row; align-items:flex-start; gap:18px; padding:26px 22px; }
.acb-service-ico{
flex:0 0 auto; width:58px; height:58px; border-radius:16px;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(150deg, rgba(12,83,198,.13), rgba(12,83,198,.04));
color:var(--acb-coral); border:1px solid rgba(12,83,198,.18);
transition:transform .2s var(--acb-ease), background .2s;
}
.acb-service-ico svg{ width:30px; height:30px; }
.acb-service:hover .acb-service-ico{ transform:scale(1.06); background:linear-gradient(150deg, rgba(12,83,198,.2), rgba(12,83,198,.07)); }
.acb-service-body{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.acb-service h3{
min-height:0; display:block; align-items:initial;
margin:2px 0 10px; padding-bottom:10px; border-bottom:1px solid var(--acb-line);
}
.acb-service p{
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
margin:0 0 14px; flex:0 0 auto;
}
.acb-service-go{ margin-top:auto; }
@media (max-width:980px){ .acb-services{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .acb-services{ grid-template-columns:1fr; } }
/* ============================================================
§37 — Buttons: fuller, premium gradient + depth (not crude).
============================================================ */
.acb-btn{
padding:16px 40px; font-size:1rem; border-radius:44px; letter-spacing:.01em;
box-shadow:0 14px 30px -12px rgba(10,45,114,.42);
transition:transform .18s var(--acb-ease), box-shadow .18s var(--acb-ease), filter .18s;
}
.acb-btn:hover{ transform:translateY(-2px); box-shadow:0 22px 42px -14px rgba(10,45,114,.55); filter:brightness(1.04); }
.acb-btn--navy{ background:linear-gradient(120deg,#0e347a,#0a2552); }
.acb-btn--coral{ background:linear-gradient(120deg,#2f80e8,#0c53c6); box-shadow:0 14px 30px -12px rgba(10,70,166,.48); }
.acb-btn--coral:hover{ box-shadow:0 22px 42px -14px rgba(10,70,166,.6); }
/* §38 — H1 always renders Title-Case (kill any inherited uppercase) */
h1, .acb-title, .page-title, .entry-title{ text-transform:none !important; }
/* ============================================================
§39 — Premium page title bar (top strip only). Body content is
left completely untouched — no card, no narrowing.
============================================================ */
.acb-pagehead{
background:linear-gradient(180deg, #edf1f8 0%, #f4f7fc 56%, #ffffff 100%);
padding:56px 0 64px; position:relative; overflow:hidden;
}
/* footer-style accent line on top (header ↔ title bar divider) */
.acb-pagehead::before{
content:""; position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg, #0c53c6, #5ea3f0 50%, #0c53c6);
}
/* soft fade so the bar melts into the content below (no hard line) */
.acb-pagehead::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none;
background:linear-gradient(180deg, transparent, #ffffff);
}
.acb-pagehead .container{ position:relative; }
.acb-pagehead-crumbs{ font-size:.86rem; color:#7c8aa3; margin-bottom:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; text-transform:capitalize !important; }
.acb-pagehead-crumbs a{ color:#7c8aa3; text-decoration:none; transition:color .15s; }
.acb-pagehead-crumbs a:hover{ color:var(--acb-coral); }
.acb-pagehead-crumbs .sep{ opacity:.5; }
.acb-pagehead-crumbs .current{ color:var(--acb-navy); font-weight:600; }
.acb-pagehead-title{
font-family:var(--acb-display); font-size:clamp(2rem,4vw,2.9rem); font-weight:800;
color:var(--acb-navy) !important; line-height:1.12; margin:0; position:relative; padding-bottom:16px;
}
.acb-pagehead-title::after{
content:""; position:absolute; left:0; bottom:0; width:64px; height:4px;
background:linear-gradient(90deg,var(--acb-coral),#5ea3f0); border-radius:4px;
}
@media (max-width:768px){ .acb-pagehead{ padding:32px 0 28px; } }
/* keep the title-bar intact even if it sits inside .template-content
(uhm.css applies `.template-content section{ padding:0 80px }`, which would
otherwise collapse the vertical padding and let the bottom fade cover the title) */
.template-content .acb-pagehead{ padding:56px 0 64px; }
@media (max-width:768px){ .template-content .acb-pagehead{ padding:32px 0 28px; } }
/* premium navy strip at the bottom edge (pairs with the coral top line) */
.acb-pagehead-rule{
position:absolute; left:0; right:0; bottom:0; height:4px; z-index:2; pointer-events:none;
background:linear-gradient(90deg, transparent, #0a2d72 16%, #1a4196 50%, #0a2d72 84%, transparent);
}
/* ============================================================
§40 — Sidebar premium CTA block (sticky, fully translatable
via ACF options — no per-language image needed).
============================================================ */
.acb-side-cta{
position:sticky; top:var(--asg-sticky-top, 96px); margin-top:24px;
background:
radial-gradient(420px 200px at 100% 0%, rgba(12,83,198,.22), transparent 60%),
linear-gradient(160deg, #0e347a, #0a2552);
border-radius:22px; padding:30px 26px 28px; color:#fff; text-align:center;
box-shadow:0 28px 60px -28px rgba(10,37,82,.62); overflow:hidden;
}
.acb-side-cta-ico{
width:56px; height:56px; border-radius:16px; margin:0 auto 16px;
display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff;
}
.acb-side-cta-ico svg{ width:28px; height:28px; }
.acb-side-cta-eyebrow{
display:block; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:#9ec5f5; margin-bottom:10px;
}
.acb-side-cta-title{
font-family:var(--acb-display); font-size:1.3rem; font-weight:800; line-height:1.2;
color:#fff !important; margin:0 0 10px;
}
.acb-side-cta-text{ font-size:.92rem; line-height:1.55; color:rgba(255,255,255,.82); margin:0 0 20px; }
.acb-side-cta-btn{
display:block; width:100%; padding:14px 20px; border-radius:40px;
background:linear-gradient(120deg,#2f80e8,#0c53c6); color:#fff !important;
font-family:var(--acb-display); font-weight:700; font-size:1rem; text-decoration:none !important;
box-shadow:0 16px 32px -12px rgba(10,70,166,.6); transition:transform .18s var(--acb-ease), box-shadow .18s;
}
.acb-side-cta-btn:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -14px rgba(10,70,166,.7); }
/* §40b — WhatsApp button inside the sidebar CTA */
.acb-side-cta-wa{
display:flex; align-items:center; justify-content:center; gap:9px;
width:100%; margin-top:11px; padding:13px 20px; border-radius:40px;
background:#25d366; color:#fff !important; font-family:var(--acb-display); font-weight:700; font-size:1rem;
text-decoration:none !important; box-shadow:0 14px 28px -12px rgba(37,211,102,.6);
transition:transform .18s var(--acb-ease), box-shadow .18s;
}
.acb-side-cta-wa svg{ width:20px; height:20px; }
.acb-side-cta-wa:hover{ transform:translateY(-2px); box-shadow:0 20px 36px -14px rgba(37,211,102,.7); }
/* §40c — (reverted) sticky needs the sidebar column to stretch along
the content, so we keep default stretch. */
/* §42 — inner-page wrapper background only.
Do NOT override #page-content/#page-details — that added an extra white
layer over the mist + .page-context card and produced a box-in-box look.
The .page-context card (white) on the mist #page-details is the intended
design, identical to page.php. */
.template-content{ background:#fff; }
/* §43 — index-group: two-column layout (text + campus visual) + new logo fit */
#index-group .acb-group-row{ align-items:flex-start; }
#index-group .acb-group-text{ padding-right:48px; }
#index-group .acb-group-text .acb-head{ text-align:left; margin:0 0 18px; }
#index-group .acb-group-text .acb-title{ text-align:left; }
#index-group .acb-group-text .acb-title::after{ margin-left:0; margin-right:auto; }
#index-group .acb-group-text p{ text-align:left; margin:0 0 1.1em; }
#index-group .acb-group-visual{ display:flex; position:sticky; top:var(--asg-sticky-top, 100px); }
#index-group .acb-group-img{
margin:0; width:100%; display:flex; border-radius:22px; overflow:hidden;
box-shadow:0 30px 70px -38px rgba(10,45,114,.45);
border:1px solid var(--acb-line);
}
#index-group .acb-group-img img{ display:block; width:100%; height:520px; object-fit:cover; }
@media (max-width:991px){
#index-group .acb-group-row{ align-items:stretch; }
#index-group .acb-group-visual{ position:static; }
#index-group .acb-group-text{ padding-right:0; margin-bottom:30px; }
#index-group .acb-group-img img{ height:auto; min-height:0; max-height:360px; }
}
/* New horizontal logo (250x30) — sized to sit cleanly in the header */
#site-header .navbar-brand img,
.navbar-brand img{ height:34px !important; width:auto !important; max-width:270px !important; }
nav.navbar.acb-stuck .navbar-brand img{ height:30px !important; }
/* §44 — Key Figures: premium navy band with glass stat cards */
#home-figures{ background:linear-gradient(125deg,#08245e 0%,#0b3079 52%,#0d3a8f 100%); position:relative; overflow:hidden; }
#home-figures::before{ content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(720px 360px at 88% -10%, rgba(12,83,198,.20), transparent 62%),
radial-gradient(620px 320px at 6% 110%, rgba(255,255,255,.07), transparent 60%); }
#home-figures .acb-figs{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
#home-figures .acb-fig{
text-align:center; padding:30px 18px 26px;
background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
border-radius:18px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
transition:transform .25s var(--acb-ease), background .25s var(--acb-ease), border-color .25s var(--acb-ease);
}
#home-figures .acb-fig::after{ display:none !important; }
#home-figures .acb-fig:hover{ transform:translateY(-5px); background:rgba(255,255,255,.085); border-color:rgba(12,83,198,.45); }
#home-figures .acb-fig-ico{
display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center;
border-radius:15px; background:rgba(12,83,198,.16); color:var(--acb-coral); margin-bottom:16px;
box-shadow:inset 0 0 0 1px rgba(12,83,198,.25);
}
#home-figures .acb-fig-ico svg{ width:28px; height:28px; }
#home-figures .acb-fig-num{ display:block; font-family:var(--acb-display); font-weight:800;
font-size:2.7rem; line-height:1; color:#fff; letter-spacing:-.02em; }
#home-figures .acb-fig-plus{ color:var(--acb-coral); margin-left:1px; }
#home-figures .acb-fig-label{ display:block; margin-top:13px; font-size:.8rem; letter-spacing:.09em;
text-transform:uppercase; color:rgba(255,255,255,.80); font-weight:600; }
@media (max-width:767px){
#home-figures .acb-figs{ grid-template-columns:repeat(2,1fr); gap:12px; }
#home-figures .acb-fig{ padding:24px 12px 20px; }
#home-figures .acb-fig-num{ font-size:2.1rem; }
}
/* §45 — stories/news/IPS row: fully symmetric, equal-height cards, CTA pinned bottom */
#home-otherlinks .row{ display:flex !important; flex-wrap:wrap; align-items:stretch; }
#home-otherlinks .row > [class*="col"]{ display:flex; }
#home-otherlinks .eq-card{ display:flex; flex-direction:column; width:100%; height:100%; }
#home-otherlinks .card-body{ display:flex; flex-direction:column; flex:1 1 auto; }
#home-otherlinks .card-body > .text-right{ margin-top:auto; padding-top:10px; }
#home-otherlinks .acb-ips-text{ font-size:1rem; line-height:1.7; color:var(--acb-slate); margin:2px 0 18px; }
#home-otherlinks .acb-ips-cta{ margin-top:auto; display:flex; flex-direction:column; gap:10px; }
#home-otherlinks .acb-ips-cta .btn{ width:100%; justify-content:center; display:inline-flex; align-items:center; gap:8px; }
@media (max-width:991px){
#home-otherlinks .row > [class*="col"]{ flex:0 0 100%; max-width:100%; }
}
/* §46 — stories/news compact list items + IPS card balance (premium, symmetric) */
#home-otherlinks .card-body{ padding:22px 22px 24px; }
#home-otherlinks .pt-item{
display:flex; align-items:center; gap:14px;
padding:11px 0 !important; margin:0 !important;
border-bottom:1px solid var(--acb-line) !important;
text-decoration:none;
}
#home-otherlinks .pt-item:last-of-type{ border-bottom:0 !important; }
#home-otherlinks .pt-thumb{
flex:0 0 74px; width:74px; height:56px; border-radius:10px; overflow:hidden;
background:var(--acb-mist);
}
#home-otherlinks .pt-thumb img{
width:100% !important; height:100% !important; object-fit:cover; display:block;
margin:0 !important; max-height:none !important; border-radius:10px !important;
}
#home-otherlinks .pt-title{
font-family:var(--acb-display); font-weight:600; font-size:.97rem; line-height:1.42; color:var(--acb-ink);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
transition:color .2s var(--acb-ease);
}
#home-otherlinks .pt-item:hover .pt-title{ color:var(--acb-navy); }
/* "Alle …" link, pinned bottom, as a clean premium link-button */
#home-otherlinks .card-body > .text-right{ margin-top:auto; padding-top:14px; }
#home-otherlinks .card-body > .text-right .btn{
display:inline-flex; align-items:center; gap:6px; padding:0; background:none !important;
color:var(--acb-navy) !important; font-weight:700; font-family:var(--acb-display);
}
#home-otherlinks .card-body > .text-right .btn:hover{ color:var(--acb-coral) !important; }
/* IPS card text clamp so the card never under/over-fills */
#home-otherlinks .acb-ips-text{
display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
#home-otherlinks .acb-ips-cta .btn-secondary{ background:var(--acb-navy) !important; border-color:var(--acb-navy) !important; color:#fff !important; }
#home-otherlinks .acb-ips-cta .btn-success{ background:#1faa59 !important; border-color:#1faa59 !important; color:#fff !important; }
/* §47 — index-group read-more clamp + toggle (text now symmetric with image) */
#index-group .acb-group-copy{ position:relative; max-height:430px; overflow:hidden; transition:max-height .5s var(--acb-ease); }
#index-group .acb-group-copy::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:96px;
background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 92%); pointer-events:none; transition:opacity .3s; }
#index-group .acb-group-copy.is-open{ max-height:2600px; }
#index-group .acb-group-copy.is-open::after{ opacity:0; }
#index-group .acb-group-actions{ margin-top:20px; }
.acb-group-toggle i{ transition:transform .25s var(--acb-ease); }
.acb-group-toggle.is-open i{ transform:rotate(180deg); }
/* §48 — UNIFIED PREMIUM BUTTON SYSTEM — every button type, site-wide, in one place.
Covers: .btn + all Bootstrap colour/outline variants, .acb-btn variants,
hero/side-cta/group-toggle buttons, and native