/*
Theme Name: Hello Elementor
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Version: 3.4.9
Stable tag: 3.4.9
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor
Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
*/
.twentytwenty-overlay:hover .twentytwenty-after-label {
opacity: 0;
}
.twentytwenty-overlay:hover .twentytwenty-before-label {
opacity: 0;
}
/* =========================================================
MODERN MEDICAL TEAM
Elementor container: 7cb4c31
========================================================= */
.elementor-element-7cb4c31 {
--team-primary: #36add2;
--team-primary-dark: #087c9f;
--team-heading: #087493;
--team-text: #66727a;
--team-bg: #f7fbfc;
position: relative;
overflow: hidden;
background:
radial-gradient(
circle at 8% 20%,
rgba(54, 173, 210, 0.07) 0,
transparent 24%
),
radial-gradient(
circle at 92% 75%,
rgba(8, 124, 159, 0.055) 0,
transparent 25%
),
linear-gradient(
180deg,
#ffffff 0%,
#f7fbfc 50%,
#ffffff 100%
) !important;
padding-top: 65px !important;
padding-bottom: 75px !important;
}
/* =========================================================
GRID
========================================================= */
.elementor-element-7cb4c31 > .e-con-inner {
position: relative;
z-index: 2;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 30px !important;
align-items: stretch !important;
}
/* =========================================================
CARD
========================================================= */
.elementor-element-7cb4c31 > .e-con-inner > .e-con {
position: relative;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid rgba(8, 116, 147, 0.08) !important;
border-radius: 20px !important;
overflow: hidden !important;
box-shadow:
0 12px 35px rgba(26, 70, 83, 0.07),
0 2px 8px rgba(26, 70, 83, 0.025);
transition:
transform .35s cubic-bezier(.2,.7,.2,1),
box-shadow .35s ease,
border-color .35s ease;
}
/* CARD HOVER */
.elementor-element-7cb4c31 > .e-con-inner > .e-con:hover {
transform: translateY(-8px);
border-color: rgba(54, 173, 210, 0.22) !important;
box-shadow:
0 25px 55px rgba(22, 105, 132, 0.14),
0 6px 18px rgba(22, 105, 132, 0.05);
}
/* =========================================================
MODERNA PLAVA LINIJA NA VRHU
========================================================= */
.elementor-element-7cb4c31 > .e-con-inner > .e-con::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 4px;
transform: translateX(-50%);
background: linear-gradient(
90deg,
#60c9e6,
#169cc4
);
z-index: 10;
transition: width .4s ease;
}
.elementor-element-7cb4c31 > .e-con-inner > .e-con:hover::before {
width: 100%;
}
/* =========================================================
SAKRIJ PRAZNU POSLEDNJU KARTICU
========================================================= */
.elementor-element-7cb4c31 .elementor-element-a9e3848 {
display: none !important;
}
/* =========================================================
IMAGE
========================================================= */
.elementor-element-7cb4c31 .elementor-widget-image {
width: 100% !important;
margin: 0 !important;
overflow: hidden !important;
}
.elementor-element-7cb4c31 .elementor-widget-image .elementor-widget-container {
position: relative;
overflow: hidden !important;
}
/* SAME IMAGE SIZE */
.elementor-element-7cb4c31 .elementor-widget-image img {
display: block !important;
width: 100% !important;
height: 330px !important;
object-fit: cover !important;
object-position: center top;
border-radius: 0 !important;
transition:
transform .6s cubic-bezier(.2,.7,.2,1),
filter .5s ease;
}
/* IMAGE HOVER */
.elementor-element-7cb4c31 > .e-con-inner > .e-con:hover
.elementor-widget-image img {
transform: scale(1.055);
}
/* =========================================================
SUptilan GRADIENT ISPOD SLIKE
========================================================= */
.elementor-element-7cb4c31
.elementor-widget-image
.elementor-widget-container::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 65px;
background: linear-gradient(
to top,
rgba(255,255,255,0.28),
transparent
);
pointer-events: none;
}
/* =========================================================
NAME
========================================================= */
.elementor-element-7cb4c31 .elementor-widget-heading {
margin: 0 !important;
padding:
23px
25px
0 !important;
}
.elementor-element-7cb4c31 .elementor-heading-title {
margin: 0 !important;
text-align: center !important;
color: var(--team-heading) !important;
font-size: 22px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
letter-spacing: -0.3px;
transition: color .3s ease;
}
/* NAME HOVER */
.elementor-element-7cb4c31 > .e-con-inner > .e-con:hover
.elementor-heading-title {
color: var(--team-primary-dark) !important;
}
/* =========================================================
SPECIALIZATION
========================================================= */
.elementor-element-7cb4c31 .elementor-widget-text-editor {
margin: 0 !important;
padding:
8px
25px
18px !important;
}
.elementor-element-7cb4c31 .elementor-widget-text-editor p {
margin: 0 !important;
text-align: center !important;
color: var(--team-text) !important;
font-size: 15px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
}
/* Mala dekorativna linija */
.elementor-element-7cb4c31 .elementor-widget-text-editor::after {
content: "";
display: block;
width: 32px;
height: 2px;
margin: 14px auto 0;
border-radius: 10px;
background: rgba(54, 173, 210, 0.30);
transition:
width .35s ease,
background .35s ease;
}
.elementor-element-7cb4c31 > .e-con-inner > .e-con:hover
.elementor-widget-text-editor::after {
width: 50px;
background: var(--team-primary);
}
/* =========================================================
BUTTON AREA
========================================================= */
.elementor-element-7cb4c31 .elementor-widget-button {
margin-top: auto !important;
padding:
0
25px
27px !important;
}
/* BUTTON */
.elementor-element-7cb4c31 .elementor-button {
position: relative;
overflow: hidden;
background: #39acd0 !important;
color: #ffffff !important;
border: 0 !important;
border-radius: 50px !important;
padding: 12px 25px !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: .1px;
box-shadow:
0 7px 18px rgba(32, 156, 195, .17);
transition:
transform .3s ease,
box-shadow .3s ease,
background .3s ease;
}
/* ARROW */
.elementor-element-7cb4c31 .elementor-button-text::after {
content: "→";
display: inline-block;
margin-left: 8px;
transition: transform .3s ease;
}
/* BUTTON HOVER */
.elementor-element-7cb4c31 .elementor-button:hover {
background: #087c9f !important;
transform: translateY(-2px);
box-shadow:
0 10px 25px rgba(8, 124, 159, .25);
}
.elementor-element-7cb4c31
.elementor-button:hover
.elementor-button-text::after {
transform: translateX(4px);
}
/* =========================================================
SUptilan DEKOR U POZADINI
========================================================= */
.elementor-element-7cb4c31::before {
content: "";
position: absolute;
width: 360px;
height: 360px;
top: -260px;
right: -120px;
border-radius: 50%;
border:
1px solid
rgba(54, 173, 210, .09);
pointer-events: none;
}
.elementor-element-7cb4c31::after {
content: "";
position: absolute;
width: 280px;
height: 280px;
bottom: -220px;
left: -90px;
border-radius: 50%;
border:
1px solid
rgba(54, 173, 210, .07);
pointer-events: none;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.elementor-element-7cb4c31 {
padding-top: 50px !important;
padding-bottom: 60px !important;
}
.elementor-element-7cb4c31 > .e-con-inner {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 25px !important;
}
.elementor-element-7cb4c31
.elementor-widget-image img {
height: 320px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.elementor-element-7cb4c31 {
padding-top: 35px !important;
padding-bottom: 45px !important;
}
.elementor-element-7cb4c31 > .e-con-inner {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.elementor-element-7cb4c31 > .e-con-inner > .e-con {
width: 100% !important;
max-width: 430px !important;
margin-left: auto !important;
margin-right: auto !important;
border-radius: 18px !important;
}
.elementor-element-7cb4c31
.elementor-widget-image img {
height: 350px !important;
}
.elementor-element-7cb4c31
.elementor-heading-title {
font-size: 21px !important;
}
/* Na telefonu nema potrebe za jakim hoverom */
.elementor-element-7cb4c31 > .e-con-inner > .e-con:hover {
transform: translateY(-3px);
}
}
/*signle Team*/
/* =========================
GLOBAL
========================= */
.hb-single-doctor {
--hb-primary: #40A8D0;
--hb-primary-dark: #006080;
--hb-primary-light: #EAF7FB;
--hb-accent: #8FD3E8;
--hb-text: #174C60;
--hb-muted: #66757D;
--hb-border: #DCECF2;
--hb-bg: #F5FAFC;
--hb-white: #ffffff;
}
/* =========================
HERO
========================= */
.hb-single-hero {
position: relative;
overflow: hidden;
padding: 75px 25px 90px;
background:
radial-gradient(circle at 90% 10%, rgba(57,173,210,.10), transparent 27%),
linear-gradient(135deg, #f8fcfd 0%, #ffffff 60%);
}
.hb-single-hero::after {
content: "";
position: absolute;
width: 500px;
height: 500px;
right: -270px;
bottom: -320px;
border-radius: 50%;
border: 1px solid rgba(57,173,210,.12);
}
.hb-single-hero-inner {
position: relative;
z-index: 2;
max-width: 1180px;
margin: auto;
display: grid;
grid-template-columns: .88fr 1.12fr;
gap: 75px;
align-items: center;
}
/* =========================
PHOTO
========================= */
/* =========================================================
HIRURGIJA BEOGRAD - SINGLE DOCTOR
GLOBAL CSS
========================================================= */
.hb-single-doctor {
--hb-primary: #40A8D0;
--hb-primary-dark: #006080;
--hb-primary-light: #EAF7FB;
--hb-accent: #8FD3E8;
--hb-text: #174C60;
--hb-muted: #66757D;
--hb-border: #DCECF2;
--hb-bg: #F5FAFC;
--hb-white: #ffffff;
width: 100%;
background: var(--hb-white);
color: var(--hb-text);
/* isti font kao na stranicama procedura, umesto fonta teme */
font-family: Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.hb-single-doctor *,
.hb-single-doctor *::before,
.hb-single-doctor *::after {
box-sizing: border-box;
}
/* =========================================================
HERO
========================================================= */
.hb-single-hero {
position: relative;
overflow: hidden;
padding: 80px 30px 90px;
background:
radial-gradient(
circle at 10% 10%,
rgba(14, 109, 104, 0.10),
transparent 35%
),
linear-gradient(
135deg,
#f4f9f8 0%,
#ffffff 55%,
#eef6f5 100%
);
}
.hb-single-hero::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
border-radius: 50%;
right: -180px;
top: -180px;
border: 1px solid rgba(14, 109, 104, 0.12);
}
.hb-single-hero::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
right: -80px;
top: -80px;
border: 1px solid rgba(14, 109, 104, 0.08);
}
.hb-single-hero-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 430px minmax(0, 1fr);
align-items: center;
gap: 85px;
}
/* =========================================================
DOCTOR IMAGE
========================================================= */
.hb-profile-photo {
position: relative;
padding: 0 0 30px 20px;
}
.hb-profile-photo::before {
content: "";
position: absolute;
left: 0;
bottom: 10px;
width: 85%;
height: 85%;
background: var(--hb-primary-light);
border-radius: 28px;
transform: rotate(-4deg);
}
.hb-photo-frame {
position: relative;
z-index: 2;
width: 100%;
height: 500px;
overflow: hidden;
border-radius: 26px;
background: #e7eeee;
box-shadow:
0 25px 60px rgba(17, 49, 47, 0.15),
0 4px 15px rgba(17, 49, 47, 0.06);
}
.hb-photo-frame img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center top;
transition:
transform 0.7s cubic-bezier(.2,.8,.2,1),
filter 0.5s ease;
}
.hb-profile-photo:hover .hb-photo-frame img {
transform: scale(1.035);
}
.hb-photo-gradient {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
to top,
rgba(8, 45, 43, 0.16),
transparent 35%
);
}
/* FLOATING SPECIALTY */
.hb-specialty-float {
position: absolute;
z-index: 5;
left: 0;
bottom: 0;
max-width: 310px;
display: flex;
align-items: center;
gap: 13px;
padding: 17px 21px;
background: rgba(255,255,255,0.96);
border: 1px solid rgba(14,109,104,0.12);
border-radius: 16px;
box-shadow: 0 15px 35px rgba(14, 71, 67, 0.14);
backdrop-filter: blur(10px);
}
.hb-specialty-dot {
width: 10px;
height: 10px;
min-width: 10px;
border-radius: 50%;
background: var(--hb-primary);
box-shadow: 0 0 0 6px rgba(14,109,104,0.10);
}
.hb-specialty-float small {
display: block;
margin-bottom: 3px;
font-size: 10px;
line-height: 1.2;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--hb-muted);
}
.hb-specialty-float strong {
display: block;
font-size: 14px;
line-height: 1.35;
color: var(--hb-text);
}
/* =========================================================
HERO CONTENT
========================================================= */
.hb-profile-intro {
max-width: 650px;
}
.hb-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: var(--hb-primary);
font-size: 12px;
font-weight: 700;
letter-spacing: 2.2px;
}
.hb-eyebrow > span {
width: 42px;
height: 2px;
background: var(--hb-primary);
}
.hb-profile-intro h1 {
margin: 0 0 18px;
/* smanjeno sa clamp(44px, 5vw, 72px) — ime lekara je bilo krupnije
od H1 na stranicama procedura (60px) */
font-size: clamp(36px, 3.8vw, 54px);
line-height: 1.05;
letter-spacing: -1.4px;
font-weight: 300;
color: var(--hb-text);
}
.hb-profile-intro h1 strong {
display: block;
margin-top: 8px;
font-weight: 700;
color: var(--hb-primary);
}
.hb-profile-intro h2 {
max-width: 620px;
margin: 0 0 23px;
font-size: 20px;
line-height: 1.5;
font-weight: 500;
color: #344442;
}
.hb-intro-text {
max-width: 630px;
margin: 0;
font-size: 16px;
line-height: 1.85;
color: var(--hb-muted);
}
/* =========================================================
HERO BUTTONS
========================================================= */
.hb-hero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 28px;
margin-top: 35px;
}
.hb-primary-btn,
.hb-appointment-btn {
text-decoration: none !important;
}
.hb-primary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 16px 23px;
border-radius: 10px;
background: var(--hb-primary);
color: #fff !important;
font-size: 14px;
font-weight: 600;
box-shadow: 0 10px 25px rgba(14,109,104,0.20);
transition: all 0.3s ease;
}
.hb-primary-btn span {
font-size: 20px;
transition: transform 0.3s ease;
}
.hb-primary-btn:hover {
background: var(--hb-primary-dark);
transform: translateY(-3px);
box-shadow: 0 16px 30px rgba(14,109,104,0.25);
}
.hb-primary-btn:hover span {
transform: translateX(5px);
}
.hb-text-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--hb-text) !important;
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
}
.hb-text-link::after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 1px;
background: var(--hb-primary);
transition: width 0.3s ease;
}
.hb-text-link:hover::after {
width: 100%;
}
.hb-text-link span {
color: var(--hb-primary);
}
/* =========================================================
MAIN CONTENT
========================================================= */
.hb-single-content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 90px 30px 110px;
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 80px;
align-items: start;
}
.hb-single-main {
min-width: 0;
}
.hb-content-section {
position: relative;
padding: 0 0 70px;
margin: 0 0 70px;
border-bottom: 1px solid var(--hb-border);
}
.hb-content-section:last-child {
margin-bottom: 0;
border-bottom: 0;
}
.hb-section-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 19px;
color: var(--hb-primary);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.8px;
}
.hb-section-label::before {
content: "";
width: 25px;
height: 2px;
background: var(--hb-primary);
}
.hb-content-section > h2 {
margin: 0 0 30px;
font-size: clamp(30px, 4vw, 43px);
line-height: 1.12;
letter-spacing: -1.2px;
color: var(--hb-text);
font-weight: 600;
}
.hb-content-section > h2 span {
display: block;
color: var(--hb-primary);
}
.hb-content-section > p {
margin: 0 0 20px;
max-width: 780px;
color: #566361;
font-size: 16px;
line-height: 1.9;
}
.hb-content-section > p:last-child {
margin-bottom: 0;
}
/* =========================================================
TIMELINE
========================================================= */
.hb-timeline {
margin-top: 35px;
}
.hb-timeline-item {
display: grid;
grid-template-columns: 75px 25px minmax(0, 1fr);
gap: 18px;
position: relative;
min-height: 105px;
}
.hb-year {
padding-top: 2px;
color: var(--hb-primary);
font-size: 13px;
line-height: 1.4;
font-weight: 700;
letter-spacing: 0.5px;
}
.hb-timeline-line {
position: relative;
display: flex;
justify-content: center;
}
.hb-timeline-line::after {
content: "";
position: absolute;
top: 16px;
bottom: -5px;
width: 1px;
background: var(--hb-border);
}
.hb-timeline-item:last-child .hb-timeline-line::after {
display: none;
}
.hb-timeline-line span {
position: relative;
z-index: 2;
width: 11px;
height: 11px;
margin-top: 3px;
border: 3px solid #fff;
border-radius: 50%;
background: var(--hb-primary);
box-shadow: 0 0 0 2px var(--hb-primary);
}
.hb-timeline-content {
padding: 0 0 28px;
}
.hb-timeline-content h3 {
margin: 0 0 7px;
color: var(--hb-text);
font-size: 17px;
line-height: 1.4;
font-weight: 600;
}
.hb-timeline-content p {
margin: 0;
color: var(--hb-muted);
font-size: 14px;
line-height: 1.65;
}
/* =========================================================
EXPERTISE CARDS
========================================================= */
.hb-expertise-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 35px;
}
.hb-expertise-card {
position: relative;
min-height: 130px;
overflow: hidden;
padding: 24px;
border: 1px solid var(--hb-border);
border-radius: 14px;
background: #fff;
transition:
transform 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease,
background 0.3s ease;
}
.hb-expertise-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 0;
background: var(--hb-primary);
transition: height 0.3s ease;
}
.hb-expertise-card > span {
display: block;
margin-bottom: 17px;
color: var(--hb-primary);
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
}
.hb-expertise-card h3 {
margin: 0;
color: var(--hb-text);
font-size: 16px;
line-height: 1.45;
font-weight: 600;
}
.hb-expertise-card:hover {
transform: translateY(-5px);
border-color: rgba(14,109,104,0.25);
background: #fbfdfd;
box-shadow: 0 14px 35px rgba(20,60,57,0.09);
}
.hb-expertise-card:hover::before {
height: 100%;
}
/* =========================================================
CAREER / MEMBERSHIP LIST
========================================================= */
.hb-career-list {
display: grid;
gap: 12px;
margin-top: 30px;
}
.hb-career-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 17px 19px;
border: 1px solid var(--hb-border);
border-radius: 12px;
background: #fff;
transition: all 0.25s ease;
}
.hb-career-item:hover {
transform: translateX(4px);
border-color: rgba(14,109,104,0.28);
background: var(--hb-bg);
}
.hb-check {
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
min-width: 25px;
margin-top: 1px;
border-radius: 50%;
background: var(--hb-primary-light);
color: var(--hb-primary);
font-size: 12px;
font-weight: 700;
}
.hb-career-item p {
margin: 0;
color: #445250;
font-size: 15px;
line-height: 1.6;
}
/* =========================================================
ACADEMIC SECTION - SOFT BACKGROUND
========================================================= */
.hb-academic {
padding: 38px !important;
border: 1px solid var(--hb-border) !important;
border-radius: 20px;
background:
linear-gradient(
145deg,
#f7fbfa 0%,
#ffffff 100%
);
}
/* =========================================================
SIDEBAR
========================================================= */
.hb-doctor-sidebar {
position: sticky;
top: 110px;
}
.hb-appointment {
position: relative;
overflow: hidden;
padding: 34px 30px 30px;
border-radius: 22px;
background:
linear-gradient(
145deg,
var(--hb-primary-dark),
var(--hb-primary)
);
color: #fff;
box-shadow: 0 22px 50px rgba(11,82,78,0.20);
}
.hb-appointment::before {
content: "";
position: absolute;
width: 190px;
height: 190px;
right: -95px;
top: -95px;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 50%;
}
.hb-appointment::after {
content: "";
position: absolute;
width: 110px;
height: 110px;
right: -55px;
top: -55px;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 50%;
}
.hb-appointment > * {
position: relative;
z-index: 2;
}
.hb-appointment-icon {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
margin-bottom: 25px;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 12px;
background: rgba(255,255,255,0.10);
color: #fff;
font-size: 25px;
font-weight: 300;
}
.hb-appointment-label {
display: block;
margin-bottom: 9px;
color: rgba(255,255,255,0.68);
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.hb-appointment h3 {
margin: 0 0 15px;
color: #fff;
font-size: 27px;
line-height: 1.15;
font-weight: 600;
}
.hb-appointment > p {
margin: 0 0 27px;
color: rgba(255,255,255,0.78);
font-size: 14px;
line-height: 1.7;
}
.hb-contact-row {
padding: 15px 0;
border-top: 1px solid rgba(255,255,255,0.14);
}
.hb-contact-row small {
display: block;
margin-bottom: 4px;
color: rgba(255,255,255,0.58);
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
}
.hb-contact-row strong {
display: block;
color: #fff;
font-size: 14px;
line-height: 1.5;
font-weight: 500;
}
.hb-phone-link {
color: #fff !important;
text-decoration: none !important;
transition: opacity 0.2s ease;
}
.hb-phone-link:hover {
opacity: 0.75;
}
/* SIDEBAR BUTTON */
.hb-appointment-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: 22px;
padding: 15px 18px;
border-radius: 10px;
background: #fff;
color: var(--hb-primary-dark) !important;
font-size: 14px;
font-weight: 700;
transition: all 0.3s ease;
}
.hb-appointment-btn span {
font-size: 20px;
transition: transform 0.3s ease;
}
.hb-appointment-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.hb-appointment-btn:hover span {
transform: translateX(5px);
}
/* BACK TO TEAM */
.hb-back {
display: flex;
align-items: center;
gap: 10px;
margin: 22px 5px 0;
color: var(--hb-muted) !important;
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
transition: color 0.25s ease;
}
.hb-back span {
color: var(--hb-primary);
font-size: 18px;
transition: transform 0.25s ease;
}
.hb-back:hover {
color: var(--hb-primary) !important;
}
.hb-back:hover span {
transform: translateX(-4px);
}
/* =========================================================
SMOOTH ANCHOR
========================================================= */
html {
scroll-behavior: smooth;
}
#biografija,
#zakazivanje {
scroll-margin-top: 120px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.hb-single-hero {
padding: 65px 30px 75px;
}
.hb-single-hero-inner {
grid-template-columns: 360px minmax(0, 1fr);
gap: 50px;
}
.hb-photo-frame {
height: 440px;
}
.hb-profile-intro h1 {
font-size: 52px;
}
.hb-single-content {
grid-template-columns: minmax(0, 1fr) 290px;
gap: 45px;
}
}
/* =========================================================
MOBILE / TABLET
========================================================= */
@media (max-width: 820px) {
.hb-single-hero {
padding: 45px 20px 65px;
}
.hb-single-hero-inner {
grid-template-columns: 1fr;
gap: 55px;
}
.hb-profile-photo {
width: 100%;
max-width: 500px;
margin: 0 auto;
padding-left: 15px;
}
.hb-photo-frame {
height: 520px;
}
.hb-profile-intro {
max-width: 100%;
}
.hb-profile-intro h1 {
font-size: clamp(42px, 10vw, 60px);
}
.hb-single-content {
grid-template-columns: 1fr;
padding: 65px 20px 80px;
gap: 20px;
}
.hb-doctor-sidebar {
position: static;
order: -1;
margin-bottom: 50px;
}
.hb-appointment {
max-width: 100%;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.hb-single-hero {
padding: 30px 16px 50px;
}
.hb-profile-photo {
padding: 0 0 27px 8px;
}
.hb-profile-photo::before {
width: 90%;
}
.hb-photo-frame {
height: 420px;
border-radius: 20px;
}
.hb-specialty-float {
left: 0;
right: 12px;
max-width: none;
padding: 14px 16px;
}
.hb-profile-intro h1 {
margin-bottom: 16px;
font-size: 42px;
line-height: 1.03;
letter-spacing: -1.8px;
}
.hb-profile-intro h2 {
font-size: 17px;
line-height: 1.5;
}
.hb-intro-text {
font-size: 15px;
line-height: 1.75;
}
.hb-hero-actions {
align-items: stretch;
flex-direction: column;
gap: 20px;
margin-top: 28px;
}
.hb-primary-btn {
width: 100%;
justify-content: space-between;
}
.hb-text-link {
width: fit-content;
}
.hb-single-content {
padding: 55px 16px 70px;
}
.hb-content-section {
padding-bottom: 50px;
margin-bottom: 50px;
}
.hb-content-section > h2 {
margin-bottom: 24px;
font-size: 31px;
}
.hb-content-section > p {
font-size: 15px;
line-height: 1.8;
}
.hb-expertise-grid {
grid-template-columns: 1fr;
}
.hb-expertise-card {
min-height: auto;
padding: 20px;
}
.hb-timeline-item {
grid-template-columns: 60px 20px minmax(0, 1fr);
gap: 12px;
}
.hb-year {
font-size: 11px;
}
.hb-academic {
padding: 25px 20px !important;
margin-left: -4px;
margin-right: -4px;
}
.hb-appointment {
padding: 28px 22px 24px;
border-radius: 18px;
}
.hb-appointment h3 {
font-size: 25px;
}
}
/* =========================================================
VERY SMALL SCREENS
========================================================= */
@media (max-width: 390px) {
.hb-photo-frame {
height: 370px;
}
.hb-profile-intro h1 {
font-size: 37px;
}
.hb-specialty-float strong {
font-size: 13px;
}
.hb-timeline-item {
grid-template-columns: 50px 18px minmax(0, 1fr);
gap: 9px;
}
}
.entry-title{
display:none!important;
}
/* =====================================================
TEAM
===================================================== */
.hb-team {
/* isti font kao na stranicama procedura, umesto fonta teme */
font-family: Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
--blue: #39add2;
--blue-dark: #087b9d;
--navy: #164c60;
--text: #68757c;
--border: #e8f0f2;
position: relative;
overflow: hidden;
padding: 75px 25px 85px;
background:
radial-gradient(
circle at 8% 15%,
rgba(57,173,210,.07),
transparent 24%
),
radial-gradient(
circle at 92% 85%,
rgba(8,123,157,.055),
transparent 25%
),
linear-gradient(
180deg,
#ffffff 0%,
#f6fafb 50%,
#ffffff 100%
);
}
/* =====================================================
GRID
===================================================== */
.hb-team-inner {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 30px;
align-items: stretch;
}
/* =====================================================
CARD
===================================================== */
.hb-doctor {
position: relative;
display: flex;
flex-direction: column;
background: #ffffff;
border:
1px solid
rgba(22,76,96,.075);
border-radius: 22px;
overflow: hidden;
box-shadow:
0 12px 38px
rgba(23,72,88,.07);
transition:
transform .4s
cubic-bezier(.2,.7,.2,1),
box-shadow .4s ease,
border-color .4s ease;
}
.hb-doctor:hover {
transform:
translateY(-9px);
border-color:
rgba(57,173,210,.22);
box-shadow:
0 28px 65px
rgba(22,96,122,.15);
}
/* mala linija na vrhu */
.hb-doctor::before {
content: "";
position: absolute;
top: 0;
left: 50%;
z-index: 10;
width: 0;
height: 4px;
transform:
translateX(-50%);
background:
linear-gradient(
90deg,
#67c9e5,
#159dc3
);
transition:
width .4s ease;
}
.hb-doctor:hover::before {
width: 100%;
}
/* =====================================================
IMAGE
===================================================== */
.hb-doctor-image {
position: relative;
height: 325px;
overflow: hidden;
background:
#eaf3f5;
}
.hb-doctor-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position:
center top;
transition:
transform .65s
cubic-bezier(.2,.7,.2,1);
}
.hb-doctor:hover
.hb-doctor-image img {
transform:
scale(1.055);
}
/* gradient */
.hb-image-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
to top,
rgba(9,73,94,.30) 0%,
rgba(9,73,94,.03) 38%,
transparent 62%
);
pointer-events: none;
}
/* =====================================================
PLACEHOLDER ZA SLIKU
===================================================== */
.hb-no-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(
135deg,
#e8f5f8,
#d8edf3
);
}
.hb-no-image span {
display: flex;
align-items: center;
justify-content: center;
width: 105px;
height: 105px;
border-radius: 50%;
background: #ffffff;
color: var(--blue-dark);
font-size: 31px;
font-weight: 700;
box-shadow:
0 15px 35px
rgba(17,104,132,.10);
}
/* =====================================================
SPECIALTY
===================================================== */
.hb-specialty {
position: absolute;
left: 21px;
bottom: 19px;
z-index: 3;
display: inline-flex;
align-items: center;
padding:
8px 14px;
background:
rgba(255,255,255,.95);
backdrop-filter:
blur(10px);
border-radius: 50px;
color:
var(--blue-dark);
font-size: 12px;
line-height: 1;
font-weight: 700;
box-shadow:
0 6px 20px
rgba(0,0,0,.09);
}
.hb-specialty::before {
content: "";
width: 7px;
height: 7px;
flex: 0 0 auto;
margin-right: 8px;
border-radius: 50%;
background:
var(--blue);
box-shadow:
0 0 0 4px
rgba(57,173,210,.13);
}
/* =====================================================
CONTENT
===================================================== */
.hb-doctor-content {
display: flex;
flex-direction: column;
flex: 1;
padding:
23px 25px 26px;
}
/* broj */
.hb-doctor-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 11px;
}
.hb-number {
color:
var(--blue);
font-size: 10px;
line-height: 1;
font-weight: 800;
letter-spacing: 1.2px;
}
.hb-line {
width: 28px;
height: 1px;
background:
rgba(57,173,210,.38);
transition:
width .35s ease;
}
.hb-doctor:hover
.hb-line {
width: 48px;
}
/* =====================================================
NAME
===================================================== */
.hb-doctor h3 {
margin:
0 0
10px;
color:
var(--navy);
font-size: 22px;
line-height: 1.25;
font-weight: 700;
letter-spacing:
-.4px;
}
/* =====================================================
POSITION
===================================================== */
.hb-position {
margin:
0 0
13px !important;
color:
var(--blue-dark) !important;
font-size:
13px !important;
line-height:
1.55 !important;
font-weight:
700 !important;
}
/* =====================================================
DESCRIPTION
===================================================== */
.hb-description {
margin:
0 0
22px !important;
color:
var(--text) !important;
font-size:
13.5px !important;
line-height:
1.7 !important;
}
/* =====================================================
LINK
===================================================== */
.hb-more {
display: flex;
align-items: center;
justify-content:
space-between;
width: 100%;
margin-top: auto;
padding-top: 16px;
border-top:
1px solid
var(--border);
color:
var(--blue-dark) !important;
text-decoration:
none !important;
font-size: 13.5px;
font-weight: 700;
transition:
color .3s ease;
}
.hb-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
flex: 0 0 auto;
border-radius: 50%;
background:
rgba(57,173,210,.10);
color:
var(--blue);
font-size: 18px;
transition:
transform .3s ease,
background .3s ease,
color .3s ease;
}
.hb-more:hover {
color:
var(--blue) !important;
}
.hb-more:hover
.hb-arrow {
transform:
translateX(4px);
background:
var(--blue);
color: #fff;
}
/* =====================================================
BACKGROUND DECORATION
===================================================== */
.hb-team-bg {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.hb-team-bg-1 {
width: 450px;
height: 450px;
right: -200px;
top: -280px;
background:
rgba(57,173,210,.055);
}
.hb-team-bg-2 {
width: 370px;
height: 370px;
left: -180px;
bottom: -260px;
background:
rgba(8,123,157,.045);
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 1024px) {
.hb-team-inner {
grid-template-columns:
repeat(2, minmax(0,1fr));
gap: 25px;
}
.hb-doctor-image {
height: 320px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 767px) {
.hb-team {
padding:
40px 15px
50px;
}
.hb-team-inner {
grid-template-columns:
1fr;
gap: 23px;
}
.hb-doctor {
max-width: 440px;
width: 100%;
margin: 0 auto;
}
.hb-doctor-image {
height: 350px;
}
.hb-doctor-content {
padding:
21px 22px
24px;
}
.hb-doctor h3 {
font-size: 21px;
}
}
/*services*/
.hb-btn-primary {
color:#fff!important;
}
/* ---- NASLOVI NA STRANICAMA TIMA I PROFILA LEKARA ----------------
Iste porodice fontova kao na stranicama procedura: h1 i h2 serif
(Playfair Display), h3 sans (Roboto). Veličine ostaju one koje su
definisane u sekcijama iznad — ovde se postavlja samo font.
:where() drži specifičnost na nuli, pa ništa ne nadjačava. */
:where(.hb-team, .hb-single-doctor) :where(h1, h2) {
font-family: 'Playfair Display', Georgia, serif!important;
font-weight: 400;
letter-spacing: -0.01em;
}
:where(.hb-team, .hb-single-doctor) :where(h3, h4) {
font-family: Roboto, Helvetica, Arial, sans-serif;
}
/* ============================================================
HIRURGIJA BEOGRAD — ZAJEDNIČKI CSS ZA SVE PROCEDURE STRANICE
Jedan fajl za sve stranice. Uključiti pre HTML sadržaja:
ili ceo sadržaj ovog fajla ubaciti u Appearance > Customize > Additional CSS.
============================================================ */
/* ---------- TOKENI ---------- */
.hb {
--hb-blue: #43afd6;
--hb-blue-2: #2c93b8;
--hb-deep: #0d5a78;
--hb-deep-2: #02668a;
--hb-blue-soft: #7fd0ea;
--hb-ink: #1b2228;
--hb-text: #3f4650;
--hb-text-2: #4d555f;
--hb-text-3: #2f3740;
--hb-muted: #5a626c;
--hb-soft: #7b858f;
--hb-soft-2: #8b959e;
--hb-bg: #f4f8fa;
--hb-bg-2: #fbfdfe;
--hb-line: #e6edf1;
--hb-line-2: #e2ebef;
--hb-line-3: #cfe2ea;
--hb-sand-bg: #fbfaf7;
--hb-sand: #d9c9a8;
--hb-sand-2: #c9b28a;
--hb-sand-ink: #6b5c3f;
--hb-sand-line: #ece5d6;
--hb-serif: 'Playfair Display', Georgia, serif;
--hb-mono: 'Roboto Mono', ui-monospace, monospace;
}
/* ---------- OSNOVA ---------- */
.hb {
width: 100%;
background: #ffffff;
color: var(--hb-text);
font-family: Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
.hb * { box-sizing: border-box; }
:where(.hb) :where(a) { color: var(--hb-blue-2); text-decoration: none; }
:where(.hb) :where(a):hover { color: var(--hb-deep); }
:where(.hb) :where(p) { margin: 0; }
/* ---------- KONTEJNERI I SEKCIJE ---------- */
.hb-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.hb-wrap-narrow { max-width: 900px; margin: 0 auto; padding: 0 32px; }
.hb-sec { padding-top: 96px; }
.hb-sec-lg { padding-top: 96px; padding-bottom: 96px; }
.hb-sec-end { padding-top: 88px; padding-bottom: 96px; }
/* pune trake preko cele širine */
.hb-band { background: var(--hb-bg); }
.hb-band-dark { background: var(--hb-deep); color: #e7f3f8; }
.hb-band-pad { padding-top: 88px; padding-bottom: 88px; }
.hb-mt { margin-top: 96px; }
/* ---------- BREADCRUMB ---------- */
.hb-breadcrumb { background: var(--hb-bg); border-bottom: 1px solid var(--hb-line); }
.hb-breadcrumb .hb-wrap {
padding-top: 14px; padding-bottom: 14px;
font-size: 13px; color: var(--hb-soft);
display: flex; align-items: center; gap: 10px;
}
.hb-breadcrumb a { color: var(--hb-soft); }
.hb-breadcrumb .is-here { color: var(--hb-deep); }
/* ---------- TIPOGRAFIJA ---------- */
.hb-eyebrow {
font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--hb-blue); font-weight: 500; margin-bottom: 22px;
}
:where(.hb) :where(h1, .hb-h1) {
font-family: var(--hb-serif); font-weight: 400; font-size: 60px; line-height: 1.1;
color: var(--hb-ink); margin: 0 0 26px; letter-spacing: -0.01em; text-wrap: pretty;
}
:where(.hb) :where(h2, .hb-h2) {
font-family: var(--hb-serif); font-weight: 400; font-size: 40px; line-height: 1.2;
color: var(--hb-ink); margin: 0 0 24px; text-wrap: pretty;
}
:where(.hb) :where(h3, .hb-h3) { font-size: 19px; font-weight: 500; color: var(--hb-deep); margin: 0 0 12px; }
.hb-h2-sm { font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; color: var(--hb-ink); margin: 0 0 12px; }
.hb-h3-lg { font-size: 21px; font-weight: 500; color: var(--hb-ink); margin: 0 0 14px; }
.hb-lead { font-size: 21px; line-height: 1.55; color: var(--hb-text-3); margin: 0 0 28px; max-width: 38ch; text-wrap: pretty; }
.hb-rule { width: 64px; height: 2px; background: var(--hb-blue); margin: 0 0 28px; }
.hb-p { font-size: 16px; line-height: 1.75; color: var(--hb-text-2); margin: 0 0 18px; }
.hb-p:last-child { margin-bottom: 0; }
.hb-p-lg { font-size: 17px; line-height: 1.75; color: var(--hb-text-2); margin: 0 0 16px; }
.hb-p-lg:last-child { margin-bottom: 0; }
.hb-p-sm { font-size: 15px; line-height: 1.7; color: var(--hb-muted); margin: 0; }
.hb-note { font-size: 14px; line-height: 1.6; color: var(--hb-soft); margin: 16px 0 0; max-width: 48ch; }
.hb-micro { font-family: var(--hb-mono); font-size: 12px; color: var(--hb-soft-2); }
.hb-intro { max-width: 760px; margin-bottom: 48px; }
.hb-intro-tight { max-width: 760px; margin-bottom: 44px; }
.hb-measure { max-width: 56ch; }
.hb-mb-lg { margin-bottom: 36px; }
.hb-mb-xl { margin-bottom: 44px; }
/* tekstualni link u pasusu i „Saznajte više →“ */
.hb-link { border-bottom: 1px solid #b9d5e1; }
.hb-link-sand { border-bottom: 1px solid var(--hb-sand); }
.hb-link-more { font-size: 16px; }
.hb-link-sm { font-size: 15px; }
.hb-link-deep { color: var(--hb-deep); border-bottom: 1px solid #b9d5e1; }
/* ---------- DUGMAD ---------- */
.hb-btn {
display: inline-block; font-size: 17px; font-weight: 500;
border-radius: 4px; transition: all .2s ease; white-space: nowrap;
}
.hb-btn-primary {
background: var(--hb-blue); color: #ffffff; padding: 20px 42px;
box-shadow: 0 10px 24px rgba(67,175,214,0.28);
}
.hb-btn-primary:hover { background: var(--hb-deep); color: #ffffff; }
.hb-btn-outline {
border: 1px solid #b9d5e1; color: var(--hb-deep); padding: 19px 32px; background: #ffffff;
}
.hb-btn-outline:hover { border-color: var(--hb-blue); color: var(--hb-deep); }
/* dugme na tamnoj podlozi */
.hb-btn-on-dark { background: var(--hb-blue); color: #ffffff; padding: 20px 38px; }
.hb-btn-on-dark:hover { background: #ffffff; color: var(--hb-deep); }
.hb-btn-outline-dark { border: 1px solid #3f7f9a; color: #e7f3f8; padding: 21px 40px; font-size: 18px; }
.hb-btn-outline-dark:hover { background: #ffffff; color: var(--hb-deep); }
.hb-btn-lg { font-size: 18px; padding: 22px 52px; box-shadow: 0 14px 30px rgba(0,0,0,0.18); }
.hb-btn-block { display: block; width: 100%; text-align: center; padding: 19px 24px; }
.hb-btn-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hb-btn-row-center { justify-content: center; }
/* ---------- GRIDOVI ---------- */
.hb-grid { display: grid; gap: 24px; }
.hb-g2 { grid-template-columns: repeat(2, 1fr); }
.hb-g3 { grid-template-columns: repeat(3, 1fr); }
.hb-g4 { grid-template-columns: repeat(4, 1fr); }
.hb-g-split { grid-template-columns: 1fr 1fr; }
.hb-gap-20 { gap: 20px; }
.hb-gap-28 { gap: 28px; }
.hb-gap-32 { gap: 32px; }
.hb-gap-56 { gap: 56px; }
.hb-gap-72 { gap: 72px; }
.hb-align-start { align-items: start; }
.hb-align-center { align-items: center; }
/* ---------- HERO ---------- */
.hb-hero {
display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px;
align-items: start; padding-top: 76px;
}
.hb-hero-media { position: relative; }
/* hero preko cele širine — tekst ostaje poravnat sa 1200px mrežom,
fotografija ide do desne ivice ekrana. Traži .hb-fullbleed na .hb kontejneru. */
.hb-hero.hb-hero-full {
max-width: none; padding: 0; gap: 0;
grid-template-columns: 1fr 1fr; align-items: stretch;
}
.hb-hero.hb-hero-full > :first-child {
align-self: center;
padding: 88px 56px 88px max(20px, calc(50vw - 600px + 32px));
}
/* visinu heroja diktira tekstualna kolona; slika popunjava ćeliju */
.hb-hero-full .hb-hero-media { position: relative; min-height: 560px; }
.hb-hero-full .hb-ph { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.hb-hero-full .hb-ph img { border-radius: 0; }
.hb-badge {
position: absolute; left: -28px; bottom: 56px; background: #ffffff;
border: 1px solid var(--hb-line); border-left: 3px solid var(--hb-blue);
padding: 18px 24px; box-shadow: 0 14px 34px rgba(13,90,120,0.10);
}
.hb-badge-value { font-family: var(--hb-serif); font-size: 26px; color: var(--hb-deep); line-height: 1; }
.hb-badge-label { font-size: 13px; color: var(--hb-soft); margin-top: 4px; }
/* ---------- PLACEHOLDER SLIKE (zameniti ![]()
) ---------- */
.hb-ph {
width: 100%; border-radius: 4px; border: 1px solid #dde7ec;
background: repeating-linear-gradient(135deg, #e3edf2 0 12px, #eef4f7 12px 24px);
display: flex; align-items: flex-end; padding: 24px;
}
.hb-ph-4x5 { aspect-ratio: 4/5; }
.hb-ph-4x3 { aspect-ratio: 4/3; }
.hb-ph-1x1 { aspect-ratio: 1/1; padding: 0; }
.hb-ph-tag {
font-family: var(--hb-mono); font-size: 12px; color: #6d8794;
background: #ffffff; padding: 8px 12px; border-radius: 3px;
}
.hb-ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
/* kada je placeholder popunjen stvarnom slikom */
.hb-ph.is-filled { padding: 0; border: 0; background: none; }
/* ---------- QUICK FACTS ---------- */
.hb-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 64px 0 76px; }
.hb-fact { background: #ffffff; border: 1px solid var(--hb-line); border-radius: 4px; padding: 26px 24px; }
.hb-fact-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hb-soft-2); margin-bottom: 10px; }
.hb-fact-value { font-size: 17px; color: var(--hb-ink); line-height: 1.4; }
.hb-fact-value-lg { font-family: var(--hb-serif); font-size: 26px; color: var(--hb-deep); line-height: 1.2; }
/* ---------- TAMNA TRAKA SA PREDNOSTIMA ---------- */
.hb-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 28px; padding-bottom: 28px; }
.hb-strip-item { display: flex; gap: 14px; align-items: baseline; font-size: 15px; line-height: 1.5; }
.hb-strip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hb-blue-soft); flex: 0 0 auto; transform: translateY(-3px); }
.hb-strip-num { font-family: var(--hb-serif); font-size: 22px; color: var(--hb-blue-soft); flex: 0 0 auto; }
/* ---------- KARTICE ---------- */
.hb-card { border: 1px solid var(--hb-line); border-radius: 4px; padding: 30px 28px; background: #ffffff; transition: all .2s ease; }
.hb-card:hover { border-color: var(--hb-blue); }
.hb-card-soft { background: #ffffff; border: 1px solid var(--hb-line-2); border-radius: 4px; padding: 30px 28px; }
.hb-card-tint { border: 1px solid var(--hb-line); border-radius: 4px; padding: 30px 28px; background: var(--hb-bg-2); }
.hb-card-title { font-size: 19px; font-weight: 500; color: var(--hb-deep); margin-bottom: 10px; }
.hb-card-title-sm { font-size: 18px; font-weight: 500; color: var(--hb-deep); margin-bottom: 10px; }
.hb-card-text { font-size: 15px; line-height: 1.7; color: var(--hb-muted); margin: 0; }
/* veća kartica sa serif naslovom (npr. vrste i tehnike) */
.hb-card-lg { border: 1px solid var(--hb-line); border-radius: 4px; padding: 40px 36px; background: #ffffff; }
.hb-card-h { font-family: var(--hb-serif); font-weight: 400; font-size: 26px; color: var(--hb-ink); margin: 0 0 16px; }
.hb-p-sep { padding-top: 16px; border-top: 1px solid #eef3f6; }
/* ---------- PANELI SA ČEK-LISTOM ---------- */
.hb-panel { background: var(--hb-bg); border-top: 3px solid var(--hb-blue); border-radius: 4px; padding: 40px 36px; }
.hb-panel-sand { background: var(--hb-sand-bg); border-top: 3px solid var(--hb-sand); border-radius: 4px; padding: 40px 36px; }
.hb-panel-plain{ background: var(--hb-bg); border-radius: 4px; padding: 40px 36px; }
.hb-panel-title { font-size: 21px; font-weight: 500; color: var(--hb-deep); margin-bottom: 24px; }
.hb-panel-title-sand { font-size: 21px; font-weight: 500; color: var(--hb-sand-ink); margin-bottom: 24px; }
.hb-panel-title-sand a { color: inherit; }
.hb-panel-title-sm { font-size: 20px; font-weight: 500; color: var(--hb-deep); margin-bottom: 18px; }
.hb-panel-foot { font-size: 15px; line-height: 1.7; color: var(--hb-muted); margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--hb-sand-line); }
.hb-list { display: flex; flex-direction: column; gap: 16px; }
.hb-list-tight { display: flex; flex-direction: column; gap: 14px; }
.hb-li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.65; color: var(--hb-text); }
.hb-li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hb-blue); flex: 0 0 auto; margin-top: 9px; }
.hb-li-sand::before { background: var(--hb-sand-2); }
/* dvokolonska lista (npr. „od čega zavisi cena“) */
.hb-list-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
/* ---------- INLINE CTA PANEL ---------- */
.hb-cta-panel {
margin-top: 36px; background: var(--hb-deep); border-radius: 4px; padding: 44px 48px;
display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.hb-cta-panel h3, .hb-cta-panel .hb-cta-title {
font-family: var(--hb-serif); font-weight: 400; font-size: 27px; color: #ffffff; margin: 0 0 12px;
}
.hb-cta-panel p { font-size: 16px; line-height: 1.7; color: #cfe8f2; margin: 0; max-width: 66ch; }
/* ---------- PRE / POSLE GALERIJA ---------- */
.hb-ba { background: #ffffff; border: 1px solid var(--hb-line-2); border-radius: 4px; padding: 16px; margin: 0;
display: flex; flex-direction: column; }
/* fotografije nisu istog odnosa stranica — potpisi se poravnavaju po dnu kartice */
.hb-ba .hb-ba-caption { margin-top: auto; padding-top: 14px; }
.hb-ba img { display: block; width: 100%; height: auto; border-radius: 3px; }
.hb-ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hb-ba-img { aspect-ratio: 3/4; border: 1px solid #dde7ec; border-radius: 3px; background: repeating-linear-gradient(135deg, #e3edf2 0 10px, #eef4f7 10px 20px); }
.hb-ba-img.is-after { border-color: var(--hb-line-3); background: repeating-linear-gradient(135deg, #dceaf1 0 10px, #e9f3f7 10px 20px); }
.hb-ba-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hb-soft-2); margin-top: 10px; }
.hb-ba-label.is-after { color: var(--hb-blue-2); }
.hb-ba-caption{ font-family: var(--hb-mono); font-size: 11px; color: var(--hb-soft-2); margin-top: 14px; }
/* dve kompozicije različitog odnosa stranica — isečene na isti odnos da kartice
budu jednake visine. .is-lower spušta kadar kada je motiv u donjoj polovini. */
.hb-ba img.hb-ba-crop { aspect-ratio: 3/2; height: auto; object-fit: cover; }
.hb-ba img.hb-ba-crop.is-lower { object-position: center 58%; }
/* kada je jedna fotografija već kompozicija „pre i posle“ — bez kropovanja */
.hb-ba-single { aspect-ratio: 3/2; padding: 0; border: 0; background: #ffffff; }
.hb-ph.hb-ba-single img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.hb-ba-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; }
.hb-ba-note { font-size: 13px; line-height: 1.6; color: var(--hb-soft-2); max-width: 76ch; }
.hb-dots { display: flex; gap: 8px; align-items: center; }
.hb-dots span { width: 26px; height: 3px; background: #cfdde4; border-radius: 2px; }
.hb-dots span.is-active { background: var(--hb-blue); }
/* ---------- IZDVOJEN INFO BLOK (npr. rezovi i ožiljci) ---------- */
.hb-info { margin-top: 48px; background: var(--hb-bg); border-left: 3px solid var(--hb-blue); border-radius: 4px; padding: 40px 44px; }
.hb-info-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hb-soft-2); margin-bottom: 12px; }
.hb-info-title { font-size: 21px; font-weight: 500; color: var(--hb-deep); margin-bottom: 18px; }
/* ---------- STEPPER (4 koraka) ---------- */
.hb-steps { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--hb-line); }
.hb-step { padding: 32px 28px 0; border-right: 1px solid var(--hb-line); position: relative; }
.hb-step:first-child { padding-left: 0; }
.hb-step:last-child { padding-right: 0; border-right: 0; }
.hb-step::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #9ed4e8; }
.hb-step:first-child::before { background: var(--hb-blue); }
.hb-step-num { font-family: var(--hb-mono); font-size: 12px; color: var(--hb-blue); letter-spacing: 0.08em; margin-bottom: 12px; }
.hb-step p { font-size: 16px; line-height: 1.7; color: var(--hb-text); margin: 0; }
/* ---------- POREĐENJE (dve kolone) ---------- */
.hb-compare { border: 1px solid var(--hb-line-3); border-radius: 4px; overflow: hidden; }
.hb-compare-sand { border-color: #e6e0d3; }
.hb-compare-head { background: var(--hb-blue); color: #ffffff; padding: 20px 28px; font-size: 19px; font-weight: 500; }
.hb-compare-sand .hb-compare-head { background: var(--hb-deep-2); }
.hb-compare-body { padding: 28px; }
.hb-compare-body h3 { margin-bottom: 14px; }
.hb-compare-row { padding: 22px 28px; font-size: 16px; line-height: 1.6; color: var(--hb-text); border-bottom: 1px solid #edf3f6; }
.hb-compare-row:nth-child(even) { background: #fafcfd; }
.hb-compare-row:last-child { border-bottom: 0; }
.hb-compare-sand .hb-compare-row { border-bottom-color: #f2ece0; }
.hb-compare-sand .hb-compare-row:nth-child(even) { background: #f2f8fb; }
/* ---------- TIM ---------- */
.hb-team-card { background: #ffffff; border: 1px solid var(--hb-line-2); border-radius: 4px; padding: 20px; }
.hb-team-name { font-size: 17px; font-weight: 500; color: var(--hb-ink); }
.hb-team-role { font-size: 14px; color: var(--hb-blue-2); margin-top: 4px; }
.hb-team-pos { font-size: 14px; line-height: 1.6; color: var(--hb-muted); margin-top: 10px; }
.hb-team-photo { margin-bottom: 16px; }
/* kartica lekara kao link — cela kartica je klikabilna */
a.hb-team-card { display: block; text-decoration: none; color: inherit;
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
a.hb-team-card:hover { border-color: var(--hb-line-3);
box-shadow: 0 8px 24px rgba(13,90,120,.09); transform: translateY(-2px); }
a.hb-team-card:hover .hb-team-name { color: var(--hb-deep); }
a.hb-team-card:focus-visible { outline: 2px solid var(--hb-blue); outline-offset: 3px; }
/* kartica bez fotografije — inicijali */
.hb-ph-initials {
display: flex; align-items: center; justify-content: center;
font-family: var(--hb-serif); font-size: 34px; color: var(--hb-deep);
background: var(--hb-bg); border: 1px solid var(--hb-line-2);
}
.hb-trust-stat {
display: inline-flex; align-items: center; gap: 12px; padding: 14px 18px;
background: #ffffff; border: 1px solid var(--hb-line-2); border-radius: 4px; margin-bottom: 22px;
}
.hb-trust-stat b { font-family: var(--hb-serif); font-size: 22px; color: var(--hb-deep); line-height: 1; font-weight: 400; }
.hb-trust-stat span { font-size: 14px; line-height: 1.5; color: var(--hb-muted); }
/* ---------- OPORAVAK / TIMELINE ---------- */
.hb-phase-bar { height: 4px; border-radius: 2px; margin-bottom: 20px; background: var(--hb-blue); }
.hb-phase:nth-child(2) .hb-phase-bar { background: #7fc8e2; }
.hb-phase:nth-child(3) .hb-phase-bar { background: #b3dced; }
.hb-phase:nth-child(4) .hb-phase-bar { background: #dceaf1; }
.hb-phase-title { font-size: 17px; font-weight: 500; color: var(--hb-deep); margin-bottom: 10px; }
/* ---------- CENA ---------- */
.hb-price {
border: 1px solid var(--hb-line-3); border-top: 4px solid var(--hb-blue); border-radius: 4px;
padding: 40px 36px; background: #ffffff; box-shadow: 0 16px 40px rgba(13,90,120,0.08);
}
.hb-price-label { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hb-soft-2); margin-bottom: 14px; }
.hb-price-name { font-size: 24px; font-weight: 500; color: var(--hb-ink); margin-bottom: 6px; }
.hb-price-value { font-family: var(--hb-serif); font-size: 46px; color: var(--hb-deep); line-height: 1.1; margin-bottom: 18px; }
.hb-price-value-md { font-family: var(--hb-serif); font-size: 34px; color: var(--hb-deep); line-height: 1.1; }
.hb-price-value-sm { font-family: var(--hb-serif); font-size: 26px; color: var(--hb-deep); line-height: 1.2; }
.hb-price-row { border-top: 1px solid #eef3f6; padding-top: 22px; margin-bottom: 22px; }
.hb-price-row-name { font-size: 18px; font-weight: 500; color: var(--hb-ink); margin-bottom: 6px; }
.hb-price-note { font-size: 15px; line-height: 1.7; color: var(--hb-muted); margin: 0 0 26px; }
.hb-price-link { display: block; text-align: center; font-size: 16px; margin-top: 16px; }
/* ---------- ZAVRŠNI CTA ---------- */
.hb-final { text-align: center; padding-top: 88px; padding-bottom: 88px; }
.hb-final h2 { font-size: 44px; color: #ffffff; margin: 0 0 22px; }
.hb-final p { font-size: 18px; line-height: 1.75; color: #cfe8f2; margin: 0 auto 14px; max-width: 70ch; }
.hb-final .hb-final-note { font-size: 16px; color: #8fbdd0; margin: 0 auto 36px; }
.hb-final-contacts { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 26px; font-size: 15px; }
.hb-final-contacts a { color: #cfe8f2; }
.hb-final-contacts .hb-sep { color: #3f7f9a; }
/* ---------- FAQ ---------- */
.hb-faq { border-top: 1px solid var(--hb-line); }
.hb-faq details { border-bottom: 1px solid var(--hb-line); }
.hb-faq summary {
list-style: none; cursor: pointer; padding: 24px 0;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
font-size: 18px; font-weight: 500; color: var(--hb-ink);
}
.hb summary::-webkit-details-marker { display: none; }
.hb-faq .faq-plus { color: var(--hb-blue); font-size: 22px; font-weight: 300; transition: transform .2s ease; flex: 0 0 auto; }
.hb-faq details[open] .faq-plus { transform: rotate(45deg); }
.hb-faq p { font-size: 16px; line-height: 1.75; color: var(--hb-text-2); margin: 0 0 14px; max-width: 72ch; }
.hb-faq p:last-child { margin-bottom: 26px; }
/* ---------- POMOĆNE KLASE ZA RAZMAK ---------- */
.hb-mt-14 { margin-top: 14px; }
.hb-mt-24 { margin-top: 24px; }
.hb-mt-36 { margin-top: 36px; }
.hb-mt-56 { margin-top: 56px; }
.hb-mt-64 { margin-top: 64px; }
.hb-mb-16 { margin-bottom: 16px; }
/* grid za cenu: kartica + objašnjenje */
.hb-g-price { grid-template-columns: 0.9fr 1.1fr; }
/* ---------- MOBILNI STICKY CTA ---------- */
/* stoji izvan .hb wrappera, pa su boje ovde eksplicitne */
.hb-sticky, .hb-sticky-pad { display: none; }
/* ============================================================
MOBILNI PRIKAZ
============================================================ */
@media (max-width: 980px) {
.hb-wrap, .hb-wrap-narrow { padding-left: 20px; padding-right: 20px; }
.hb-sec { padding-top: 56px; }
.hb-sec-lg { padding-top: 56px; padding-bottom: 56px; }
.hb-sec-end { padding-top: 56px; padding-bottom: 56px; }
.hb-band-pad{ padding-top: 56px; padding-bottom: 56px; }
.hb-mt { margin-top: 56px; }
:where(.hb) :where(h1, .hb-h1) { font-size: 38px; }
:where(.hb) :where(h2, .hb-h2) { font-size: 27px; }
:where(.hb) :where(h3, .hb-h3) { font-size: 19px; }
.hb-final h2 { font-size: 30px; }
.hb-lead { font-size: 19px; }
/* svi gridovi u jednu kolonu, osim quick facts (2x2) */
.hb-g2, .hb-g3, .hb-g4, .hb-g-split, .hb-g-price,
.hb-hero, .hb-strip, .hb-cta-panel, .hb-list-2col,
.hb-ba-pair { grid-template-columns: 1fr; }
.hb-ba-pair { grid-template-columns: 1fr 1fr; }
.hb-facts { grid-template-columns: 1fr 1fr; padding: 40px 0 48px; }
/* team cards ostaju 2x2 na mobilnom */
.hb-grid.hb-team-grid { grid-template-columns: 1fr 1fr; }
.hb-gap-72, .hb-gap-56 { gap: 40px; }
.hb-hero { gap: 40px; padding-top: 48px; }
.hb-hero.hb-hero-full { grid-template-columns: 1fr; padding: 0; }
.hb-hero.hb-hero-full > :first-child { padding: 48px 20px 40px; }
.hb-hero-full .hb-hero-media { min-height: 0; }
.hb-hero-full .hb-ph { position: static; aspect-ratio: 4/3; }
/* hero badge ne izlazi iz okvira */
.hb-badge { left: 0; bottom: 20px; }
/* stepper vertikalno */
.hb-steps { grid-template-columns: 1fr; gap: 28px; border-top: 0; }
.hb-step { padding: 24px 0 0 0; border-right: 0; border-top: 1px solid var(--hb-line); }
.hb-step:first-child, .hb-step:last-child { padding-left: 0; padding-right: 0; }
.hb-cta-panel { padding: 32px 24px; gap: 24px; }
.hb-cta-panel .hb-btn { width: 100%; text-align: center; }
.hb-panel, .hb-panel-sand, .hb-panel-plain, .hb-info, .hb-card-lg { padding: 28px 24px; }
.hb-info { margin-top: 32px; }
.hb-price { padding: 28px 24px; }
.hb-price-value { font-size: 38px; }
.hb-ba-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
.hb-btn, .hb-btn-primary, .hb-btn-outline { text-align: center; }
.hb-btn-row .hb-btn { flex: 1 1 auto; }
/* STICKY CTA — samo mobilni */
.hb-sticky {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; gap: 10px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: #ffffff; border-top: 1px solid #e6edf1;
box-shadow: 0 -6px 20px rgba(13,90,120,0.10);
font-family: Roboto, Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
.hb-sticky * { box-sizing: border-box; }
.hb-sticky a { text-decoration: none; }
.hb-sticky .s-primary {
flex: 1 1 auto; text-align: center; background: #43afd6; color: #ffffff;
font-size: 16px; font-weight: 500; padding: 14px 16px; border-radius: 4px;
}
.hb-sticky .s-secondary {
flex: 0 0 auto; text-align: center; border: 1px solid #b9d5e1; color: #0d5a78;
font-size: 16px; font-weight: 500; padding: 13px 20px; border-radius: 4px;
}
.hb-sticky-pad { display: block; height: 76px; }
}
@media (max-width: 560px) {
.hb-facts { grid-template-columns: 1fr; }
:where(.hb) :where(h1, .hb-h1) { font-size: 32px; }
.hb-btn-lg { padding: 18px 28px; font-size: 17px; }
}
/* ---- Default "coming soon" slika ---- */
/* Prikazuje se cela (contain) pa se tekst na slici ne secka u sirokim karticama */
img.hb-img-placeholder {
object-fit: contain !important;
object-position: center center !important;
background: #eef5f8;
}
.hb-doctor:hover img.hb-img-placeholder { transform: none !important; }
/* ---- FULL-BLEED TRAKE ------------------------------------------
Sekcije sa pozadinom (breadcrumb, .hb-band, .hb-band-dark) izlaze
iz WP kontejnera i idu od ivice do ivice ekrana. Sadržaj unutra
ostaje u .hb-wrap pa je i dalje poravnat sa ostatkom stranice.
Uključuje se dodavanjem klase .hb-fullbleed na spoljni .hb div. */
/* clip mora na root — ne na roditelja traka, inace bi ih sekao.
:has() ga ograničava samo na stranice koje zaista imaju full-bleed. */
:root:has(.hb-fullbleed) { overflow-x: hidden; overflow-x: clip; }
/* .hb ima overflow:hidden (BFC) — to bi seklo trake koje izlaze iz kontejnera.
display:flow-root zadržava isti BFC efekat, ali bez sečenja. */
.hb.hb-fullbleed { overflow: visible; display: flow-root; }
.hb-fullbleed > .hb-breadcrumb,
.hb-fullbleed > .hb-band,
.hb-fullbleed > .hb-band-dark {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}