/* Unique Dental — Design System (fontovi u svake stranice) */ :root { --gold: #c9a24d; --gold-light: #e4c878; --gold-dark: #a88432; --charcoal: #0f1214; --charcoal-soft: #1a1f23; --slate: #2a3238; --cream: #f7f5f1; --cream-dark: #ebe7df; --white: #ffffff; --text: #1c2428; --text-muted: #5c6b73; --border: rgba(201, 162, 77, 0.2); --shadow: 0 24px 64px rgba(15, 18, 20, 0.12); --shadow-gold: 0 8px 32px rgba(201, 162, 77, 0.25); --radius: 12px; --radius-lg: 20px; --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Outfit', system-ui, sans-serif; --header-h: 80px; --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--text); background: var(--cream); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--transition); } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } .container { width: min(1200px, 92vw); margin-inline: auto; } /* Typography */ .eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .section-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.15; color: var(--charcoal); } .section-title em, .hero__title em { font-style: italic; color: var(--gold); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.75rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 100px; transition: all var(--transition); } .btn--primary { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); color: var(--charcoal); box-shadow: var(--shadow-gold); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(201, 162, 77, 0.4); } .btn--outline { border: 1.5px solid rgba(255,255,255,0.4); color: var(--white); background: transparent; } .btn--light { border-color: rgba(255,255,255,0.35); color: var(--white); } .btn--light:hover { background: rgba(255,255,255,0.1); border-color: var(--gold); color: var(--gold); } .btn--outline:hover { border-color: var(--gold); color: var(--gold); background: rgba(201, 162, 77, 0.08); } /* Outline na svijetloj pozadini (npr. gallery teaser) */ .btn--outline-dark { border: 1.5px solid var(--charcoal); color: var(--charcoal); background: transparent; } .btn--outline-dark:hover { border-color: var(--gold-dark); color: var(--gold-dark); background: rgba(201, 162, 77, 0.12); transform: translateY(-2px); } .btn--dark { background: var(--charcoal); color: var(--gold); } .btn--dark:hover { background: var(--slate); transform: translateY(-2px); } /* Header */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-h); overflow: visible; transition: background var(--transition), box-shadow var(--transition); } .header.scrolled { background: rgba(15, 18, 20, 0.95); backdrop-filter: blur(16px); box-shadow: 0 4px 24px rgba(0,0,0,0.2); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .header__logo, .footer__logo { overflow: visible; } .header__logo .site-logo, .footer__logo .site-logo { display: block; line-height: 0; overflow: visible; padding: 10px 6px; margin: -10px -6px; } .header__logo .site-logo__svg, .header__logo .site-logo__img { height: 42px; width: auto; max-width: min(11.5rem, 40vw); display: block; overflow: visible; } /* Žuti znak logotipa = primarna boja stranice */ .site-logo .site-logo__mark path { fill: var(--gold); } /* Float animacija znaka — lagano plutanje kao na vodi */ .site-logo--animate .site-logo__mark { transform-box: view-box; transform-origin: 26% 52%; animation: logoMarkFloat 3.8s ease-in-out infinite; will-change: transform; } .header__logo:hover .site-logo__mark, .footer__logo:hover .site-logo__mark { animation-duration: 3s; } @keyframes logoMarkFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 20% { transform: translate3d(2px, -4px, 0) rotate(0.55deg); } 40% { transform: translate3d(0, -9px, 0) rotate(0deg); } 60% { transform: translate3d(-2px, -5px, 0) rotate(-0.55deg); } 80% { transform: translate3d(1px, -2px, 0) rotate(0.3deg); } } @media (prefers-reduced-motion: reduce) { .site-logo--animate .site-logo__mark { animation: none; will-change: auto; } } .nav { display: flex; align-items: center; gap: 2rem; overflow: visible; } .nav__list { display: flex; gap: 1.75rem; } .nav__link { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.85); position: relative; } .nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width var(--transition); } .nav__link:hover { color: var(--gold); } .nav__link:hover::after { width: 100%; } .nav__link--active, .nav__link--active:hover { color: var(--gold); } .nav__link--active::after { width: 100%; } .header__actions { display: flex; align-items: center; gap: 1rem; } .header__social { display: flex; align-items: center; gap: 0.35rem; } .header__social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: rgba(255, 255, 255, 0.8); border-radius: 50%; transition: color var(--transition), background var(--transition); } .header__social-link:hover { color: var(--gold); background: rgba(201, 162, 77, 0.15); } .header__social--mobile { display: none; } .lang-switcher { position: relative; } .lang-switcher__pills { display: flex; gap: 0.25rem; padding: 0.25rem; background: rgba(255, 255, 255, 0.08); border-radius: 100px; } .lang-switcher__btn { padding: 0.35rem 0.65rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.5); border-radius: 100px; transition: all var(--transition); } .lang-switcher__btn.active, .lang-switcher__btn:hover { background: var(--gold); color: var(--charcoal); } /* Jezički padajući izbornik (mobilni) */ .lang-dropdown { display: none; position: relative; } .lang-dropdown__trigger { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 3.25rem; padding: 0.4rem 0.65rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--white); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 100px; transition: border-color var(--transition), background var(--transition); } .lang-dropdown__trigger:hover, .lang-dropdown.is-open .lang-dropdown__trigger { border-color: var(--gold); background: rgba(201, 162, 77, 0.15); } .lang-dropdown__chevron { width: 14px; height: 14px; opacity: 0.85; transition: transform 0.25s ease; } .lang-dropdown.is-open .lang-dropdown__chevron { transform: rotate(180deg); } .lang-dropdown__menu { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 1100; min-width: 9.5rem; margin: 0; padding: 0.35rem; list-style: none; background: var(--charcoal-soft); border: 1px solid rgba(201, 162, 77, 0.25); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } .lang-dropdown__menu[hidden] { display: none; } .lang-dropdown__option { display: block; width: 100%; padding: 0.55rem 0.75rem; font-size: 0.8125rem; font-weight: 500; text-align: left; color: rgba(255, 255, 255, 0.85); border-radius: calc(var(--radius) - 2px); transition: background var(--transition), color var(--transition); } .lang-dropdown__option:hover, .lang-dropdown__option.is-active { background: rgba(201, 162, 77, 0.15); color: var(--gold); } .lang-switcher--menu .lang-dropdown { display: block; } .lang-switcher--menu .lang-dropdown__menu { top: calc(100% + 0.5rem); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); } .nav__cta { display: none; } .menu-toggle { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; } .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--white); transition: transform 0.35s ease, opacity 0.25s ease; transform-origin: center; } .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Hero */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: var(--charcoal); overflow: hidden; } .hero--video { min-height: 100vh; } .hero__bg { position: absolute; inset: 0; z-index: 0; background: url('../../prostor/VW1A4201.webp') center/cover no-repeat; } /* Hero video — poster dok se učitava loop video */ .hero__bg--video { background-color: #0a0a0a; background-image: url('../../hero-baner/hero-slika.webp'); background-position: center; background-size: cover; background-repeat: no-repeat; } .hero__bg--video.hero__bg--poster-only { background-image: url('../../hero-baner/hero-slika.webp'); } .hero__bg--video.hero__bg--video-ready .hero-video { opacity: 1; } .hero__bg--poster-only .hero-video { display: none; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: translateZ(0); backface-visibility: hidden; pointer-events: none; opacity: 0; transition: opacity 0.45s ease; } .hero__bg-overlay--video { background: linear-gradient( 180deg, rgba(15, 18, 20, 0.55) 0%, rgba(15, 18, 20, 0.3) 45%, rgba(15, 18, 20, 0.72) 100% ); } .hero__bg-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 135deg, rgba(15, 18, 20, 0.92) 0%, rgba(15, 18, 20, 0.72) 50%, rgba(15, 18, 20, 0.9) 100% ); } .hero-slider { position: absolute; inset: 0; } .hero-slider__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease-in-out; } .hero-slider__slide.is-active { opacity: 1; z-index: 1; } .hero-slider__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 8s ease-out; } .hero-slider__slide.is-active img { transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { .hero-slider__slide { transition: none; } .hero-slider__slide img, .hero-slider__slide.is-active img { transform: none; transition: none; } } .hero__grain { position: absolute; inset: 0; z-index: 2; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; } .hero__accent { position: absolute; z-index: 2; top: 20%; right: -10%; width: 50vw; height: 50vw; max-width: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,77,0.15) 0%, transparent 70%); pointer-events: none; } .hero__content { position: relative; z-index: 2; padding: calc(var(--header-h) + 4rem) 0 6rem; max-width: 720px; } .hero__eyebrow { color: var(--gold); margin-bottom: 1.5rem; } .hero__title { font-family: var(--font-display); font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 600; line-height: 1.08; color: var(--white); margin-bottom: 1.5rem; } .hero__subtitle { font-size: 1.125rem; font-weight: 300; color: rgba(255,255,255,0.75); margin-bottom: 2.5rem; max-width: 540px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; } .hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.4); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; z-index: 2; } .hero__scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } } /* Stats */ .stats { background: var(--charcoal-soft); padding: 0; margin-top: -1px; } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(201,162,77,0.15); } .stat { padding: 2.5rem 1.5rem; text-align: center; border-right: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; align-items: center; } .stat:last-child { border-right: none; } .stat__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; border-radius: 50%; background: rgba(201, 162, 77, 0.1); border: 1px solid rgba(201, 162, 77, 0.22); color: var(--gold); flex-shrink: 0; } .stat__icon svg { width: 28px; height: 28px; } .stat__value { font-family: var(--font-display); font-size: 2.25rem; font-weight: 600; color: var(--gold); display: block; margin-bottom: 0.35rem; } .stat__label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); } /* Page hero (inner pages) */ .page-hero { position: relative; padding: calc(var(--header-h) + 4rem) 0 3.5rem; background: var(--charcoal); overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15,18,20,0.95) 0%, rgba(15,18,20,0.85) 100%), url('../../prostor/VW1A4203.webp') center/cover no-repeat; z-index: 0; } body[data-page="about"] .page-hero::before { background-image: linear-gradient(135deg, rgba(15,18,20,0.95) 0%, rgba(15,18,20,0.85) 100%), url('../../onama/VW1A4222.webp'); } body[data-page="services"] .page-hero::before { background-image: linear-gradient(135deg, rgba(15,18,20,0.95) 0%, rgba(15,18,20,0.85) 100%), url('../../veneers/uredena s logom 2.webp'); } body[data-page="gallery"] .page-hero::before { background-image: linear-gradient(135deg, rgba(15,18,20,0.95) 0%, rgba(15,18,20,0.85) 100%), url('../../prijeiposlije/cirkonkeramika.webp'); } body[data-page="clinic"] .page-hero::before { background-image: linear-gradient(135deg, rgba(15,18,20,0.95) 0%, rgba(15,18,20,0.85) 100%), url('../../prostor/3 s logom.webp'); } body[data-page="contact"] .page-hero::before { background-image: linear-gradient(135deg, rgba(15,18,20,0.95) 0%, rgba(15,18,20,0.85) 100%), url('../../prostor/VW1A4201.webp'); } .page-hero .container { position: relative; z-index: 1; } .page-hero .section-title { color: var(--white); max-width: 720px; } .page-hero p, .page-hero__lead { color: rgba(255,255,255,0.7); max-width: 560px; margin-top: 1rem; } .page-hero--compact { padding: 4.5rem 0 3.5rem; } .page-hero--compact .section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); } /* Teaser cards (home) */ .teasers { padding: 5rem 0; } .teasers__title { text-align: center; margin-bottom: 2.5rem; } .teasers__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; } .teaser-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; display: block; min-height: 0; background: var(--charcoal-soft); } .teaser-card > .img-load { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; background: transparent; } .teaser-card > .img-load .img-load__inner { position: absolute; inset: 0; height: 100%; } .teaser-card > .img-load .img-load__img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.6s ease; } .teaser-card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, transparent 0%, rgba(15, 18, 20, 0.15) 45%, rgba(15, 18, 20, 0.82) 78%, rgba(15, 18, 20, 0.95) 100% ); pointer-events: none; } .teaser-card:hover .img-load__img { transform: scale(1.06); } .teaser-card__label { position: absolute; bottom: 1.25rem; left: 1.25rem; right: 3rem; z-index: 2; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65); } .teaser-card__arrow { position: absolute; bottom: 1.25rem; right: 1.25rem; z-index: 2; color: var(--gold-light); font-size: 1.25rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } /* CTA block */ .cta-block { background: var(--charcoal-soft); padding: 4rem 0; text-align: center; } .cta-block .section-title { color: var(--white); margin-bottom: 0.75rem; } .cta-block p { color: rgba(255,255,255,0.65); margin-bottom: 1.75rem; } /* Sections */ .section { padding: 6rem 0; } .section--pad-top { padding-top: 5rem; } .section--dark { background: var(--charcoal); color: var(--white); } .section--dark .section-title { color: var(--white); } .section--dark .eyebrow { color: var(--gold); } /* Intro */ .intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .intro__visual { position: relative; } .intro__img-main { border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 4/5; object-fit: cover; width: 100%; } .intro__text p { color: var(--text-muted); margin-bottom: 1.25rem; } .intro__highlight { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-left: 3px solid var(--gold); background: rgba(201,162,77,0.08); font-weight: 500; color: var(--charcoal); border-radius: 0 var(--radius) var(--radius) 0; } /* About */ .about__lead { font-size: 1.125rem; color: var(--text-muted); max-width: 680px; margin: 1rem auto 3rem; text-align: center; } .team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .team-card { background: var(--charcoal); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform var(--transition); } .team-card:hover { transform: translateY(-6px); } .team-card__media { position: relative; aspect-ratio: 3 / 4; } .team-card__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .team-card__img--korina { object-position: 50% 28%; } .team-card__img--sara { object-position: 50% top; } .team-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem 1.5rem 1.5rem; background: linear-gradient( to top, rgba(8, 10, 12, 0.94) 0%, rgba(8, 10, 12, 0.82) 28%, rgba(8, 10, 12, 0.45) 52%, rgba(8, 10, 12, 0.08) 72%, transparent 100% ); pointer-events: none; } .team-card__role { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.35rem; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55); } .team-card__name { font-family: var(--font-display); font-size: clamp(1.35rem, 2.5vw, 1.65rem); font-weight: 600; margin-bottom: 0.65rem; color: var(--white); line-height: 1.15; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); } .team-card__bio { font-size: 0.875rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); max-width: 52ch; } .about__values { margin-top: 3rem; text-align: center; font-family: var(--font-display); font-size: 1.375rem; font-style: italic; color: var(--gold-dark); max-width: 640px; margin-inline: auto; } /* Services */ .services__intro { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; color: var(--text-muted); } .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .service-card { background: var(--white); border-radius: var(--radius-lg); padding: 2rem; border: 1px solid var(--cream-dark); transition: all var(--transition); cursor: pointer; } .service-card:hover { border-color: var(--gold); box-shadow: var(--shadow-gold); transform: translateY(-4px); } .service-card__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(201,162,77,0.12); border-radius: 12px; margin-bottom: 1.25rem; color: var(--gold-dark); } .service-card__icon svg { width: 24px; height: 24px; } .service-card__title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; margin-bottom: 0.75rem; } .service-card__text { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.6; } .service-detail { margin-top: 4rem; background: var(--charcoal-soft); border-radius: var(--radius-lg); padding: 3rem; color: var(--white); } .service-detail__header { margin-bottom: 2rem; } .service-detail__title { font-family: var(--font-display); font-size: 2rem; color: var(--gold); margin-bottom: 1rem; } .service-detail__block { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .service-detail__block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .service-detail__subtitle { font-size: 1rem; font-weight: 600; color: var(--gold-light); margin-bottom: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; } .service-detail p, .service-detail li { color: rgba(255,255,255,0.7); font-size: 0.9375rem; } .service-detail ul { margin-top: 0.75rem; } .service-detail li { padding-left: 1.25rem; position: relative; margin-bottom: 0.5rem; } .service-detail li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; } /* Gallery */ .gallery__header { text-align: center; margin-bottom: 3rem; } .gallery__subtitle { color: var(--text-muted); margin-top: 0.75rem; } .gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .gallery-item { position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; aspect-ratio: 1; min-height: 0; background: var(--charcoal-soft); } .gallery-item__compare { display: grid; grid-template-columns: 1fr 1fr; height: 100%; } .gallery-item__half { position: relative; overflow: hidden; min-height: 0; } .gallery-item__half img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } .gallery-item__label { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); padding: 0.25rem 0.75rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(15,18,20,0.8); color: var(--white); border-radius: 100px; } .gallery-item__half:first-child .gallery-item__label { left: 25%; } .gallery-item__half:last-child .gallery-item__label { left: 75%; } .gallery-item--single-wrap { padding: 0; } .gallery-item--single { position: absolute; inset: 0; width: 100%; height: 100%; } .gallery-item--single img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 0.6s ease; } .gallery-item--single:hover img { transform: scale(1.05); } /* Clinic */ .clinic__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; } .clinic__text p { color: rgba(255,255,255,0.7); margin-top: 1rem; } .clinic__slider { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .clinic__slider img { border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; width: 100%; } .clinic__slider--gallery { grid-template-columns: repeat(3, 1fr); } @media (max-width: 768px) { .clinic__slider--gallery { grid-template-columns: repeat(2, 1fr); } } /* Contact */ .contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; } .contact__info { display: flex; flex-direction: column; gap: 1.75rem; } .contact__item { display: flex; gap: 1rem; align-items: flex-start; } .contact__icon { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(201,162,77,0.12); border-radius: 10px; color: var(--gold); } .contact__icon svg { width: 20px; height: 20px; } .contact__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.2rem; } .contact__value { font-size: 1rem; color: var(--text); } .contact__value a:hover { color: var(--gold-dark); } .contact__payment { margin-top: 1rem; padding: 1.5rem; background: var(--cream); border-radius: var(--radius); border: 1px solid var(--cream-dark); } .contact__payment h4 { font-family: var(--font-display); font-size: 1.125rem; margin-bottom: 0.5rem; } .contact__payment p { font-size: 0.875rem; color: var(--text-muted); } .contact-form { background: var(--white); padding: 2.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; } .form-group input, .form-group textarea { width: 100%; padding: 0.85rem 1rem; font-family: inherit; font-size: 1rem; border: 1.5px solid var(--cream-dark); border-radius: var(--radius); background: var(--cream); transition: border-color var(--transition); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--gold); } .form-group textarea { min-height: 120px; resize: vertical; } .contact-form .btn { width: 100%; margin-top: 0.5rem; } .form-note { font-size: 0.8125rem; color: var(--text-muted); text-align: center; margin-top: 1rem; } /* Footer */ .footer { background: var(--charcoal); color: rgba(255,255,255,0.6); padding: 3rem 0 2rem; } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer__logo .site-logo { display: block; line-height: 0; margin-bottom: 1rem; } .footer__logo .site-logo__svg, .footer__logo .site-logo__img { height: 38px; width: auto; max-width: 11rem; display: block; } .footer__tagline { font-size: 0.9375rem; max-width: 280px; } .footer__nav-title { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .footer__nav a { display: block; font-size: 0.875rem; padding: 0.3rem 0; transition: color var(--transition); } .footer__nav a:hover { color: var(--gold); } .footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem 1.5rem; padding-top: 1.5rem; font-size: 0.8125rem; } .footer__copy { margin: 0; justify-self: start; } .footer__legal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem 0.75rem; justify-self: center; } .footer__legal a { color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color var(--transition); white-space: nowrap; } .footer__legal a:hover { color: var(--gold); } .footer__legal-sep { color: rgba(255, 255, 255, 0.22); user-select: none; } .footer__domain { color: var(--gold); font-weight: 600; justify-self: end; } .footer__credit { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.06); text-align: center; font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); } .footer__credit a { color: rgba(255, 255, 255, 0.65); font-weight: 600; letter-spacing: 0.04em; transition: color var(--transition); } .footer__credit a:hover { color: var(--gold); } /* Legal pages */ .page-hero--legal { padding-bottom: 2.5rem; } .page-hero--legal .page-hero__lead { max-width: 42rem; margin-top: 0.75rem; color: rgba(255, 255, 255, 0.72); font-size: 1.0625rem; line-height: 1.65; } .legal__updated { margin: 1.25rem 0 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.02em; } .section--legal { padding-top: 0; } .legal__content { max-width: 46rem; } .legal__block + .legal__block { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid rgba(15, 18, 20, 0.08); } .legal__heading { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; color: var(--charcoal); margin: 0 0 1rem; line-height: 1.3; } .legal__content p { margin: 0 0 0.875rem; color: rgba(15, 18, 20, 0.78); line-height: 1.75; font-size: 0.9375rem; } .legal__content p:last-child { margin-bottom: 0; } .legal__list { margin: 0.5rem 0 0; padding-left: 1.25rem; color: rgba(15, 18, 20, 0.78); line-height: 1.75; font-size: 0.9375rem; } .legal__list li + li { margin-top: 0.35rem; } .cookie-banner__text a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner__text a:hover { color: var(--charcoal); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(15,18,20,0.95); display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; visibility: hidden; transition: all var(--transition); } .lightbox.active { opacity: 1; visibility: visible; } .lightbox__img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius); object-fit: contain; } .lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.5rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; transition: all var(--transition); } .lightbox__close:hover { border-color: var(--gold); color: var(--gold); } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--white); background: rgba(15, 18, 20, 0.65); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; transition: all var(--transition); z-index: 2; backdrop-filter: blur(6px); } .lightbox__nav[hidden] { display: none; } .lightbox__nav:hover { border-color: var(--gold); color: var(--gold); background: rgba(15, 18, 20, 0.85); } .lightbox__nav svg { width: 22px; height: 22px; } .lightbox__nav--prev { left: 1.5rem; } .lightbox__nav--next { right: 1.5rem; } .lightbox__counter { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); padding: 0.4rem 0.9rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; color: var(--white); background: rgba(15, 18, 20, 0.72); border-radius: 100px; z-index: 2; } @media (max-width: 768px) { .lightbox__nav { width: 40px; height: 40px; } .lightbox__nav--prev { left: 0.75rem; } .lightbox__nav--next { right: 0.75rem; } } /* Reveal animations */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* Mobile nav — zadnja strana 3D flipa */ .mobile-nav { position: relative; width: 100%; height: 100%; min-height: 100%; background: var(--charcoal); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.5rem; padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.25rem) 1.5rem 5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; } .mobile-nav .nav__link { font-size: 1.25rem; opacity: 0; transform: translateX(12px); transition: opacity 0.35s ease, transform 0.35s ease, color var(--transition); } body.menu-open .mobile-nav .nav__link { opacity: 1; transform: translateX(0); } body.menu-open .mobile-nav .nav__link:nth-child(1) { transition-delay: 0.5s; } body.menu-open .mobile-nav .nav__link:nth-child(2) { transition-delay: 0.55s; } body.menu-open .mobile-nav .nav__link:nth-child(3) { transition-delay: 0.6s; } body.menu-open .mobile-nav .nav__link:nth-child(4) { transition-delay: 0.65s; } body.menu-open .mobile-nav .nav__link:nth-child(5) { transition-delay: 0.7s; } body.menu-open .mobile-nav .nav__link:nth-child(6) { transition-delay: 0.75s; } body.menu-open .header__social--mobile, body.menu-open .lang-switcher--menu { opacity: 1; transform: translateY(0); } .header__social--mobile, .lang-switcher--menu { opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease 0.8s, transform 0.35s ease 0.8s; } /* 3D page flip (mobilni meni) — puni 180° okret kao kocka */ .page-flip { width: 100%; } @media (max-width: 768px) { .page-flip { --flip-depth: 18px; perspective: 1000px; perspective-origin: 50% 42%; height: 100dvh; min-height: 100dvh; overflow: hidden; position: relative; } .page-flip__inner { position: relative; width: 100%; height: 100%; min-height: 100%; transform-style: preserve-3d; transform-origin: center center; transform: rotateY(0deg); transition: transform 0.85s cubic-bezier(0.4, 0.15, 0.2, 1); will-change: transform; } .page-flip__face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .page-flip__face--front { transform: rotateY(0deg) translateZ(var(--flip-depth)); z-index: 2; background: var(--cream); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .page-flip__face--back { transform: rotateY(180deg) translateZ(var(--flip-depth)); z-index: 1; background: var(--charcoal); overflow: hidden; } .page-flip__face--back .mobile-nav { min-height: 100%; background: var(--charcoal); } /* Zlatni rub kocke — vidljiv na ~90° rotacije */ .page-flip__spine { position: absolute; top: 0; left: 50%; width: var(--flip-depth); height: 100%; margin-left: calc(var(--flip-depth) / -2); transform: rotateY(90deg); transform-origin: center center; background: linear-gradient( 180deg, #5c4a1a 0%, var(--gold) 38%, #e8d5a0 50%, var(--gold) 62%, #5c4a1a 100% ); backface-visibility: hidden; pointer-events: none; box-shadow: 0 0 12px rgba(201, 162, 77, 0.35); } body.menu-open .page-flip__inner { transform: rotateY(-180deg); } body.menu-open .page-flip__face--front { overflow: hidden; pointer-events: none; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2); } body.menu-open .header { background: rgba(15, 18, 20, 0.97); backdrop-filter: blur(16px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } .menu-toggle { position: relative; z-index: 1001; } .menu-toggle span { transition: transform 0.45s cubic-bezier(0.4, 0.15, 0.2, 1), opacity 0.3s ease; } } body.menu-open { background: var(--charcoal); overflow: hidden; } body.menu-open .float-contact, body.menu-open .mobile-booking { opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } @media (max-width: 768px) { body.menu-open { padding-bottom: 0 !important; } body.menu-open .mobile-booking { display: none; } } /* Responsive */ @media (max-width: 1024px) { .service-grid { grid-template-columns: repeat(2, 1fr); } .gallery__grid { grid-template-columns: repeat(2, 1fr); } .teasers__grid { grid-template-columns: repeat(2, 1fr); } .intro__grid, .clinic__grid, .contact__grid { grid-template-columns: 1fr; } .intro__visual { order: -1; max-width: 480px; margin-inline: auto; } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { :root { --header-h: 70px; } .header { padding-top: env(safe-area-inset-top, 0px); } body[data-page="home"] .header:not(.scrolled) { background: linear-gradient( 180deg, rgba(15, 18, 20, 0.94) 0%, rgba(15, 18, 20, 0.72) 55%, rgba(15, 18, 20, 0.35) 100% ); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: none; } body:not([data-page="home"]) .header, .header.scrolled { background: rgba(15, 18, 20, 0.97); backdrop-filter: blur(16px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); } .header__logo img { height: 42px; } .header__inner { gap: 0.35rem; } .nav { gap: 0.35rem; flex-shrink: 0; } .nav__list, .header__actions .btn, .header__actions .header__social, .header__actions .nav__cta { display: none !important; } .header__actions { gap: 0.35rem; } .header__social--mobile { display: flex; gap: 1rem; } .header__social--mobile .header__social-link { width: 44px; height: 44px; color: rgba(255, 255, 255, 0.9); } .menu-toggle { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-right: -0.15rem; } .lang-switcher__pills { display: none; } .lang-switcher .lang-dropdown { display: block; } .lang-dropdown__trigger { min-height: 36px; padding: 0.35rem 0.55rem; } .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; width: 100%; } .stat { padding: 1.35rem 0.65rem; min-height: 9.5rem; height: 100%; border-right: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-sizing: border-box; } .stat:nth-child(even) { border-right: none; } .stat:nth-child(n + 3) { border-bottom: none; } .stat__icon { width: 44px; height: 44px; margin-bottom: 0.65rem; } .stat__icon svg { width: 22px; height: 22px; } .stat__value { font-size: clamp(1.1rem, 4.2vw, 1.5rem); line-height: 1.2; margin-bottom: 0.4rem; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; min-height: 2.4em; display: flex; align-items: center; justify-content: center; } .stat__label { font-size: 0.625rem; letter-spacing: 0.06em; line-height: 1.35; max-width: 100%; padding: 0 0.15rem; } .team { grid-template-columns: 1fr; } .service-grid { grid-template-columns: 1fr; } .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .gallery__grid .compare { min-height: 0; } .gallery__grid .compare__hint { top: 0.35rem; padding: 0.15rem 0.45rem; font-size: 0.5rem; letter-spacing: 0.03em; max-width: calc(100% - 0.6rem); } .gallery__grid .compare__hint--long { display: none; } .gallery__grid .compare__hint--short { display: block; white-space: nowrap; } .gallery__grid .compare__label { bottom: 0.35rem; padding: 0.15rem 0.4rem; font-size: 0.5rem; letter-spacing: 0.05em; } .gallery__grid .compare__label--before { left: 0.35rem; } .gallery__grid .compare__label--after { right: 0.35rem; } .gallery__grid .compare__handle-knob { width: 32px; height: 32px; border-width: 2px; } .gallery__grid .compare__handle-icon { width: 18px; } .teasers__grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .teasers { padding: 3rem 0; } .teasers__title { margin-bottom: 1.5rem; font-size: clamp(1.5rem, 5.5vw, 2rem); } .teaser-card { aspect-ratio: 4 / 5; } .teaser-card__label { bottom: 0.75rem; left: 0.75rem; right: 1.75rem; font-size: 0.875rem; line-height: 1.2; } .teaser-card__arrow { bottom: 0.75rem; right: 0.75rem; font-size: 1rem; } .service-detail { padding: 2rem 1.5rem; } .footer__grid { grid-template-columns: 1fr; } .footer__bottom { grid-template-columns: 1fr; text-align: center; gap: 0.75rem; } .footer__copy, .footer__legal, .footer__domain { justify-self: center; } .footer__legal { justify-content: center; } .hero__actions { flex-direction: column; } .hero__actions .btn { width: 100%; } /* Uvod — mobilni prikaz */ #uvod.section { padding: 2.5rem 0 3rem; } #uvod .container { width: 100%; padding-inline: 1.25rem; } #uvod .intro__grid { gap: 1.75rem; } #uvod .intro__visual { max-width: min(100%, 300px); margin-inline: auto; } #uvod .intro__img-main { max-height: 360px; aspect-ratio: 4 / 5; } #uvod .intro__text .eyebrow { margin-bottom: 0.65rem; font-size: 0.6875rem; letter-spacing: 0.16em; } #uvod .intro__text .section-title { font-size: clamp(1.6rem, 6.8vw, 2.1rem); line-height: 1.2; margin-bottom: 1rem; } #uvod .intro__text p { font-size: 0.9375rem; line-height: 1.65; margin-bottom: 0.95rem; } #uvod .intro__text p:last-of-type:not(.intro__highlight) { margin-bottom: 0.5rem; } #uvod .intro__highlight { margin-top: 1.15rem; padding: 1rem 1.1rem; font-size: 0.9375rem; line-height: 1.6; border-radius: var(--radius); } .page-flip__face--front { scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 0.5rem); } } @media (min-width: 769px) { .page-flip { perspective: none; height: auto; min-height: 0; overflow: visible; } .page-flip__inner { transform: none !important; height: auto; min-height: 0; } .page-flip__face { position: static; height: auto; min-height: 0; backface-visibility: visible; transform: none !important; } .page-flip__face--back, .page-flip__spine { display: none; } } @media (prefers-reduced-motion: reduce) { @media (max-width: 768px) { .page-flip__inner { transition: opacity 0.3s ease; transform: none !important; } .page-flip__face--front, .page-flip__face--back { transform: none !important; transition: opacity 0.3s ease; } .page-flip__spine { display: none; } body.menu-open .page-flip__inner { transform: none !important; } body.menu-open .page-flip__face--front { opacity: 0; pointer-events: none; } body.menu-open .page-flip__face--back { opacity: 1; position: absolute; inset: 0; z-index: 2; } } .mobile-nav .nav__link { opacity: 1; transform: none; transition: none; } body.menu-open .mobile-nav .nav__link { transition: none; } } @media (max-width: 480px) { .header__logo img { height: 38px; } .lang-dropdown__trigger { min-width: 2.85rem; font-size: 0.625rem; } .section { padding: 4rem 0; } .clinic__slider { grid-template-columns: 1fr; } .stat { padding: 1.15rem 0.5rem; min-height: 8.75rem; } .stat__value { font-size: clamp(1rem, 3.8vw, 1.35rem); min-height: 2.35em; } .stat__label { font-size: 0.6rem; letter-spacing: 0.05em; } } /* Skip link */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 10000; padding: 0.75rem 1.25rem; background: var(--gold); color: var(--charcoal); font-weight: 600; border-radius: var(--radius); } .skip-link:focus { top: 1rem; } /* Focus visible */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* Compare slider (before/after) — povuci mišem lijevo-desno */ .compare-card { aspect-ratio: 1; cursor: ew-resize; } .compare-card.gallery-item { cursor: ew-resize; } .compare { position: relative; width: 100%; height: 100%; min-height: 300px; overflow: hidden; border-radius: var(--radius-lg); cursor: ew-resize; user-select: none; touch-action: pan-y pinch-zoom; -webkit-user-drag: none; } .compare__img { display: block; pointer-events: none; } .compare__img--before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; } .compare__after { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; z-index: 2; pointer-events: none; } .compare__img--after { position: absolute; top: 0; left: 0; height: 100%; width: 100%; max-width: none; object-fit: cover; object-position: center; } .compare__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background: var(--gold); z-index: 5; pointer-events: none; box-shadow: 0 0 16px rgba(0, 0, 0, 0.45); transition: width 0.15s ease; } .compare.is-dragging .compare__handle { width: 5px; } .compare__handle-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); border: 3px solid var(--gold); } .compare__handle-icon { width: 26px; height: auto; display: block; pointer-events: none; } .compare.is-peek .compare__hint { opacity: 0.65; } .compare.is-dragging .compare__handle-knob, .compare[data-interacted] .compare__handle-knob { animation: none; } .compare__hint { position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%); z-index: 6; padding: 0.35rem 0.85rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(15, 18, 20, 0.72); color: var(--white); border-radius: 100px; pointer-events: none; opacity: 1; transition: opacity 0.3s ease; white-space: nowrap; } .compare__hint--short { display: none; letter-spacing: 0.04em; text-transform: none; } .compare.is-dragging .compare__hint { opacity: 0; } .compare__label { position: absolute; bottom: 0.75rem; z-index: 6; padding: 0.3rem 0.7rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(15, 18, 20, 0.78); color: var(--white); border-radius: 100px; pointer-events: none; } .compare__label--before { left: 0.75rem; } .compare__label--after { right: 0.75rem; } /* Gallery filters */ .gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; } .gallery-filters__btn { padding: 0.5rem 1.25rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 100px; border: 1.5px solid var(--cream-dark); color: var(--text-muted); background: var(--white); transition: all var(--transition); } .gallery-filters__btn.active, .gallery-filters__btn:hover { border-color: var(--gold); color: var(--charcoal); background: rgba(201,162,77,0.12); } /* Services preview (home) */ .services-preview { padding: 5rem 0; background: var(--white); } .services-preview__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .services-preview__link { font-size: 0.875rem; font-weight: 600; color: var(--gold-dark); letter-spacing: 0.05em; text-transform: uppercase; } .services-preview__link:hover { color: var(--gold); } .services-preview__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; } .services-preview__card { display: flex; flex-direction: column; padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--cream-dark); transition: all var(--transition); min-height: 100%; } .services-preview__card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow-gold); } .services-preview__card h3 { font-family: var(--font-display); font-size: 1.125rem; margin-bottom: 0.5rem; } .services-preview__card p { flex: 1; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.55; min-height: 4.65em; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Gallery teaser home */ .gallery-teaser { padding: 5rem 0; background: var(--cream-dark); } .gallery-teaser__header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; } .gallery-teaser__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; align-items: stretch; } .gallery-teaser__item { border-radius: var(--radius-lg); overflow: hidden; min-height: 280px; } .gallery-teaser__item--featured { grid-row: span 1; min-height: 360px; } .gallery-teaser__link { display: block; height: 100%; text-decoration: none; } .gallery-teaser__item .compare { height: 100%; min-height: inherit; border-radius: 0; } .gallery-teaser__item .compare--compact { min-height: 280px; } .gallery-teaser__cta { text-align: center; margin-top: 2rem; } /* Clinic slider */ .clinic-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; max-height: 560px; background: var(--charcoal); } .clinic-slider__track { position: absolute; inset: 0; } .clinic-slider__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; } .clinic-slider__slide.is-active { opacity: 1; z-index: 1; } .clinic-slider__slide-btn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in; background: none; } .clinic-slider__slide.img-load--cover { background: transparent; } .clinic-slider__slide.img-load--cover .clinic-slider__slide-btn { position: absolute; inset: 0; width: 100%; height: 100%; } .clinic-slider__slide.img-load--cover .clinic-slider__slide-btn img, .clinic-slider__slide.img-load--cover .img-load__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } .clinic-slider__dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 0.5rem; } .clinic-slider__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,0.35); cursor: pointer; transition: background var(--transition), transform var(--transition); } .clinic-slider__dot.is-active { background: var(--gold); transform: scale(1.2); } .clinic-slider--featured { aspect-ratio: 21 / 9; max-height: 520px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); border: 1px solid rgba(201, 162, 77, 0.15); } .clinic-slider--featured::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(15, 18, 20, 0.55) 0%, transparent 40%); } .clinic-slider__nav { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; align-items: center; justify-content: space-between; padding: 0 0.75rem; } .clinic-slider__arrow { pointer-events: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(15, 18, 20, 0.65); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); backdrop-filter: blur(6px); } .clinic-slider__arrow:hover { background: var(--gold); color: var(--charcoal); } .clinic-slider__arrow svg { width: 22px; height: 22px; } .clinic-slider__counter { position: absolute; top: 1rem; right: 1rem; z-index: 4; padding: 0.35rem 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; background: rgba(15, 18, 20, 0.72); color: var(--white); border-radius: 100px; } .clinic-slider__thumbs { display: flex; gap: 0.65rem; margin-top: 1.25rem; padding: 0.35rem 0 0.15rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: center; } .clinic-slider__thumbs::-webkit-scrollbar { display: none; } .clinic-slider__thumb { position: relative; flex: 0 0 88px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: var(--radius); overflow: hidden; cursor: pointer; opacity: 0.5; transition: var(--transition); scroll-snap-align: center; background: var(--charcoal-soft); } .clinic-slider__thumb.is-active, .clinic-slider__thumb:hover { opacity: 1; border-color: var(--gold); } .clinic-slider__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* ========== Clinic page ========== */ .page-clinic .clinic-intro { background: var(--cream); } .clinic-intro__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: center; } .clinic-intro__title { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 1rem; } .clinic-intro__body p { color: var(--text-muted); line-height: 1.7; margin-bottom: 1.25rem; } .clinic-intro__list { display: grid; gap: 0.65rem; margin: 0 0 1.75rem; padding: 0; list-style: none; } .clinic-intro__list li { position: relative; padding-left: 1.35rem; font-size: 0.9375rem; color: var(--charcoal); line-height: 1.5; } .clinic-intro__list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); } .clinic-intro__visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); background: var(--charcoal-soft); } .clinic-intro__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .clinic-features { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .clinic-features__title { font-family: var(--font-display); font-size: 1.75rem; text-align: center; margin-bottom: 2rem; } .clinic-features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .clinic-feature { padding: 1.5rem; background: var(--cream); border-radius: var(--radius-lg); border: 1px solid var(--cream-dark); transition: var(--transition); } .clinic-feature:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-3px); } .clinic-feature__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.65rem; } .clinic-feature__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(201, 162, 77, 0.12); border-radius: 10px; color: var(--gold-dark); margin-bottom: 0; } .clinic-feature__icon svg { width: 20px; height: 20px; } .clinic-feature h3 { font-family: var(--font-display); font-size: 1.0625rem; margin: 0; } .clinic-feature p { font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); margin: 0; } .clinic-showcase { padding-bottom: 4rem; } .clinic-showcase__header { text-align: center; max-width: 36rem; margin: 0 auto 2rem; } .clinic-showcase__header .eyebrow { color: var(--gold); } .clinic-showcase__header p { color: rgba(255, 255, 255, 0.65); margin-top: 0.75rem; line-height: 1.65; } .section-title--light { color: var(--white); } .clinic-gallery { max-width: min(1100px, 100%); } .clinic-slider__hint { margin-top: 1.25rem; text-align: center; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.45); } .clinic-visit { background: linear-gradient(135deg, rgba(201, 162, 77, 0.08) 0%, var(--cream) 55%); border-top: 1px solid var(--border); } .clinic-visit__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding: 1rem 0; } .clinic-visit__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.75rem; } .clinic-visit__text p { color: var(--text-muted); line-height: 1.65; margin-bottom: 0.75rem; max-width: 42ch; } .clinic-visit__address { font-style: normal; font-weight: 600; color: var(--charcoal); } .clinic-visit__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } @media (max-width: 1024px) { .clinic-features__grid { grid-template-columns: repeat(2, 1fr); } .clinic-intro__inner { grid-template-columns: 1fr; gap: 2rem; } .clinic-intro__visual { order: -1; max-width: 640px; margin-inline: auto; width: 100%; } .clinic-slider--featured { aspect-ratio: 16 / 10; max-height: 420px; } } @media (max-width: 768px) { .page-hero--compact { padding: 3.5rem 0 2.75rem; } .clinic-features__grid { grid-template-columns: 1fr; gap: 0.75rem; } .clinic-feature { padding: 1.25rem; } .clinic-slider--featured { aspect-ratio: 4 / 3; max-height: none; } .clinic-slider__thumbs { justify-content: flex-start; margin-inline: calc(50% - 50vw); padding-inline: max(4vw, 1rem); } .clinic-slider__thumb { flex-basis: 72px; height: 52px; } .clinic-visit__inner { flex-direction: column; align-items: flex-start; } .clinic-visit__actions { width: 100%; } .clinic-visit__actions .btn { flex: 1 1 auto; text-align: center; } } /* ========== Social feed (O nama) ========== */ .social-feed { background: var(--white); border-top: 1px solid var(--border); } .social-feed__header { text-align: center; max-width: 36rem; margin: 0 auto 3rem; } .social-feed__subtitle { color: var(--text-muted); margin-top: 0.75rem; line-height: 1.65; } .social-feed__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } .social-feed__col { background: var(--cream); border-radius: var(--radius-lg); border: 1px solid var(--cream-dark); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .social-feed__col-head { display: flex; align-items: center; gap: 0.75rem; } .social-feed__col-head h3 { font-family: var(--font-display); font-size: 1.25rem; margin: 0; } .social-feed__icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--white); } .social-feed__icon--fb { background: #1877f2; } .social-feed__icon--ig { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); } .social-feed__panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1rem; background: var(--white); border-radius: var(--radius); border: 1px dashed var(--cream-dark); min-height: 200px; } .social-feed__panel p { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1rem; } .social-feed__panel .btn { width: 100%; max-width: 280px; } .instagram-feed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .instagram-feed-grid[hidden], .instagram-feed__empty[hidden] { display: none !important; } .instagram-embed-wrap { border-radius: var(--radius); overflow: hidden; background: var(--white); min-height: 120px; } .instagram-embed-wrap .instagram-media { margin: 0 auto !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; } .instagram-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--white); border: 1px solid var(--border); text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); } .instagram-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .instagram-card__media { position: relative; aspect-ratio: 1; overflow: hidden; } .instagram-card__media img { width: 100%; height: 100%; object-fit: cover; } .instagram-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.25); color: var(--white); font-size: 1.5rem; } .instagram-card__caption { padding: 0.65rem 0.75rem; font-size: 0.75rem; line-height: 1.45; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 900px) { .social-feed__grid { grid-template-columns: 1fr; } .instagram-feed-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .instagram-feed-grid { grid-template-columns: 1fr; } } /* ========== Services page ========== */ .page-services .services-quick { background: var(--white); border-bottom: 1px solid var(--border); } .services-quick__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .services-quick__item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 0; } .services-quick__num { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); line-height: 1; flex-shrink: 0; } .services-quick__item p { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.5; margin: 0; } .services-layout { padding: 3rem 0 5rem; background: var(--cream); } .services-layout__inner { display: grid; grid-template-columns: 220px 1fr; gap: 3rem; align-items: start; } .services-toc { display: flex; flex-direction: column; gap: 0.35rem; } .services-toc--sticky { position: sticky; top: calc(var(--header-h) + 1.5rem); } .services-toc__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.5rem; } .services-toc a { padding: 0.5rem 0.75rem; font-size: 0.8125rem; border-radius: var(--radius); border: 1px solid transparent; color: var(--text-muted); transition: var(--transition); text-align: left; } .services-toc a:hover, .services-toc a.is-active { border-color: rgba(201, 162, 77, 0.35); color: var(--charcoal); background: rgba(201, 162, 77, 0.1); } .services-content { display: flex; flex-direction: column; gap: 4rem; min-width: 0; } .services-overview__title { font-family: var(--font-display); font-size: 1.75rem; margin-bottom: 1.5rem; } .services-overview__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .services-overview__card { display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; row-gap: 0.5rem; align-items: start; padding: 1.5rem; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--cream-dark); transition: var(--transition); text-decoration: none; color: inherit; } .services-overview__card:hover { border-color: var(--gold); box-shadow: var(--shadow-gold); transform: translateY(-3px); } .services-overview__icon { grid-column: 1; grid-row: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(201, 162, 77, 0.12); border-radius: 10px; color: var(--gold-dark); align-self: center; } .services-overview__icon svg { width: 22px; height: 22px; } .services-overview__card h3 { grid-column: 2; grid-row: 1; align-self: center; font-family: var(--font-display); font-size: 1.125rem; margin: 0; } .services-overview__card p { grid-column: 1 / -1; grid-row: 2; font-size: 0.875rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 0.75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .services-overview__link { grid-column: 1 / -1; grid-row: 3; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-dark); } /* Feature sections */ .svc-feature, .svc-feature--dark { scroll-margin-top: calc(var(--header-h) + 1.5rem); padding: 2.5rem; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--cream-dark); } .svc-feature--dark { background: var(--charcoal-soft); border-color: rgba(201, 162, 77, 0.15); } .svc-feature--dark .eyebrow { color: var(--gold); } .svc-feature--dark .svc-feature__title { color: var(--white); } .svc-feature--dark .svc-feature__lead { color: rgba(255, 255, 255, 0.72); } .svc-feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; margin-bottom: 2rem; } .svc-feature__grid--reverse .svc-feature__visual { order: 2; } .svc-feature__grid--reverse .svc-feature__body { order: 1; } .svc-feature__visual { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; } .svc-feature__visual img { width: 100%; height: 100%; object-fit: cover; } .svc-feature__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; color: var(--charcoal); } .svc-feature__lead { font-size: 1rem; line-height: 1.7; color: var(--text-muted); margin: 0; } .svc-subgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .svc-feature--dark .svc-subcard { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } .svc-feature--dark .svc-subcard h3 { color: var(--gold-light); } .svc-feature--dark .svc-subcard p { color: rgba(255, 255, 255, 0.65); } .svc-subcard { padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--cream); border: 1px solid var(--border); } .svc-subcard h3 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.5rem; } .svc-subcard p { font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); margin: 0; } .svc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .svc-duo__card { padding: 1.5rem; border-radius: var(--radius); background: var(--cream); border: 1px solid var(--border); } .svc-duo__card h3 { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 1rem; } .svc-list { list-style: none; margin: 0; padding: 0; } .svc-list li { position: relative; padding-left: 1.1rem; margin-bottom: 0.65rem; font-size: 0.875rem; line-height: 1.55; color: var(--text-muted); } .svc-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; } .svc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); } .svc-split__card { padding: 2rem; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--cream-dark); } .svc-split__card--accent { background: linear-gradient(145deg, var(--charcoal-soft) 0%, #1a1f22 100%); border-color: rgba(201, 162, 77, 0.2); } .svc-split__card--accent h3, .svc-split__card--accent p { color: rgba(255, 255, 255, 0.75); } .svc-split__card--accent h3 { color: var(--white); } .svc-split__badge { display: inline-block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; } .svc-split__card h3 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 0.75rem; } .svc-split__card p { font-size: 0.9375rem; line-height: 1.65; color: var(--text-muted); margin: 0; } .svc-partner { scroll-margin-top: calc(var(--header-h) + 1.5rem); padding: 2.5rem; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(201, 162, 77, 0.12) 0%, var(--white) 50%); border: 1px solid rgba(201, 162, 77, 0.25); } .svc-partner__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .svc-partner__text { flex: 1; min-width: 260px; } .svc-partner__text .svc-feature__title { margin-bottom: 0.75rem; } .svc-partner__text p { color: var(--text-muted); line-height: 1.65; margin: 0; } .svc-partner__badge { text-align: center; padding: 1.5rem 2rem; background: var(--charcoal); border-radius: var(--radius-lg); color: var(--white); } .svc-partner__badge span { display: block; font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.35rem; } .svc-partner__badge strong { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: 0.08em; } .svc-general { scroll-margin-top: calc(var(--header-h) + 1.5rem); } .svc-general__title { font-family: var(--font-display); font-size: 1.75rem; margin-bottom: 1.5rem; text-align: center; } .svc-general__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .svc-general__card { display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; row-gap: 0.5rem; align-items: start; padding: 1.75rem; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--cream-dark); scroll-margin-top: calc(var(--header-h) + 1.5rem); transition: var(--transition); } .svc-general__card:hover { border-color: var(--gold); box-shadow: var(--shadow); } .svc-general__icon { grid-column: 1; grid-row: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(201, 162, 77, 0.12); border-radius: 10px; color: var(--gold-dark); align-self: center; } .svc-general__icon svg { width: 22px; height: 22px; } .svc-general__card h3 { grid-column: 2; grid-row: 1; align-self: center; font-family: var(--font-display); font-size: 1.125rem; margin: 0; } .svc-general__card p { grid-column: 1 / -1; grid-row: 2; font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); margin: 0; } @media (max-width: 1024px) { .services-layout__inner { grid-template-columns: 1fr; } .services-toc--sticky { position: static; flex-direction: row; flex-wrap: wrap; } .services-toc__label { width: 100%; } .svc-feature__grid, .svc-feature__grid--reverse { grid-template-columns: 1fr; } .svc-feature__grid--reverse .svc-feature__visual, .svc-feature__grid--reverse .svc-feature__body { order: unset; } .svc-subgrid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .services-quick__grid { grid-template-columns: 1fr; } .services-overview__grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; } .services-overview__card { padding: 1rem; grid-template-columns: 32px 1fr; column-gap: 0.5rem; row-gap: 0.35rem; } .services-overview__icon { width: 32px; height: 32px; border-radius: 8px; } .services-overview__icon svg { width: 16px; height: 16px; } .services-overview__card h3 { font-size: 0.9375rem; line-height: 1.2; } .services-overview__card p { font-size: 0.75rem; line-height: 1.45; -webkit-line-clamp: 4; margin-bottom: 0.5rem; } .services-overview__link { font-size: 0.6875rem; } .svc-duo, .svc-split, .svc-general__grid { grid-template-columns: 1fr; } .svc-feature, .svc-feature--dark, .svc-partner { padding: 1.5rem; } } /* Back to top */ .back-to-top { position: fixed; bottom: 5.5rem; right: 1.5rem; z-index: 899; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--charcoal); color: var(--gold); box-shadow: 0 6px 20px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--charcoal-soft); } /* Map */ .contact-map-section { margin-top: 3rem; } .contact-map-section__title { font-size: 1.5rem; margin-bottom: 0.5rem; } .contact-map-section__address { color: var(--text-muted); margin-bottom: 1rem; } .contact-map-section__link-wrap { margin-top: 1rem; text-align: center; } .contact-map-section__link { color: var(--gold); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; } .contact-map-section__link:hover { color: var(--gold-light); } .contact-map { margin-top: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16/9; min-height: 280px; } .contact-map iframe { width: 100%; height: 100%; border: 0; } .contact-quick { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } /* Floating contact */ .float-contact { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 900; display: flex; flex-direction: column; gap: 0.65rem; } .float-contact__btn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.2); transition: transform var(--transition); } .float-contact__btn:hover { transform: scale(1.08); } .float-contact__btn--wa { background: #25d366; color: white; } .float-contact__btn--phone { background: var(--gold); color: var(--charcoal); } .footer__hours { font-size: 0.875rem; color: rgba(255,255,255,0.55); margin-top: 0.5rem; line-height: 1.6; } @media (max-width: 1024px) { .services-preview__grid { grid-template-columns: repeat(2, 1fr); } .gallery-teaser__grid { grid-template-columns: 1fr 1fr; } .gallery-teaser__item--featured { grid-column: span 2; } } /* Pillars */ .section--compact { padding: 4rem 0; } .pillars { background: var(--white); } .pillars__title { text-align: center; margin-bottom: 2.5rem; } .pillars__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .pillar { padding: 1.25rem 1.5rem; border-radius: var(--radius-lg); background: var(--cream); border: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr; column-gap: 0.65rem; row-gap: 0.5rem; align-items: center; } .pillar__icon { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--gold); margin-bottom: 0; } .pillar h3 { grid-column: 2; grid-row: 1; font-size: 1.0625rem; line-height: 1.25; margin-bottom: 0; } .pillar p { grid-column: 1 / -1; grid-row: 2; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.55; margin: 0; } /* Partner */ .partner { text-align: center; } .partner__text { max-width: 640px; margin: 1rem auto 0; color: rgba(255,255,255,0.7); line-height: 1.7; } /* Home: partner + CTA — jedan pored drugog na desktopu */ .home-strip { display: grid; grid-template-columns: 1fr; } @media (min-width: 1025px) { .home-strip { grid-template-columns: 1fr 1fr; } .home-strip__col { display: flex; align-items: center; justify-content: center; min-height: 100%; } .home-strip .partner.section { padding: 4.5rem 2.5rem; } .home-strip .cta-block { padding: 4.5rem 2.5rem; } .home-strip .partner .container, .home-strip .cta-block .container { width: 100%; max-width: 26rem; } .home-strip .partner__text { margin-left: auto; margin-right: auto; } .home-strip .cta-block p { margin-bottom: 1.5rem; } } /* Team gallery strip — uske vertikalne trake, ista visina */ .team-gallery { margin-top: 2.5rem; } .team-gallery__viewport { width: 100%; } .team-gallery__track { display: flex; align-items: stretch; gap: 0.5rem; width: 100%; will-change: transform; } .team-gallery__item { position: relative; flex: 1 1 0; min-width: 0; height: 220px; line-height: 0; padding: 0; border: none; overflow: hidden; cursor: pointer; border-radius: 999px; background: var(--charcoal); box-shadow: 0 8px 22px rgba(15, 18, 20, 0.09); transition: transform var(--transition), box-shadow var(--transition); } .team-gallery__item:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 18, 20, 0.13); } .team-gallery__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .team-gallery__item img, .team-gallery__item > .img-load, .team-gallery__item > .img-load .img-load__inner { position: absolute; inset: 0; width: 100%; height: 100%; } .team-gallery__item > .img-load { background: transparent; } .team-gallery__item > .img-load .img-load__img { opacity: 1; } .team-gallery__item img { display: block; object-fit: cover; object-position: center; transform: scale(1.22); transform-origin: center center; pointer-events: none; } @media (min-width: 769px) { .team-gallery__item[data-clone] { display: none; } } @media (max-width: 768px) { .team-gallery__viewport { overflow: hidden; margin-inline: calc(50% - 50vw); padding-inline: max(4vw, 1rem); -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); } .team-gallery__track { width: max-content; gap: 0.45rem; } .team-gallery__item { flex: 0 0 52px; width: 52px; min-width: 52px; height: 168px; } } /* Form */ .form-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } .form-group input.is-invalid, .form-group textarea.is-invalid { border-color: #c44; } .form-status { display: none; margin-top: 1rem; padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.9375rem; } .form-status.is-visible { display: block; } .form-status.is-success { background: rgba(76, 175, 120, 0.12); color: #2d6a4a; } .form-status.is-error { background: rgba(196, 68, 68, 0.1); color: #9b2c2c; } .form-status.is-loading { background: rgba(201, 162, 77, 0.12); color: var(--charcoal); } .form-alt { margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted); } .form-alt a { color: var(--gold); font-weight: 500; margin-left: 0.25rem; } .btn--sm { padding: 0.5rem 1.1rem; font-size: 0.8125rem; } /* Cookie banner */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 950; background: var(--charcoal); border-top: 1px solid rgba(201, 162, 77, 0.25); padding: 1rem 0; box-shadow: 0 -8px 32px rgba(0,0,0,0.3); } .cookie-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .cookie-banner__text { flex: 1; min-width: 240px; font-size: 0.875rem; color: rgba(255,255,255,0.75); line-height: 1.5; } .cookie-banner__actions { display: flex; gap: 0.75rem; flex-shrink: 0; } .cookie-banner__decline { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.25); } /* Mobile booking bar */ .mobile-booking { display: none; } @media (max-width: 768px) { .mobile-booking { display: flex; align-items: stretch; gap: 0.45rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 898; padding: 0.5rem 0.65rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); background: rgba(15, 18, 20, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(201, 162, 77, 0.28); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35); } .mobile-booking__btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; min-height: 3.25rem; padding: 0.45rem 0.35rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.15; border-radius: var(--radius); text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.92); transition: background var(--transition), border-color var(--transition), transform 0.2s ease; } .mobile-booking__btn:active { transform: scale(0.97); } .mobile-booking__icon { width: 1.35rem; height: 1.35rem; flex-shrink: 0; color: var(--gold-light); } .mobile-booking__label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-booking__btn--call .mobile-booking__icon { color: var(--gold-light); } .mobile-booking__btn--wa { background: rgba(255, 255, 255, 0.05); border-color: rgba(92, 160, 118, 0.35); } .mobile-booking__btn--wa .mobile-booking__icon--wa { width: 1.25rem; height: 1.25rem; color: #6eb88a; } .mobile-booking__btn--book { flex: 1.15; background: linear-gradient(145deg, var(--gold) 0%, var(--gold-light) 100%); border-color: rgba(201, 162, 77, 0.5); color: var(--charcoal); box-shadow: var(--shadow-gold); } .mobile-booking__btn--book .mobile-booking__icon { color: var(--charcoal); opacity: 0.85; } body:has(.mobile-booking) { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); } body:has(.cookie-banner) { padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)); } .float-contact { display: none; } } /* 404 */ .error-page-body { min-height: 100vh; display: flex; flex-direction: column; } .error-page { flex: 1; display: flex; align-items: center; padding: 6rem 0; } .error-page__inner { text-align: center; } .error-page__text { color: var(--text-muted); margin: 1rem auto 2rem; max-width: 480px; } .error-page__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } @media (max-width: 1024px) { .pillars__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .float-contact { bottom: 1rem; right: 1rem; } .back-to-top { bottom: 5rem; right: 1rem; } .services-preview__grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .services-preview__card { padding: 1rem; } .services-preview__card h3 { font-size: 0.9375rem; line-height: 1.25; } .services-preview__card p { font-size: 0.75rem; line-height: 1.45; min-height: 0; -webkit-line-clamp: 4; } .gallery-teaser__grid { grid-template-columns: 1fr; } .gallery-teaser__item--featured { grid-column: span 1; min-height: 300px; } .pillars__grid { grid-template-columns: 1fr; } .cookie-banner__inner { flex-direction: column; align-items: stretch; } } /* ========== Image loader (logo placeholder) ========== */ .img-load { position: relative; display: block; overflow: hidden; background: var(--cream-dark); } .img-load__inner { position: relative; display: block; width: 100%; } .img-load__loader { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--cream) 0%, var(--cream-dark) 100%); transition: opacity 0.45s ease, visibility 0.45s ease; pointer-events: none; } .img-load.is-loaded .img-load__loader { opacity: 0; visibility: hidden; } .img-load__logo { width: 72px; height: auto; max-width: 55%; object-fit: contain; animation: img-load-pulse 1.4s ease-in-out infinite; } .img-load__img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity 0.5s ease; } .img-load.is-loaded .img-load__img { opacity: 1; } @keyframes img-load-pulse { 0%, 100% { opacity: 0.4; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1); } } /* Pokrivenost cijelog okvira (hero, klinika slajder) */ .img-load--cover { background: transparent; } .img-load--cover, .img-load--cover .img-load__inner { position: absolute; inset: 0; width: 100%; height: 100%; } .img-load--cover .img-load__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-slider__slide.img-load--cover .img-load__loader { z-index: 2; } /* Prije/poslije klizač */ .img-load--compare .img-load__loader { z-index: 15; border-radius: inherit; } .img-load--compare .compare__img.img-load__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; } .img-load--compare .compare__img--before { inset: 0; z-index: 1; } .img-load--compare.is-loaded .compare__img.img-load__img { opacity: 1; } /* Galerija i mreža */ .img-load--gallery { width: 100%; aspect-ratio: 1; } .img-load--grid, .img-load--grid .img-load__inner { position: absolute; inset: 0; width: 100%; height: 100%; } .img-load--gallery .img-load__img, .img-load--grid .img-load__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Teaser kartice (početna) */ .img-load--teaser, .img-load--teaser .img-load__inner { position: absolute; inset: 0; width: 100%; height: 100%; } .img-load--teaser .img-load__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Intro ordinacija */ .img-load--clinic-intro, .img-load--clinic-intro .img-load__inner { position: absolute; inset: 0; width: 100%; height: 100%; } .img-load--clinic-intro .img-load__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .img-load--team { aspect-ratio: 3/4; } .img-load--team .img-load__img { width: 100%; height: 100%; object-fit: cover; } .intro__visual .img-load--intro-main { aspect-ratio: 4/5; border-radius: var(--radius-lg); box-shadow: var(--shadow); } .intro__icon-accent { position: absolute; bottom: -1.5rem; right: -1.5rem; width: 42%; aspect-ratio: 1; z-index: 2; transform-origin: center center; background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; pointer-events: none; } .intro__icon-3d { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; } .intro__icon-3d > div, .intro__icon-3d .intro__icon-3d-scene { width: 100% !important; height: 100% !important; background: transparent !important; } .intro__icon-3d canvas { display: block; width: 100% !important; height: 100% !important; background: transparent !important; } .intro__icon-fallback { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; pointer-events: none; filter: none; } @media (prefers-reduced-motion: reduce) { .intro__icon-accent { background: transparent; } } /* Legacy img-load intro accent (ako ostane negdje) */ .intro__icon-accent .img-load--intro-accent { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius); box-shadow: none; border: none; background: transparent; } .intro__visual .img-load--intro-accent .img-load__inner { position: absolute; inset: 0; width: 100%; height: 100%; } .intro__visual .img-load--intro-accent .img-load__img, .intro__visual .img-load--intro-accent .intro__img-accent { position: static; bottom: auto; right: auto; width: 100%; height: 100%; object-fit: contain; padding: 1.35rem; background: var(--charcoal); border-radius: calc(var(--radius) - 3px); border: none; box-shadow: none; } @media (prefers-reduced-motion: reduce) { .img-load__logo { animation: none; opacity: 0.7; } .img-load__loader, .img-load__img { transition: none; } } /* Google reviews — horizontalni trak */ .google-reviews { background: var(--cream-dark); padding-block: clamp(2rem, 4vw, 2.75rem); } .google-reviews__header { text-align: center; margin-bottom: 1.25rem; } .section-title--sm { font-size: clamp(1.35rem, 2.5vw, 1.75rem); } .google-reviews__carousel { display: flex; flex-direction: column; gap: 0.85rem; } .google-reviews__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem 1rem; } .google-reviews__badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem; background: var(--white); border-radius: 100px; box-shadow: 0 2px 12px rgba(15, 18, 20, 0.06); } .google-reviews__g { flex-shrink: 0; } .google-reviews__score-value { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1; color: var(--charcoal); } .google-reviews__stars, .google-reviews__star-row { color: #f4b400; font-size: 0.8125rem; letter-spacing: 0.04em; } .google-reviews__count { margin: 0; font-size: 0.8125rem; color: var(--text-muted); } .google-reviews__link-inline { font-size: 0.8125rem; font-weight: 600; color: var(--charcoal); text-decoration: underline; text-underline-offset: 2px; } .google-reviews__viewport { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .google-reviews__track { display: flex; gap: 0.75rem; width: max-content; will-change: transform; } .google-reviews__card { flex: 0 0 min(300px, 78vw); background: var(--white); border-radius: var(--radius); padding: 0.85rem 1rem; box-shadow: 0 4px 20px rgba(15, 18, 20, 0.06); min-height: 0; } .google-reviews__card-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.45rem; } .google-reviews__avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--gold-soft); color: var(--charcoal); display: grid; place-items: center; font-size: 0.625rem; font-weight: 700; flex-shrink: 0; } .google-reviews__card-meta { min-width: 0; } .google-reviews__author { font-size: 0.8125rem; font-weight: 600; color: var(--charcoal); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .google-reviews__meta { font-size: 0.6875rem; color: var(--text-muted); margin: 0; display: flex; align-items: center; gap: 0.35rem; } .google-reviews__meta span { white-space: nowrap; } .google-reviews__text { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .google-reviews__loading { text-align: center; color: var(--text-muted); font-size: 0.875rem; margin: 0; } @media (prefers-reduced-motion: reduce) { .google-reviews__track { flex-wrap: wrap; width: 100%; justify-content: center; transform: none !important; } .google-reviews__viewport { mask-image: none; -webkit-mask-image: none; overflow: visible; } }