/** * Beo Fitness Station — responsive, safe-area, touch & readability * Loaded after main.css */ @font-face { font-family: "Nulshock Bold"; src: url("../fonts/Nulshock-Bold.otf") format("opentype"), url("../fonts/Nulshock-Bold.woff2") format("woff2"), url("../fonts/Nulshock-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } /* * Vertikalna traka sadržaja = ista Bootstrap .container širina kao u headeru. * Na dodaj klasu .bfs-layout-debug da prikažeš crvene vodiče (inset) na svim .bfs-content-rail. */ body.bfs-layout-debug .bfs-content-rail { box-shadow: inset 0 0 0 1px rgba(255, 48, 48, 0.55); } /* ---------- Header: full nav visible on desktop — hide offcanvas trigger (duplicated with bar menu) ---------- */ @media (min-width: 1200px) { .header-1 .header__hamburger { display: none !important; } } /* ---------- Desktop nav: tighter spacing + smaller type (less visual noise) ---------- */ @media (min-width: 1200px) { .header-main .main-menu > nav > ul > li { margin-inline-end: 12px !important; } .header-main .main-menu > nav > ul > li > a { font-size: 15px !important; padding: 14px 0 !important; letter-spacing: 0.01em; } .header-main .main-menu > nav > ul > li > a .fa-chevron-down { font-size: 10px; margin-left: 4px; opacity: 0.85; } } .header-main .main-menu > nav > ul > li > a, .mean-container .mean-nav ul li a { font-family: "Nulshock Bold", "Teko", sans-serif !important; letter-spacing: 0.02em; } .lang-switcher { position: relative; margin-right: 14px; } .lang-switcher-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(191, 247, 71, 0.55); background: linear-gradient(135deg, rgba(191, 247, 71, 0.2), rgba(191, 247, 71, 0.08)); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; transition: all 0.25s ease; } .lang-switcher-btn:hover { transform: translateY(-1px); border-color: rgba(191, 247, 71, 0.9); box-shadow: 0 8px 20px rgba(191, 247, 71, 0.22); } .lang-switcher-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; background: #151515; border: 1px solid rgba(191, 247, 71, 0.3); border-radius: 14px; padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all 0.2s ease; z-index: 40; } .lang-switcher:hover .lang-switcher-menu, .lang-switcher:focus-within .lang-switcher-menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-switcher-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 10px; padding: 9px 10px; color: #f3f3f3; font-size: 13px; } .lang-switcher-menu a:hover, .lang-switcher-menu a.is-active { background: rgba(191, 247, 71, 0.15); color: #ffffff; } .lang-switcher-menu .lang-code { font-weight: 700; color: var(--theme); } @media (max-width: 767px) { .lang-switcher { margin-right: 8px; } .lang-switcher-btn { padding: 8px 10px; font-size: 12px; } .lang-switcher-menu { min-width: 180px; } } /* ---------- Logo: fixed box (header, mobile panel, footer) ---------- */ .header-main .logo img, .header-main .logo .header-logo img { width: 296px; height: 74px; max-width: none; max-height: none; object-fit: contain; object-position: left center; } .offcanvas__logo a img { width: 296px !important; height: 74px !important; max-width: none !important; max-height: none !important; object-fit: contain; object-position: left center; } .footer-widgets-wrapper .single-footer-widget .widget-head img[src*="logo"] { width: 360px; height: 92px; max-width: none; max-height: none; object-fit: contain; object-position: left center; display: block; } @media (max-width: 575px) { .header-main .logo img, .header-main .logo .header-logo img, .offcanvas__logo a img, .footer-widgets-wrapper .single-footer-widget .widget-head img[src*="logo"] { width: 238px !important; height: 60px !important; } } /* ---------- Footer refresh (line-aligned grid) ---------- */ .footer-section.style-2::before { display: none; } .bfs-footer .bfs-footer-grid { display: grid; grid-template-columns: 1.3fr 0.9fr 1.4fr 1.7fr; column-gap: 32px; align-items: stretch; padding-top: 16px; } .bfs-footer .bfs-footer-col { display: grid; grid-template-rows: 92px repeat(5, 36px); row-gap: 0; min-width: 0; } .bfs-footer .bfs-footer-col .r { display: flex; align-items: center; min-height: 0; color: #fff; font-size: 16px; line-height: 1.3; margin: 0; padding: 0; } .bfs-footer .bfs-footer-col .r-0 { align-items: end; } .bfs-footer .bfs-footer-col .r-0 h3 { margin: 0; font-size: 22px; font-weight: 700; color: #fff; line-height: 1; } .bfs-footer .bfs-footer-col .r a { color: #fff; text-decoration: none; transition: color 0.2s ease; } .bfs-footer .bfs-footer-col .r a:hover { color: var(--theme); } .bfs-footer .bfs-footer-col--logo .bfs-footer-logo-link { display: block; width: 100%; height: 100%; } .bfs-footer .bfs-footer-col--logo .bfs-footer-logo-link img { display: block; width: 360px; max-width: 100%; height: 92px; object-fit: contain; object-position: left bottom; } .bfs-footer .bfs-footer-social { display: flex; align-items: center; gap: 7px; } .bfs-footer .bfs-footer-social a { width: 30px; height: 30px; line-height: 30px; font-size: 13px; text-align: center; border-radius: 50%; background-color: #2a2a2a; color: var(--white); transition: all 0.3s ease-in-out; } .bfs-footer .bfs-footer-social a:hover { background-color: var(--theme); color: var(--header); } .bfs-pill-link { display: inline-block; width: fit-content; max-width: 100%; padding: 7px 12px; border-radius: 999px; background: #bff747; color: #111 !important; font-size: 14px; font-weight: 600; line-height: 1.3; word-break: break-word; } .bfs-pill-link:hover { color: #111 !important; } .bfs-pill-link:focus-visible { outline: 2px solid rgba(191, 247, 71, 0.95); outline-offset: 3px; } .bfs-footer .footer-bottom { margin-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .bfs-footer .footer-bottom .footer-bottom-wrapper { justify-content: center; padding-top: 16px; padding-bottom: 12px; } .bfs-footer .footer-bottom p { text-align: center; margin: 0; } @media (max-width: 1399px) { .bfs-footer .bfs-footer-grid { grid-template-columns: 1.3fr 0.9fr 1.5fr 1.8fr; column-gap: 24px; } .bfs-footer .bfs-footer-col .r-0 h3 { font-size: 20px; } .bfs-footer .bfs-footer-col .r { font-size: 15px; } } @media (max-width: 1199px) { .bfs-footer .bfs-footer-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; } .bfs-footer .bfs-footer-col { grid-template-rows: auto; row-gap: 8px; } .bfs-footer .bfs-footer-col .r { min-height: 0; } .bfs-footer .bfs-footer-col .r:empty { display: none; } .bfs-footer .bfs-footer-col .r-0 { align-items: flex-start; margin-bottom: 6px; } .bfs-footer .bfs-footer-col--logo .bfs-footer-logo-link img { width: 280px; height: auto; } } @media (max-width: 575px) { .bfs-footer .bfs-footer-grid { grid-template-columns: 1fr; } .bfs-footer .bfs-footer-col .r-0 h3 { font-size: 19px; } .bfs-footer .bfs-footer-col .r { font-size: 15px; } } /* ---------- Desktop: shorter line length + calmer body copy (less “wall of text”) ---------- */ @media (min-width: 992px) { .hero-2 .hero-content-bfs .hero-text-container .content, .hero-2 .hero-content .content { max-width: 40rem; } .hero-2 .hero-content .content p { font-size: 23px; line-height: 1.5; } .hero-2 .hero-counter .counter-items { padding: 22px 16px; } .hero-2 .hero-counter .counter-items h4 { font-size: 13px; line-height: 1.25; letter-spacing: 0.06em; } .hero-2 .hero-counter .counter-items p { font-size: 14px; line-height: 1.45; } .service-section .service-box-items .content p { font-size: 15px; line-height: 1.55; } #dodatne-usluge .service-box-items { padding: 24px 20px; } #dodatne-usluge .service-box-items .content h3 { font-size: 26px; } #dodatne-usluge .service-box-items .content p { font-size: 16px; line-height: 1.6; } } /* ---------- Dodatne usluge: slike pune širine kartice ---------- */ #dodatne-usluge .service-box-items.style-2 .icon { margin: -32px -32px 0 -32px; width: calc(100% + 64px); max-width: none; overflow: hidden; border-radius: 3px 3px 0 0; } #dodatne-usluge .service-box-items.style-2 .icon img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; max-width: none; } @media (min-width: 992px) { #dodatne-usluge .service-box-items.style-2 .icon { margin: -24px -20px 0 -20px; width: calc(100% + 40px); } } /* ---------- Base: no horizontal scroll, readable text on mobile ---------- */ html { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Prevent iOS zoom on focus (inputs stay ≥16px) */ @media (max-width: 575px) { input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select { font-size: 16px !important; } } /* Fluid images/video in main content */ main img, main video { max-width: 100%; height: auto; } main video { display: block; } /* Notched phones / home indicator */ @supports (padding: max(0px)) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } /* Tighter vertical rhythm on very small screens */ @media (max-width: 575px) { .section-padding { padding: 56px 0; } } /* ---------- Hero: fluid title, no overflow ---------- */ @media (max-width: 575px) { .hero-2 .hero-content h1 { font-size: clamp(30px, 10vw, 44px); line-height: 1.08; hyphens: auto; -webkit-hyphens: auto; } } /* ---------- Hero layout refresh: title -> catchphrase -> program pills -> centered video ---------- */ .hero-content-bfs { display: flex; flex-direction: column; align-items: center; gap: 30px; } .hero-content-bfs .hero-text-container { align-self: stretch; display: flex; flex-direction: column; gap: 30px; width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } .hero-content-bfs h1 { font-family: "Nulshock Bold", "Teko", sans-serif; color: #ffffff !important; text-align: center; letter-spacing: 0.03em; font-size: clamp(54px, 7vw, 87px); line-height: 1.05; white-space: nowrap; margin: 0; } .hero-content-bfs h1 span { color: #ffffff !important; text-decoration: none !important; } .hero-content-bfs h1 .bfs-hero-title-line { display: inline-block; } .hero-content-bfs h1 .bfs-hero-title-line + .bfs-hero-title-line { margin-left: 0.32em; } .hero-content-bfs h1 .bfs-hero-title-line span { color: inherit !important; } .hero-content-bfs .hero-text-container .content { max-width: none; margin-inline: auto; text-align: center; } .hero-content-bfs .hero-text-container .content p { margin-left: 0 !important; text-align: center; } .hero-content-bfs .hero-catchphrase { font-size: 25px; line-height: 1.42; color: #f5f5f5; margin: 0; } .hero-programs-marquee { width: 100%; max-width: none; overflow-x: hidden; overflow-y: hidden; padding-bottom: 6px; -webkit-overflow-scrolling: auto; scrollbar-width: none; } .hero-programs-track { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; min-width: max-content; animation: bfs-hero-marquee 32s linear infinite; } .hero-programs-marquee:hover .hero-programs-track { animation-play-state: paused; } .hero-program-pill { background: var(--theme); color: #121212; border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: 0.01em; display: inline-flex; align-items: center; justify-content: center; } .hero-video-centered { width: 100%; max-width: none; margin-inline: auto; } .hero-video-centered video { width: 100%; height: auto; border-radius: 16px; } @keyframes bfs-hero-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 991px) { .hero-content-bfs .hero-catchphrase { font-size: 21px; } } @media (max-width: 767px) { .hero-content-bfs { gap: 18px; } .hero-content-bfs .hero-catchphrase { font-size: 18px; } .hero-programs-track { animation: bfs-hero-marquee 38s linear infinite; } .hero-program-pill { font-size: 14px; padding: 9px 15px; } .hero-content-bfs h1 { font-size: clamp(40px, 12vw, 64px); white-space: normal; } .hero-content-bfs h1 .bfs-hero-title-line { display: block; } .hero-content-bfs h1 .bfs-hero-title-line + .bfs-hero-title-line { margin-left: 0; } } /* ---------- Section subtitles: mali zeleni podnaslov (pretitle) — samo iznad glavnog naslova programa ---------- */ #usluge .section-title h6 { font-size: 22px !important; line-height: 1.25 !important; font-weight: 600 !important; text-align: left !important; width: 100%; display: block; margin-bottom: 14px !important; } /* Veliki naslov kao „Pogledaj naše programe“ — i za partnere i za utiske */ #usluge #programs-heading, #partneri #partners-heading.bfs-section-eyebrow, #iskustva #iskustva-heading, #team #team-heading, #cenovnik #pricing-schedule-heading { font-family: "Teko", sans-serif !important; font-size: clamp(32px, 4.2vw, 40px) !important; line-height: 1.12 !important; font-weight: 700 !important; color: var(--white) !important; text-align: left !important; text-decoration: none !important; margin: 0 !important; text-transform: capitalize; } @media (max-width: 575px) { #usluge #programs-heading, #partneri #partners-heading.bfs-section-eyebrow, #iskustva #iskustva-heading, #team #team-heading, #cenovnik #pricing-schedule-heading { font-size: clamp(28px, 8vw, 34px) !important; } } main .section-title-area .section-title { text-align: left; flex: 1 1 auto; min-width: 0; } /* ---------- Partners strip ---------- */ #partneri.brand-section { width: 100%; max-width: 100%; overflow-x: hidden; } /* Isti horizontalni okvir kao hero: ne koristiti max-width:100% na .container — poništava Bootstrap max-width i širi strip na pun viewport */ #partneri.brand-section .container.bfs-content-rail { overflow-x: hidden; } /* Partner logos: bez negativnog margin-a na desnoj ivici */ #partneri .partners-logos { margin-right: 0 !important; margin-left: 0 !important; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; padding-inline: 0; } /* Ukloni pseudo-linije koje vizuelno deluju kao precrtavanje naslova */ #partneri .brand-text::before, #partneri .brand-text::after { display: none !important; content: none !important; } #partneri .brand-text { margin-bottom: 28px; text-align: left; } #partneri .bfs-section-eyebrow { padding: 0 !important; } /* Klikabilan blok teksta programa (naslov + opis) */ .service-section .bfs-program-card-link { display: block; color: inherit; text-decoration: none !important; } .service-section .bfs-program-card-link:hover h3 { color: var(--theme); } .service-section .bfs-program-card-link p { white-space: pre-line; } /* Program cards: reduce vertical gap by half */ #usluge .service-box-items, #usluge-dodatak .service-box-items, #dodatne-usluge .service-box-items { margin-top: 15px; } #partneri .brand-image { min-height: 132px; display: flex; align-items: center; justify-content: center; } #partneri .brand-image img { height: 120px; width: auto; max-width: 100%; object-fit: contain; } @media (max-width: 767px) { #partneri .brand-image { min-height: 96px; } #partneri .brand-image img { height: 84px; } } /* ---------- Testimonials: hero-like layout ---------- */ #iskustva .bfs-testimonials-top-row { align-items: stretch; } #iskustva .tesimonial-wrapper-2 .testimonial-image { margin-left: 0 !important; height: auto; min-height: 220px; max-height: 430px; border-radius: 10px; background: transparent; overflow: hidden; display: flex; align-items: center; justify-content: center; } #iskustva .tesimonial-wrapper-2 .testimonial-image img { width: 100%; height: auto; max-height: 430px; min-height: 0; object-fit: contain; top: 0 !important; } #iskustva .tesimonial-wrapper-2 .testimonial-content { margin-left: 0 !important; height: auto; display: block; padding: 22px; border-radius: 10px; border: 1px solid #2a2a2a; background: #171717; } #iskustva .tesimonial-wrapper-2 .testimonial-content p { margin: 0 !important; } #iskustva .tesimonial-wrapper-2 .testimonial-content.bfs-testimonials-intro-below { margin: 28px auto 0; max-width: 980px; text-align: center; } #iskustva .tesimonial-wrapper-2 .testimonial-content.bfs-testimonials-intro-below p { font-size: 25px; line-height: 1.42; } #iskustva .tesimonial-wrapper-2 .testimonial-slider-2 { margin-right: 0 !important; margin-left: 0 !important; margin-top: 28px !important; } #iskustva .tesimonial-wrapper-2 .testimonial-card-items .testi-top { justify-content: center; } #iskustva .tesimonial-wrapper-2 .testimonial-card-items .testi-top .quote-icon { display: none; } #iskustva .tesimonial-wrapper-2 .testimonial-card-items .testi-top .star, #iskustva .tesimonial-wrapper-2 .testimonial-card-items .testi-top .star i { color: var(--theme); } #iskustva .swiper-dot { display: flex; justify-content: center; } #iskustva .swiper-dot .dot { display: flex; justify-content: center; } @media (max-width: 991px) { #iskustva .tesimonial-wrapper-2 .testimonial-image { min-height: 190px; max-height: 320px; } #iskustva .tesimonial-wrapper-2 .testimonial-image img { max-height: 320px; } #iskustva .tesimonial-wrapper-2 .testimonial-content { padding: 18px; } #iskustva .tesimonial-wrapper-2 .testimonial-content.bfs-testimonials-intro-below p { font-size: 21px; } } @media (max-width: 575px) { #iskustva .tesimonial-wrapper-2 .testimonial-slider-2 { margin-top: 24px !important; } #iskustva .tesimonial-wrapper-2 .testimonial-card-items { padding: 22px 16px; } #iskustva .tesimonial-wrapper-2 .testimonial-content.bfs-testimonials-intro-below p { font-size: 18px; } #iskustva .tesimonial-wrapper-2 .testimonial-card-items .client-info { flex-wrap: wrap; } } /* ---------- Team / portfolio carousel ---------- */ /* Kartica definiše odnos stranica kao treneri 416×480; slika puni okvir bez fiksne 500px (to je sečilo i delovalo „zoomovano“). */ #team .portfolio-image-items { position: relative; aspect-ratio: 13 / 15; width: 100%; height: auto; overflow: hidden; border-radius: 12px; } #team .portfolio-image-items::before { height: 100%; z-index: 1; } #team .portfolio-image-items img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center 25%; border-radius: 12px; } #team .portfolio-slider .swiper-wrapper { align-items: flex-start; } #team .portfolio-slider .swiper-slide { height: auto; align-self: flex-start; } #team .portfolio-slider .swiper-slide > .portfolio-image-items { width: 100%; } /* Strahinja Strelić — kadar više ka gore */ #team .portfolio-image-items img[alt*="Strahinja Strelić"] { object-position: center 5%; } /* * Jovan Ristić (IMG_5131.png): uzrok „više zumirano“ od ostalih * — sve slike u #team koriste object-fit: cover u pun okvir kartice. * Ako PNG ima drugačiji odnos stranica od JPG trenera, cover uvećava * sliku dok ne ispuni visinu/širinu i seče bočne (ili vertikalne) delove, * pa nestanu „praznine“ ramena–ivica iz originala. * Rešenje: te kartice koriste contain + ista tamna pozadina kao okvir. */ #team .portfolio-image-items.jovan-card, #team .portfolio-image-items.tamara-card { background-color: #1d1d1d; } #team .portfolio-image-items img.jovan-image, #team .portfolio-image-items img.tamara-image { object-fit: contain; object-position: center center; } #team .portfolio-image-items .content { z-index: 2; width: min(90%, 320px); } #team .portfolio-image-items .content p { min-height: 48px; display: flex; align-items: flex-end; justify-content: center; } #team .portfolio-image-items .content h3 { line-height: 1.05; } @media (max-width: 991px) { .portfolio-section .portfolio-slider { margin-left: 0; margin-right: 0; } } @media (max-width: 575px) { /* main.css postavlja .portfolio-image-items { height: 400px } — za #team ostavljamo samo aspect-ratio */ #team .portfolio-image-items { height: auto !important; aspect-ratio: 13 / 15; } } /* ---------- Cenovnik & Raspored ---------- */ #cenovnik img, #raspored img { max-width: 100%; height: auto; } @media (max-width: 575px) { #cenovnik .row, #raspored .row { margin-left: 0; margin-right: 0; } #cenovnik [class*="col-"], #raspored [class*="col-"] { padding-left: 10px; padding-right: 10px; } } /* ---------- Touch targets (WCAG-friendly) ---------- */ .header__hamburger .sidebar__toggle, .bfs-quick-contact__toggle, .bfs-quick-contact__item, .theme-btn { min-height: 44px; } /* ---------- Scroll lock (mobile menu / offcanvas) ---------- */ body.bfs-scroll-lock { overflow: hidden !important; position: fixed; width: 100%; left: 0; right: 0; } /* Offcanvas close button alignment */ .offcanvas__top { align-items: center !important; } .offcanvas__close { flex-shrink: 0; margin-left: auto; cursor: pointer; } .offcanvas__close button { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; padding: 0; margin: 0; border: none; background: transparent; line-height: 1; cursor: pointer; color: var(--header); } .offcanvas__close .bfs-close-glyph { font-size: 26px; font-weight: 400; line-height: 1; pointer-events: none; } .offcanvas__close button i { line-height: 1; pointer-events: none; } body.bfs-modal-open { overflow: hidden; } .mean-container a.meanmenu-reveal.meanclose { font-size: 22px !important; line-height: 44px !important; text-indent: 0 !important; text-align: center; } /* Custom cursor removed */ .mouse-cursor { display: none !important; } /* Reveal animations (replaces WOW visibility:hidden for Ctrl+F) */ .wow.bfs-reveal { visibility: visible !important; opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.55s ease, transform 0.55s ease; } .wow.bfs-reveal.bfs-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* Quick contact FAB + panel */ .bfs-quick-contact { position: fixed; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 99; } .bfs-quick-contact__toggle { width: 52px; height: 52px; border: none; border-radius: 50%; background: var(--theme); color: var(--header); font-size: 22px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease; } .bfs-quick-contact__toggle:hover { transform: scale(1.05); background: #d4ff6a; } .bfs-quick-contact__panel { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 220px; padding: 10px; border-radius: 14px; background: rgba(18, 18, 18, 0.96); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 6px; } .bfs-quick-contact__panel[hidden] { display: none !important; } .bfs-quick-contact__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #fff !important; text-decoration: none !important; font-family: "Kanit", sans-serif; font-size: 14px; font-weight: 500; transition: background-color 0.15s ease; } .bfs-quick-contact__item:hover { background: rgba(255, 255, 255, 0.08); color: var(--theme) !important; } .bfs-quick-contact__item i { width: 20px; text-align: center; color: var(--theme); } /* Kontakt: clickable contact cards */ a.contact-box-items--link { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; width: 100%; text-align: center; text-decoration: none !important; color: inherit; border-radius: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; } a.contact-box-items--link:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2); } a.contact-box-items--link .icon { flex-shrink: 0; width: 80px; height: 80px; min-width: 80px; min-height: 80px; margin: 0 auto; padding: 0; line-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--theme); } a.contact-box-items--link .icon img { width: 40px; height: 40px; max-width: 40px; max-height: 40px; object-fit: contain; display: block; margin: 0; } a.contact-box-items--link .content { width: 100%; margin-top: 30px; } a.contact-box-items--link .content p, a.contact-box-items--link .content h3 { color: inherit; } a.contact-box-items--link .content p { margin-bottom: 0; } @media (max-width: 575px) { a.contact-box-items--link .icon { width: 72px; height: 72px; min-width: 72px; min-height: 72px; } a.contact-box-items--link .icon img { width: 36px; height: 36px; max-width: 36px; max-height: 36px; } } /* Kontakt: hide template decorative shapes on hero */ .breadcrumb-wrapper .arrow-shape, .breadcrumb-wrapper .circle-shape { display: none !important; } /* Legacy FAB hidden if still in markup */ .bfs-contact-fab { display: none !important; } .header__hamburger .sidebar__toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; } /* ---------- Motion preference ---------- */ @media (prefers-reduced-motion: reduce) { .wow, .wow.bfs-reveal { animation: none !important; visibility: visible !important; opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- Cenovnik + Raspored (zajednička sekcija, preview + modal) ---------- */ .bfs-pricing-schedule .bfs-pricing-schedule-row { align-items: stretch; } .bfs-preview-card { display: flex; flex-direction: column; height: 100%; padding: 20px 20px 22px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .bfs-preview-card:hover { transform: translateY(-3px); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38); border-color: rgba(191, 247, 71, 0.35); } .bfs-preview-card__title { font-size: clamp(1.15rem, 2.5vw, 1.35rem); font-weight: 700; margin: 0 0 14px; color: var(--white); letter-spacing: 0.02em; } .bfs-preview-card__trigger { flex: 1; display: flex; flex-direction: column; align-items: stretch; width: 100%; margin: 0; padding: 0; border: none; background: transparent; cursor: pointer; text-align: left; border-radius: 12px; color: inherit; font: inherit; } .bfs-preview-card__trigger:focus-visible { outline: 2px solid var(--theme); outline-offset: 3px; } .bfs-preview-card__thumb { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 220px; max-height: min(42vh, 380px); padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); overflow: hidden; } .bfs-preview-card__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } @media (max-width: 991px) { .bfs-preview-card__thumb { min-height: 200px; max-height: min(48vh, 340px); } } /* Modal */ .bfs-image-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); box-sizing: border-box; } .bfs-image-modal[hidden] { display: none !important; } .bfs-image-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); cursor: pointer; } .bfs-image-modal__panel { position: relative; z-index: 1; max-width: min(96vw, 1200px); max-height: min(92vh, 900px); width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .bfs-image-modal__close { pointer-events: auto; position: absolute; top: -6px; right: -6px; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(20, 20, 20, 0.92); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); transition: background 0.2s ease, transform 0.2s ease; z-index: 3; padding: 0; } .bfs-image-modal__close span { pointer-events: none; line-height: 1; } .bfs-image-modal__close:hover { background: var(--theme); color: var(--header); transform: scale(1.05); } .bfs-image-modal__close:focus-visible { outline: 2px solid var(--theme); outline-offset: 2px; } .bfs-image-modal__imgwrap { pointer-events: auto; max-width: 100%; max-height: min(88vh, 860px); display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; } .bfs-image-modal__img { max-width: 100%; max-height: min(88vh, 860px); width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); } @media (max-width: 575px) { .bfs-image-modal__close { top: 4px; right: 4px; width: 40px; height: 40px; font-size: 24px; } .bfs-image-modal__img { max-height: min(82vh, 700px); } }