/* generated by scripts/css-min.php from ../home.css — edit the source, never this file */
.vonnik-home { padding-top: 0; } .vonnik-home-section { padding: var(--vonnik-space-7) 0; } .vonnik-home-section h2, .vonnik-home-products__head h2 { font-size: var(--vonnik-text-display); font-weight: var(--vonnik-weight-black); text-transform: uppercase; line-height: var(--vonnik-line-tight); letter-spacing: var(--vonnik-tracking-display); margin: 0 0 var(--vonnik-stack-s); } .vonnik-home-section__sub { font-size: var(--vonnik-text-l); line-height: var(--vonnik-line-prose); margin: 0 0 var(--vonnik-space-3); } .vonnik-home-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--vonnik-space-6); margin: 0 0 var(--vonnik-space-6); } .vonnik-home-section__head .vonnik-home-section__sub { margin-bottom: 0; } .vonnik-home-hero { position: relative; display: grid; grid-template-columns: 706fr 442fr; align-items: start; aspect-ratio: 1148 / 523; min-height: min-content; margin: 0 0 var(--vonnik-space-7); } .vonnik-home-hero__text { position: relative; z-index: var(--vonnik-layer-base); grid-column: 1; color: var(--vonnik-on-action); padding: var(--vonnik-space-8); } .vonnik-home-hero__text .vonnik-chip { margin: 0 0 var(--vonnik-space-3); } .vonnik-home-hero__text h1 { color: var(--vonnik-on-action); font-size: var(--vonnik-text-display); font-weight: var(--vonnik-weight-black); text-transform: uppercase; line-height: var(--vonnik-line-tight); letter-spacing: var(--vonnik-tracking-display); margin: 0 0 var(--vonnik-stack-m); } .vonnik-home-hero__text p { color: var(--vonnik-on-action); font-size: var(--vonnik-text-l); line-height: var(--vonnik-line-prose); margin: 0 0 var(--vonnik-space-5); max-width: 60ch; } .vonnik-home-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; } .vonnik-home-range { padding: var(--vonnik-space-7) 0; } .vonnik-home-cats { display: flex; gap: var(--vonnik-space-6); padding: 0 0 var(--vonnik-space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .vonnik-home-cats::-webkit-scrollbar { display: none; } .vonnik-home-cat { flex: 0 0 220px; min-width: 0; scroll-snap-align: start; text-align: center; color: inherit; text-decoration: none; overflow: hidden; } .vonnik-home-cat img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; display: block; margin: 0 auto var(--vonnik-space-3); background: var(--vonnik-grey-card); } .vonnik-home-cat span { font-size: var(--vonnik-text-l); line-height: var(--vonnik-line-prose); display: block; overflow-wrap: anywhere; } .vonnik-home-cat img { transition: transform var(--vonnik-motion-base) ease; } .vonnik-home-cat:hover img { transform: scale(1.04); } .vonnik-home-cat:hover span { text-decoration: underline; text-underline-offset: var(--vonnik-space-1); } .vonnik-home-cards { display: grid; gap: var(--vonnik-space-6); } .vonnik-home-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vonnik-home-card { aspect-ratio: 564 / 415; overflow: hidden; } .vonnik-home-card::after { content: ""; position: absolute; inset: 0; background: transparent; transition: background var(--vonnik-motion-base) ease; } .vonnik-home-card:hover::after, .vonnik-home-card:focus-visible::after { background: var(--vonnik-overlay); } .vonnik-home-card:hover, .vonnik-home-card:focus { color: var(--vonnik-on-action); } .vonnik-home-card__body { z-index: var(--vonnik-layer-base); justify-content: flex-end; } .vonnik-home-card__title { font-size: var(--vonnik-text-display); font-weight: var(--vonnik-weight-black); text-transform: uppercase; line-height: var(--vonnik-line-tight); letter-spacing: var(--vonnik-tracking-display); margin: 0; } .vonnik-home-card__sub { font-size: var(--vonnik-text-l); line-height: var(--vonnik-line-text); margin: 0; } .vonnik-home-products { padding: var(--vonnik-space-10) 0 var(--vonnik-space-7); margin: var(--vonnik-space-7) 0 0; position: relative; } .vonnik-home-products::before { content: ""; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); top: 0; height: 188px; background: var(--vonnik-blue); } .vonnik-home-products > * { position: relative; } .vonnik-home-products__head { display: flex; justify-content: space-between; align-items: center; gap: var(--vonnik-space-6); color: var(--vonnik-on-action); margin: 0 0 var(--vonnik-space-8); } .vonnik-home-products__head h2 { color: var(--vonnik-on-action); font-size: var(--vonnik-text-xxxl); font-weight: var(--vonnik-weight-black); line-height: var(--vonnik-line-tight); letter-spacing: var(--vonnik-tracking-display); margin: 0; } .vonnik-home-products__head p { color: var(--vonnik-on-action); font-size: var(--vonnik-text-s); line-height: var(--vonnik-line-prose); margin: 0; } .vonnik-home-slider ul.products { display: flex; gap: var(--vonnik-space-6); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; padding: 0 0 var(--vonnik-space-3); } .vonnik-home-slider ul.products::-webkit-scrollbar { display: none; } .vonnik-home .vonnik-home-slider ul.products a { --theme-text-decoration: none; text-decoration: none; } .vonnik-home-slider ul.products > li.product { flex: 0 0 calc((100% - (var(--vonnik-space-6) * 3)) / 4); width: auto; max-width: none; scroll-snap-align: start; margin: 0; background: var(--vonnik-surface); } .vonnik-home-slider__nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--vonnik-space-3); } .vonnik-home-slider__dots { display: flex; gap: var(--vonnik-space-3); } .vonnik-home-slider__dots span { width: var(--vonnik-space-3); height: var(--vonnik-space-3); border-radius: 50%; background: var(--vonnik-border); } .vonnik-home-slider__dots span.is-active { background: var(--vonnik-blue); } .vonnik-home-slider__arrows { display: flex; gap: var(--vonnik-space-3); } .vonnik-home-slider__arrow { width: var(--vonnik-space-8); height: var(--vonnik-space-8); border: var(--vonnik-border-hairline) solid var(--vonnik-blue); background: var(--vonnik-surface); color: var(--vonnik-blue); font-size: var(--vonnik-icon); line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 var(--vonnik-space-1); } .vonnik-home-slider__arrow:hover { background: var(--vonnik-blue); color: var(--vonnik-on-action); } .vonnik-home-slider__arrow:disabled { opacity: .35; cursor: default; } .vonnik-home-services .vonnik-media-cards { gap: var(--vonnik-space-7); } .vonnik-home-services .vonnik-media-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vonnik-space-6); } .vonnik-home-services .vonnik-media-card::before { aspect-ratio: 367 / 305; } .vonnik-media-card--grey { flex-direction: column-reverse; } .vonnik-home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--vonnik-space-4); } .vonnik-home-cats__group { display: flex; flex-direction: column; gap: var(--vonnik-space-3); flex: 0 0 auto; } .vonnik-home-cats__tiles { display: flex; gap: var(--vonnik-space-6); } .vonnik-home-cats__sep { flex: 0 0 1px; background: var(--vonnik-border); } .vonnik-home-products__sub { display: flex; align-items: center; justify-content: space-between; gap: var(--vonnik-space-5); margin: var(--vonnik-space-9) 0 var(--vonnik-space-5); } .vonnik-home-products__sub h3 { margin: 0; font-size: var(--vonnik-text-xxxl); font-weight: var(--vonnik-weight-black); text-transform: uppercase; color: var(--vonnik-ink); } @media (max-width: 999.98px) { .vonnik-home-range { padding: var(--vonnik-space-6) 0; } .vonnik-home .vonnik-home-cats { gap: var(--vonnik-space-4); padding: 0 var(--vonnik-space-5) var(--vonnik-space-3); width: calc(100% + var(--vonnik-space-8)); max-width: none; margin-left: calc(var(--vonnik-space-5) * -1) !important; margin-right: calc(var(--vonnik-space-5) * -1) !important; scroll-padding-inline: var(--vonnik-space-5); scroll-snap-type: x proximity; } .vonnik-home-cat { flex-basis: 132px; } .vonnik-home-cat img { width: 132px; height: 132px; } .vonnik-home-cat span { font-size: var(--vonnik-text-s); line-height: 1.35; overflow-wrap: normal; hyphens: manual; } .vonnik-home-slider ul.products > li.product { flex-basis: calc((100% - var(--vonnik-space-6)) / 2); } .vonnik-home-services .vonnik-media-cards { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767.98px) { .vonnik-home-hero { display: flex; flex-direction: column-reverse; aspect-ratio: auto; min-height: 0; } .vonnik-home-hero__img { position: static; width: 100%; height: auto; aspect-ratio: 375 / 260; } .vonnik-home-hero__text { padding: var(--vonnik-space-7) var(--vonnik-space-6) var(--vonnik-space-7); } .vonnik-home-hero__text .vonnik-chip { margin: 0 0 var(--vonnik-space-3); } .vonnik-home-cards--2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .vonnik-home-cats__tiles { gap: var(--vonnik-space-4); } .vonnik-home-products__sub { flex-direction: column; align-items: flex-start; margin: var(--vonnik-space-7) 0 var(--vonnik-space-4); } .vonnik-home-services .vonnik-media-card .wp-block-button__link { display: flex; width: 100%; } .vonnik-home-card { aspect-ratio: 564 / 415; grid-row: auto; } .vonnik-home-guides .vonnik-home-card { aspect-ratio: auto; min-height: 230px; } .vonnik-home-guides .vonnik-home-card__body { padding: var(--vonnik-space-6) var(--vonnik-space-5) var(--vonnik-space-5); } .vonnik-home-products { padding-top: var(--vonnik-space-8); } .vonnik-home-products::before { height: 170px; } .vonnik-home-products__head { flex-direction: column; align-items: flex-start; gap: var(--vonnik-space-4); } .vonnik-home-slider { padding-top: var(--vonnik-stack-l); } .vonnik-home-slider ul.products > li.product { flex-basis: 288px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "img img" "brand brand" "title title" "avail avail" "note note" "price actions"; gap: 0; padding: 0 0 var(--vonnik-space-5); } .vonnik-home-slider ul.products li.product > figure { margin: 0 0 var(--vonnik-space-4); } .vonnik-home-slider ul.products li.product .vonnik-card-brand { margin: 0 var(--vonnik-space-5) var(--vonnik-space-1); } .vonnik-home-slider ul.products li.product .woocommerce-loop-product__title, .vonnik-home-slider ul.products li.product h2 { margin: 0 var(--vonnik-space-5) var(--vonnik-space-2); font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-black); padding-right: var(--vonnik-space-5); } .vonnik-home-slider ul.products li.product .vonnik-avail { margin: 0 var(--vonnik-space-5) var(--vonnik-space-3); } .vonnik-home-slider ul.products li.product .vonnik-card-note { margin: 0 var(--vonnik-space-5) var(--vonnik-space-3); } .vonnik-home-slider ul.products li.product .price { margin: 0 0 0 var(--vonnik-space-5); } .vonnik-home-slider ul.products li.product .ct-woo-card-actions { margin: 0 var(--vonnik-space-5) 0 0; } .vonnik-home-section__head { flex-direction: column; align-items: flex-start; gap: var(--vonnik-space-4); } }