/* flex-kit.css */ * { box-sizing: border-box; outline: none; margin: 0; padding: 0; } :root { --flex-padding: 15px 15px; --gap: 10px; --gap-section: 30px; --gap-wrapper: 30px; --col-count: 4; --line-clamp: 3; --line-clamp-height: 1.3em; --width-wrapper: 800px; --flex-aspect-ratio: 1; --flex-line-count: 1; --flex-col-count: 2; --aspect-ratio: 1; --font-ratio-height: 0.9; --font-ratio-bottom: 0.1; } .kit-wrapper { box-sizing: border-box; position: relative; margin-left: auto; margin-right: auto; width: var(--width-wrapper); max-width: 100%; padding: 0 var(--gap-wrapper); } .kit-sections { box-sizing: border-box; position: relative; padding-top: var(--gap-section); } .kit-section { box-sizing: border-box; position: relative; margin-bottom: var(--gap-section); } .col-count:not(.slick-slider) { position: relative; margin-left: calc(var(--gap) / -2) !important; margin-right: calc(var(--gap) / -2) !important; } .col-count:not(.slick-slider) > * { width: calc(100% / var(--col-count)) !important; max-width: calc(100% / var(--col-count)) !important; flex-basis: calc(100% / var(--col-count)) !important; padding-left: calc(var(--gap) / 2); padding-right: calc(var(--gap) / 2); padding-bottom: var(--gap); } .kit-line-clamp { line-height: var(--line-clamp-height); max-height: calc(var(--line-clamp-height) * var(--line-clamp)); display: inline-block; word-wrap: break-word; overflow: hidden; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: var(--line-clamp); display: -webkit-box; word-break: break-word; white-space: normal; } .flex-list { position: relative; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .flex-list:not(.owl-loaded) { margin-left: calc(var(--gap) / -2) !important; margin-right: calc(var(--gap) / -2) !important; } .flex-list:before, .flex-list:after { content: ''; } .flex-list:not(.owl-loaded) > * { position: relative; padding-left: calc(var(--gap) / 2); padding-right: calc(var(--gap) / 2); } .flex-list > .flex-list-item { --col-width: calc((100%) / var(--col-count)); width: var(--col-width) !important; max-width: var(--col-width) !important; flex-basis: var(--col-width) !important; margin-bottom: var(--gap); } .flex-list-item:before, .flex-list-item:after { content: ''; } .flex-list-item-delimiter { height: 0; width: 0; flex: 1 0 0; } .flex-center { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } script, style { display: none !important; } .flex-line > *, .flex-col > *, .flex-line-wrap > *, .flex-col-wrap > *, .flex-line.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, .flex-col.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, .flex-line-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, .flex-col-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child { padding: var(--flex-padding); } .flex-list.flex-aspect-ratio:not(.owl-loaded) > * > :first-child, .flex-list-item.aspect-ratio > :first-child { padding: 0 calc(var(--gap) / 2); } /* деф настрйоки для ячейки */ .flex-line > *, .flex-line-wrap > *, .flex-col > *, .flex-col-wrap > *, .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: auto; -webkit-flex-basis: auto; flex-basis: auto; } .flex-line > .flex-line, .flex-line > .flex-col, .flex-line > .flex-col-wrap, .flex-line > .flex-line-wrap, .flex-col > .flex-line, .flex-col > .flex-col, .flex-col > .flex-col-wrap, .flex-col > .flex-line-wrap, .flex-line-wrap > .flex-line, .flex-line-wrap > .flex-col, .flex-line-wrap > .flex-col-wrap, .flex-line-wrap > .flex-line-wrap, .flex-col-wrap > .flex-line, .flex-col-wrap > .flex-col, .flex-col-wrap > .flex-col-wrap, .flex-col-wrap > .flex-line-wrap { -ms-flex-preferred-size: 0; -webkit-flex-basis: 0; flex-basis: 0; } /*.flex-line > .flex-line,*/ /*.flex-line > .flex-col,*/ /*.flex-line > .flex-col-wrap,*/ .flex-line > .flex-line-wrap:not(.flex-cell-full-content), .flex-col > .flex-line:not(.flex-cell-full-content), .flex-col > .flex-col:not(.flex-cell-full-content), /*.flex-col > .flex-col-wrap,*/ .flex-col > .flex-line-wrap:not(.flex-cell-full-content), .flex-line-wrap > .flex-line:not(.flex-cell-full-content), /*.flex-line-wrap > .flex-col,*/ /*.flex-line-wrap > .flex-col-wrap,*/ .flex-line-wrap > .flex-line-wrap:not(.flex-cell-full-content), .flex-col-wrap > .flex-line:not(.flex-cell-full-content), /*.flex-col-wrap > .flex-col,*/ /*.flex-col-wrap > .flex-col-wrap,*/ .flex-col-wrap > .flex-line-wrap:not(.flex-cell-full-content) { -ms-flex-preferred-size: auto; -webkit-flex-basis: auto; flex-basis: auto; } .flex-col > *, .flex-col-wrap > *, .flex-line > *, .flex-line-wrap > *, .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; max-width: 100%; } .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > *:not(:first-child) { display: none; } .flex-line:not(.flex-cell) > *:empty, .flex-col:not(.flex-cell) > *:empty, .flex-cell:empty { /*display: none !important;*/ } .flex-col, .flex-col-wrap, .flex-line, .flex-line-wrap { /*width: 100%;*/ padding: 0 !important; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .flex-col, .flex-col-wrap { -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } .flex-col, .flex-line, .flex-line-wrap, .flex-col-wrap { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: auto; -webkit-flex-basis: auto; flex-basis: auto; } .flex-col, .flex-col-wrap { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .flex-line, .flex-line-wrap { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } /* flex-wrap: nowrap */ .flex-col, .flex-line { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex-line-wrap, .flex-col-wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-cell { display: -ms-flexbox; display: -webkit-flex; display: flex; /*-webkit-flex-direction: column;*/ /*-ms-flex-direction: column;*/ /*flex-direction: column;*/ /*-webkit-flex-wrap: nowrap;*/ /*-ms-flex-wrap: nowrap;*/ /*flex-wrap: nowrap;*/ -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: auto; -webkit-flex-basis: auto; flex-basis: auto; } .flex-col.flex-cell, .flex-col-wrap.flex-cell, .flex-line.flex-cell, .flex-line-wrap.flex-cell { padding: var(--flex-padding) !important; } .flex-direction-column { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .flex-direction-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } /* применяем к таблице: ПРОДОЛЬНОЕ выравнивание элементов в строке или колонке */ .flex-align-start { -webkit-justify-content: flex-start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .flex-align-end { -webkit-justify-content: flex-end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .flex-align-center { -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .flex-align-around { -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } /* попереное */ .flex-align--stretch { -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .flex-align--center { -webkit-align-items: center; -ms-flex-align: center; align-items: center; } /* применяем к ячейкам: поперечное выравнивание */ .flex-cell-align--start { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } .flex-cell-align--end { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .flex-cell-align--center { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .flex-cell-align--stretch { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } .flex-wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } /* применяем к ячейке определяя макс возможное заполнение*/ .flex-cell-full-content { -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; } .flex-cell-fill { -ms-flex-negative: 1; flex-shrink: 1; -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; flex-basis: auto; } .flex-box-fill > * { -ms-flex-negative: 1; flex-shrink: 1; -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; flex-basis: auto; } .flex-col-count { } @supports (--flex-col-count:property) { .flex-col-count > * { width: calc(100% / (var(--flex-col-count))); max-width: calc(100% / (var(--flex-col-count))); box-sizing: border-box; } .flex-line-wrap.flex-col-count > *, .flex-line.flex-col-count > * { -ms-flex-preferred-size: calc(100% / var(--flex-col-count)); -webkit-flex-basis: calc(100% / var(--flex-col-count)); flex-basis: calc(100% / var(--flex-col-count)); box-sizing: border-box; } } .flex-col-count.flex-col-without-frame { } .flex-line-count { } @supports (--flex-line-count:property) { .flex-col-wrap.flex-line-count > *, .flex-col.flex-line-count > * { -ms-flex-preferred-size: calc(100% / (var(--flex-line-count))); -webkit-flex-basis: calc(100% / (var(--flex-line-count))); flex-basis: calc(100% / (var(--flex-line-count))); box-sizing: border-box; } } .flex-cell-aspect-auto { flex-grow: 1000; flex-shrink: 1; } @supports (--flex-aspect-ratio:property) { .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > img { height: auto; object-fit: contain; } .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto), .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) { position: relative; padding: 0; } .flex-aspect-ratio:not(.owl-loaded):not(.flex-list) > *:not(.flex-cell-aspect-auto)::before, .flex-aspect-ratio.owl-loaded:not(.flex-list) > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before { content: ""; display: block; width: 100%; padding-bottom: calc(100% / (var(--flex-aspect-ratio))); } .flex-aspect-ratio.flex-list:not(.owl-loaded) > *:not(.flex-cell-aspect-auto)::before { content: ""; display: block; width: 100%; padding-bottom: calc((100% - var(--gap)) / (var(--flex-aspect-ratio))); } .flex-aspect-ratio.flex-list.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before { content: ""; display: block; width: 100%; padding-bottom: calc(100% / (var(--flex-aspect-ratio))); } .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child, .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: contain; } .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture, .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture { width: 100%; height: 100%; } .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture > img, .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture > img { object-fit: contain; width: 100%; height: 100%; } } /* --aspect-ratio */ @supports (--aspect-ratio:0) { .aspect-ratio { position: relative; width: 100%; } .aspect-ratio > img { height: auto; object-fit: contain; } .aspect-ratio::before { content: ""; display: block; width: 100%; padding-bottom: calc(100% / (var(--aspect-ratio))); } .aspect-ratio > :first-child { width: 100%; position: absolute; top: 0; left: 0; height: 100%; object-fit: contain; } } /* flex-marginator */ :root { --flex-marginator: 15px; --flex-marginator-index: 0; } .flex-marginator { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--flex-marginator); } .flex-marginator > *:empty { display:none; } /* flex-delimiter text */ :root { --flex-delimiter: ', '; --flex-delimiter-index: 0; } .flex-delimiter > *:not(:first-child):not(:empty)::before { content: var(--flex-delimiter); --flex-delimiter-index:1; } .flex-delimiter > *:empty + *:not(:empty)::before { content: ''; --flex-delimiter-index:0; } .flex-delimiter > *:not(:empty) ~ *:empty + *:not(:empty)::before { content: var(--flex-delimiter); --flex-delimiter-index:1; } .flex-delimiter > *:empty { display:none; } /* flex-card */ .flex-card { --aspect-ratio: calc(200 / 300); --gap-inner: 10px; } .flex-card:hover .flex-card__content { box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.1); } .flex-card__content { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; border-width: 1px; border-style: solid; border-color: #e9e9e9; /*border-radius: 3px;*/ overflow: hidden; transition: 0.3s; background-color: var(--kit-color-content); /*padding-bottom: calc(var(--gap-inner) / 2);*/ /*padding-top: calc(var(--gap-inner) / 2);*/ } .flex-card__content:after, .flex-card__body:before, .flex-card__body:after { content: ''; display: block; flex-basis: calc(var(--gap-inner) / 2); flex-grow: 0; flex-shrink: 0; } .flex-card__content > *:empty { display: none; } .flex-card__header { position: absolute; top: 0; left: 0; width: 100%; } .flex-card__body { display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; height: 100%; flex: 1 0 100%; } .flex-card__body > *, .flex-card__hover > * { margin: calc(var(--gap-inner) / 2) var(--gap-inner); } .flex-card__body > *:empty, .flex-card__hover > *:empty { display: none; } .flex-card__footer { position: relative; } .flex-card__hover { position: relative; opacity: 0; visibility: hidden; } .flex-card:hover .flex-card__content { height: auto; z-index: 100; } .flex-card:hover .flex-card__content > .flex-card__hover { opacity: 1; visibility: visible; margin-top: calc(-1 * var(--gap-inner) / 2); } .flex-card__picture { flex-basis: 50%; flex-grow: 0; flex-shrink: 1; height: 0%; --aspect-ratio: 1; } .flex-card__picture.aspect-ratio { --aspect-ratio: 1; flex-basis: auto; flex-grow: 0; flex-shrink: 1; height: auto; } .flex-card__picture .kit-picture { height: 100%; width: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; background-origin: content-box; } .flex-card__name, .flex-card__title { --line-clamp: 2; --line-clamp-height: 1.1em; /*flex-shrink: 0;*/ } .flex-card__props { position: relative; } .flex-card__text { position: relative; } .flex-card__manager { position: relative; } .flex-card__flex-delimiter { flex: 1 10 0; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent; } .flex-card__ticket { position: absolute; top: var(--gap-inner); left: var(--gap-inner); } /* flex-card-list--list */ .flex-card-list--list { --col-count: 1; } .flex-card-list--list .flex-card.aspect-ratio:before { padding-bottom: unset; } .flex-card-list--list .flex-card.aspect-ratio:before { padding-bottom: unset; } .flex-card-list--list .flex-card.aspect-ratio > .flex-card__section { position: relative; } .flex-card-list--list .flex-card__body-shell.aspect-ratio:before { padding-bottom: unset; } .flex-card-list--list .flex-card__body { position: relative; flex-direction: row; } .flex-card-list--list .flex-card__body > .flex-card__picture { flex-basis: 12%; flex-shrink: 0; height: auto; position: relative; } .flex-card-list--list .flex-card__body > .flex-card__picture { flex-basis: 50px; flex-shrink: 0; height: auto; position: relative; } .flex-card-list--list .flex-card__body > .flex-card__picture:before { content: ""; display: block; width: 100%; padding-bottom: calc(100% / (var(--aspect-ratio))); } .flex-card-list--list .flex-card__body > .flex-card__picture > .kit-picture { width: 100%; position: absolute; top: 0; left: 0; height: 100%; object-fit: contain; } /* ticket */ .flex-list--ticket { --col-count: 1; --gap: 3px; --line-clamp: 1; --line-clamp-height: 1em; font-size: 0.7em; flex-direction: column; align-items: flex-start; } .flex-list--ticket > .flex-list-item { --col-width: auto; } .ticket-item { padding: calc(2 * 0.1em) calc(6 * 0.1em); background-color: hsl(0, 0%, 95%); } /* picture - icon */ .kit-picture-line, .kit-icon-line { display: inline-block; margin-bottom: calc(-1em * var(--font-ratio-bottom, 0.2)); } .kit-picture-line svg, .kit-picture-line picture, .kit-picture-line img, .kit-icon-line svg, .kit-icon-line picture, .kit-icon-line img { height: calc(1em * var(--font-ratio-height, 1)); width: auto; vertical-align: baseline; display: block; fill: currentColor; transition: inherit; object-fit: contain; object-position: center; } .kit-icon picture, .kit-icon img, .kit-icon svg, .kit-picture picture, .kit-picture img, .kit-picture svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; display: block; fill: currentColor; transition: inherit; object-fit: contain; object-position: center; } /* flex-kit.css end */