/* ============================================= GSAP FOUC prevention — DISABLED for testing Reveal triggers are temporarily disabled to diagnose re-animation / double-trigger issues. ============================================= */ /* [data-section-anim] [data-section-item]:not([data-section-item-type="map"]) { visibility: hidden; } .headline { opacity: 0; } */ .gc-bg-overlay-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: url("/vendor/images/background/bg2.png") center/cover no-repeat; } .gc-hero-no-top-radius { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: var(--gc-surface-radius, 1.5rem) !important; border-bottom-right-radius: var(--gc-surface-radius, 1.5rem) !important; border-radius: 0 0 var(--gc-surface-radius, 1.5rem) var(--gc-surface-radius, 1.5rem) !important; } /* Native smooth scroll — replaces ScrollSmoother (GSAP) */ html { scroll-behavior: smooth; } :root { /* Grancreo brand colors */ --primary: #2EA8DC; --primarydark: #176C8C; --primarylight: #2ED6DC; --secondary: #1a1a2e; --bodybg: #FFFFFF; --bodyfg: #1a1a2e; --bodytext: #4B5563; --card: #FFFFFF; --title: #1a1a2e; --color-lightgreen: #B3121B; --color-heading: #1a1a2e; --color-dark: #1a1a2e; --color-label: #1a1a2e; --color-bglight: #F8F8F8; --color-bordergray: #E6E6E6; --bg7-gradient: 90deg, #2EA8DC 0%, #2ED6DC 100%; --secondary-gradient: 90deg, rgba(46, 168, 220, .86) 0%, rgba(46, 214, 220, .86) 100%; --secondary2-gradient: 180deg, rgba(46, 168, 220, 0) 52.08%, #2EA8DC 100%; --bg-primary-gradient: 90deg, #2EA8DC 0%, #2ED6DC 100%; --gc-brand-gradient: linear-gradient(90deg, #2EA8DC 0%, #2ED6DC 100%); --gc-red: #B3121B; --gc-red-dark: #8F0D15; --gc-red-gradient: linear-gradient(135deg, #B3121B 0%, #8F0D15 100%); --gc-surface-radius: var(--radius-3xl); --gc-image-radius: var(--gc-surface-radius); /* Shadows */ --gc-shadow-sm: 0 12px 32px rgba(26, 26, 46, 0.07); --gc-shadow-md: 0 20px 40px rgba(26, 26, 46, 0.10); --gc-shadow-lg: 0 24px 48px rgba(26, 26, 46, 0.16); /* --color-primary/light/dark/secondary removed: already bridged via tailwind.css @theme { --color-primary: var(--primary) } etc. */ /* --color-lightgreen duplicate removed: first definition is on line 49 */ --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1.25rem; --radius-3xl: 1.5rem; --radius-4xl: 1.875rem; --radius-2lg: 0.625rem; --radius-xxl: 0.875rem; --radius-5xl: 2.5rem; --radius-6xl: 3.125rem; --gc-services-card-title-size: calc(var(--text-xl) * 1.6); --gc-hero-text-bottom-gap-mobile: 1.75rem; --gc-hero-text-bottom-gap-tablet: 3rem; --gc-hero-text-bottom-gap-desktop: 5.5rem; --gc-hero-text-bottom-gap-wide: 7.25rem; } html, body { font-family: "Raleway", sans-serif !important; } [class*="headline"], h1, h2, h3, h4, h5, h6 { font-family: "Raleway", sans-serif !important; } @supports (text-wrap: balance) { .page-content>section.main-banner:first-of-type h1.headline, .page-content>section h2.headline, .page-content>section.main-banner:first-of-type .gc-hero-slide-content p.mt-4 { text-wrap: balance; } } /* Global section headlines: Grancreo red */ .page-content>section h1.headline, .page-content>section h2.headline { color: var(--color-lightgreen) !important; } /* Section headline override: dark */ #sekcia-co-robime h2.headline, #sekcia-co-robime-alternativa h2.headline, #sekcia-vzdelavanie-pacientov h2.headline, #sekcia-referencie h1.headline, #sekcia-referencie h2.headline { color: var(--secondary) !important; } /* Keep headline contrast on dark banner sections */ .page-content>section.main-banner h1.headline.text-white, .page-content>section.main-banner h2.headline.text-white, .page-content>section.main-banner:first-of-type h1.headline { color: #ffffff !important; } .gc-header-icon-link { width: 3rem; height: 3rem; border-radius: var(--gc-surface-radius); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3125rem; transition: all .25s ease; } .gc-header-icon-link--dark { border: 0; background: transparent; color: #ffffff; } .gc-header-icon-link--dark:hover { background: transparent; border-color: transparent; color: #ffffff; } .gc-header-icon-link--light { border: 0; background: transparent; color: var(--secondary); } .gc-header-icon-link--light:hover { color: var(--secondary); border-color: transparent; background: transparent; } @media (max-width: 1199px) { .menu-btn.open::after { content: none !important; display: none !important; background: transparent !important; box-shadow: none !important; } .gc-mobile-menu.full-sidenav { position: absolute !important; top: calc(100% + 0.75rem) !important; left: 0 !important; right: 0 !important; z-index: 120; width: 100% !important; height: auto !important; max-height: none !important; overflow-y: visible !important; padding: 1.125rem 1.125rem 1.5rem; border-right: 0 !important; border-radius: var(--gc-surface-radius); background: rgba(255, 255, 255, 0.5) !important; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: none !important; opacity: 0; visibility: hidden; transform: translateY(-0.5rem); transition: opacity .26s ease, transform .26s ease, visibility .26s ease; pointer-events: none; } .gc-mobile-menu.full-sidenav.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .gc-mobile-menu__top { display: none; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 0.875rem; border-bottom: 0; } .gc-mobile-menu__logo-link { display: inline-flex; align-items: center; } .gc-mobile-menu__close { width: 2.25rem; height: 2.25rem; min-width: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0; color: var(--secondary); background: transparent; font-size: 1.7rem; line-height: 1; transition: color .2s ease, transform .2s ease; } .gc-mobile-menu__close:hover { color: var(--primary); transform: translateX(-2px); } .gc-mobile-menu__nav.navbar { padding-bottom: 0; display: flex; flex-direction: column; gap: 0.5rem; } .gc-mobile-menu__nav>li>a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0 !important; border: 0 !important; border-bottom: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--secondary) !important; font-weight: 700; font-size: 1rem; line-height: 1.32; letter-spacing: 0.01em; } .gc-mobile-menu__nav>li>a i { color: var(--secondary) !important; opacity: 1; transition: transform .25s ease; } .gc-mobile-menu__nav>li>a.dz-open i { transform: rotate(90deg); } .gc-mobile-menu__nav>li>a.dz-open { color: var(--primarydark) !important; } .gc-mobile-menu__nav .sub-menu { margin: 0 0 0.5rem; padding: 0; border: 0 !important; border-radius: 0 !important; background: transparent; } .site-header .gc-mobile-menu__nav>.sub-menu-down .sub-menu>li>a { padding: 0.625rem 0 0.625rem 1rem !important; border: 0 !important; border-radius: 0 !important; color: var(--secondary) !important; font-size: .96rem; font-weight: 600; line-height: 1.3; } .site-header .gc-mobile-menu__nav>.sub-menu-down .sub-menu>li>a:hover { background: transparent; color: var(--secondary) !important; } .gc-mobile-menu__actions { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid rgba(26, 26, 46, 0.1); } .gc-mobile-menu__actions .gc-header-icon-links { display: flex; gap: 0.625rem; } .gc-mobile-menu__actions .gc-header-icon-link { width: 2.75rem; height: 2.75rem; } body.menu-btn-open { height: auto !important; overflow: auto !important; } .gc-header-logo { width: 9.5rem; } } @media (min-width: 1200px) { .gc-mobile-menu__top, .gc-mobile-menu__actions { display: none !important; } } /* Header submenu: glass surface — backdrop-filter works because parent gc-header-shell uses ::before for its own blur. */ @media (min-width: 1200px) { .site-header .navbar .sub-menu { background: rgba(255, 255, 255, 0.5) !important; border: 0 !important; box-shadow: none !important; border-radius: var(--gc-surface-radius); color: #1a1a2e; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); } } /* Global non-button radius consistency */ .page-content :where(.rounded-2lg, .rounded-xxl, .rounded-2xl, .rounded-lg) { border-radius: var(--gc-surface-radius) !important; } .page-content :where(.rounded-tl-xxl) { border-top-left-radius: var(--gc-surface-radius) !important; } .page-content :where(.rounded-tr-xxl) { border-top-right-radius: var(--gc-surface-radius) !important; } .page-content :where(.rounded-br-xxl) { border-bottom-right-radius: var(--gc-surface-radius) !important; } .site-header .navbar>.sub-menu-down .sub-menu>li>a { color: #1a1a2e; font-weight: var(--font-weight-medium); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .site-header .navbar>.sub-menu-down .sub-menu>li>a:hover, .site-header .navbar>.sub-menu-down .sub-menu>li:hover>a { color: #1a1a2e !important; background: transparent; } /* Header nav links: dark on light glass panel, keep single line */ .site-header .navbar>li>a, .site-header .navbar>li>a:hover, .site-header .navbar>li>a:focus, .site-header .navbar>li:hover>a { color: var(--secondary); white-space: nowrap; } /* Header main menu: disable hover accent/underline effect */ .site-header .navbar>li>a::after, .site-header .navbar>li:hover>a::after { display: none !important; content: none !important; width: 0 !important; } .site-header .navbar { flex-wrap: nowrap; } /* gc-header-wrap: kept clean in base state — no will-change, no backdrop-filter, no transform so child gc-header-shell blur can work. */ /* Header pill: backdrop-filter on ::before so children (.sub-menu) can have their own — Chromium doesn't nest backdrop-filter on ancestors, but pseudo-elements don't count as ancestors. */ .site-header .gc-header-shell { position: relative; border-radius: 9999px; border: 0 !important; box-shadow: none !important; background: transparent; } .site-header .gc-header-shell::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); transition: background-color .25s ease; } @media (max-width: 1400px) { .site-header .navbar>.sub-menu-down .sub-menu>li>a { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } @media (max-width: 1199px) { .site-header .navbar>.sub-menu-down .sub-menu>li>a { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } /* Header hide/show on scroll — pure transform, no position changes */ .site-header .gc-header-wrap { transition: transform .5s cubic-bezier(.22, .61, .36, 1); } .site-header.gc-header-hidden .gc-header-wrap { transform: translateY(calc(-100% - 3rem)); pointer-events: none; } /* HERO recolor only: keep layout, shift palette to Grancreo blue/turquoise */ .page-content>section.main-banner:first-of-type { background: linear-gradient(90deg, #2EA8DC 0%, #2ED6DC 100%) !important; } /* Global primary surfaces: align with brand blue/turquoise gradient */ .bg-primary, .btn.bg-primary { background-color: #2EA8DC !important; background-image: var(--gc-brand-gradient); } /* SECTION: referencie -> fullwidth gradient like Upper Footer */ #sekcia-referencie { background-color: #2EA8DC; background-image: var(--gc-brand-gradient); } .btn.btn-gc-red, .btn.btn-gc-red.button--stroke:hover { color: #ffffff; border-color: var(--gc-red); background-color: var(--gc-red); background-image: var(--gc-red-gradient); } .btn.btn-gc-red .button__label, .btn.btn-gc-red .pxl-button-text { color: #ffffff; } .btn.btn-gc-red .button-flair:before { background-color: var(--gc-red-dark); } .btn.btn-gc-red .gc-btn-red-icon { background: rgba(255, 255, 255, 0.2); color: #ffffff; transition: background-color 220ms ease; } .btn.btn-gc-red:hover .gc-btn-red-icon { background: rgba(255, 255, 255, 0.3); } .btn.btn-gc-blue, .btn.btn-gc-blue.button--stroke:hover { color: #ffffff; border-color: #2EA8DC; background-color: #2EA8DC; background-image: var(--gc-brand-gradient); } .btn.btn-gc-blue .button__label, .btn.btn-gc-blue .pxl-button-text { color: #ffffff; } .btn.btn-gc-blue .button-flair:before { background-color: rgba(7, 17, 40, 0.35); } .btn.btn-gc-blue .gc-btn-blue-icon { background: rgba(255, 255, 255, 0.2); color: #ffffff; transition: background-color 220ms ease; } .btn.btn-gc-blue:hover .gc-btn-blue-icon { background: rgba(255, 255, 255, 0.3); } .btn.btn-gc-white { color: var(--secondary); border-color: #ffffff; background-color: #ffffff; background-image: none; } .btn.btn-gc-white .button__label, .btn.btn-gc-white .pxl-button-text { color: var(--secondary); } .btn.btn-gc-white.button--stroke:hover { color: #ffffff; border-color: #2EA8DC; } .btn.btn-gc-white .button-flair:before { background-color: rgba(46, 168, 220, 0.92); } .btn.btn-gc-white .gc-btn-white-icon { background: #2EA8DC; color: var(--secondary); transition: background-color 220ms ease; } .btn.btn-gc-white:hover .gc-btn-white-icon { background: #2ED6DC; } .btn.btn-gc-light, .btn.btn-gc-light.button--stroke:hover { color: #ffffff; border-color: #ffffff; background: rgba(255, 255, 255, 0.10); } .btn.btn-gc-light .button__label, .btn.btn-gc-light .pxl-button-text { color: #ffffff; } .btn.btn-gc-light .button-flair:before { background-color: rgba(46, 168, 220, 0.92); } .btn.btn-gc-light .gc-btn-light-icon { background: rgba(255, 255, 255, 0.2); color: #ffffff; transition: background-color 220ms ease; } .btn.btn-gc-light:hover .gc-btn-light-icon { background: rgba(255, 255, 255, 0.3); } .btn.btn-gc-dark, .btn.btn-gc-dark.button--stroke:hover { color: #ffffff; border-color: #1A1A2E; background-color: #1A1A2E; background-image: none; cursor: pointer; } .btn.btn-gc-dark .button__label, .btn.btn-gc-dark .pxl-button-text { color: #ffffff; } .btn.btn-gc-dark .button-flair:before { background-color: #2EA8DC; } .btn.btn-gc-dark .gc-btn-dark-icon { background: #2EA8DC; color: var(--secondary); transition: background-color 220ms ease; } .btn.btn-gc-dark:hover .gc-btn-dark-icon { background: #2ED6DC; } /* Global icon wrapper contract for GcButton */ .btn .gc-btn-icon { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 999px; line-height: 0; } .btn .gc-btn-icon>svg { display: block; transform: translateZ(0); will-change: transform, opacity; } .btn-gc-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #1A1A2E; background: linear-gradient(90deg, #2EA8DC 0%, #2ED6DC 100%); box-shadow: var(--gc-shadow-sm); transition: transform .2s ease, filter .2s ease; text-decoration: none; overflow: hidden; line-height: 0; } .btn-gc-icon>svg { display: block; transform: translateZ(0); will-change: transform, opacity; } .btn-gc-icon:hover { transform: translateY(-2px); filter: saturate(1.06); } .btn-gc-icon.gc-size-sm { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; } .btn-gc-icon.gc-size-md { width: 3.25rem; height: 3.25rem; min-width: 3.25rem; } .btn-gc-icon.gc-size-lg { width: 3.75rem; height: 3.75rem; min-width: 3.75rem; } .btn-gc-icon.gc-size-sm svg { width: 1rem; height: 1rem; } .btn-gc-icon.gc-size-md svg { width: 1.125rem; height: 1.125rem; } .btn-gc-icon.gc-size-lg svg { width: 1.25rem; height: 1.25rem; } .btn.gc-size-sm { height: 2.875rem; padding-left: 1rem; padding-right: 0.3125rem; font-size: 0.875rem; } .btn.gc-size-md { height: 3.375rem; padding-left: 1.25rem; padding-right: 0.375rem; font-size: 1rem; } .btn.gc-size-lg { height: 3.75rem; padding-left: 1.5rem; padding-right: 0.375rem; font-size: 1.125rem; } .btn.gc-size-sm .gc-btn-red-icon, .btn.gc-size-sm .gc-btn-blue-icon, .btn.gc-size-sm .gc-btn-white-icon, .btn.gc-size-sm .gc-btn-light-icon, .btn.gc-size-sm .gc-btn-dark-icon { width: 2.125rem; height: 2.125rem; min-width: 2.125rem; margin-left: 0.5rem; } .btn.gc-size-md .gc-btn-red-icon, .btn.gc-size-md .gc-btn-blue-icon, .btn.gc-size-md .gc-btn-white-icon, .btn.gc-size-md .gc-btn-light-icon, .btn.gc-size-md .gc-btn-dark-icon { width: 2.5rem; height: 2.5rem; min-width: 2.5rem; margin-left: 0.625rem; } .btn.gc-size-lg .gc-btn-red-icon, .btn.gc-size-lg .gc-btn-blue-icon, .btn.gc-size-lg .gc-btn-white-icon, .btn.gc-size-lg .gc-btn-light-icon, .btn.gc-size-lg .gc-btn-dark-icon { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; margin-left: 0.625rem; } button.btn { cursor: pointer; } .page-content>section.main-banner:first-of-type::before { background: radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 44%), linear-gradient(180deg, rgba(7, 17, 40, 0.14) 0%, rgba(7, 17, 40, 0.34) 100%), url('/vendor/images/background/bg2.png') center/cover no-repeat !important; } .page-content>section.main-banner:first-of-type>img[src*="background/bg1.png"] { display: block !important; opacity: 0.22; filter: hue-rotate(165deg) saturate(1.6) brightness(0.9); } .page-content>section.main-banner:first-of-type { isolation: isolate; } /* Hero slide 1: Grancreo hex mask image (based on frontpage hero hexagon) */ .gc-hero-slide-shell { position: relative; overflow: visible; } .gc-hero-slide-content { position: relative; z-index: 12; } /* Hero vertical alignment model (tablet/desktop): Section uses flex-column so #gc-hero-slider stretches to full section height. Text is vertically centered within available space (after header clearance). */ @media (min-width: 768px) { .gc-hero-no-top-radius { display: flex !important; flex-direction: column !important; min-height: clamp(37.5rem, 75vh, 47.5rem) !important; } /* Each level stretches via flex so height:100% propagates correctly */ #gc-hero-slider.gc-hero-main-swiper { flex: 1 1 0%; display: flex; flex-direction: column; } #gc-hero-slider .swiper-wrapper { flex: 1 1 0%; display: flex; flex-direction: column; } #gc-hero-slider .swiper-slide { flex: 1 1 0%; display: flex; flex-direction: column; } #gc-hero-slider .gc-hero-slide-shell { flex: 1 1 0%; display: flex; flex-direction: column; } #gc-hero-slider .gc-hero-slide-content { flex: 1 1 0%; display: flex; flex-direction: column; } .gc-hero-slide-content .gc-hero-slide-grid { flex: 1 1 0%; align-items: center; } } @media (min-width: 1200px) { .gc-hero-no-top-radius { min-height: clamp(47.5rem, 88vh, 59.375rem) !important; } } /* Keep Swiper behavior but preserve container gutter for exact section alignment */ #gc-hero-slider.container.swiper { position: relative; z-index: 10; overflow: visible !important; padding-left: calc(var(--bs-gutter-x) * .5) !important; padding-right: calc(var(--bs-gutter-x) * .5) !important; } .gc-hero-slide-visual { position: absolute; inset: 0; height: 100%; pointer-events: none; z-index: 1; } #gc-hero-floating-visual { z-index: 1; } .gc-hero-slide-hex { position: absolute; top: 0; right: 0; width: min(92vw, 80rem); aspect-ratio: 1 / 1; transform-origin: top right; transform: translate(calc(50% - 6.25rem), calc(-31% + 3.125rem)); background-repeat: no-repeat; background-position: 35% 25%; background-size: cover; opacity: 0.96; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.32); filter: drop-shadow(0 24px 60px rgba(4, 45, 74, 0.35)); -webkit-mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; } @media (max-width: 1279px) { .gc-hero-slide-hex { width: min(124vw, 65rem); transform: translate(22%, -14%); } } @media (min-width: 768px) and (max-width: 1200px) { .gc-hero-slide-content .gc-hero-text-col { grid-column: span 6 / span 6; max-width: 100%; } .gc-hero-slide-content .gc-hero-visual-col { grid-column: span 6 / span 6; } .gc-hero-slide-hex { width: min(66vw, 38.75rem); transform: translate(16%, -7%); } } @media (max-width: 767px) { .gc-hero-slide-visual { opacity: 0.55; } .gc-hero-slide-hex { width: min(108vw, 34.375rem); transform: translate(22%, -18%); } /* Mobile hero: keep hex composition, but start text block lower */ .gc-hero-slide-content .gc-hero-slide-grid { padding-top: calc(clamp(14.375rem, 62vw, 18.75rem) + 5rem) !important; } /* Mobile only: add safe bottom breathing space under the left text block. */ .gc-hero-slide-content .gc-hero-text-col { padding-bottom: var(--gc-hero-text-bottom-gap-mobile); } } /* ===== Hero V2: Hexagon anchored bottom-right ===== */ .gc-hero-hex-bottom-right { position: relative; z-index: 0; } .gc-hero-hex-bottom-right .main-banner { overflow: hidden; } /* V2 hex: anchored from section center line top:50% = center of section, translateY shifts relative to hex size right/width in % = relative to section width */ .gc-hero-hex-bottom-right .gc-hero-slide-hex { top: 50%; bottom: auto; right: -20%; width: 80%; transform: translateY(-36%); } /* Mobile hero photo (hidden on desktop) */ .gc-hero-mobile-photo { display: none; } @media (max-width: 767px) { /* Hide hexagon on mobile */ .gc-hero-hex-bottom-right .gc-hero-slide-visual { display: none !important; } /* Top padding for header clearance */ .gc-hero-hex-bottom-right .gc-hero-slide-content .gc-hero-slide-grid { padding-top: 8.75rem !important; padding-bottom: 1.5rem !important; } /* Show full-width 4:3 photo with rounded top corners */ .gc-hero-hex-bottom-right .gc-hero-mobile-photo { display: block; position: relative; z-index: 10; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 1rem 1rem 0 0; } .gc-hero-hex-bottom-right .gc-hero-mobile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } } /* ===== Product Cards Slider ===== */ /* Shadow bleed – prevent swiper clipping the hover shadow */ .gc-products-slider { overflow: visible !important; } .gc-products-slider .swiper-wrapper { padding: 1.5rem 0 3.5rem; margin: -1.5rem 0 -3.5rem; } /* Product filter */ .gc-product-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; } .gc-filter-btn { padding: 0.5rem 1.25rem; border-radius: 999px; border: 1px solid #d4e4ed; background: #fff; color: var(--secondary); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.25s ease; white-space: nowrap; } .gc-filter-btn:hover { border-color: var(--primary); color: var(--primary); } .gc-filter-btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; } /* ── GcTag: universal tag / chip / pill ── */ .gc-tag { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid transparent; } /* Sizes */ .gc-tag--sm { padding: 0.25rem 0.5rem; font-size: 0.6875rem; letter-spacing: 0.02em; } .gc-tag--md { padding: 0.3125rem 0.625rem; font-size: 0.75rem; letter-spacing: 0.015em; } .gc-tag--lg { padding: 0.4375rem 0.875rem; font-size: 0.875rem; } /* Shapes */ .gc-tag--pill { border-radius: 9999px; } .gc-tag--rounded { border-radius: 0.375rem; } /* Variant: red (solid) */ .gc-tag--red { background: var(--gc-red); color: #fff; } /* Variant: primarydark (solid) */ .gc-tag--primarydark { background: var(--primarydark); color: #fff; } /* Variant: primary (solid blue) */ .gc-tag--primary { background: var(--primary); color: #fff; } /* Variant: dark (solid) */ .gc-tag--dark { background: var(--secondary); color: #fff; } /* Variant: light (tinted background) */ .gc-tag--light { background: #e8f2f8; color: var(--primarydark); } /* Variant: outline-primarydark */ .gc-tag--outline-primarydark { background: transparent; border-color: var(--primarydark); color: var(--primarydark); } /* Variant: outline-red */ .gc-tag--outline-red { background: transparent; border-color: var(--gc-red); color: var(--gc-red); } .gc-product-card { position: relative; display: flex; align-items: stretch; text-decoration: none; color: inherit; min-height: 15rem; padding-left: 15%; transition: transform 0.4s; } .gc-product-card:hover { transform: translateY(-2px); } /* Background panel – right ~75% of the card */ .gc-product-card-bg { flex: 1; display: flex; align-items: center; background: #ffffff; border-radius: var(--gc-surface-radius); padding: 1.75rem 1.5rem 1.75rem 22%; border: 1px solid rgba(26, 26, 46, 0.08); box-shadow: var(--gc-shadow-sm); transition: box-shadow 0.4s; } .gc-product-card:hover .gc-product-card-bg { box-shadow: var(--gc-shadow-md); } /* Product image – overlaps left edge of bg panel */ .gc-product-card-img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 34%; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; } .gc-product-card-img img { max-width: 100%; max-height: 12.5rem; object-fit: contain; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.08)); transition: transform 0.5s; } .gc-product-card:hover .gc-product-card-img img { transform: scale(1.06); } .gc-product-card-body { display: flex; flex-direction: column; justify-content: center; } .gc-product-card-cat { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); margin-bottom: 0.375rem; } .gc-product-card-title { font-size: var(--text-xl); font-weight: 700; color: var(--secondary); line-height: 1.25; margin-bottom: 0.5rem; } .gc-product-card-desc { font-size: var(--text-lg); line-height: 1.5; color: var(--bodytext); margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .gc-product-card-cta { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.75rem; font-size: var(--text-sm); font-weight: 600; color: var(--primary); transition: gap 0.3s; } .gc-product-card:hover .gc-product-card-cta { gap: 0.625rem; } /* Mobile: stack vertically, product on top */ @media (max-width: 567px) { .gc-product-card { flex-direction: column; padding-left: 0; min-height: auto; } .gc-product-card-img { position: relative; top: auto; left: auto; transform: none; width: 100%; padding: 1.25rem 2rem 0; z-index: 2; margin-bottom: -5rem; } .gc-product-card-img img { max-height: 14.0625rem; } .gc-product-card-bg { padding: 4.25rem 1.25rem 1.25rem; border-radius: 0 0 var(--gc-surface-radius) var(--gc-surface-radius); } } /* ── Category Tab Bar (sticky) ── */ .gc-cat-tabbar { position: sticky; top: 0; z-index: 90; /* below header z-99 so dropdown menu isn't covered */ transition: top 0.5s cubic-bezier(.22,.61,.36,1); } /* Let clicks pass through invisible header area to reach tab bar, while keeping actual header content (pill, dropdown) interactive */ .site-header { pointer-events: none; } .site-header .gc-header-wrap { pointer-events: auto; } /* Glass panel matching gc-header-shell */ .gc-cat-tabbar__pill { position: relative; border-radius: var(--gc-surface-radius, 1.5rem); padding: 0.75rem 1rem; } .gc-cat-tabbar__pill::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); } /* Flex wrap — all tabs visible, wrapping into rows */ .gc-cat-tabbar__scroll { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-start; align-items: stretch; } /* Tab button — text only, 2-line wrap */ .gc-cat-tab { display: flex; align-items: center; padding: 0.5rem 1.125rem; border-radius: 999px; border: 1px solid #d4e4ed; background: #fff; color: var(--secondary); font-family: "Raleway", sans-serif; font-size: 0.875rem; font-weight: 500; line-height: 1.3; cursor: pointer; transition: all 0.25s ease; text-decoration: none; text-align: left; max-width: 7.5rem; } /* Hide images */ .gc-cat-tab__img { display: none; } .gc-cat-tab:hover { border-color: var(--primary); color: var(--primary); } .gc-cat-tab.is-active { background: var(--gc-red); border-color: var(--gc-red); color: #fff; } /* ── Mobile (<768px): horizontal scroll, compact ── */ @media (max-width: 767px) { .gc-cat-tabbar__pill { padding: 0.5rem 0.75rem; -webkit-mask-image: linear-gradient(to right, #000 0%, #000 85%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 85%, transparent 100%); } .gc-cat-tabbar__pill.fade-left { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 100%); } .gc-cat-tabbar__pill.fade-both { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%); } .gc-cat-tabbar__pill.fade-none { -webkit-mask-image: none; mask-image: none; } .gc-cat-tabbar__scroll { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; -ms-overflow-style: none; padding-right: 2rem; } .gc-cat-tabbar__scroll::-webkit-scrollbar { display: none; } .gc-cat-tab { flex-shrink: 0; max-width: none; white-space: nowrap; padding: 0.375rem 0.875rem; font-size: 0.8125rem; } } /* ── Category Sections (zig-zag) ── */ .gc-cat-section { padding: 3.5rem 0; } .gc-cat-section--alt { background: #ffffff; } .gc-cat-section__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 2rem; align-items: start; } .gc-cat-section__grid--reversed { grid-template-columns: 7fr 5fr; } .gc-cat-section__grid--reversed .gc-cat-section__image-col { order: 2; } .gc-cat-section__grid--reversed .gc-cat-section__cards-col { order: 1; } /* Sticky image column — pure CSS, no JS needed. top = header visible bottom (~120px) + tabbar height (~60px) + gap (16px) */ .gc-cat-section__image-col { position: sticky; top: 12.25rem; /* ~196px — clears header + tabbar in all states */ align-self: start; } .gc-cat-section__image-wrap { position: relative; border-radius: var(--gc-surface-radius); overflow: hidden; } .gc-cat-section__image { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; } .gc-cat-section__image-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 5rem 1.5rem 1.5rem; background: linear-gradient(to top, rgba(26, 26, 46, 0.82) 0%, rgba(26, 26, 46, 0.4) 50%, transparent 100%); } .gc-cat-section__image-label-text { color: #fff; font-size: 3.375rem; font-weight: 700; line-height: 1.15; text-wrap: balance; } /* Cards column */ .gc-cat-section__cards-col { display: flex; flex-direction: column; gap: 1rem; } /* ── Tablet: stack, sticky off ── */ @media (max-width: 991px) { .gc-cat-section__grid, .gc-cat-section__grid--reversed { grid-template-columns: 1fr; } .gc-cat-section__grid--reversed .gc-cat-section__image-col, .gc-cat-section__grid--reversed .gc-cat-section__cards-col { order: unset; } .gc-cat-section__image-col { position: relative; top: auto; } .gc-cat-section__image { aspect-ratio: 4 / 5; } .gc-cat-section { padding: 2rem 0; } .gc-cat-section__image-label { padding-bottom: 6rem; text-align: right; } } /* ── Mobile: compact sections ── */ @media (max-width: 567px) { .gc-cat-section { padding: 1.5rem 0; } .gc-cat-section__cards-col { gap: 0.75rem; } .gc-cat-section__image-label { text-align: left; padding-bottom: 1.5rem; } .gc-cat-section__image-label-text { font-size: 3.375rem; } .gc-cat-section__cards-col { margin-top: 0; } } /* Overview cards (o-nas, kariera, produkty, klinicke-skusanie, spolupraca) */ .gc-overview-card { border: 1px solid rgba(26, 26, 46, 0.08); box-shadow: var(--gc-shadow-sm); } /* Product detail cards (sekcie, uzitie) */ .gc-detail-card { border: 1px solid rgba(26, 26, 46, 0.08); box-shadow: var(--gc-shadow-sm); transition: transform 280ms ease, box-shadow 280ms ease; } .gc-detail-card:hover { transform: translateY(-0.625rem); box-shadow: var(--gc-shadow-lg); } /* Product detail page */ .gc-produkt-hero-img { animation: gc-float 4s ease-in-out infinite; } @keyframes gc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .gc-produkt-detail-text p { margin-bottom: 0.75rem; } .gc-produkt-detail-text p:last-child { margin-bottom: 0; } .gc-produkt-detail-text strong { color: var(--secondary); font-weight: 600; } .gc-related-products-slider { overflow: visible !important; } .gc-related-products-slider .swiper-wrapper { padding: 1.5rem 0 3.5rem; margin: -1.5rem 0 -3.5rem; } /* Product detail - Recenzie (Referencie pattern) */ .gc-produkt-recenzie-wrapper { position: relative; overflow: hidden; } .gc-produkt-recenzie-swiper { position: relative; } /* Product detail - Spolupráca modal */ .gc-spolupracujme-overlay { position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .gc-spolupracujme-overlay.hidden { display: none; } .gc-spolupracujme-overlay.flex { display: flex; } .gc-spolupracujme-card { width: 100%; max-width: 35rem; margin: 0 1rem; max-height: 90vh; overflow-y: auto; box-shadow: var(--gc-shadow-lg); } @media (min-width: 1280px) { .gc-spolupracujme-card { padding: 3.125rem; } } .gc-spolupracujme-close { top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; background: rgba(26, 26, 46, 0.05); } .gc-spolupracujme-close:hover { background: rgba(26, 26, 46, 0.1); } /* Doctor review avatar */ .gc-lekar-avatar { width: 3.5rem; height: 3.5rem; min-width: 3.5rem; border-radius: 9999px; object-fit: cover; } .gc-lekar-avatar-fallback { width: 3.5rem; height: 3.5rem; min-width: 3.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 14%, white 86%); } /* Research & Development page */ #sekcia-vyskum-vyvoj-overview h2.headline, #sekcia-vyskum-vyvoj-piliere h2.headline, #sekcia-vyskum-vyvoj-proces h2.headline, #sekcia-vyskum-vyvoj-faq h2.headline { color: var(--secondary) !important; } .gc-rnd-hero-backdrop { background: radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.18), transparent 45%), radial-gradient(circle at 82% 82%, rgba(179, 18, 27, 0.24), transparent 48%), linear-gradient(132deg, rgba(7, 46, 69, 0.2) 0%, rgba(4, 40, 61, 0.42) 100%); pointer-events: none; } .gc-rnd-hero-media { box-shadow: 0 28px 56px rgba(6, 46, 74, 0.35); } .gc-rnd-hero-stat { padding: 1rem 1.125rem; border-radius: var(--gc-surface-radius); background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 12px 30px rgba(8, 41, 63, 0.2); } .gc-rnd-hero-stat span { display: block; font-weight: 700; font-size: 1.125rem; line-height: 1.2; color: #ffffff; margin-bottom: 0.25rem; } .gc-rnd-hero-stat p { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 0.925rem; line-height: 1.35; } .gc-rnd-floating-badge { position: absolute; right: 1.125rem; max-width: 17.1875rem; padding: 0.875rem 1rem; border-radius: calc(var(--gc-surface-radius) - 0.25rem); background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(26, 26, 46, 0.12); box-shadow: 0 16px 30px rgba(13, 38, 58, 0.25); } .gc-rnd-floating-badge strong { display: block; color: var(--secondary); font-size: 0.95rem; font-weight: 800; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; } .gc-rnd-floating-badge span { display: block; font-size: 0.82rem; line-height: 1.35; color: rgba(26, 26, 46, 0.78); } .gc-rnd-floating-badge--top { top: 1.25rem; } .gc-rnd-floating-badge--bottom { bottom: 1.25rem; } .gc-rnd-check-item { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 1rem; line-height: 1.45; color: var(--bodytext); } .gc-rnd-check-item i { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; border-radius: 9999px; font-size: 0.75rem; color: var(--secondary); background: rgba(126, 203, 232, 0.7); background: color-mix(in srgb, var(--primary) 36%, white 64%); } .gc-rnd-overview-media { box-shadow: var(--gc-shadow-md); } .gc-rnd-overview-tag { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.95); color: var(--secondary); font-size: 0.9rem; font-weight: 600; box-shadow: var(--gc-shadow-sm); } .gc-rnd-overview-tag i { font-size: 1.05rem; color: var(--gc-red); } .gc-rnd-metric-card { padding: 1.125rem 1.25rem; background: #ffffff; border: 1px solid rgba(26, 26, 46, 0.08); border-radius: var(--gc-surface-radius); box-shadow: var(--gc-shadow-sm); } .gc-rnd-metric-card span { display: block; font-size: 1.24rem; font-weight: 800; line-height: 1.25; color: var(--secondary); } .gc-rnd-metric-card p { margin: 0.25rem 0 0; font-size: 0.95rem; line-height: 1.4; color: var(--bodytext); } .gc-rnd-pillar-card { height: 100%; background: #ffffff; border-radius: var(--gc-surface-radius); border: 1px solid rgba(26, 26, 46, 0.08); box-shadow: var(--gc-shadow-md); overflow: hidden; transition: transform 260ms ease, box-shadow 260ms ease; } .gc-rnd-pillar-card:hover { transform: translateY(-0.5rem); box-shadow: var(--gc-shadow-lg); } .gc-rnd-pillar-media { aspect-ratio: 16 / 9; overflow: hidden; } .gc-rnd-pillar-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .gc-rnd-pillar-body { padding: 1.375rem; } .gc-rnd-pillar-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.625rem; } .gc-rnd-pillar-icon { width: 2.625rem; height: 2.625rem; min-width: 2.625rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(145, 212, 235, 0.68); background: color-mix(in srgb, var(--primary) 26%, white 74%); color: var(--secondary); font-size: 1.35rem; } .gc-rnd-pillar-head h3 { margin: 0; font-size: 1.38rem; line-height: 1.25; font-weight: 700; color: var(--secondary); } .gc-rnd-pillar-body p { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--bodytext); } .gc-rnd-mini-stat { padding: 0.875rem; border-radius: calc(var(--gc-surface-radius) - 0.375rem); background: #ffffff; border: 1px solid rgba(26, 26, 46, 0.09); } .gc-rnd-mini-stat strong { display: block; font-size: 1rem; font-weight: 800; color: var(--secondary); } .gc-rnd-mini-stat span { display: block; margin-top: 2px; font-size: 0.84rem; line-height: 1.35; color: var(--bodytext); } .gc-rnd-timeline-shell { background: #ffffff; border-radius: var(--gc-surface-radius); border: 1px solid rgba(26, 26, 46, 0.08); box-shadow: var(--gc-shadow-md); padding: 1.25rem; overflow: hidden; } @media (min-width: 1024px) { .gc-rnd-proces-grid { align-items: stretch; } .gc-rnd-proces-col-right { min-width: 0; } .gc-rnd-proces-col-right .gc-rnd-timeline-shell { width: 100%; height: 100%; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: 1rem; } .gc-rnd-proces-col-right .gc-rnd-timeline-swiper { height: 100%; width: 100%; min-height: 0; min-width: 0; } } .gc-rnd-timeline-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; align-items: stretch; padding: 0.375rem; } .gc-rnd-timeline-meta { display: flex; flex-direction: column; gap: 2px; margin-bottom: 0.5rem; } .gc-rnd-timeline-step { font-size: 0.86rem; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--secondary); } .gc-rnd-timeline-duration { font-size: 0.95rem; line-height: 1.25; font-weight: 600; color: var(--gc-red); } .gc-rnd-timeline-copy h3 { margin: 0.75rem 0 0.5rem; font-size: 1.55rem; line-height: 1.18; font-weight: 700; color: var(--secondary); } .gc-rnd-timeline-copy p { margin: 0; font-size: 1.04rem; line-height: 1.45; color: var(--bodytext); } .gc-rnd-timeline-icon { display: inline-block; justify-self: center; align-self: center; font-size: 0; line-height: 1; color: var(--secondary); } .gc-rnd-timeline-icon::before { font-size: clamp(5.5rem, 6.5vw, 6.25rem); line-height: 1; margin: 0; } @media (max-width: 767px) { .gc-rnd-timeline-icon { justify-self: start; margin-top: 2px; } } .gc-rnd-timeline-controls { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; } .gc-rnd-timeline-pagination.swiper-pagination-progressbar { position: relative; flex: 1 1 auto; height: 0.5rem; border-radius: 9999px; background: rgba(26, 26, 46, 0.08); overflow: hidden; } .gc-rnd-timeline-pagination .swiper-pagination-progressbar-fill { background: var(--gc-red-gradient); border-radius: 9999px; } .gc-rnd-timeline-nav { display: flex; align-items: center; gap: 0.5rem; } .gc-rnd-timeline-prev, .gc-rnd-timeline-next { width: 2.625rem; height: 2.625rem; border: 1px solid rgba(26, 26, 46, 0.16); background: #ffffff; color: var(--secondary); border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; transition: all 220ms ease; } .gc-rnd-timeline-prev:hover, .gc-rnd-timeline-next:hover { background: var(--gc-red); border-color: var(--gc-red); color: #ffffff; } .gc-rnd-faq-media { border-radius: var(--gc-surface-radius); overflow: hidden; box-shadow: var(--gc-shadow-md); } .gc-rnd-faq-media img { display: block; width: 100%; height: clamp(13.75rem, 24vw, 18.75rem); object-fit: cover; } @media (min-width: 768px) { .gc-rnd-timeline-card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; } } @media (max-width: 1023px) { .gc-rnd-floating-badge { position: static; max-width: none; margin-top: 0.75rem; } .gc-rnd-hero-media { padding: 0.625rem; background: rgba(255, 255, 255, 0.08); } } /* Services cards: keep 4-column desktop layout visually aligned */ .services-details .swiper-wrapper { align-items: stretch; } .services-details .swiper-slide { height: auto; display: flex; } .services-details .swiper-slide>.group { width: 100%; display: flex; flex-direction: column; } .services-details .gc-service-card-head { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.9375rem; align-items: center; height: 8.25rem; padding-top: 0 !important; padding-bottom: 0 !important; } .services-details .gc-service-card-head>span { display: inline-flex; align-items: center; justify-content: center; width: 2.9375rem; height: 2.9375rem; } .services-details .gc-service-card-head .gc-service-icon { font-size: 0; color: var(--secondary); line-height: 1; transition: color 280ms ease, transform 280ms ease; } .services-details .gc-service-card-head .gc-service-icon::before { font-size: 2.125rem; line-height: 1; margin: 0; } .services-details .gc-service-card-link:hover .gc-service-card-head .gc-service-icon { color: #ffffff; transform: translateY(-1px); } .services-details .gc-service-card-head h4 { margin: 0; font-size: var(--gc-services-card-title-size); line-height: 1.12; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .services-details .gc-service-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--gc-image-radius); } .services-details .gc-service-media>img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--gc-image-radius); } .services-details .gc-service-card-copy { padding: 1rem 1rem 1.5rem 1rem; } .services-details .gc-service-card-copy>div { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.3125rem; } .services-details .gc-service-card-copy>div>svg { flex: 0 0 1rem; width: 1rem; min-width: 1rem; height: 1rem; margin-top: 3px; } .services-details .gc-service-card-copy>div>span { line-height: 1.35; } .gc-service-card-link { border: 1px solid rgba(26, 26, 46, 0.08); box-shadow: var(--gc-shadow-sm); } .services-details .gc-service-card-link { height: 100%; margin-bottom: 0; } .services-details .gc-service-card-inner { height: 100%; display: flex; flex-direction: column; position: relative; } .services-details .gc-service-card-inner::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(135deg, #B3121B 0%, #8F0D15 100%); opacity: 0; transition: opacity 320ms ease; pointer-events: none; z-index: 0; } .services-details .gc-service-card-inner>* { position: relative; z-index: 1; } .services-details .gc-service-card-link:hover .gc-service-card-inner::before { opacity: 1; } #sekcia-co-robime .gc-services-cards-pane { position: relative; } #sekcia-co-robime .gc-service-card-inner::before { display: none !important; } #sekcia-co-robime .gc-service-card-inner> :nth-child(2) { display: none !important; } #sekcia-co-robime .gc-service-card-head, #sekcia-co-robime-alternativa .gc-service-card-head { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.75rem; height: auto; min-height: 0; padding: 1.375rem 1.25rem 0.625rem 1.25rem !important; } #sekcia-co-robime .gc-service-card-head>span, #sekcia-co-robime-alternativa .gc-service-card-head>span { width: 3.25rem; height: 3.25rem; } #sekcia-co-robime .gc-service-card-copy { padding: 1.125rem 1.25rem 1.5rem 1.25rem; flex: 1; display: flex; flex-direction: column; } /* Text-link button at card bottom */ .gc-service-card-cta { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: auto; padding-top: 0.75rem; font-size: var(--text-sm); font-weight: 600; color: var(--primary); transition: gap 0.3s; } .gc-service-card-link:hover .gc-service-card-cta { gap: 0.625rem; } #sekcia-co-robime .gc-service-card-link { background-image: none !important; background-color: #ffffff !important; background-size: auto !important; box-shadow: var(--gc-shadow-sm); transform: translateY(0); transition: transform 280ms ease, box-shadow 280ms ease; } /* Equal-height cards: tallest card dictates, rest stretch */ #sekcia-co-robime .services-details .swiper-wrapper { align-items: stretch; } #sekcia-co-robime .services-details .swiper-slide { height: auto; } #sekcia-co-robime .services-details .swiper-slide>.group { height: 100%; } #sekcia-co-robime .gc-service-card-link:hover { background-image: none !important; background-color: #ffffff !important; transform: translateY(-0.625rem); box-shadow: var(--gc-shadow-lg); } #sekcia-co-robime .gc-service-card-head h4, #sekcia-co-robime .gc-service-card-link:hover .gc-service-card-head h4, #sekcia-co-robime-alternativa .gc-service-card-head h4, #sekcia-co-robime-alternativa .gc-service-card-link:hover .gc-service-card-head h4 { color: var(--secondary) !important; width: 100%; line-height: 1.12; text-wrap: balance; } #sekcia-co-robime .gc-service-card-link:hover .gc-service-card-head .gc-service-icon { color: var(--secondary); transform: none; } #sekcia-co-robime .gc-service-card-copy>div>span, #sekcia-co-robime .gc-service-card-link:hover .gc-service-card-copy>div>span { color: rgba(0, 0, 0, 0.75) !important; } #sekcia-co-robime .gc-service-card-copy>div>svg path, #sekcia-co-robime .gc-service-card-link:hover .gc-service-card-copy>div>svg path { stroke: #1A1A2E !important; } #sekcia-co-robime .services-details .swiper-slide { --gc-shift-y: 0px; transform: translateY(var(--gc-shift-y)); transition: transform 280ms ease; } @media (min-width: 1024px) { #sekcia-co-robime .gc-services-layout { align-items: start; } #sekcia-co-robime .gc-services-cards-pane { padding-top: 0; } #sekcia-co-robime .services-details { overflow: visible; } #sekcia-co-robime .services-details .swiper-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; transform: none !important; } #sekcia-co-robime .services-details .swiper-slide { width: auto !important; margin-right: 0 !important; } #sekcia-co-robime .services-details .swiper-slide:nth-child(odd) { --gc-shift-y: -6.25rem; } } /* FAQ accordion readability: force dark text on light background */ .custom-accordion .accordion-content, .custom-accordion .accordion-content .content-inner, .custom-accordion .accordion-content p, .custom-accordion .accordion-content li { color: var(--secondary) !important; } /* FAQ accordion header: full radius */ .custom-accordion.style-1 .accordion-item .accordion-header, .custom-accordion.style-1 .accordion-item .accordion-header.open { border-radius: 9999px !important; } /* FAQ accordion open state: Grancreo red + white text + white indicator */ .custom-accordion.style-1 .accordion-item .accordion-header.open { background-color: var(--gc-red) !important; } .custom-accordion.style-1 .accordion-item .accordion-header.open .arrow { color: #ffffff !important; } .custom-accordion.style-1 .accordion-item .accordion-header .indicator { background: var(--gc-red) !important; background-image: none !important; } .custom-accordion.style-1 .accordion-item .accordion-header .indicator i { color: #ffffff !important; display: block; line-height: 1; } .custom-accordion.style-1 .accordion-item .accordion-header.open .indicator { background: #ffffff !important; background-image: none !important; } .custom-accordion.style-1 .accordion-item .accordion-header.open .indicator i { color: var(--gc-red) !important; } /* Keep open-state animation only on icon circle, never on question text */ .custom-accordion.style-1 .accordion-item .accordion-header.open .arrow.active .gc-faq-question-text { background: transparent !important; rotate: 0deg !important; transform: none !important; } .custom-accordion.style-1 .accordion-item .accordion-header .arrow { gap: 1rem; } .custom-accordion.style-1 .accordion-item .accordion-header .gc-faq-question-text { flex: 1 1 auto; min-width: 0; text-align: left; line-height: 1.35; } .custom-accordion.style-1 .accordion-item .accordion-content .content-inner { padding-left: calc(var(--spacing) * 7.5) !important; padding-right: calc(var(--spacing) * 7.5) !important; } @media (max-width: 767px) { /* Mobile FAQ: no pill narrowing, no radius, consistent container alignment */ .custom-accordion.style-1 { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .custom-accordion.style-1 .accordion-item { margin-bottom: 0 !important; border-radius: 0 !important; } .custom-accordion.style-1 .accordion-item .accordion-header, .custom-accordion.style-1 .accordion-item .accordion-header.open { border-radius: 0 !important; padding-top: 1rem !important; padding-bottom: 1rem !important; padding-left: calc(var(--bs-gutter-x) * .5) !important; padding-right: calc(var(--bs-gutter-x) * .5) !important; box-sizing: border-box; } .custom-accordion.style-1 .accordion-item .accordion-header .arrow { text-align: left; align-items: center !important; width: 100%; gap: 0.875rem; } .custom-accordion.style-1 .accordion-item .accordion-header .gc-faq-question-text { text-wrap: balance; line-height: 1.32; } .custom-accordion.style-1 .accordion-item .accordion-header .indicator { flex-shrink: 0; margin-top: 0; } .custom-accordion.style-1 .accordion-item .accordion-content .content-inner { padding-left: calc(var(--bs-gutter-x) * .5) !important; padding-right: calc(var(--bs-gutter-x) * .5) !important; padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; box-sizing: border-box; } } @media (min-width: 1024px) { .services-details .gc-service-card-copy { padding: 1.125rem 1.25rem 1.625rem 1.25rem; } } @media (max-width: 1399px) { .services-details .gc-service-card-head { height: 7.75rem; } } @media (max-width: 1199px) { .services-details .gc-service-card-head { height: auto; min-height: 6.5rem; } } @media (max-width: 767px) { /* Global mobile shadow bleed for all sliders except hero and timeline. */ .page-content .swiper:not(#gc-hero-slider):not(.gc-rnd-timeline-swiper) { --gc-swiper-shadow-bleed-top: 1.875rem; --gc-swiper-shadow-bleed-bottom: 2.8125rem; padding-top: var(--gc-swiper-shadow-bleed-top); padding-bottom: var(--gc-swiper-shadow-bleed-bottom); box-sizing: border-box; } /* Mobile edge-to-edge slider tracks (outside container gutters). */ .page-content .services-details, .page-content .tema-details, .page-content .tips-details, .page-content .testimonial-swiper { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } } /* Shadow bleed for novinky swiper (padding inside overflow:hidden = room for shadow) */ .tips-details.swiper { padding: 2rem; margin: -2rem; } .gc-header-logo { width: 13.75rem; height: auto; display: block; } @media (max-width: 1279px) { .gc-header-logo { width: 11.875rem; } } /* Interactive Map Section (adapted from demos/map-development.html) */ .gc-map-wrapper { position: relative; width: 100%; overflow: hidden; background: #fff; min-height: clamp(33.75rem, 78vh, 47.5rem); } .gc-map-wrapper::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.62) 24%, rgba(255, 255, 255, 0.18) 40%, rgba(255, 255, 255, 0) 52%); } @media (min-width: 1024px) { .gc-map-wrapper::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.66) 22%, rgba(255, 255, 255, 0.2) 36%, rgba(255, 255, 255, 0) 48%); } } .gc-map-container { width: 100%; height: 100%; } .gc-map-foreground-layer { pointer-events: none; } .gc-map-foreground-content { pointer-events: auto; max-width: 42rem; position: relative; z-index: 0; } .gc-map-foreground-content::before { content: ""; position: absolute; inset: -1.25rem -1.125rem; background: rgba(255, 255, 255, 0.68); filter: blur(18px); border-radius: calc(var(--gc-surface-radius) + 0.5rem); pointer-events: none; z-index: -1; } @media (max-width: 767px) { .gc-map-foreground-content::before { inset: -0.75rem -0.625rem; filter: blur(12px); } } .leaflet-container { background: transparent !important; outline: 0 !important; border: none !important; font-family: inherit !important; } .leaflet-control-attribution { display: none !important; } .gc-map-tooltip, .leaflet-popup-content-wrapper { background: #fff !important; border: 1px solid #E5E7EB !important; border-radius: var(--gc-surface-radius) !important; padding: 0.9375rem !important; color: #1a1a2e !important; box-shadow: var(--gc-shadow-sm) !important; font-family: inherit !important; } .gc-map-tooltip { font-weight: 700; font-size: var(--text-sm); line-height: 1.35; border: 0 !important; text-align: left !important; width: fit-content; max-width: min(92vw, 22rem); } .gc-map-tooltip.leaflet-tooltip-top::before { border-top-color: #fff !important; border-width: 10px 10px 0; margin-left: -0.625rem; bottom: 0; margin-bottom: -0.5rem; } .leaflet-popup-content { margin: 0.9375rem !important; line-height: 1.4 !important; text-align: left !important; font-family: inherit !important; } .gc-map-popup .leaflet-popup-content-wrapper, .gc-map-popup .leaflet-popup-content { width: fit-content; max-width: min(92vw, 22rem) !important; } .leaflet-popup-tip { background: #fff !important; border: 1px solid #E5E7EB !important; } .leaflet-popup-close-button { display: none !important; } .gc-map-link { display: inline-flex; align-items: center; margin-top: 0; white-space: nowrap; color: #1a1a2e !important; text-decoration: none; font-size: var(--text-sm); font-weight: 600; } .gc-map-link:hover { color: #B3121B !important; text-decoration: underline; } .gc-map-popup-card { text-align: left; display: inline-flex; flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; position: relative; padding-right: 2.25rem; } .gc-map-popup-country { font-weight: 700; font-size: var(--text-base); line-height: 1.25; color: var(--secondary); margin-bottom: 2px; } .gc-map-popup-capital { font-weight: 400; font-size: var(--text-sm); line-height: 1.35; color: var(--bodytext); margin-bottom: 0.5rem; } .gc-map-link.gc-map-link--stack { display: inline-flex; align-items: center; justify-content: flex-start; width: auto; max-width: 100%; margin-top: 0; margin-bottom: 0.25rem; } .gc-map-link.gc-map-link--stack:last-child { margin-bottom: 0; } .gc-map-favicon { width: 0.875rem; height: 0.875rem; display: inline-block; margin-right: 0.375rem; flex: 0 0 0.875rem; } .gc-map-favicon.gc-map-favicon--corner { position: absolute; top: 0; right: 0; width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; margin-right: 0; } /* Section interlock around map (desktop only) */ @media (min-width: 1024px) { #sekcia-mapa-pokrytia.gc-map-wrapper { min-height: clamp(47.5rem, 96vh, 61.25rem); margin-top: 0 !important; margin-bottom: 0 !important; z-index: 1; } #sekcia-co-robime, #sekcia-vzdelavanie-pacientov { position: relative; z-index: 3; } #sekcia-co-robime { margin-top: -5.25rem; margin-bottom: -10.625rem; } #sekcia-vzdelavanie-pacientov { margin-top: -6.875rem; } #sekcia-mapa-pokrytia .gc-map-foreground-content { padding-top: 6rem; padding-bottom: 6rem; } } @media (min-width: 1280px) { #sekcia-mapa-pokrytia.gc-map-wrapper { min-height: clamp(56.25rem, 108vh, 72.5rem); } #sekcia-co-robime { margin-top: -8rem; margin-bottom: -15rem; } #sekcia-vzdelavanie-pacientov { margin-top: -9.75rem; } #sekcia-mapa-pokrytia .gc-map-foreground-content { padding-top: 7.75rem; padding-bottom: 7.75rem; } } .gc-domain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9375rem; } .gc-domain-grid--single { display: flex; flex-wrap: wrap; } .gc-patient-logo-showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .gc-patient-logo-card { display: flex; align-items: center; justify-content: center; min-height: 7.5rem; padding: 1rem 1.125rem; border-radius: 1.5rem; background: #fff; border: 1px solid rgba(26, 26, 46, 0.08); box-shadow: var(--gc-shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .gc-patient-logo-card:hover { transform: translateY(-0.25rem); border-color: rgba(46, 168, 220, 0.45); box-shadow: var(--gc-shadow-md); } .gc-patient-logo-card img { max-width: 100%; max-height: 3.375rem; width: auto; height: auto; object-fit: contain; } .gc-patient-logo-single { min-height: clamp(16.25rem, 28vw, 22.5rem); padding: 1.625rem 1.75rem; } .gc-patient-logo-single img { max-height: 6rem; } @media (min-width: 640px) { .gc-domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .gc-domain-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 639px) { .gc-patient-logo-showcase { grid-template-columns: 1fr; } } .btn-gc-flaglink { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 2px 0; color: var(--secondary); text-decoration: none; font-weight: 700; line-height: 1.2; transition: color .25s ease, transform .25s ease; } .btn-gc-flaglink:hover { color: var(--primary); transform: translateY(-1px); } .btn-gc-flaglink .btn-gc-flag { width: 1.40625rem; height: 1.40625rem; min-width: 1.40625rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; overflow: hidden; flex-shrink: 0; box-shadow: 0 6px 16px rgba(26, 26, 46, 0.18), 0 2px 8px rgba(26, 26, 46, 0.1); } .btn-gc-flaglink .btn-gc-flag .fi { display: block !important; width: 100% !important; height: 100% !important; border-radius: 999px; background-size: cover; background-position: center; background-repeat: no-repeat; } .btn-gc-flaglink .btn-gc-flaglink__label { font-size: 1rem; line-height: 1.2; font-weight: 700; color: inherit; } .btn-gc-flaglink.gc-size-sm { min-height: 2.75rem; gap: 0.625rem; } .btn-gc-flaglink.gc-size-sm .btn-gc-flag { width: 1.125rem; height: 1.125rem; min-width: 1.125rem; } .btn-gc-flaglink.gc-size-sm .btn-gc-flaglink__label { font-size: .9375rem; } .btn-gc-flaglink.gc-size-lg { min-height: 3.5rem; gap: 0.875rem; } .btn-gc-flaglink.gc-size-lg .btn-gc-flag { width: 1.625rem; height: 1.625rem; min-width: 1.625rem; } .btn-gc-flaglink.gc-size-lg .btn-gc-flaglink__label { font-size: 1.125rem; } /* ======================================== Spolupráca – C5 Donut Stats ======================================== */ .gc-spolupraca-stats { display: flex; flex-direction: column; gap: 1.25rem; } .gc-spolupraca-stat-card { flex: 1; min-width: 17.5rem; background: var(--secondary, #1a1a2e); border-radius: 1.25rem; padding: 1.75rem 1.5rem; position: relative; overflow: hidden; } .gc-spolupraca-stat-card::after { content: ''; position: absolute; bottom: -1.875rem; right: -1.875rem; width: 8.75rem; height: 8.75rem; background: radial-gradient(circle, rgba(46,168,220,0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .gc-spolupraca-stat-layout { display: flex; align-items: center; gap: 1.5rem; } .gc-donut-ring { position: relative; width: 6.875rem; height: 6.875rem; flex-shrink: 0; } .gc-donut-ring > svg { width: 6.875rem; height: 6.875rem; transform: rotate(-90deg); display: block; } .gc-donut-track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 12; } .gc-donut-fill { fill: none; stroke: var(--primary, #2EA8DC); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 283; transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.2, 1); } .gc-donut-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .gc-donut-icon { width: 2rem; height: 2rem; color: var(--primary, #2EA8DC); opacity: 0.9; } .gc-spolupraca-stat-number { font-size: 2.5rem; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 0.35rem; } .gc-spolupraca-stat-number .gc-spolupraca-stat-unit { font-size: 1.5rem; font-weight: 700; } .gc-spolupraca-stat-label { font-size: 0.95rem; color: rgba(255,255,255,0.6); line-height: 1.5; } /* ======================================== Spolupráca – Druhy spolupráce (zig-zag) Využíva: gc-rnd-pillar-icon, gc-tag, gc-shadow-* ======================================== */ /* Tag dot (used inline with GcTag) */ .gc-druh-hero-tag-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.5); } /* Red accent for title words */ .text-gc-red { color: var(--gc-red, #B3121B); } /* --- Zig-zag grid rows --- */ .gc-druhy-zigzag { display: flex; flex-direction: column; gap: 4rem; } .gc-druhy-zigzag-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; } /* Reversed: image left, text right (on desktop) */ .gc-druhy-zigzag-row--reversed .gc-druhy-zigzag-image { order: -1; } /* Decorative big number on image */ .gc-druh-bignum { position: absolute; bottom: -0.15em; left: 1.5rem; font-size: 18rem; font-weight: 900; color: rgba(255,255,255,0.6); line-height: 1; pointer-events: none; z-index: 1; } /* --- Case Study — premium dark block --- */ .gc-case-study { padding: 1.5rem 1.75rem; background: var(--secondary, #1a1a2e); border-radius: var(--gc-surface-radius, 1.5rem); position: relative; overflow: hidden; } .gc-case-study::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gc-brand-gradient, linear-gradient(90deg, #2EA8DC 0%, #2ED6DC 100%)); } .gc-case-study::after { content: ''; position: absolute; bottom: -30px; right: -10px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(46,168,220,0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .gc-case-study-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; } .gc-case-study-brand { font-size: 0.75rem; font-weight: 800; color: #fff; letter-spacing: 0.02em; } .gc-case-study p { font-size: 0.88rem; color: rgba(255,255,255,0.65); line-height: 1.55; } .gc-case-study strong { color: var(--primarylight, #2ED6DC); font-weight: 700; } /* --- Responsive: mobile = image always on top --- */ @media (max-width: 1023px) { .gc-druhy-zigzag-row { grid-template-columns: 1fr; } /* Image always first on mobile */ .gc-druhy-zigzag-image { order: -1; } .gc-druh-bignum { font-size: 10rem; } } /* ── O n\u00e1s \u2013 Timeline (Typ G: Swiper carousel + dot nav) ── */ /* Carousel wrapper */ .gc-tl-carousel-wrap { position: relative; padding: 0; margin-bottom: 4rem; overflow: hidden; } /* Slide wrapper */ .gc-tl-slide { display: flex; align-items: center; justify-content: center; min-height: 28rem; } /* Inactive slides: faded + scaled */ .gc-tl-swiper .swiper-slide { opacity: 0.3; transition: opacity 0.5s ease, transform 0.5s ease; } .gc-tl-swiper .swiper-slide-active { opacity: 1; } .gc-tl-swiper .swiper-slide-prev, .gc-tl-swiper .swiper-slide-next { opacity: 0.5; } .gc-tl-swiper .swiper-slide:not(.swiper-slide-active) .gc-tl-circle { transform: scale(0.75); } /* Circle milestone */ .gc-tl-circle { position: relative; width: 24rem; height: 24rem; border-radius: 50%; background: var(--gc-red, #B3121B); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.5rem; gap: 0.625rem; transition: transform 0.5s ease; } .gc-tl-circle::before { content: ''; position: absolute; top: -1.25rem; left: -1.25rem; right: -1.25rem; bottom: -1.25rem; border-radius: 50%; background: rgba(179, 18, 27, 0.1); z-index: -1; } .gc-tl-circle-year { font-size: 2.75rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: 0.05em; } .gc-tl-circle-headline { font-size: 1.25rem; font-weight: 700; color: #fff; text-align: center; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.03em; } .gc-tl-circle-detail { font-size: 1.25rem; font-weight: 500; color: rgba(255, 255, 255, 0.9); text-align: center; line-height: 1.35; font-style: normal; } /* Fade gradient overlays */ .gc-tl-fade { position: absolute; top: 0; bottom: 0; width: 12rem; z-index: 3; pointer-events: none; } .gc-tl-fade--left { left: 0; background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0) 100%); } .gc-tl-fade--right { right: 0; background: linear-gradient(to left, #fff 30%, rgba(255,255,255,0) 100%); } /* Navigation arrows */ .gc-tl-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; cursor: pointer; } .gc-tl-arrow:hover { transform: translateY(calc(-50% - 2px)); } .gc-tl-arrow--prev { left: 1rem; } .gc-tl-arrow--next { right: 1rem; } /* ── Dot navigation bar ── */ .gc-tl-nav { position: relative; padding: 0 1rem; height: 5rem; overflow: visible; } .gc-tl-nav-inner { display: flex; justify-content: center; position: relative; max-width: 50rem; margin: 0 auto; } /* Timeline line - centered on inactive dot (2.25rem / 2 = 1.125rem) */ .gc-tl-nav-line { position: absolute; top: 1.125rem; left: 1rem; right: 1rem; height: 0.1875rem; background: var(--gc-red, #B3121B); opacity: 0.2; transform: translateY(-50%); } .gc-tl-nav-progress { position: absolute; top: 1.125rem; left: 1rem; height: 0.1875rem; background: var(--gc-red, #B3121B); transition: width 0.4s ease; width: 0; transform: translateY(-50%); } .gc-tl-dot-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; cursor: pointer; gap: 0.5rem; } /* Dot - inactive */ .gc-tl-dot { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #fff; border: 0.1875rem solid var(--gc-red, #B3121B); transition: all 0.35s ease; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gc-tl-dot::after { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gc-red, #B3121B); transition: all 0.35s ease; } .gc-tl-dot-wrap:hover .gc-tl-dot { transform: scale(1.1); box-shadow: 0 0 0 0.25rem rgba(179, 18, 27, 0.12); } /* Dot - active: same center as inactive via negative margin */ .gc-tl-dot-wrap.active .gc-tl-dot { width: 3.5rem; height: 3.5rem; background: var(--gc-red, #B3121B); border-color: var(--gc-red, #B3121B); box-shadow: 0 0 0 0.375rem rgba(179, 18, 27, 0.12); /* (3.5 - 2.25) / 2 = 0.625rem shift up to keep center aligned */ margin-top: -0.625rem; } .gc-tl-dot-wrap.active .gc-tl-dot::after { width: 0.875rem; height: 0.875rem; background: #fff; box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.3); } /* Year label below dot */ .gc-tl-dot-year { font-size: 0.8rem; font-weight: 700; color: var(--gc-red, #B3121B); white-space: nowrap; transition: all 0.3s ease; } .gc-tl-dot-wrap.active .gc-tl-dot-year { font-size: 0.95rem; font-weight: 800; } /* Responsive */ @media (max-width: 1023px) { .gc-tl-carousel-wrap { padding: 0; } .gc-tl-slide { min-height: 20rem; } .gc-tl-circle { width: 17rem; height: 17rem; padding: 2.25rem; } .gc-tl-circle-year { font-size: 2.25rem; } .gc-tl-circle-headline { font-size: 1.25rem; } .gc-tl-circle-detail { font-size: 1.25rem; } .gc-tl-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; } .gc-tl-dot-wrap { flex: 0 0 auto; min-width: 3.5rem; } } @media (max-width: 639px) { /* Edge-to-edge: vytiahnuť z containeru */ .gc-tl-carousel-wrap { padding: 0; margin-left: calc(-1 * var(--container-px, 1rem)); margin-right: calc(-1 * var(--container-px, 1rem)); width: 100vw; max-width: 100vw; } .gc-tl-slide { min-height: 0; padding: 0.5rem 0; } .gc-tl-swiper .swiper-slide { display: flex; justify-content: center; } /* Aktívny kruh 80vw, neaktívne viditeľné ~10% z bokov */ .gc-tl-circle { width: 80vw; height: 80vw; padding: 2.5rem; } .gc-tl-circle::before { top: -0.5rem; left: -0.5rem; right: -0.5rem; bottom: -0.5rem; } .gc-tl-circle-year { font-size: 2.25rem; } .gc-tl-circle-headline { font-size: 1.25rem; } .gc-tl-circle-detail { font-size: 1.25rem; } /* Neaktívne slajdy: zmenšené, viditeľné z bokov */ .gc-tl-swiper .swiper-slide:not(.swiper-slide-active) .gc-tl-circle { transform: scale(0.65); } .gc-tl-fade { width: 0; } /* Šípky na okrajoch viewportu */ .gc-tl-arrow { z-index: 5; } .gc-tl-arrow--prev { left: 0.5rem; } .gc-tl-arrow--next { right: 0.5rem; } /* Dot nav — celá šírka, overflow hidden, JS posúva inner */ .gc-tl-nav { overflow: hidden; padding: 1rem 0 0; position: relative; width: 100%; } .gc-tl-nav-inner { transition: transform 0.4s ease; width: max-content; min-width: 100%; } /* Čiara viditeľná */ .gc-tl-nav-line { left: 0; right: 0; } .gc-tl-nav-progress { left: 0; } .gc-tl-dot-wrap { flex: 0 0 auto; min-width: 4.5rem; } /* Fade do stratena na okrajoch */ .gc-tl-nav::before, .gc-tl-nav::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3.5rem; z-index: 3; pointer-events: none; } .gc-tl-nav::before { left: 0; background: linear-gradient(to right, #fff 10%, rgba(255,255,255,0) 100%); } .gc-tl-nav::after { right: 0; background: linear-gradient(to left, #fff 10%, rgba(255,255,255,0) 100%); } .gc-tl-nav.gc-tl-nav--at-start::before { opacity: 0; } .gc-tl-nav.gc-tl-nav--at-end::after { opacity: 0; } } /* ============================================= O nás — Tím sekcia ============================================= */ /* Mobile: stacked layout */ .gc-tim-layout { display: flex; flex-direction: column; gap: 2rem; } .gc-tim-photo { border-radius: 1.25rem; overflow: hidden; margin: 0 0.875rem; } .gc-tim-photo img { aspect-ratio: auto; } .gc-tim-members { padding: 0 1rem; } .gc-tim-members-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } /* Tablet: 3 columns in grid */ @media (min-width: 640px) { .gc-tim-members-grid { grid-template-columns: repeat(3, 1fr); } } /* Desktop: side by side, photo left edge to center, grid right */ @media (min-width: 1024px) { .gc-tim-layout { flex-direction: row; gap: 0; align-items: stretch; } .gc-tim-photo { width: 50%; flex-shrink: 0; border-radius: 0 1.25rem 1.25rem 0; margin: 0; } .gc-tim-photo img { aspect-ratio: auto; height: 100%; } .gc-tim-members { width: 50%; display: flex; align-items: center; padding: 2rem 3rem; } .gc-tim-members-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } .gc-team-card-info { padding: 0.75rem 0 0.5rem; text-align: center; } .gc-team-card-info h5 { font-size: 1.125rem; font-weight: 700; color: var(--color-secondary, #1a1a2e); } .gc-team-card-info span { font-size: 0.875rem; font-weight: 500; color: rgba(26, 26, 46, 0.7); }