/* ===================================== SKIMAX BLOG Obrázek nahoře + text dole ===================================== */ /* =========================== WRAPPER =========================== */ #newsWrapper.news-wrapper.blog-wrapper { padding: 16px 0; } /* =========================== KARTY =========================== */ #newsWrapper .news-item { min-width: 0; width: 100% !important; max-width: none !important; border: 1px solid #d5f1f1; border-radius: 3rem; overflow: hidden; padding: 2rem; position: relative; } /* =========================== ODKAZ KARTY =========================== */ #newsWrapper .news-item > a { display: flex !important; flex-direction: column; width: 100%; height: 100%; } /* =========================== OBRÁZEK poměr 1500x800 =========================== */ #newsWrapper .news-item .image { position: relative !important; width: 100% !important; height: auto !important; overflow: hidden !important; border-radius: 3rem; } #newsWrapper .news-item .image img { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: initial !important; border-radius: 3rem; } /* =========================== TEXT =========================== */ #newsWrapper .news-item .text { position: static !important; display: flex !important; flex-direction: column; flex: 1; width: 100% !important; height: auto !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; transform: none !important; padding: 2.5rem 0 0 !important; margin: 0 !important; color: #09171a !important; } /* =========================== NADPIS =========================== */ #newsWrapper .news-item .title { display: block; color: #09171a !important; font-weight: bold !important; margin-bottom: 3rem !important; } /* =========================== POPIS =========================== */ #newsWrapper .news-item .description { color: #09171a !important; margin-bottom: 2.5rem !important; } #newsWrapper .news-item .description p { color: #09171a !important; } /* =========================== ČÍST ČLÁNEK =========================== */ #newsWrapper .news-item .read-article { color: #2cb9bb !important; margin-top: auto; transition: color 300ms ease; } #newsWrapper .news-item .read-article:hover { color: #d5f1f1 !important; } #newsWrapper .news-item .read-article i { color: #2cb9bb; transition: color 300ms ease; } #newsWrapper .news-item .read-article:hover i { color: #d5f1f1; } /* =========================== ŠTÍTEK V OBRÁZKU =========================== */ #newsWrapper .news-item .article-category { position: absolute !important; right: 1.5rem; bottom: 1.5rem; z-index: 10; display: inline-block !important; width: fit-content !important; margin: 0 !important; padding: 0.75rem 1.75rem !important; border-radius: 3rem !important; font-size: 1.25rem !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .5px !important; } /* =========================== ODSTRANĚNÍ OVERLAY SAMBA =========================== */ #newsWrapper .news-item .text::before, #newsWrapper .news-item .text::after, #newsWrapper .news-item .image::before, #newsWrapper .news-item .image::after { display: none !important; } /* =========================== DESKTOP =========================== */ @media (min-width: 992px) { #newsWrapper.news-wrapper.blog-wrapper { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 2rem !important; row-gap: 4rem !important; width: 100% !important; } } /* =========================== ČLÁNKY BEZ OBRÁZKU =========================== */ @media (min-width: 992px) { #newsWrapper .news-item--noImage > a::before { content: ""; display: block; width: 100%; padding-top: 53.33%; } } /* =========================== TABLET =========================== */ @media (min-width: 768px) and (max-width: 991px) { #newsWrapper.news-wrapper.blog-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 2rem !important; row-gap: 3rem !important; } } /* =========================== MOBIL =========================== */ @media (max-width: 767px) { #newsWrapper.news-wrapper.blog-wrapper { display: grid !important; grid-template-columns: 1fr !important; row-gap: 2.5rem !important; } } /* ===================================== SKIMAX HOMEPAGE BLOG Obrázek nahoře + text dole ===================================== */ /* =========================== WRAPPER =========================== */ .homepage-blog-wrapper.row.blog-wrapper { padding: 16px 0; } /* =========================== KARTY =========================== */ .homepage-blog-wrapper .news-item { min-width: 0; width: 100% !important; max-width: none !important; background: #fff; border: 1px solid #d5f1f1; border-radius: 3rem; overflow: hidden; padding: 2rem; position: relative; } /* =========================== ODKAZ KARTY =========================== */ .homepage-blog-wrapper .news-item > a { display: flex !important; flex-direction: column; width: 100%; height: 100%; } /* =========================== OBRÁZEK poměr 1500x800 =========================== */ .homepage-blog-wrapper .news-item .image { position: relative !important; width: 100% !important; height: auto !important; overflow: hidden !important; border-radius: 3rem; } .homepage-blog-wrapper .news-item .image img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: initial !important; border-radius: 3rem; } /* =========================== TEXT =========================== */ .homepage-blog-wrapper .news-item .text { position: static !important; display: flex !important; flex-direction: column; flex: 1; width: 100% !important; height: auto !important; background: transparent !important; padding: 2.5rem 0 0 !important; margin: 0 !important; color: #09171a !important; } /* =========================== NADPIS =========================== */ .homepage-blog-wrapper .news-item .title { display: block; color: #09171a !important; font-weight: bold !important; margin-bottom: 3rem !important; } /* =========================== POPIS =========================== */ .homepage-blog-wrapper .news-item .description { color: #09171a !important; margin-bottom: 2.5rem !important; } .homepage-blog-wrapper .news-item .description p { color: #09171a !important; } /* =========================== ČÍST ČLÁNEK =========================== */ .homepage-blog-wrapper .news-item .read-article { color: #2cb9bb !important; margin-top: auto; transition: color 300ms ease; } .homepage-blog-wrapper .news-item .read-article:hover { color: #d5f1f1 !important; } .homepage-blog-wrapper .news-item .read-article i { color: #2cb9bb; transition: color 300ms ease; } .homepage-blog-wrapper .news-item .read-article:hover i { color: #d5f1f1; } /* =========================== BADGE V OBRÁZKU =========================== */ .homepage-blog-wrapper .news-item .article-category { position: absolute !important; bottom: 1.5rem; right: 1.5rem; z-index: 10; display: inline-block !important; width: fit-content !important; margin: 0 !important; padding: 0.75rem 1.75rem !important; border-radius: 3rem !important; font-size: 1.25rem !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .5px !important; } /* =========================== ODSTRANĚNÍ OVERLAY SAMBA =========================== */ .homepage-blog-wrapper .news-item .text::before, .homepage-blog-wrapper .news-item .text::after, .homepage-blog-wrapper .news-item .image::before, .homepage-blog-wrapper .news-item .image::after { display: none !important; } /* =========================== GRID HOMEPAGE = 2 SLOUPCE =========================== */ .homepage-blog-wrapper.row.blog-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 2rem !important; } .homepage-blog-wrapper.row.blog-wrapper > .news-item { width: 100% !important; max-width: none !important; flex: none !important; margin: 0 !important; } /* =========================== MOBIL =========================== */ @media (max-width: 767px) { .homepage-blog-wrapper.row.blog-wrapper { grid-template-columns: 1fr !important; } } /* ===================================== HOMEPAGE BLOG - NADPIS ===================================== */ .homepage-blog-wrapper .homepage-group-title { grid-column: 1 / -1 !important; width: 100% !important; text-align: center !important; } .homepage-blog-wrapper .homepage-group-title h4 { width: 100% !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* ===================================== VÝPIS ČLÁNKŮ – VLOŽENÉ RUBRIKY PŮJČOVNA / LYŽE / OBLEČENÍ / AKCE stejný vzhled jako SKIMAX BLOG 3 → 2 → 1 ===================================== */ /* =========================== GRID =========================== */ #pujcovna-news, #lyze-news, #lyze-damske-news, #lyze-panske-news, #obleceni-news, #akce-news { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 2rem !important; row-gap: 4rem !important; } /* =========================== KARTA =========================== */ #pujcovna-news .news-item, #lyze-news .news-item, #lyze-damske-news .news-item, #lyze-panske-news .news-item, #obleceni-news .news-item, #akce-news .news-item { min-width: 0; width: 100% !important; max-width: none !important; background: #fff !important; border: 1px solid #d5f1f1; border-radius: 3rem; overflow: hidden; padding: 2rem; position: relative; } /* =========================== ODKAZ =========================== */ #pujcovna-news .news-item > a, #lyze-news .news-item > a, #lyze-damske-news .news-item > a, #lyze-panske-news .news-item > a, #obleceni-news .news-item > a, #akce-news .news-item > a { display: flex !important; flex-direction: column; width: 100%; height: 100%; } /* =========================== OBRÁZEK 1500 × 800 =========================== */ #pujcovna-news .news-item .image, #lyze-news .news-item .image, #lyze-damske-news .news-item .image, #lyze-panske-news .news-item .image, #obleceni-news .news-item .image, #akce-news .news-item .image { position: relative !important; width: 100% !important; aspect-ratio: 1500 / 800 !important; height: auto !important; overflow: hidden !important; border-radius: 3rem !important; } #pujcovna-news .news-item .image img, #lyze-news .news-item .image img, #lyze-damske-news .news-item .image img, #lyze-panske-news .news-item .image img, #obleceni-news .news-item .image img, #akce-news .news-item .image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 3rem !important; } /* =========================== TEXT =========================== */ #pujcovna-news .news-item .text, #lyze-news .news-item .text, #lyze-damske-news .news-item .text, #lyze-panske-news .news-item .text, #obleceni-news .news-item .text, #akce-news .news-item .text { position: static !important; display: flex !important; flex-direction: column !important; flex: 1; width: 100% !important; height: auto !important; padding: 2.5rem 0 0 !important; margin: 0 !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; transform: none !important; color: #09171a !important; } /* =========================== NADPIS =========================== */ #pujcovna-news .news-item .title, #lyze-news .news-item .title, #lyze-damske-news .news-item .title, #lyze-panske-news .news-item .title, #obleceni-news .news-item .title, #akce-news .news-item .title { display: block !important; color: #09171a !important; font-weight: bold !important; margin-bottom: 3rem !important; } /* =========================== POPIS =========================== */ #pujcovna-news .news-item .description, #pujcovna-news .news-item .description p, #lyze-news .news-item .description, #lyze-damske-news .news-item .description, #lyze-panske-news .news-item .description, #lyze-news .news-item .description p, #lyze-damske-news .news-item .description p, #lyze-panske-news .news-item .description p, #obleceni-news .news-item .description, #obleceni-news .news-item .description p, #akce-news .news-item .description, #akce-news .news-item .description p { display: block !important; color: #09171a !important; margin-bottom: 2.5rem !important; } /* =========================== ČÍST ČLÁNEK =========================== */ #pujcovna-news .news-item .read-article, #lyze-news .news-item .read-article, #lyze-damske-news .news-item .read-article, #lyze-panske-news .news-item .read-article, #obleceni-news .news-item .read-article, #akce-news .news-item .read-article { display: block !important; margin-top: auto; color: #2cb9bb !important; transition: color .3s ease; } #pujcovna-news .news-item .read-article:hover, #lyze-news .news-item .read-article:hover, #lyze-damske-news .news-item .read-article:hover, #lyze-panske-news .news-item .read-article:hover, #obleceni-news .news-item .read-article:hover, #akce-news .news-item .read-article:hover { color: #d5f1f1 !important; } #pujcovna-news .news-item .read-article i, #lyze-news .news-item .read-article i, #lyze-damske-news .news-item .read-article i, #lyze-panske-news .news-item .read-article i, #obleceni-news .news-item .read-article i, #akce-news .news-item .read-article i { color: #2cb9bb; transition: color .3s ease; } #pujcovna-news .news-item .read-article:hover i, #lyze-news .news-item .read-article:hover i, #lyze-damske-news .news-item .read-article:hover i, #lyze-panske-news .news-item .read-article:hover i, #obleceni-news .news-item .read-article:hover i, #akce-news .news-item .read-article:hover i { color: #d5f1f1; } /* =========================== BADGE V OBRÁZKU =========================== */ #pujcovna-news .news-item .article-category, #lyze-news .news-item .article-category, #lyze-damske-news .news-item .article-category, #lyze-panske-news .news-item .article-category, #obleceni-news .news-item .article-category, #akce-news .news-item .article-category { position: absolute !important; right: 1.5rem !important; bottom: 1.5rem !important; z-index: 10; display: inline-block !important; width: fit-content !important; margin: 0 !important; padding: 0.75rem 1.75rem !important; border-radius: 3rem !important; font-size: 1.25rem !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .5px !important; } /* =========================== ODSTRANĚNÍ OVERLAY SAMBA =========================== */ #pujcovna-news .news-item .text::before, #pujcovna-news .news-item .text::after, #pujcovna-news .news-item .image::before, #pujcovna-news .news-item .image::after, #lyze-news .news-item .text::before, #lyze-damske-news .news-item .text::before, #lyze-panske-news .news-item .text::before, #lyze-news .news-item .text::after, #lyze-damske-news .news-item .text::after, #lyze-panske-news .news-item .text::after, #lyze-news .news-item .image::before, #lyze-damske-news .news-item .image::before, #lyze-panske-news .news-item .image::before, #lyze-news .news-item .image::after, #lyze-damske-news .news-item .image::after, #lyze-panske-news .news-item .image::after, #obleceni-news .news-item .text::before, #obleceni-news .news-item .text::after, #obleceni-news .news-item .image::before, #obleceni-news .news-item .image::after, #akce-news .news-item .text::before, #akce-news .news-item .text::after, #akce-news .news-item .image::before, #akce-news .news-item .image::after { display: none !important; } /* =========================== TABLET / MENŠÍ NOTEBOOK =========================== */ @media (max-width: 1439px) { #pujcovna-news, #lyze-news, #lyze-damske-news, #lyze-panske-news, #obleceni-news, #akce-news { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* =========================== MOBIL =========================== */ @media (max-width: 767px) { #pujcovna-news, #lyze-news, #lyze-damske-news, #lyze-panske-news, #obleceni-news, #akce-news { grid-template-columns: 1fr !important; } } /* ===================================== ROZBALOVACÍ ČLÁNEK – PŮJČOVNA ===================================== */ #pujcovna-clanek .pujcovna-clanek-toggle { display: block !important; width: 100% !important; box-sizing: border-box !important; background-color: var(--color-secondary-hover) !important; color: var(--color-primary) !important; border: 1px solid var(--color-secondary-hover) !important; border-radius: 1.5rem !important; padding: 1.5rem 3rem !important; margin: 3rem 0 !important; text-transform: uppercase !important; text-align: center !important; font-weight: 700 !important; line-height: 1.4 !important; cursor: pointer !important; transform: scale(1); transform-origin: center center; transition: background-color 1s ease, color 1s ease, border-color 1s ease, transform 1s ease !important; } /* =========================== HOVER =========================== */ #pujcovna-clanek .pujcovna-clanek-toggle:hover { background-color: var(--color-primary) !important; color: var(--color-secondary-hover) !important; border-color: var(--color-secondary-hover) !important; transform: scale(1.03); } /* =========================== ACTIVE =========================== */ #pujcovna-clanek .pujcovna-clanek-toggle:active { transform: scale(0.99); background-color: rgba(44, 185, 187, 0.25) !important; color: var(--color-primary) !important; border-color: var(--color-secondary-hover) !important; } /* =========================== FOCUS =========================== */ #pujcovna-clanek .pujcovna-clanek-toggle:focus { outline: none !important; border-color: var(--color-secondary-hover) !important; } /* =========================== OTEVŘENÝ STAV =========================== */ #pujcovna-clanek.pujcovna-clanek-open .pujcovna-clanek-toggle { background-color: var(--color-primary) !important; color: var(--color-secondary-hover) !important; border-color: var(--color-secondary-hover) !important; transform: scale(1); } /* =========================== OTEVŘENÝ + HOVER =========================== */ #pujcovna-clanek.pujcovna-clanek-open .pujcovna-clanek-toggle:hover { background-color: var(--color-secondary-hover) !important; color: var(--color-primary) !important; border-color: var(--color-secondary-hover) !important; transform: scale(1.03); } /* ===================================================== SUBCATEGORIES – MOBILE ===================================================== */ @media (max-width: 767px) { ul.subcategories { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 1rem !important; row-gap: 1rem !important; margin: 0 !important; padding: 0 !important; } ul.subcategories > li { width: 100% !important; max-width: none !important; float: none !important; padding: 0 !important; } ul.subcategories > li > a { display: flex !important; width: 100% !important; box-sizing: border-box !important; } }