/* Elektrospoj homepage 2026 v8 (+ paticka) - zdroj: projekt Claude claude/homepage-2026/homepage-2026.css */ body.in-index { --es-red: #DD0000; --es-red-dark: #B00000; --es-gold: #D5A300; --es-teal: #75C4CB; --es-gray-bg: #F4F4F4; --es-radius: 16px; --es-font: 'Open Sans', Arial, sans-serif; } body.in-index:has(.es-why) .welcome > .h1 { display: none; } #es-reviews-slot { display: none; } body.in-index:has(.es-why) .welcome-wrapper { margin-bottom: 0; } body.in-index .welcome > div:has(> .es-why) { padding: 0 !important; } body.in-index .content-wrapper.welcome-wrapper { overflow-x: clip; } body.in-index:has(.es-why) footer.footer { margin-top: 0 !important; } .welcome .es-inner { padding: 0 15px !important; } .welcome .es-why__banner { padding: 56px 56px 48px !important; } .welcome .es-recycling__content, .welcome .es-refs, .welcome .es-ref, .welcome .es-reviews__grid, .welcome .es-review, .welcome .es-review__body, .welcome .es-review__rating, .welcome .es-review__name, .welcome .es-reviews__cta { padding: 0 !important; } .es-section { font-family: var(--es-font); padding: 64px 0; } .es-section--gray { background: var(--es-gray-bg); } .es-fullbleed { width: 100vw; position: relative; left: 50%; margin-left: -50vw; } .es-inner { max-width: 1110px; margin: 0 auto; padding: 0 15px; } .es-heading, body.in-index .homepage-group-title { font-family: var(--es-font); color: var(--es-red); font-weight: 700; text-transform: uppercase; text-align: center; font-size: 34px; line-height: 1.2; margin: 0 0 36px; } .es-btn { display: inline-block; font-family: var(--es-font); font-weight: 700; text-transform: uppercase; text-decoration: none !important; border-radius: 999px; padding: 12px 56px; font-size: 17px; line-height: 1.2; transition: background .15s, color .15s, transform .15s; } .es-btn--white { background: #fff; color: var(--es-red) !important; } .es-btn--white:hover { background: #ffecec; transform: translateY(-1px); } .es-btn--red { background: var(--es-red); color: #fff !important; padding: 9px 34px; font-size: 14px; text-transform: none; } .es-btn--red:hover { background: var(--es-red-dark); } .es-hero { position: relative; display: block; aspect-ratio: 727 / 418; border-radius: var(--es-radius); overflow: hidden; background: #b40000 url('/user/documents/upload/hp-hero-sleva3.jpg') center right / cover no-repeat; font-family: var(--es-font); color: #fff; text-decoration: none !important; padding: 48px 48px 40px; } .es-hero__title { display: block; font-size: 72px; font-weight: 700; line-height: 1; margin: 0 0 20px; color: #fff; } .es-hero__text { display: block; font-size: 28px; font-weight: 600; line-height: 1.15; margin: 0; color: #fff; } .es-hero .es-btn { position: absolute; left: 48px; bottom: 40px; text-transform: none; font-size: 20px; } body.in-index .benefitBanner { font-family: var(--es-font); } body.in-index .benefitBanner__title { font-weight: 700; color: #000; } body.in-index .homepage-group-title { margin-top: 48px; } @media (min-width: 992px) { body.in-index .products-block .product { padding: 20px 12px 24px; } body.in-index .products-block .product .p { background: #fff; border-radius: var(--es-radius); box-shadow: 0 3px 12px rgba(0,0,0,.08); padding: 20px 18px 18px; } body.in-index .products-block .p-code { display: none; } body.in-index .products-block .flags-default { top: 12px; left: 0; } body.in-index .products-block .flag { border-radius: 0; font-weight: 700; font-family: var(--es-font); padding: 4px 12px; font-size: 12px; line-height: 1.4; margin-bottom: 4px; } body.in-index .products-block .add-to-cart-button, body.in-index .products-block .btn-cart { border-radius: 999px; text-transform: uppercase; } } body.in-index .products-block .price-final { color: var(--es-red); font-weight: 700; } body.in-index .products-block .add-to-cart-button, body.in-index .products-block .btn-cart { background: var(--es-red); border-color: var(--es-red); color: #fff; font-weight: 700; } .es-why__banner { position: relative; border-radius: var(--es-radius); overflow: hidden; color: #fff; background: #c00000 url('/user/documents/upload/hp-jsme-tu-pro-vas.jpg') center right / cover no-repeat; padding: 56px 56px 48px; min-height: 420px; } .es-why__title { font-size: 48px; font-weight: 700; color: #fff; margin: 0 0 28px; line-height: 1.1; } .es-why__list { list-style: none; margin: 0 0 36px; padding: 0; max-width: 470px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; } .es-why__list li { position: relative; padding-left: 20px; font-weight: 600; font-size: 15px; line-height: 1.35; color: #fff; } .es-why__list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #fff; } .es-recycling { color: #fff; padding: 72px 0; background: #8a0000 url('/user/documents/upload/hp-likvidace-bg.jpg') center right / cover no-repeat; } .es-recycling__content { max-width: 560px; } .es-recycling h2 { font-size: 46px; font-weight: 700; color: #fff; margin: 0 0 32px; line-height: 1.15; max-width: 900px; } .es-recycling h3 { font-size: 26px; font-weight: 700; color: #fff; margin: 0 0 6px; } .es-recycling p { font-size: 16px; line-height: 1.5; color: #fff; margin: 0 0 26px; } .es-recycling .es-btn { margin-top: 8px; } .es-refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .es-ref { display: flex; flex-direction: column; } .es-ref h3 { font-size: 18px; font-weight: 700; color: #000; margin: 0 0 8px; } .es-ref p { font-size: 13.5px; line-height: 1.45; color: #111; margin: 0 0 20px; flex: 1; } .es-ref .es-btn { align-self: flex-start; margin-bottom: 20px; } .es-ref img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--es-radius); display: block; } body.in-index .custom-footer__banner1 { display: none; } .es-reviews { font-family: var(--es-font); background: #fff; padding: 64px 0 72px; } .es-reviews__summary { text-align: center; margin: -20px 0 36px; font-size: 16px; color: #333; } .es-reviews__summary strong { color: #000; } .es-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; } .es-review { display: flex; gap: 18px; align-items: flex-start; } .es-review__avatar { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; background: var(--es-gray-bg); color: var(--es-red); font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; border: 2px solid #eee; } .es-review__rating { font-size: 15px; margin-bottom: 6px; color: #000; } .es-star { color: #d9d9d9; font-size: 19px; letter-spacing: 1px; } .es-star.is-on { color: var(--es-gold); } .es-review p { font-size: 14px; line-height: 1.45; color: #111; margin: 0 0 8px; } .es-review__name { font-weight: 700; font-size: 16px; color: #000; } .es-reviews__cta { text-align: center; margin-top: 40px; } @media (max-width: 991px) { .es-reviews__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .es-reviews { padding: 44px 0; } .es-reviews__grid { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 991px) { .es-heading, body.in-index .homepage-group-title { font-size: 28px; } .es-hero__title { display: block; font-size: 54px; } .es-hero__text { display: block; font-size: 22px; } .es-why__banner { background-position: 75% center; } .es-why__title, .es-recycling h2 { font-size: 36px; } .es-refs { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .es-section { padding: 44px 0; } .es-hero { aspect-ratio: auto; min-height: 300px; padding: 28px 24px; } .es-hero__title { display: block; font-size: 44px; } .es-hero__text { display: block; font-size: 19px; } .es-hero .es-btn { left: 24px; bottom: 24px; font-size: 17px; padding: 10px 36px; } .es-why__banner { padding: 32px 24px 280px; background-position: 85% bottom; background-size: auto 300px; background-color: #c00000; } .es-why__title { font-size: 32px; } .es-why__list { grid-template-columns: 1fr; gap: 12px; } .es-recycling { padding: 44px 0 240px; background-position: 70% bottom; background-size: auto 280px; background-color: #9a0000; } .es-recycling h2 { font-size: 28px; } .es-recycling h3 { font-size: 20px; } .es-refs { grid-template-columns: 1fr; } } @media (max-width: 767px) { .welcome .es-fullbleed { width: auto; left: auto; margin-left: 0; } .welcome .es-inner { padding: 0 16px !important; } .welcome .es-why__banner { padding: 28px 22px 300px !important; } .welcome .es-recycling__content, .welcome .es-ref { padding: 0 !important; } } @media (min-width: 768px) { body.in-index .banners-row { display: flex; align-items: stretch; } body.in-index .banners-row > .col-sm-8 > #carousel, body.in-index #carousel .carousel-inner, body.in-index #carousel .item, body.in-index #carousel .item > a { height: 100%; } body.in-index #carousel .item img { width: 100%; height: 100%; object-fit: cover; object-position: left center; } } footer.footer:has(.es-built) { margin-top: 0 !important; } .footer-rows:has(.es-built)::before { background: #000 !important; } .custom-footer.es-built { background: #000 !important; color: #fff; } .custom-footer.es-built > .custom-footer__articles, .custom-footer.es-built > .custom-footer__contact { display: none !important; } .custom-footer.es-built > .es-footer { flex: 0 0 100% !important; width: 100% !important; max-width: 1110px !important; margin: 0 auto !important; padding: 56px 15px 40px !important; } .custom-footer.es-built > .custom-footer__banner15 { margin-top: 0 !important; } .es-footer__col { min-width: 0; } .es-footer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 40px; font-family: 'Open Sans', Arial, sans-serif; color: #fff; } .es-footer h3 { color: #fff; font-size: 19px; font-weight: 700; margin: 0 0 18px; padding-bottom: 10px; position: relative; display: inline-block; } .es-footer h3::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; } .es-footer ul { list-style: none; margin: 0; padding: 0; } .custom-footer.es-built .es-footer ul { display: block !important; } .es-footer li { margin: 0 0 7px; padding: 0; } .es-footer li::before { display: none !important; } .es-footer a { color: #fff !important; text-decoration: none; font-size: 14px; font-weight: 300; text-transform: uppercase; letter-spacing: .2px; } .es-footer a:hover { color: #ffb3b3 !important; } .es-footer p { color: #fff; font-size: 14px; font-weight: 300; line-height: 1.55; margin: 0 0 12px; } .es-footer p a { text-transform: none; } .es-footer__social a { display: inline-flex; align-items: center; gap: 8px; text-transform: none; } .es-footer__social svg { width: 20px; height: 20px; fill: #fff; flex: 0 0 20px; } .es-nl { font-family: 'Open Sans', Arial, sans-serif; text-align: center; padding: 64px 16px 56px; background: #b40000 url('/user/documents/upload/hp-hero-sleva3.jpg') center 40% / cover no-repeat; } .es-nl__inner { max-width: 1110px; margin: 0 auto; } .es-nl h2 { color: #fff; font-size: 40px; font-weight: 700; margin: 0 0 26px; line-height: 1.2; text-shadow: 0 2px 12px rgba(0,0,0,.25); } .es-nl__form { max-width: 760px; margin: 0 auto; } .es-nl .ec-v-form-input, .es-nl .ec-v-form-autocorrect, .es-nl .ec-v-form-error { max-width: 520px; margin-left: auto !important; margin-right: auto !important; } .es-nl .ec-v-form-holder { background: transparent !important; box-shadow: none !important; padding: 0 !important; max-width: none !important; } .es-nl .ec-v-form-step, .es-nl .ec-v-form-column { background: transparent !important; padding: 0 !important; } .es-nl .ec-v-forms-label { display: none !important; } .es-nl .ec-v-forms-form-control { width: 100% !important; height: 56px !important; border: 0 !important; border-radius: 999px !important; padding: 0 28px !important; font: 400 17px 'Open Sans', Arial, sans-serif !important; color: #000 !important; background: #fff !important; box-shadow: 0 4px 16px rgba(0,0,0,.2) !important; } .es-nl .ec-v-form-submit { text-align: center !important; margin-top: 16px !important; } .es-nl .ec-v-form-submit button { background: #fff !important; color: #DD0000 !important; border: 0 !important; border-radius: 999px !important; padding: 12px 52px !important; font: 700 16px 'Open Sans', Arial, sans-serif !important; text-transform: uppercase !important; cursor: pointer; width: auto !important; } .es-nl .ec-v-form-submit button:hover { background: #ffecec !important; } .es-nl .ec-v-form-text, .es-nl .ec-v-form-text p, .es-nl .ec-v-form-holder a { color: #fff !important; font-family: 'Open Sans', Arial, sans-serif !important; font-size: 12px !important; line-height: 1.5 !important; } .es-nl .ec-v-form-text { max-width: none !important; margin: 0 auto 12px !important; text-align: center !important; } @media (min-width: 768px) { .es-nl .ec-v-form-step:not(.ec-v-form-step-send) .ec-v-form-text p { white-space: nowrap; } } /* v9: chybová hláška (např. „Tento e-mail je již registrován“) – bílé pole, červený text */
.es-nl .ec-v-form-error {
  background: #fff !important; color: #B00000 !important; border: 0 !important; border-radius: 999px !important;
  padding: 10px 20px !important; margin-top: 10px !important; font: 600 14px 'Open Sans', Arial, sans-serif !important;
  text-align: center !important; box-shadow: 0 4px 16px rgba(0,0,0,.2) !important;
}
/* v9: focus tlačítka – místo modrého rámečku prohlížeče jemný bílý (pro klávesnici zůstává viditelný) */
.es-nl .ec-v-form-submit button:focus { outline: none !important; }
.es-nl .ec-v-form-submit button:focus-visible { outline: 2px solid rgba(255,255,255,.85) !important; outline-offset: 3px !important; } .es-nl .ec-v-form-step-send .ec-v-form-text, .es-nl .ec-v-form-step-send p { font: 600 18px 'Open Sans', Arial, sans-serif !important; } @media (max-width: 991px) { .es-footer { grid-template-columns: 1fr 1fr; } } @media (max-width: 575px) { .es-footer { grid-template-columns: 1fr; gap: 28px; } .custom-footer.es-built > .es-footer { padding: 40px 16px 32px !important; } .es-nl { padding: 44px 16px 40px; } .es-nl h2 { font-size: 26px; } }

/* v10: Paxio na mobilu posouvá podtržení nadpisů (h3::after top:21px + padding 16px) → čára přes text; vrátit pod nadpis */
.custom-footer.es-built .es-footer h3 { padding: 0 0 10px !important; margin: 0 0 18px !important; line-height: 1.25 !important; }
.custom-footer.es-built .es-footer h3::after {
  content: '' !important; position: absolute !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  width: auto !important; height: 2px !important; margin: 0 !important; border: 0 !important; background: #fff !important; transform: none !important;
}
/* v10: Paxio skrývá #footer (opacity 0) od 768 px a zobrazí ho jen když je okno při načtení ≥ 768 px → po roztažení okna / otočení tabletu zůstala patička neviditelná */
#footer { opacity: 1 !important; }


/* v11: nové logo (elektrospoj-logo-2026.png, 2× rozlišení) – na desktopu stejná velikost jako původní (cca 265 px šířka) */
@media (min-width: 768px) { .site-name img { max-height: 50px !important; width: auto !important; } }