@font-face {
font-family: "swiper-icons";
src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
font-weight: 300;
font-style: normal;
}
:root {
--swiper-theme-color: #007aff;
}
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0; z-index: 1;
}
.swiper-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
.swiper-pointer-events {
touch-action: pan-y;
}
.swiper-pointer-events.swiper-vertical {
touch-action: pan-x;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
}
.swiper-slide-invisible-blank {
visibility: hidden;
} .swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto;
}
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
transform: translateZ(0);
backface-visibility: hidden;
} .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px;
}
.swiper-3d .swiper-wrapper,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d;
}
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
} .swiper-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none; -ms-overflow-style: none; }
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
scroll-snap-type: x mandatory;
}
.swiper-vertical.swiper-css-mode > .swiper-wrapper {
scroll-snap-type: y mandatory;
}
.swiper-centered > .swiper-wrapper::before {
content: "";
flex-shrink: 0;
order: 9999;
}
.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
width: var(--swiper-centered-offset-after);
}
.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
height: var(--swiper-centered-offset-after);
}
.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
}
.swiper-grid > .swiper-wrapper {
flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
flex-wrap: wrap;
flex-direction: column;
} }body {
position: relative;
max-width: 100%;
overflow-x: clip;
}
.header {
width: 100%;
max-width: 100%;
}
@font-face {
font-family: Sora;
src: url(//luxon.pl/wp-content/themes/Luxon/fonts/Sora-VariableFont_wght.ttf) format("truetype-variations");
font-weight: 100 900;
font-display: swap;
}
body {
font-family: Sora !important;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
body .footer {
margin-top: auto;
}
.container {
width: 100%;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
.container--full {
width: 100%;
max-width: 100%;
}
@media (min-width: 500px) {
.container {
padding-left: 16px;
padding-right: 16px;
}
}
@media (min-width: 668px) {
.container {
padding-left: 0;
padding-right: 0;
max-width: 602px;
}
.container--small {
max-width: 502px;
}
}
@media (min-width: 900px) {
.container {
max-width: 800px;
}
.container--small {
max-width: 700px;
}
}
@media (min-width: 1100px) {
.container {
max-width: 1040px;
}
.container--small {
max-width: 1000px;
}
}
@media (min-width: 1380px) {
.container {
max-width: 1400px;
}
.container--small {
max-width: 1200px;
}
}
@media (min-width: 1900px) {
.container {
max-width: 1800px;
}
.container--small {
max-width: 1380px;
}
}
body::after {
bottom: 0;
left: 0;
content: "xs";
position: fixed;
z-index: 20;
padding: 10px;
background-color: black;
color: #ffffff;
opacity: 1;
display: none;
}
@media (min-width: 500px) {
body::after {
content: "xs";
}
}
@media (min-width: 668px) {
body::after {
content: "s";
}
}
@media (min-width: 900px) {
body::after {
content: "m";
}
}
@media (min-width: 1100px) {
body::after {
content: "l";
}
}
@media (min-width: 1380px) {
body::after {
content: "xl";
}
}
@media (min-width: 1900px) {
body::after {
content: "xxl";
}
}
html,
p,
ol,
ul {
font-size: 15px;
line-height: 1.5;
font-weight: 300;
color: #1e274a;
}
.typography-margins > h1,
.typography-margins > .h1 {
margin: 40px 0;
}
.typography-margins > h2,
.typography-margins > .h2 {
margin: 40px 0;
}
.typography-margins > h3,
.typography-margins > .h3 {
margin: 40px 0;
}
.typography-margins > h4,
.typography-margins > .h4 {
margin: 40px 0;
}
.typography-margins > h5,
.typography-margins > .h5 {
margin: 40px 0;
}
.typography-margins > h6,
.typography-margins > .h6 {
margin: 40px 0;
}
.typography-margins > p,
.typography-margins > ul,
.typography-margins > ol,
.typography-margins > li {
margin: 30px 0;
}
.typography-margins > ul,
.typography-margins > ol {
margin: 30px 0 30px 20px;
}
h1,
.h1 {
font-size: 24px;
line-height: 1.2;
font-weight: 600;
}
h2,
.h2 {
font-size: 23px;
line-height: 1.2;
font-weight: 600;
}
h3,
.h3 {
font-size: 22px;
line-height: 1.2;
font-weight: 600;
}
h4,
.h4 {
font-size: 21px;
line-height: 1.2;
font-weight: 600;
}
h5,
.h5 {
font-size: 20px;
line-height: 1.2;
font-weight: 600;
}
h6,
.h6 {
font-size: 19px;
line-height: 1.2;
font-weight: 600;
}
@media (min-width: 1100px) {
.text,
p,
ol,
ul,
li {
font-size: 16px;
}
h1,
.h1 {
font-size: 40px;
line-height: 1.5;
}
h2,
.h2 {
font-size: 36px;
line-height: 1.5;
}
h3,
.h3 {
font-size: 32px;
line-height: 1.5;
}
h4,
.h4 {
font-size: 28px;
line-height: 1.5;
}
h5,
.h5 {
font-size: 26px;
line-height: 1.5;
}
h6,
.h6 {
font-size: 24px;
line-height: 1.5;
}
.typography-margins > h1,
.typography-margins > .h1 {
margin: 50px 0;
}
.typography-margins > h2,
.typography-margins > .h2 {
margin: 50px 0;
}
.typography-margins > h3,
.typography-margins > .h3 {
margin: 50px 0;
}
.typography-margins > h4,
.typography-margins > .h4 {
margin: 50px 0;
}
.typography-margins > h5,
.typography-margins > .h5 {
margin: 50px 0;
}
.typography-margins > h6,
.typography-margins > .h6 {
margin: 50px 0;
}
.typography-margins > p,
.typography-margins > ul,
.typography-margins > ol,
.typography-margins > li {
margin: 40px 0;
}
.typography-margins > ul,
.typography-margins > ol {
margin: 40px 0 40px 20px;
}
}
@media (min-width: 1900px) {
.text,
p,
ol,
ul,
li {
font-size: 16px;
}
h1,
.h1 {
font-size: 60px;
}
h2,
.h2 {
font-size: 50px;
}
h3,
.h3 {
font-size: 40px;
}
h4,
.h4 {
font-size: 30px;
}
h5,
.h5 {
font-size: 28px;
}
h6,
.h6 {
font-size: 24px;
}
.typography-margins > h1,
.typography-margins > .h1 {
margin: 50px 0;
}
.typography-margins > h2,
.typography-margins > .h2 {
margin: 50px 0;
}
.typography-margins > h3,
.typography-margins > .h3 {
margin: 50px 0;
}
.typography-margins > h4,
.typography-margins > .h4 {
margin: 50px 0;
}
.typography-margins > h5,
.typography-margins > .h5 {
margin: 50px 0;
}
.typography-margins > h6,
.typography-margins > .h6 {
margin: 50px 0;
}
.typography-margins > p,
.typography-margins > ul,
.typography-margins > ol,
.typography-margins > li {
margin: 40px 0;
}
.typography-margins > ul,
.typography-margins > ol {
margin: 40px 0 40px 20px;
}
}
.color-text-light {
color: #ffffff;
}
.color-text-gray {
color: #555555;
}
.color-text-dark {
color: #000000;
}
.color-text-primary {
color: #069aff;
}
.color-text-secondary {
color: #1e274a;
}
.resetLink {
text-decoration: none;
}
.resetLink:hover {
cursor: pointer;
}
.text-large, .text-large > * {
font-size: 19px;
line-height: 1.5;
}
@media (min-width: 1900px) {
.text-large, .text-large > * {
font-size: 25px;
}
}
.text-big, .text-big > * {
font-size: 17px;
line-height: 1.5;
}
@media (min-width: 1900px) {
.text-big, .text-big > * {
font-size: 20px;
}
}
.text-regular, .text-regular > * {
font-size: 15px;
line-height: 1.5;
}
@media (min-width: 1900px) {
.text-regular, .text-regular > * {
font-size: 16px;
}
}
.text-small, .text-small > * {
font-size: 14px;
line-height: 1.5;
}
@media (min-width: 1900px) {
.text-small, .text-small > * {
font-size: 15px;
}
}
.text-little, .text-little > * {
font-size: 13px;
line-height: 1.5;
}
.heading-large {
line-height: 1.4;
font-weight: 600;
font-size: 24px;
}
@media (min-width: 1380px) {
.heading-large {
font-size: 48px;
}
}
@media (min-width: 1900px) {
.heading-large {
font-size: 55px;
}
}
.heading-regular {
line-height: 1.4;
font-weight: 600;
font-size: 22px;
}
@media (min-width: 1380px) {
.heading-regular {
font-size: 42px;
}
}
@media (min-width: 1900px) {
.heading-regular {
font-size: 50px;
}
}
.heading-small {
line-height: 1.4;
font-weight: 600;
font-size: 20px;
}
@media (min-width: 1380px) {
.heading-small {
font-size: 30px;
}
}
@media (min-width: 1900px) {
.heading-small {
font-size: 40px;
}
}
.weight-light {
font-weight: 300;
}
.weight-regular {
font-weight: 400;
}
.weight-semiBold {
font-weight: 600;
} .navigation {
list-style: none;
display: flex;
flex-direction: row;
gap: 24px;
}
.navigation li a {
font-size: 17px;
color: #1E274A;
font-weight: 600;
line-height: 40px;
letter-spacing: 0.51px;
text-decoration: none;
will-change: color;
transition: color 0.12s linear;
}
.navigation li a:hover {
color: #069aff;
}
.navigation li.menu-item-has-megamenu {
position: relative;
}
.navigation li.menu-item-has-megamenu::after {
content: "";
position: absolute;
bottom: -35px;
left: 50%;
background-color: #069aff;
transform: translate(-50%);
height: 4px;
width: 100%;
max-width: 0;
border-radius: 2px;
opacity: 0;
transition: opacity 0.8s ease-in-out, max-width 0.8s ease-in-out;
}
.navigation li.menu-item-has-megamenu.menu-item-has-megamenu--open::after {
opacity: 1;
max-width: 100%;
}
@media (min-width: 1380px) {
.navigation {
gap: 24px;
}
.navigation li a {
font-size: 17px;
line-height: 1.6;
}
}
.hamburger {
height: 40px;
width: 40px;
background-color: transparent;
border: none;
position: relative;
border: none;
cursor: pointer;
display: flex;
padding: 0;
}
.hamburger__bar:nth-of-type(1) {
background-color: #1E274A;
width: 20px;
height: 2px;
border-radius: 3px;
right: 10px;
top: 15px;
position: absolute;
transition: top 0.06s linear 0.06s, transform 0.06s linear;
}
.hamburger__bar:nth-of-type(2) {
background-color: #1E274A;
width: 14px;
height: 2px;
border-radius: 3px;
top: 23px;
right: 10px;
position: absolute;
transition: top 0.06s linear 0.06s, transform 0.06s linear, width 0.06s linear 0.06s;
}
.hamburger--opened .hamburger__bar:nth-of-type(1) {
top: 19px;
transform: rotate(-45deg);
transition: top 0.06s linear, transform 0.06s linear 0.06s;
}
.hamburger--opened .hamburger__bar:nth-of-type(2) {
top: 19px;
width: 20px;
transform: rotate(45deg);
transition: top 0.06s linear, transform 0.06s linear 0.06s, width 0.06s linear;
}
.button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
max-width: 100%;
width: fit-content;
text-align: center;
font-size: 14px;
line-height: 17px;
font-weight: 600;
text-decoration: none;
font-family: Sora;
border-radius: 25px;
min-height: 45px;
padding: 0 40px;
transition: border-color 0.15s linear, color 0.15s linear, background-color 0.15s linear;
}
.button--primary {
color: #ffffff;
background-color: #069aff;
border: 1px solid #069aff;
}
.button--primary:hover {
background-color: #ffffff;
color: #069aff;
}
.button--primary.button--inverted {
color: #069aff;
background-color: transparent;
}
.button--primary.button--inverted:hover {
background-color: #069aff;
color: #ffffff;
}
.button--secondary {
color: #ffffff;
background-color: #1e274a;
border: 1px solid #1e274a;
}
.button--secondary:hover {
background-color: #ffffff;
color: #1e274a;
}
.button--secondary.button--inverted {
background-color: transparent;
}
.button--secondary.button--inverted:hover {
background-color: #1e274a;
color: #ffffff;
}
.button:hover {
cursor: pointer;
}
@media (min-width: 1100px) {
.button {
font-size: 16px;
line-height: 21px;
}
}
.mobileNav {
height: 100vh;
width: 100vw;
padding: 60px 30px 30px 0;
position: fixed;
top: 0;
left: -100vw;
right: 0;
bottom: 0;
z-index: 100;
background-color: #ffffff;
will-change: left;
transition: left cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
}
.mobileNav.open {
left: 0;
}
.mobileNav .container {
overflow: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.mobileNav ul {
list-style: none;
}
.mobileNav__list {
list-style: none;
}
.mobileNav__list li {
text-align: center;
}
.mobileNav__list li:last-of-type {
margin-bottom: 0;
}
.mobileNav__list li .sub-menu {
margin-top: 0;
max-height: 0;
overflow: hidden;
position: relative;
}
.mobileNav__list li .sub-menu--open {
max-height: unset;
}
.mobileNav__list li .sub-menu li a {
color: #069aff;
font-size: 0.9rem;
}
.mobileNav__list li.button.button--primary {
margin-left: auto;
margin-right: auto;
}
.mobileNav__list li.button.button--primary a {
color: #000000;
}
.mobileNav__list li.menu-item-has-children > a {
padding-left: 26px;
}
.mobileNav__list li.menu-item-has-children .menu-item-open-submenu {
margin-left: 16px;
}
.mobileNav__list li.menu-item-has-children .menu-item-open-submenu img {
width: 10px;
height: 10px;
transform: rotate(90deg) translateY(-2px);
}
.mobileNav__list li.menu-item-has-children .menu-item-open-submenu:hover {
cursor: pointer;
}
.mobileNav__list li.menu-item-has-children .menu-item-open-submenu.open img {
transform: rotate(270deg) translateY(-2px);
}
.mobileNav__list li a {
color: #1e274a;
text-decoration: none;
font-size: 16px;
letter-spacing: 0.1em;
font-weight: 500;
line-height: 50px;
transition: color 0.12s linear;
}
.mobileNav__list li a:hover {
color: #069aff;
}
.mobileNav__lanugages {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 20px;
margin-top: 28px;
}
.mobileNav__lanugages li {
position: relative;
}
.mobileNav__lanugages li.current-lang a {
font-weight: 700;
}
.mobileNav__lanugages li a {
color: #1e274a;
text-transform: uppercase;
text-decoration: none;
font-size: 17px;
letter-spacing: 0.51px;
font-weight: 300;
line-height: 21px;
transition: color 0.12s linear;
}
.mobileNav__lanugages li a:hover {
color: #069aff;
}
.mobileNav__lanugages li::after {
content: "|";
position: absolute;
top: -2px;
right: 0;
transform: translateX(12px);
}
.mobileNav__lanugages li:last-of-type::after {
content: unset;
}
.mobileNav .button {
margin-right: auto;
margin-top: 10px;
font-size: 13px;
font-weight: 600;
}
.mobileNav__card__back {
background-color: transparent;
height: 40px;
width: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: none;
margin-left: -14px;
}
.mobileNav__card__title {
font-size: 17px;
letter-spacing: 0.5px;
font-weight: 700;
color: #1e274a;
display: block;
margin-bottom: 20px;
}
.mobileNav__card--default {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 40px;
}
.mobileNav__card--default li a {
font-size: 17px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
letter-spacing: 0.5px;
font-weight: 700;
color: #1e274a;
cursor: pointer;
transition: color 0.12s linear;
text-decoration: none;
}
.mobileNav__card--default li a:hover {
color: #069aff;
}
.mobileNav__card ul {
display: flex;
flex-direction: column;
gap: 4px;
}
.mobileNav__card ul li a {
font-size: 17px;
letter-spacing: 0.5px;
color: #1e274a;
cursor: pointer;
font-weight: 400;
text-decoration: none;
transition: color 0.12s linear;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.mobileNav__card ul li a:hover {
color: #069aff;
}
.mobileNav__card--none {
display: none;
}
.mobileNav__nav--lower {
margin-top: 28px;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.mobileNav__nav--lower#menu-menu-gorna-belka-lewo li a {
text-transform: uppercase;
}
.mobileNav__nav--lower li a {
font-size: 14px;
letter-spacing: 0.28px;
line-height: 20px;
color: #1e274a;
text-decoration: none;
transition: color 0.12s linear;
}
.mobileNav__nav--lower li a:hover {
cursor: pointer;
color: #069aff;
}
@media (min-width: 1380px) {
.mobileNav {
display: none;
}
}
.header {
background-color: #ffffff;
width: 100%;
z-index: 100;
height: 60px;
transition: padding-top 0.12s linear;
}
.header .navigation li a {
transition: color 0.12s linear;
}
.header .container {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
.header__navigation {
display: none;
}
.header__logo {
height: 18px;
}
.header__logo svg {
height: 100%;
width: auto;
display: block;
}
.header__logo svg path {
fill: #1E274A;
transition: fill 0.12s linear;
}
.header__lanugages {
display: none;
}
.header__lanugages li a {
transition: color 0.12s linear;
}
.header__search {
margin-left: auto;
margin-right: 10px;
background-color: transparent;
border: none;
height: 40px;
width: 40px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.header__search svg {
object-fit: contain;
display: block;
width: 14px !important;
height: 14px !important;
}
.header__search svg path {
fill: #1e274a !important;
transition: fill 0.12s linear;
}
.header__search:hover {
cursor: pointer;
}
.header__search--closeIcon {
display: none;
}
.header__search--closeIcon svg path {
stroke: #1e274a;
}
.header__search--open .header__search--openIcon {
display: none;
}
.header__search--open .header__search--closeIcon {
display: block;
}
.header .button {
display: none;
}
@media (min-width: 1100px) {
.header {
height: 96px;
}
.header__container {
max-width: 1840px;
padding: 0 20px;
}
.header__logo {
height: 30px;
}
.header__search {
margin-left: 0;
}
.header__navigation {
display: flex;
margin: 0 auto;
}
.header__hamburger {
display: none;
}
.header .button {
display: flex;
display: none;
}
.header__lanugages {
display: flex;
list-style: none;
margin: 0 16px;
}
.header__lanugages li a {
color: #1E274A;
text-decoration: none;
font-size: 17px;
letter-spacing: 0.51px;
line-height: 21px;
font-weight: 300;
transition: color 0.12s linear;
cursor: pointer;
}
.header__lanugages li a:hover {
color: #069aff;
}
.header__lanugages li:not(:last-of-type) {
position: relative;
padding-right: 14px;
}
.header__lanugages li:not(:last-of-type)::after {
content: " | ";
z-index: 1;
position: absolute;
top: 0;
right: 4px;
}
}
@media (min-width: 1380px) {
.header .button {
display: flex;
}
}
.footer {
background: linear-gradient(45deg, #151c33 0%, #1e274a 100%);
color: #ffffff;
display: block;
margin: 0;
overflow-x: clip;
}
.footer .container {
padding-left: 10px;
padding-right: 10px;
padding-top: 40px;
padding-bottom: 40px;
display: flex;
flex-direction: column;
gap: 24px;
}
.footer__logo {
height: 32px;
display: block;
}
.footer__logo svg {
height: 100%;
}
.footer__logo svg * path {
transition: fill 0.12s linear;
}
.footer__logo:hover svg * path {
fill: #069aff;
}
.footer__signature {
margin-top: 24px;
color: #ffffff;
max-width: 200px;
font-weight: 600;
font-size: 17px;
line-height: 1.5;
}
@media (min-width: 1900px) {
.footer__signature {
font-size: 20px;
}
}
.footer__address {
text-decoration: none;
font-style: normal;
margin-top: 32px;
font-weight: 300;
font-size: 17px;
line-height: 1.5;
}
@media (min-width: 1900px) {
.footer__address {
font-size: 20px;
}
}
.footer__address b {
font-weight: 600;
}
.footer__address a {
text-decoration: none;
color: #ffffff;
transition: color 0.12s linear;
}
.footer__address a:hover {
cursor: pointer;
color: #069aff;
}
.footer__label {
font-size: 16px;
font-weight: 600;
display: block;
margin-bottom: 16px;
}
.footer__navigation {
margin-top: 16px;
}
.footer__navigation ul {
list-style: none;
display: flex;
flex-direction: column;
}
.footer__navigation ul li a {
font-size: 17px;
line-height: 1.5;
font-weight: 300;
text-decoration: none;
color: #ffffff;
transition: color 0.12s linear;
}
@media (min-width: 1900px) {
.footer__navigation ul li a {
font-size: 20px;
}
}
.footer__navigation ul li a:hover {
cursor: pointer;
color: #069aff;
}
.footer__socials {
display: flex;
flex-direction: row;
gap: 10px;
z-index: 2;
}
.footer__social {
width: 40px;
height: 40px;
}
.footer__social:hover {
cursor: pointer;
}
.footer__copyright {
opacity: 0.5;
font-size: 17px;
line-height: 1.5;
font-weight: 100;
}
@media (min-width: 1900px) {
.footer__copyright {
font-size: 20px;
}
}
@media (min-width: 900px) {
.footer .container {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 32px;
}
.footer .container::after {
content: "";
aspect-ratio: 450/228;
position: absolute;
right: -230px;
bottom: 0px;
width: 460px;
background-repeat: no-repeat;
background-size: contain;
background-position: top;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/footer_decor_1.svg);
display: block;
}
.footer .container::before {
content: "";
aspect-ratio: 635/457;
position: absolute;
right: 100%;
z-index: 0;
bottom: 334px;
width: 635px;
background-repeat: no-repeat;
background-size: contain;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/footer_decor_2.svg);
display: block;
}
.footer .container > * {
position: relative;
z-index: 1;
}
.footer__copyright {
grid-column: 1/3;
}
}
@media (min-width: 1100px) {
.footer .container {
padding-top: 100px;
padding-bottom: 64px;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 32px;
row-gap: 32px;
}
.footer__navigation {
margin-top: 30px;
}
.footer__signature {
margin-top: 22px;
max-width: 250px;
}
.footer__address {
margin-top: 40px;
font-weight: 300;
}
.footer__socials {
grid-row: 2/3;
grid-column: 1/2;
}
.footer__label {
font-size: 20px;
}
.footer__copyright {
grid-column: 1/5;
grid-row: 2/3;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
}
@media (min-width: 1900px) {
.footer .container {
padding-left: 220px;
}
.footer .container::before {
right: unset;
left: -500px;
}
}
.card {
text-decoration: none;
height: 100%;
text-decoration: none;
position: relative;
}
.card__inner {
height: 100%;
display: grid;
grid-template-rows: auto 1fr;
width: 100%;
}
.card__image {
width: 100%;
max-width: 100%;
aspect-ratio: 16/9;
height: auto;
display: block;
object-fit: cover;
}
.card__content {
background-color: rgba(235, 235, 239, 0.5);
padding: 16px;
transition: background-color 0.12s linear;
display: flex;
flex-direction: column;
}
.card__header {
transition: color 0.12s linear;
color: #1e274a;
word-wrap: break-word;
word-break: break-word;
}
.card__text {
margin-top: 12px;
transition: color 0.12s linear;
line-height: 1.7;
font-size: 15px;
line-height: 1.5;
margin-bottom: 16px;
}
@media (min-width: 1900px) {
.card__text {
font-size: 16px;
}
}
.card__link {
margin-top: auto;
display: flex;
flex-direction: row;
position: relative;
z-index: 5;
align-items: center;
color: #1e274a;
gap: 8px;
transition: color 0.12s linear;
}
.card__link span {
transition: color 0.12s linear, background-color 0.12s linear;
border: 1px solid #069aff;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #069aff;
background-color: transparent;
}
.card:hover .card__content {
background-color: #1e274a;
}
.card:hover .card__text,
.card:hover .card__header {
color: #ffffff;
}
.card:hover .card__link {
color: #ffffff;
}
.card:hover .card__link span {
background-color: #069aff;
color: #ffffff;
}
.card:hover .card__hoverExcerpt {
opacity: 1;
}
.card__hoverExcerpt {
position: absolute;
opacity: 0;
transition: opacity 0.12s linear;
inset: 0;
padding: 32px 32px 64px 32px;
background-color: rgba(30, 39, 74, 0.95);
font-size: 15px;
line-height: 1.5;
}
@media (min-width: 1900px) {
.card__hoverExcerpt {
font-size: 16px;
}
}
@media (min-width: 1100px) {
.card__content {
padding: 20px;
}
}
@media (min-width: 1900px) {
.card__hoverExcerpt {
font-size: 17px;
line-height: 1.5;
}
}
@media (min-width: 1900px) and (min-width: 1900px) {
.card__hoverExcerpt {
font-size: 20px;
}
}
@media (min-width: 1900px) {
.card__text {
margin: 20px 0 24px;
}
.card__content {
padding: 30px;
}
.card__header span {
display: block;
}
}
.productCard {
border-radius: 24px;
padding: 24px;
width: 100%;
overflow: hidden;
border: 1px solid #069aff;
max-width: 350px;
text-decoration: none !important;
position: relative;
}
.productCard a {
text-decoration: none !important;
}
.productCard__header {
color: #069aff;
text-decoration: none !important;
}
.productCard .button {
margin-top: 24px;
}
.productCard__image {
display: block;
position: relative;
width: calc(100% + 48px);
}
.productCard__image img {
width: 100%;
position: relative;
left: -24px;
display: block;
bottom: -24px;
}
.productCard:hover {
border-color: #1e274a;
}
.productCard:hover .productCard__header {
color: #1e274a;
}
@media (min-width: 1100px) {
.productCard {
display: flex;
flex-direction: column;
height: auto;
}
.productCard__image {
margin-top: auto;
}
}
@media (min-width: 1380px) {
.productCard {
max-width: 440px;
padding: 50px;
border-radius: 40px;
}
.productCard__header {
letter-spacing: 0.54px;
text-decoration: none;
}
.productCard__image {
width: calc(100% + 100px);
}
.productCard__image img {
bottom: -50px;
left: -50px;
right: -50px;
}
}
.page {
margin: 24px 0;
}
.breadcrumbs * {
display: inline !important;
width: fit-content;
}
.breadcrumbs svg {
width: 15px;
height: 15px;
object-fit: contain;
display: block;
object-position: center;
}
.breadcrumbs a {
color: #ffffff;
text-decoration: none;
transition: 0.12s linear;
font-size: 14px;
font-weight: 300;
}
.breadcrumbs a svg path {
transition: fill 0.12s linear;
}
.breadcrumbs a:hover {
color: #069aff;
}
.breadcrumbs a:hover svg path {
fill: #069aff !important;
}
.breadcrumbs span {
color: #069aff;
font-size: 14px;
line-height: 1.3;
font-weight: 300;
}
.breadcrumbs--dark a {
color: #1e274a !important;
}
.breadcrumbs--dark a svg path {
fill: #1e274a !important;
}
.breadcrumbs--dark a:hover {
color: #069aff !important;
}
.breadcrumbs--block {
max-width: 1360px;
margin: -10px auto 10px;
}
.breadcrumbs > p:has(span a svg) + .breadcrumbs__separator + .breadcrumbs_last {
width: calc(100% - 70px);
display: block;
}
.singleContent__container .breadcrumbs {
margin-top: 0;
margin-bottom: 10px;
}
@media (min-width: 900px) {
.breadcrumbs {
display: flex;
flex-direction: row;
gap: 10px;
flex-wrap: wrap;
}
}
@media (min-width: 1100px) {
.singleContent__container .breadcrumbs--wide {
max-width: 100vw;
padding: 0 20px;
width: 1840px;
position: relative;
left: 50%;
transform: translateX(calc(-50vw + 10px));
}
}
@media (min-width: 1380px) {
.singleContent__container .breadcrumbs {
max-width: 1300px;
}
.singleContent__container .breadcrumbs--wide {
max-width: 116.2790697674vw;
padding: 0 20px;
width: 1840px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
}
@media (min-width: 1900px) {
.singleContent__container .breadcrumbs {
max-width: 1360px;
}
.singleContent__container .breadcrumbs--wide {
max-width: 1936.8421052632px;
padding: 0 20px;
width: 1840px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
}
.categoryCard {
background-color: #ffffff;
display: block;
border-radius: 40px;
overflow: hidden;
padding: 20px;
width: 100%;
aspect-ratio: 1/1;
text-decoration: none;
position: relative;
}
.categoryCard__badge {
font-size: 13px;
padding: 6px 12px;
border-radius: 20px;
color: #ffffff;
position: absolute;
top: 20px;
right: 20px;
}
.categoryCard__badge--new {
background-color: #069aff;
}
.categoryCard__badge--sale {
background-color: #e3235e;
}
.categoryCard__icon {
width: 32px;
height: 32px;
object-fit: contain;
object-position: center;
position: absolute;
top: 20px;
left: 20px;
}
.categoryCard__image {
width: calc(100% + 40px);
height: calc(75% + 20px);
object-fit: contain;
object-position: right;
margin-left: -20px;
display: block;
margin-right: -20px;
margin-top: -20px;
}
.categoryCard__title {
font-size: 16px;
font-weight: 700;
line-height: 30px;
margin-top: 10px;
color: #1e274a;
display: block;
text-align: center;
}
@media (min-width: 1900px) {
.categoryCard__title {
font-size: 20px;
}
}
.case-study-card {
display: flex;
flex-direction: column;
margin-top: 32px;
border-radius: 40px;
}
.case-study-card__sygnet {
height: 100px;
width: 100px;
background-color: #ffffff;
padding: 10px;
border-radius: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
object-fit: contain;
position: absolute;
bottom: -50px;
right: 0;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.case-study-card__image {
width: 100%;
height: auto;
display: block;
border-radius: 40px;
}
.case-study-card--secondary {
background-color: #1e274a;
color: #ffffff;
}
.case-study-card--secondary .case-study-card__item p {
color: #ffffff;
}
.case-study-card--light {
background-color: #efefef;
}
.case-study-card__images {
display: flex;
position: relative;
margin-bottom: 20px;
}
.case-study-card__content {
margin-top: 18px;
}
.case-study-card__item {
margin-bottom: 20px;
font-size: 15px;
line-height: 1.5;
}
@media (min-width: 1900px) {
.case-study-card__item {
font-size: 16px;
}
}
.case-study-card__item p {
display: block;
margin-top: 8px;
}
.case-study-card__item span {
display: block;
font-weight: 400;
display: block;
color: #069aff;
}
@media (min-width: 1380px) {
.case-study-card {
padding: 60px 0;
width: 100%;
display: flex;
align-items: stretch;
flex-direction: row;
gap: 0;
}
.case-study-card--inverted {
flex-direction: row-reverse;
}
.case-study-card--inverted .case-study-card__sygnet {
right: unset;
left: -90px;
}
.case-study-card--light {
flex-direction: row-reverse;
background-color: transparent;
}
.case-study-card--secondary {
position: relative;
}
.case-study-card--secondary::before {
content: "";
position: absolute;
background-color: #1e274a;
top: 0;
bottom: 0;
left: 50%;
z-index: -1;
width: 300vw;
height: 100%;
transform: translateX(-50%);
display: block;
}
.case-study-card__image {
height: 100%;
object-fit: cover;
}
.case-study-card__images {
width: 50%;
height: auto;
margin-bottom: 0;
}
.case-study-card__sygnet {
top: calc(50% - 90px);
right: -90px;
left: unset;
width: 180px;
height: 180px;
}
.case-study-card__item {
margin-bottom: 12px;
}
.case-study-card__content {
width: 50%;
padding: 0 0 0 150px;
}
.case-study-card__content span {
line-height: 69px;
}
.case-study-card__content p {
margin-top: -5px;
line-height: 30px;
}
.case-study-card--inverted .case-study-card__content {
padding: 0 150px 0 0;
}
}
@media (min-width: 1900px) {
.case-study-card {
margin-top: 0px;
margin-bottom: 0;
}
.case-study-card__item {
margin-bottom: 30px;
}
.case-study-card__content {
padding: 0 150px !important;
}
.case-study-card__content .button {
margin-top: 50px;
}
}
.formidable-form .form-field {
margin-bottom: 14px !important;
}
.formidable-form fieldset {
border: none;
}
.formidable-form form {
border: none;
margin-top: 12px;
}
.formidable-form form .wpcf7-response-output {
margin: 0;
margin-top: 20px;
font-family: Oswald;
font-size: 13px;
letter-spacing: 0.1em;
border: none;
color: #069aff;
padding: 0;
}
.formidable-form form input[type=file] {
display: none !important;
}
.formidable-form form textarea,
.formidable-form form input:not([type=checkbox], [type=file]) {
width: 100%;
border: none;
border: 1px solid #c4c4c4;
border-radius: 20px;
padding: 10px 40px;
resize: none;
font-family: Sora;
font-size: 16px;
font-weight: 300;
color: #1e274a;
font-size: 15px;
line-height: 1.5;
transition: color 0.12s linear, border-color 0.12s linear;
}
@media (min-width: 1900px) {
.formidable-form form textarea,
.formidable-form form input:not([type=checkbox], [type=file]) {
font-size: 16px;
}
}
.formidable-form form textarea::placeholder,
.formidable-form form input:not([type=checkbox], [type=file])::placeholder {
font-family: Sora;
font-size: 16px;
font-weight: 300;
color: #1e274a !important;
}
.formidable-form form textarea:focus,
.formidable-form form input:not([type=checkbox], [type=file]):focus {
outline: none;
color: #069aff !important;
border: 1px solid #069aff !important;
}
.formidable-form form textarea:focus::placeholder,
.formidable-form form input:not([type=checkbox], [type=file]):focus::placeholder {
color: #069aff !important;
}
.formidable-form form .wpcf7-not-valid-tip {
font-size: 13px;
width: 100% !important;
}
.formidable-form form .wpcf7-list-item {
margin-left: 0;
font-size: 13px;
line-height: 17px;
font-weight: 100;
margin-top: 12px;
}
.formidable-form form input[type=checkbox] {
accent-color: #069aff;
}
.formidable-form form button[type=submit] {
margin-top: 12px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
max-width: 100%;
width: fit-content;
text-align: center;
font-size: 14px;
line-height: 17px;
font-weight: 600;
text-decoration: none;
font-family: Sora;
border-radius: 25px;
min-height: 45px;
padding: 0 40px;
transition: border-color 0.15s linear, color 0.15s linear, background-color 0.15s linear;
color: #ffffff;
background-color: #1e274a;
border: 1px solid #1e274a;
}
.formidable-form form button[type=submit]:hover {
background-color: #ffffff;
color: #1e274a;
}
.formidable-form form .button {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.formidable-form .frm_checkbox {
display: flex;
flex-direction: row;
gap: 0px;
position: relative;
padding-top: 4px;
font-size: 13px;
line-height: 1.5;
color: #1e274a;
font-weight: 300;
}
.formidable-form .frm_checkbox label {
padding-left: 38px !important;
font-size: 13px;
line-height: 1.5;
color: #1e274a;
font-weight: 300;
text-indent: -16px;
}
.formidable-form .frm_checkbox label:hover {
cursor: pointer;
}
.formidable-form .frm_checkbox::after {
content: "";
position: absolute;
width: 22px;
height: 22px;
border: 1px solid #c4c4c4;
border-radius: 50%;
top: 0;
left: 0;
background-color: #ffffff;
pointer-events: none;
}
.formidable-form .frm_checkbox::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #069aff;
top: 4px;
left: 4px;
z-index: 2;
opacity: 0;
pointer-events: none;
}
.formidable-form .frm_checkbox:has(input[type=checkbox]:checked)::before {
opacity: 1;
}
.formidable-form .frm_checkbox input[type=checkbox] {
opacity: 0;
margin-right: 0;
}
.formidable-form .customFormidableFileUpload .frm_dropzone.frm_multi_upload.frm_clearfix.dz-clickable {
min-height: unset !important;
}
.formidable-form .customFormidableFileUpload .frm_dropzone .dz-message.needsclick {
display: flex;
border: 1px solid #069aff;
height: 40px;
border-radius: 20px;
background-color: transparent;
width: 100%;
justify-content: center;
margin-top: 12px !important;
flex-direction: row;
color: #069aff;
font-size: 15px;
line-height: 1.5;
font-weight: 600;
padding: 0 40px;
align-items: center;
}
@media (min-width: 1900px) {
.formidable-form .customFormidableFileUpload .frm_dropzone .dz-message.needsclick {
font-size: 16px;
}
}
.formidable-form .customFormidableFileUpload .frm_dropzone .dz-message.needsclick span:last-of-type {
display: block;
padding-left: 30px;
position: relative;
}
.formidable-form .customFormidableFileUpload .frm_dropzone .dz-message.needsclick span:last-of-type::before {
content: "";
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/download-solid.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 20px;
height: 20px;
left: 0;
top: 0;
bottom: 0;
position: absolute;
}
.formidable-form .customFormidableFileUpload .frm_dropzone .dz-message.needsclick svg {
display: none;
}
.formidable-form .customFormidableFileUpload div {
margin: 0 !important;
}
.formidable-form .customFormidableFileUpload > div:nth-of-type(3) {
margin-top: 8px !important;
}
.formidable-form--noBorder textarea,
.formidable-form--noBorder input:not([type=checkbox]) {
border: none;
}
@media (min-width: 900px) {
.formidable-form .customFormidableFileUpload {
display: flex !important;
align-items: center;
flex-direction: row;
gap: 0;
justify-content: space-between;
}
.formidable-form .customFormidableFileUpload .frm_dropzone .dz-message.needsclick {
width: fit-content !important;
margin-top: 0 !important;
}
.formidable-form .customFormidableFileUpload > div:nth-of-type(1) {
width: fit-content !important;
}
.formidable-form .customFormidableFileUpload > div:nth-of-type(1) p {
word-wrap: nowrap;
}
.formidable-form .customFormidableFileUpload > div:nth-of-type(2) {
width: fit-content !important;
}
.formidable-form .customFormidableFileUpload > div:nth-of-type(3) {
width: fit-content !important;
}
}
@media (min-width: 1380px) {
.formidable-form .customFormidableFileUpload {
display: flex !important;
align-items: center;
flex-direction: row;
gap: 0;
justify-content: space-between;
}
.formidable-form .customFormidableFileUpload .frm_dropzone .dz-message.needsclick {
width: fit-content !important;
margin-top: 0 !important;
}
.formidable-form .customFormidableFileUpload > div:nth-of-type(1) {
width: 24% !important;
}
.formidable-form .customFormidableFileUpload > div:nth-of-type(1) p {
word-wrap: nowrap;
}
.formidable-form .customFormidableFileUpload > div:nth-of-type(2) {
width: 37% !important;
}
.formidable-form .customFormidableFileUpload > div:nth-of-type(3) {
width: 33% !important;
margin-top: 0 !important;
}
}
@media (min-width: 1900px) {
.formidable-form .customFormidableFileUpload {
display: flex !important;
align-items: center;
flex-direction: row;
gap: 0;
justify-content: space-between;
}
.formidable-form .customFormidableFileUpload .frm_dropzone .dz-message.needsclick {
width: fit-content !important;
margin-top: 0 !important;
}
}
.error404 {
height: 80vh;
}
.error404__container {
padding-top: 100px;
padding-bottom: 100px;
overflow-y: clip;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
height: 100%;
position: relative;
}
.error404__container::after {
content: "";
aspect-ratio: 744/647;
width: 500px;
left: -200px;
bottom: 0;
position: absolute;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/error_path_1.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.error404__container::before {
content: "";
position: absolute;
aspect-ratio: 612/880;
width: 500px;
height: auto;
left: 80%;
top: 50%;
transform: translateY(-50%);
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/error_path_2.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.error404__heading {
font-size: 50px;
font-weight: 400;
line-height: 1;
color: #1e274a;
}
.error404__code {
font-size: 125px;
line-height: 1;
font-weight: 400;
color: #069aff;
}
.error404__text {
text-align: center;
}
.error404 .button {
margin-top: 50px;
}
@media (min-width: 900px) {
.error404__text {
max-width: 550px;
text-align: center;
}
}
@media (min-width: 1380px) {
.error404__container::after {
width: 750px;
top: 250px;
left: -130px;
}
.error404__container::before {
width: 900px;
left: 90%;
}
}
.searchForm {
opacity: 0;
pointer-events: none;
position: fixed;
inset: 0;
z-index: 30;
background-color: rgba(21, 28, 51, 0.94);
transition: all 0.12s linear;
}
.searchForm:hover {
cursor: pointer;
}
.searchForm--visible {
opacity: 1;
pointer-events: all;
}
.searchForm .container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.searchForm form {
width: 100%;
border: 1px solid #069aff;
height: 50px;
border-radius: 25px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 0 30px;
gap: 20px;
}
.searchForm form button {
margin-left: auto;
background-color: transparent;
border: none;
}
.searchForm form button svg path {
transition: fill 0.12s linear;
}
.searchForm form button:hover {
cursor: pointer;
}
.searchForm form button:hover svg path {
fill: #069aff;
}
.searchForm form input {
width: 100%;
background-color: transparent;
border: none;
font-size: 19px;
line-height: 1.5;
color: #ffffff;
font-weight: 600;
}
@media (min-width: 1900px) {
.searchForm form input {
font-size: 25px;
}
}
.searchForm form input::placeholder {
font-size: 19px;
line-height: 1.5;
color: #ffffff;
font-weight: 600;
}
@media (min-width: 1900px) {
.searchForm form input::placeholder {
font-size: 25px;
}
}
.searchForm form input:focus {
outline: none;
}
@media (min-width: 1380px) {
.searchForm form {
max-width: 950px;
margin-left: auto;
margin-right: auto;
height: 70px;
border-radius: 35px;
}
.searchForm form button {
width: 30px;
height: 30px;
}
.searchForm form button svg {
width: 100%;
height: 100%;
}
}
.megamenu {
position: absolute;
top: 0;
left: -200px;
border-radius: 26px;
display: flex;
padding: 18px;
flex-direction: column;
gap: 12px;
margin-top: 40px;
width: 1250px;
background-color: #ffffff;
border: 1px solid #069aff;
pointer-events: none;
opacity: 0;
}
.megamenu--visible {
pointer-events: all;
opacity: 1;
}
.megamenu ul {
display: grid;
grid-template-columns: repeat(6, calc(16.6666666667% - 8.3333333333px));
max-width: 100%;
align-items: stretch;
list-style: none;
gap: 10px;
}
.megamenu ul li {
width: 100%;
height: 100%;
}
.megamenu ul li a {
height: 100%;
color: #1e274a !important;
}
.megamenu__card {
width: 100%;
border: 1px solid #c4c4c4;
border-radius: 18px;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 12px;
}
.megamenu__card:hover {
border-color: #069aff;
}
.megamenu__image {
width: calc(100% + 24px);
display: block;
margin-top: -12px;
margin-left: -12px;
margin-right: -12px;
}
.megamenu__title {
text-align: center;
font-size: 15px;
margin-top: 10px;
overflow-wrap: break-word;
}
.megamenu .button {
margin-left: auto;
margin-right: auto;
grid-column: 1/7;
color: #ffffff !important;
}
.megamenu .button:hover {
color: #069aff !important;
}
@media (min-width: 1900px) {
.megamenu {
left: -150px;
margin-top: 60px;
gap: 20px;
}
}
.scrollTop {
position: fixed;
bottom: 32px;
right: 32px;
width: 32px;
height: 32px;
background-color: #069aff;
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
z-index: 10;
border: none;
border: 1px solid #069aff;
transition: background-color 0.3s;
}
.scrollTop svg {
width: 16px;
transform: rotate(90deg);
height: 16px;
transition: filter 0.3s;
}
.scrollTop:hover {
cursor: pointer;
background-color: #ffffff;
}
.scrollTop:hover svg path {
fill: #069aff !important;
}
@media (min-width: 1380px) {
.scrollTop {
bottom: 64px;
right: 64px;
}
}
.topbar {
display: none;
}
@media (min-width: 1100px) {
.topbar {
display: block;
background-color: #F5F5F7;
height: 50px;
z-index: 100;
position: relative;
}
.topbar__container {
display: flex;
flex-direction: row;
justify-content: space-between;
max-width: 1840px;
padding: 0 20px;
}
.topbar__nav {
display: flex;
flex-direction: row;
gap: 25px;
list-style: none;
}
.topbar__nav li a {
font-size: 14px;
font-weight: 400;
letter-spacing: 0.28px;
line-height: 55px;
color: #1E274A;
text-decoration: none;
transition: color 300ms linear;
position: relative;
}
.topbar__nav li a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
width: 100%;
background-color: #069aff;
opacity: 0;
}
.topbar__nav li a:hover {
color: #069aff;
}
.topbar__nav li.current-menu-item.menu-item-type-page a {
color: #069aff;
}
.topbar__nav li.current-menu-item.menu-item-type-page a::after {
opacity: 1;
}
.topbar__nav--uppercase li a {
text-transform: uppercase;
}
}
.megamenu2 {
display: none;
}
@media (min-width: 1100px) {
.megamenu2 {
display: block;
}
.megamenu2__container {
max-width: 100%;
}
.megamenu2__background {
position: fixed;
z-index: 90;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(21, 28, 51, 0.7);
opacity: 0;
cursor: pointer;
pointer-events: none;
transition: opacity 0.4s ease-in-out;
}
.megamenu2--open .megamenu2__background {
pointer-events: all;
opacity: 1;
}
.megamenu2__container {
z-index: 91;
position: relative;
}
.megamenu2__wrapper {
z-index: 91;
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
transition: all 0.4s ease-in-out;
}
.megamenu2__wrapper__container {
border: 1px solid #D3D3D6;
background-color: #ffffff;
border-radius: 0 0 20px 20px;
overflow: hidden;
transition: all 0.4s ease-in-out;
padding: 20px;
opacity: 0;
flex-direction: row;
height: auto;
display: flex;
}
.megamenu2__wrapper--opened {
opacity: 1;
pointer-events: all;
transition: all 0.4s ease-in-out;
}
.megamenu2__wrapper--opened .megamenu2__wrapper__container {
opacity: 1;
transition: all 0.4s ease-in-out;
}
.megamenu2__wrapper__close {
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 32px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
}
.megamenu2__column__header {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
}
.megamenu2__column--1 {
width: 30%;
position: relative;
padding-right: 20px;
}
.megamenu2__column--1::after {
content: "";
position: absolute;
top: -20px;
bottom: -20px;
right: 0;
width: 1px;
background-color: #D3D3D6;
}
.megamenu2__column--1 p {
font-size: 14px;
font-weight: 300;
}
.megamenu2__column--1 p:not(:last-of-type) {
margin-bottom: 20px;
}
.megamenu2__column--1 a {
color: #069aff;
margin-top: 25px;
text-decoration: underline;
position: relative;
font-size: 16px;
display: block;
width: fit-content;
padding-right: 20px;
font-weight: 600;
font-size: 16px;
}
.megamenu2__column--1 a::after {
content: "";
position: absolute;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #069aff;
top: 50%;
right: 10px;
border-radius: 4px;
transform: translateY(-50%);
}
.megamenu2__sub2 {
width: 30%;
list-style: none;
padding: 0 20px;
position: relative;
}
.megamenu2__sub2::after {
content: "";
position: absolute;
top: -20px;
bottom: -20px;
right: 0;
width: 1px;
background-color: #D3D3D6;
}
.megamenu2__sub2 ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
}
.megamenu2__sub2 ul li a {
color: #1e274a;
text-decoration: none;
font-size: 15px;
font-weight: 400;
line-height: 21px;
letter-spacing: 0.51px;
transition: 0.12s linear color;
}
.megamenu2__sub2 ul li a:hover {
color: #069aff;
}
.megamenu2__sub2 ul li.megamenu2__sub2__item--active a {
color: #069aff;
}
.megamenu2__sub2 ul li.megamenu2__sub2__item--sub_3 a {
position: relative;
display: block;
width: fit-content;
}
.megamenu2__sub2 ul li.megamenu2__sub2__item--sub_3 a:has(svg) {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
}
.megamenu2__sub2 ul li.megamenu2__sub2__item--sub_3 a svg {
width: 6px;
height: 12px;
}
.megamenu2__switchable {
width: 40%;
}
.megamenu2__switch {
display: none;
}
.megamenu2__switch--open {
display: grid;
}
.megamenu2__switch--single {
grid-template-columns: 100%;
position: relative;
height: 100%;
align-items: stretch;
}
.megamenu2__switch--single .megamenu2__column--4 {
padding-left: 20px;
}
.megamenu2__switch--sub {
grid-template-columns: 100%;
position: relative;
height: 100%;
align-items: stretch;
}
.megamenu2__cta {
background-color: #069aff;
padding: 20px 20px 0 20px;
border-radius: 20px;
position: relative;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.megamenu2__cta__header {
color: #ffffff;
font-size: 20px;
text-align: center;
}
.megamenu2__cta .button {
margin-top: -66px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.megamenu2__cta__image {
width: 80%;
display: block;
margin-top: auto;
margin-left: auto;
margin-right: auto;
}
.megamenu2__column--3 {
height: 100%;
padding-left: 20px;
}
.megamenu2__column--4 .megamenu2__contentBox::after {
content: unset;
}
.megamenu2__sub3 {
height: 100%;
width: 100%;
list-style: none;
padding: 0;
position: relative;
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
}
.megamenu2__sub3::after {
content: "";
position: absolute;
top: -20px;
bottom: -20px;
right: 0;
width: 1px;
}
.megamenu2__sub3 li a {
color: #1e274a;
text-decoration: none;
font-size: 15px;
font-weight: 400;
line-height: 21px;
letter-spacing: 0.51px;
transition: 0.12s linear color;
}
.megamenu2__sub3 li a:hover {
color: #069aff;
}
.megamenu2__sub3__item--active a {
color: #069aff !important;
}
.megamenu2__contentBox {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.megamenu2__contentBox::after {
content: "";
position: absolute;
top: -20px;
bottom: -20px;
right: -20px;
width: 1px;
background-color: #D3D3D6;
}
.megamenu2__contentBox[data-id] {
display: none;
}
.megamenu2__contentBox--open[data-id] {
display: flex;
}
.megamenu2__contentBox > img {
width: 100%;
max-width: 100%;
aspect-ratio: 16/7;
object-fit: cover;
object-position: center;
display: block;
border-radius: 20px;
}
.megamenu2__contentBox .megamenu2__content {
width: 100%;
}
.megamenu2__contentBox .megamenu2__content a {
color: #069aff;
margin-top: 25px;
text-decoration: underline;
position: relative;
font-size: 16px;
display: block;
width: fit-content;
padding-right: 20px;
font-weight: 600;
font-size: 16px;
}
.megamenu2__contentBox .megamenu2__content a::after {
content: "";
position: absolute;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #069aff;
top: 50%;
right: 10px;
border-radius: 4px;
transform: translateY(-50%);
}
.megamenu2__contentBox .megamenu2__content__images {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.megamenu2__contentBox .megamenu2__content__images img {
width: 100%;
aspect-ratio: 254/155;
height: auto;
border-radius: 10px;
}
.megamenu2__contentBox .megamenu2__content h2 {
color: #069aff;
font-weight: 600;
font-size: 20px;
line-height: 25px;
display: block;
margin-bottom: 11px;
margin-top: 15px;
}
.megamenu2__contentBox .megamenu2__content p {
font-size: 14px;
}
.megamenu2__contentBox--products .megamenu2__content__card {
background-color: #F6F6F6;
border-radius: 10px;
padding: 12px;
color: #1e274a;
font-size: 12px;
position: relative;
aspect-ratio: 254/155;
display: flex;
flex-direction: column;
justify-content: flex-end;
z-index: 1;
}
.megamenu2__contentBox--products .megamenu2__content__card img {
z-index: 2;
position: absolute;
bottom: 0;
top: -20px;
right: 0;
object-fit: contain;
object-position: right bottom;
width: fit-content;
height: calc(100% + 20px);
}
.megamenu2 .megamenu2__column.megamenu2__column--4 {
display: none;
}
}
@media (min-width: 1380px) {
.megamenu2 .megamenu2__column.megamenu2__column--4 {
display: block;
}
.megamenu2__container {
width: 1800px;
max-width: 100%;
}
.megamenu2__switchable {
width: 55%;
}
.megamenu2__switch {
display: none;
}
.megamenu2__switch--open {
display: grid;
}
.megamenu2__switch--single {
grid-template-columns: 60% 40%;
position: relative;
height: 100%;
align-items: stretch;
}
.megamenu2__switch--single .megamenu2__column--4 {
padding-left: 20px;
}
.megamenu2__switch--sub {
grid-template-columns: 45% 55%;
position: relative;
height: 100%;
align-items: stretch;
}
.megamenu2__column--3 {
height: 100%;
padding-right: 20px;
padding-left: 20px;
}
.megamenu2__column--1 {
width: 25%;
}
.megamenu2__column__header {
font-size: 25px;
}
.megamenu2__sub2 {
width: 20%;
}
.megamenu2__sub3::after {
background-color: #D3D3D6;
}
}
@media (min-width: 1900px) {
.megamenu2__sub2 {
padding: 0px 40px;
}
.megamenu2__sub2 ul li a {
font-size: 17px;
}
.megamenu2__sub2::after {
top: -40px;
bottom: -40px;
}
.megamenu2__contentBox::after {
top: -40px;
bottom: -40px;
}
.megamenu2__wrapper__container {
padding: 40px;
}
.megamenu2__column--1 {
padding-right: 40px;
}
.megamenu2__column--1::after {
top: -40px;
bottom: -40px;
}
.megamenu2__column--4 {
padding-left: 40px !important;
}
.megamenu2__column--3 {
padding: 0 40px;
}
.megamenu2__column--3 .megamenu2__contentBox::after {
right: -40px;
}
.megamenu2__sub3::after {
top: -40px;
bottom: -40px;
right: -40px;
}
.megamenu2__sub3 li a {
font-size: 17px;
}
.megamenu2__container {
max-width: 1800px;
}
} .hero {
height: 100vh;
position: relative;
}
.hero__background {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.hero__background::after {
content: "";
position: absolute;
inset: 0;
background-color: #151c33;
opacity: 75%;
display: block;
}
.hero__container {
position: relative;
z-index: 1;
justify-content: center;
display: flex;
flex-direction: column;
padding-bottom: 64px;
height: 100%;
padding-top: 100px;
}
.hero__slider {
margin-top: auto;
}
.hero__slide {
display: flex;
flex-direction: column;
}
.hero__slide .button {
color: #ffffff;
margin-top: 46px;
}
.hero__header {
font-size: 40px;
letter-spacing: 1.4px;
color: #ffffff;
font-weight: 600;
}
.hero__text {
font-size: 20px;
letter-spacing: 1.4px;
color: #ffffff;
margin-top: 22px;
}
.hero__scrolldown {
margin-top: auto;
margin-left: auto;
}
.hero__scrolldown svg * {
transition: stroke 0.12s linear;
}
.hero__scrolldown:hover svg * {
stroke: #069aff !important;
}
.hero__pagination {
display: flex;
margin-top: 48px;
gap: 24px;
flex-direction: row;
}
.hero__pagination .swiper-pagination-bullet {
width: 6px;
padding: 10px;
height: 6px;
border-radius: 3px;
display: block;
position: relative;
}
.hero__pagination .swiper-pagination-bullet:hover {
cursor: pointer;
}
.hero__pagination .swiper-pagination-bullet::after {
content: "";
position: absolute;
top: 7px;
background-color: #ffffff;
left: 7px;
bottom: 10px;
width: 6px;
height: 6px;
transition: width 0.12s linear;
border-radius: 3px;
}
.hero__pagination .swiper-pagination-bullet-active {
width: 70px;
}
.hero__pagination .swiper-pagination-bullet-active::after {
width: 50px;
}
@media (min-width: 900px) {
.hero {
height: 600px;
width: 100%;
}
.hero__container {
position: relative;
}
.hero__container::before {
content: "";
position: absolute;
aspect-ratio: 1156.67/929;
height: 100%;
top: 0;
bottom: 0;
left: -390px;
background-size: contain;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/heroDecor.svg);
}
.hero__container::after {
content: "";
position: absolute;
bottom: -50px;
aspect-ratio: 634/457;
height: 300px;
width: auto;
left: 100%;
background-size: contain;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/heroDecor2.svg);
}
.hero__slider {
max-width: 450px;
margin-left: 50px;
}
.hero__pagination {
margin-left: 50px;
}
.hero__scrolldown {
position: absolute;
bottom: 64px;
right: 0;
}
}
@media (min-width: 1100px) {
.hero {
height: 700px;
}
.hero__slider {
max-width: 500px;
transform: translateY(50px);
}
.hero__slider {
margin-left: 100px;
margin-bottom: auto;
}
.hero__pagination {
margin-left: 100px;
}
.hero__container::before {
left: -460px;
}
.hero__header {
font-size: 50px;
}
.hero__text {
font-size: 24px;
line-height: 30px;
}
}
@media (min-width: 1380px) {
.hero {
height: 880px;
max-height: 100vh;
}
.hero__container {
padding-bottom: 90px;
}
.hero__container::before {
left: -550px;
}
.hero__container::after {
height: 450px;
}
.hero__pagination {
padding-bottom: 50px;
}
.hero__slider {
max-width: 650px;
padding-top: 100px;
}
.hero__scrolldown {
right: 50px;
}
}
@media (min-width: 1900px) {
.hero {
height: 1080px;
}
.hero__header {
font-size: 70px;
}
.hero__text {
font-size: 30px;
line-height: 40px;
}
.hero__container {
max-width: 1360px;
}
.hero__container::before {
left: -740px;
}
}
.about__container {
padding-top: 64px;
padding-bottom: 64px;
display: flex;
flex-direction: column;
gap: 48px;
}
.about__graph {
width: 500px;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.about__graph img {
width: 100%;
height: auto;
display: block;
}
.about__content .button {
margin-top: 24px;
}
.about__text {
margin-top: 16px;
}
@media (min-width: 900px) {
.about__container {
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: center;
padding-top: 100px;
padding-bottom: 100px;
}
.about__content {
grid-column: 1/8;
}
.about__text {
margin-top: 42px;
}
.about .button {
margin-top: 30px;
}
.about__graph {
grid-column: 8/13;
max-width: unset;
}
}
@media (min-width: 1100px) {
.about__graph {
padding: 0 40px;
width: 100%;
}
}
@media (min-width: 1380px) {
.about__graph {
padding: 0 0px;
}
.about__content {
grid-column: 2/7;
}
.about__graph {
grid-column: 7/12;
}
}
@media (min-width: 1900px) {
.about__content {
grid-column: 2/7;
padding-left: 85px;
}
.about__graph {
padding: 0 50px;
grid-column: 7/12;
}
}
.blog {
margin: 50px 0;
}
.blog__header {
max-width: 1100px;
display: block;
margin-left: auto;
text-align: center;
margin-right: auto;
}
.blog__text {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 24px;
text-align: center;
}
.blog__cards {
margin-top: 24px;
display: flex;
flex-direction: column;
display: grid;
grid-template-columns: repeat(3, 250px);
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.blog__cards .card .card__header {
margin-bottom: 32px;
}
.blog__cards::hover {
cursor: pointer;
}
.blog__cards::-webkit-scrollbar {
display: none;
}
.blog .button {
margin-top: 32px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 600px) {
.blog__cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
align-items: stretch;
}
}
@media (min-width: 1100px) {
.blog__header, .blog__text {
display: block;
text-align: center;
}
.blog__cards {
margin-top: 32px;
}
}
@media (min-width: 1380px) {
.blog {
margin: 100px 0;
}
.blog__cards {
margin-top: 80px;
grid-template-columns: repeat(3, 1fr);
}
.blog .button {
margin-top: 50px;
}
.blog__container {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.blog__container > * {
grid-column: 2/12;
}
}
@media (min-width: 1900px) {
.blog {
margin: 90px 0 80px;
}
.blog__container {
margin-left: auto;
margin-right: auto;
max-width: 1360px;
}
.blog__container > * {
grid-column: 1/13;
}
.blog__row {
gap: 48px;
}
}
.cards__container {
padding-top: 32px;
padding-bottom: 32px;
}
.cards__text {
margin-top: 10px;
}
.cards__row {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 32px;
}
@media (min-width: 600px) {
.cards__row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
align-items: stretch;
}
}
@media (min-width: 1100px) {
.cards__header, .cards__text {
display: block;
text-align: center;
}
.cards__row {
margin-top: 32px;
}
}
@media (min-width: 1380px) {
.cards__container {
width: 1300px;
left: 50%;
transform: translateX(-50%);
position: relative;
}
.cards--small .cards__container {
margin-left: 0;
margin-right: 0;
width: 1080px;
}
.cards__row {
margin-top: 48px;
}
.cards__row--4 {
grid-template-columns: repeat(4, 1fr);
}
.cards__row--3 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1900px) {
.cards__container {
width: 1800px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.cards--small .cards__container {
width: 1360px;
}
.cards__row {
gap: 45px;
}
}
.results {
margin-top: 50px;
margin-bottom: 50px;
}
.results__container {
display: flex;
flex-direction: column;
gap: 32px;
}
.results__plain .results__text {
margin-top: 20px;
}
.results__banner {
overflow: hidden;
padding: 18px 10px 0;
border-radius: 8px;
background-color: #069aff;
color: #ffffff;
}
.results__banner .results__text {
color: #ffffff;
}
.results__banner .button {
margin-top: 20px;
}
.results__image {
margin-top: 24px;
width: 100%;
}
.results__image img {
display: block;
width: 100%;
transform: translateY(10px) translateX(20px);
}
.results__text {
margin-top: 12px;
}
.results__stats {
display: block;
margin-top: 12px;
}
.results__stats b {
display: block;
color: #069aff;
font-size: 30px;
margin: 10px 0;
line-height: 40px;
}
@media (min-width: 668px) {
.results__banner {
position: relative;
padding: 20px 200px 20px 20px;
}
.results__image {
position: absolute;
width: 200px;
height: 100%;
top: -22px;
bottom: -22px;
right: 0;
object-fit: cover;
}
.results__image img {
object-position: left;
height: 100%;
width: 100%;
transform: none;
object-fit: cover;
}
}
@media (min-width: 900px) {
.results__plain {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.results__plain .results__text {
grid-column: 1/2;
}
.results__plain .results__header {
grid-column: 1/2;
}
.results__stats {
margin-top: 0;
grid-column: 2/3;
grid-row: 1/3;
}
.results__banner {
position: relative;
padding: 30px 300px 30px 30px;
border-radius: 16px;
}
.results__image {
position: absolute;
width: 350px;
height: 100%;
top: 0px;
bottom: 0px;
right: -70px;
object-fit: cover;
}
.results__image img {
object-position: left;
height: 100%;
width: 100%;
transform: scale(1.2);
object-fit: cover;
}
}
@media (min-width: 1100px) {
.results {
margin-top: 80px;
margin-bottom: 80px;
}
.results__stats b {
font-size: 70px;
line-height: 80px;
font-weight: 400;
margin: 0;
}
.results__banner {
padding: 50px 350px 50px 50px;
overflow: visible;
overflow-x: clip;
}
.results__banner .button,
.results__banner .results__header,
.results__banner .results__text {
z-index: 2;
position: relative;
}
.results__banner__container {
position: relative;
}
.results__banner__container::after {
content: "";
position: absolute;
bottom: 100%;
background-repeat: no-repeat;
right: 390px;
z-index: 3;
aspect-ratio: 745/647;
height: 360px;
width: auto;
background-size: contain;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/resultsDecor.svg);
}
.results__image {
height: 100%;
width: 405px;
top: 0px;
bottom: 0px;
right: 0px;
margin-top: 0;
z-index: 0;
}
.results__image img {
width: auto;
height: 100%;
transform: scale(1);
}
}
@media (min-width: 1380px) {
.results__container {
gap: 120px;
}
.results__banner {
padding: 100px 610px 100px 100px;
}
.results__banner__container::after {
height: 450px;
z-index: -1;
right: 630px;
}
.results__plain {
padding: 0 100px;
column-gap: 50px;
}
.results__image {
width: 650px;
top: 0px;
bottom: 0px;
right: 0px;
z-index: 0;
}
}
@media (min-width: 1900px) {
.results__stats b {
font-size: 103px;
line-height: 130px;
font-weight: 400;
margin: 0;
}
.results__image {
width: 900px;
top: px;
bottom: 0;
right: 0px;
z-index: 0;
}
.results__image img {
transform: none;
}
.results__stats {
grid-column: 7/12;
grid-row: 1/3;
}
.results__plain {
padding: 0 0;
column-gap: 20px;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto 1fr;
}
.results__plain .results__header {
grid-column: 2/7;
grid-row: 1/2;
margin-top: 60px;
padding: 0 60px;
}
.results__plain .results__text {
grid-row: 2/3;
grid-column: 2/7;
padding: 0 60px;
}
.results__banner {
border-radius: 40px;
display: grid;
grid-template-columns: repeat(12, 1fr);
padding: 160px 0;
}
.results__banner__container::after {
height: 650px;
z-index: -1;
bottom: calc(100% - 100px);
right: 800px;
}
.results__banner .results__header {
grid-column: 2/8;
grid-row: 1/2;
padding: 0 60px;
}
.results__banner .results__text {
grid-column: 2/8;
margin-top: 30px;
grid-row: 2/3;
padding: 0 60px;
}
.results__banner .button {
grid-column: 2/8;
grid-row: 3/4;
margin: 0 60px;
margin-top: 40px;
}
}
.products {
margin-top: 50px;
margin-bottom: 50px;
}
.products__header {
text-align: center;
display: block;
}
.products__text {
text-align: center;
max-width: 1200px;
margin-top: 26px;
}
.products__row {
margin-top: 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
@media (min-width: 1100px) {
.products__text {
margin-left: auto;
margin-right: auto;
}
.products__row {
flex-direction: row;
align-items: stretch;
margin-top: 60px;
}
}
@media (min-width: 1380px) {
.products__container {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.products__container > * {
grid-column: 2/12;
}
}
@media (min-width: 1900px) {
.products {
margin-top: 40px;
}
.products__container {
display: block;
}
.products__row {
justify-content: center;
}
}
.quality {
margin-top: 50px;
margin-bottom: 40px;
}
.quality__container {
display: flex;
flex-direction: column;
gap: 32px;
}
.quality__slide {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.quality__slide img {
display: block;
width: 130px;
mix-blend-mode: color-burn;
object-fit: contain;
object-position: center;
height: 130px;
}
.quality .swiper-pagination {
display: flex;
margin-top: 48px;
justify-content: center;
gap: 24px;
flex-direction: row;
}
.quality .swiper-pagination .swiper-pagination-bullet {
width: 6px;
padding: 10px;
height: 6px;
border-radius: 3px;
display: block;
position: relative;
}
.quality .swiper-pagination .swiper-pagination-bullet:hover {
cursor: pointer;
}
.quality .swiper-pagination .swiper-pagination-bullet::after {
content: "";
position: absolute;
top: 7px;
background-color: #1e274a;
left: 7px;
bottom: 10px;
width: 6px;
height: 6px;
transition: width 0.12s linear;
border-radius: 3px;
}
.quality .swiper-pagination .swiper-pagination-bullet-active {
width: 70px;
}
.quality .swiper-pagination .swiper-pagination-bullet-active::after {
background-color: #069aff;
width: 50px;
}
@media (min-width: 1100px) {
.quality__container {
display: flex;
flex-direction: row;
align-items: center;
}
.quality__slider {
width: 50%;
}
.quality__header {
width: 50%;
}
}
@media (min-width: 1380px) {
.quality__container {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.quality__container > * {
grid-column: 2/12;
}
.quality__slider {
width: 100%;
grid-column: 7/12;
grid-row: 1/2;
}
.quality__header {
grid-column: 2/7;
grid-row: 1/2;
width: 100%;
}
}
@media (min-width: 1900px) {
.quality {
margin-top: 100px;
margin-bottom: 100px;
}
.quality__container {
max-width: 1360px;
}
.quality__slide img {
width: 150px;
height: 150px;
}
}
.cooperation {
margin-top: 40px;
margin-bottom: 50px;
padding-top: 40px;
}
.cooperation__container {
display: flex;
flex-direction: column;
gap: 30px;
}
.cooperation__text {
margin-top: 16px;
}
.cooperation .swiper-next.swiper-button-disabled svg,
.cooperation .swiper-prev.swiper-button-disabled svg {
opacity: 0.5;
}
.cooperation .swiper-next.swiper-button-disabled:hover,
.cooperation .swiper-prev.swiper-button-disabled:hover {
cursor: default;
}
.cooperation .swiper-next svg,
.cooperation .swiper-prev svg {
height: 40px;
width: 40px;
display: block;
object-fit: contain;
opacity: 0.2;
transition: opacity 0.12s linear;
}
.cooperation .swiper-next svg *,
.cooperation .swiper-prev svg * {
stroke: #1e274a !important;
transition: stroke 0.12s linear;
}
.cooperation .swiper-next:hover,
.cooperation .swiper-prev:hover {
cursor: pointer;
}
.cooperation .swiper-next:hover svg,
.cooperation .swiper-prev:hover svg {
opacity: 1;
}
.cooperation .swiper-next:hover svg *,
.cooperation .swiper-prev:hover svg * {
stroke: #1e274a !important;
}
.cooperation .swiper-prev svg {
transform: rotate(180deg);
}
.cooperation__navigation {
height: fit-content;
}
.cooperation__navigation > span {
font-size: 30px;
opacity: 0.5;
transform: scale(0.7);
}
.cooperation .swiper-navigation {
display: flex;
flex-direction: column;
height: fit-content;
gap: 0;
justify-content: flex-end;
}
.cooperation .swiper-navigation .swiper-pagination-bullet, .cooperation .swiper-navigation > span {
transition: all 0.12s linear;
text-align: right;
margin-left: auto;
width: fit-content;
color: #555555;
display: none;
transform-origin: right;
font-size: 30px;
opacity: 0.5;
transform: scale(0.7);
display: none;
}
.cooperation .swiper-navigation .swiper-pagination-bullet:hover, .cooperation .swiper-navigation > span:hover {
cursor: pointer;
color: #1e274a;
opacity: 1;
}
.cooperation .swiper-navigation .swiper-pagination-bullet:has(+ span.swiper-pagination-bullet + span.swiper-pagination-bullet-active), .cooperation .swiper-navigation > span:has(+ span.swiper-pagination-bullet + span.swiper-pagination-bullet-active) {
opacity: 0.7;
transform: scale(0.8);
display: block;
}
.cooperation .swiper-navigation .swiper-pagination-bullet:has(+ span.swiper-pagination-bullet-active), .cooperation .swiper-navigation > span:has(+ span.swiper-pagination-bullet-active) {
opacity: 0.85;
transform: scale(0.9);
display: block;
}
.cooperation .swiper-navigation .swiper-pagination-bullet-active, .cooperation .swiper-navigation > span-active {
display: block;
opacity: 1;
transform: scale(1);
}
.cooperation .swiper-navigation .swiper-pagination-bullet-active + span.swiper-pagination-bullet, .cooperation .swiper-navigation > span-active + span.swiper-pagination-bullet {
opacity: 0.85;
transform: scale(0.9);
display: block;
}
.cooperation .swiper-navigation .swiper-pagination-bullet-active + span.swiper-pagination-bullet + span:not(.swiper-pagination-bullet), .cooperation .swiper-navigation > span-active + span.swiper-pagination-bullet + span:not(.swiper-pagination-bullet) {
display: block;
}
.cooperation .swiper-navigation .swiper-pagination-bullet-active + span.swiper-pagination-bullet + span.swiper-pagination-bullet, .cooperation .swiper-navigation > span-active + span.swiper-pagination-bullet + span.swiper-pagination-bullet {
opacity: 0.7;
display: block;
transform: scale(0.8);
}
.cooperation .swiper-slide {
background-color: #ffffff;
display: flex;
flex-direction: column;
gap: 20px;
}
.cooperation .swiper-slide .swiper-prev,
.cooperation .swiper-slide .swiper-next {
pointer-events: none;
}
.cooperation .swiper-slide-active {
z-index: 2;
}
.cooperation .swiper-slide-active .swiper-prev,
.cooperation .swiper-slide-active .swiper-next {
pointer-events: all;
}
.cooperation .swiper-slide h3 {
margin-bottom: 12px;
font-weight: 400;
}
.cooperation__slider {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}
@media (min-width: 668px) {
.cooperation {
overflow: clip-x;
}
.cooperation__slider {
margin-top: 70px;
gap: 60px;
position: relative;
}
.cooperation__slider::after {
content: "";
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/coopDecor.svg);
aspect-ratio: 610/880;
height: 700px;
width: auto;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
left: calc(100% + 32px);
top: calc(50% - 350px);
}
}
@media (min-width: 1100px) {
.cooperation__container {
display: flex;
align-items: center;
flex-direction: row;
gap: 40px;
}
.cooperation__slider {
margin-top: 0;
width: 50%;
gap: 40px;
}
.cooperation .swiper-navigation {
gap: 8px;
}
.cooperation .swiper-navigation .swiper-pagination-bullet {
font-size: 50px;
font-weight: 300;
line-height: 68px;
}
}
@media (min-width: 1380px) {
.cooperation {
padding-top: 0;
margin-top: 100px;
margin-bottom: 100px;
}
.cooperation__container {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.cooperation .swiper-navigation {
gap: 10px;
}
.cooperation .swiper-navigation .swiper-pagination-bullet {
font-size: 60px;
font-weight: 300;
line-height: 80px;
}
.cooperation .swiper-prev,
.cooperation .swiper-next {
height: 48px;
width: 48px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.cooperation .swiper-prev svg,
.cooperation .swiper-next svg {
height: calc(100% - 2px);
width: calc(100% - 2px);
}
.cooperation .swiper-slide {
gap: 24px;
}
.cooperation .swiper-slide h3 {
font-size: 25px;
line-height: 32px;
color: #1e274a;
font-weight: 400;
}
.cooperation__slider {
gap: 60px;
grid-column: 7/13;
width: 100%;
}
.cooperation__content {
width: 100%;
padding-right: 100px;
grid-column: 2/7;
}
}
@media (min-width: 1900px) {
.cooperation__container {
max-width: 1360px;
gap: 50px;
grid-template-columns: repeat(10, 1fr);
}
.cooperation .swiper-slide {
gap: 48px;
}
.cooperation .swiper-prev,
.cooperation .swiper-next {
height: 60px;
width: 60px;
}
.cooperation__content {
grid-column: 1/6;
}
.cooperation__slider {
grid-column: 6/11;
}
.cooperation__slider::after {
background-size: contain;
height: 880px;
width: 80px;
background-position: left center;
background-size: cover;
top: calc(50% - 440px);
left: calc(100% + 50px);
}
}
.example {
margin-top: 70px;
margin-bottom: 70px;
}
.example__header {
text-align: center;
display: block;
}
.example__container {
display: flex;
flex-direction: column;
}
.example__card {
display: flex;
flex-direction: column;
padding: 30px;
margin-top: 32px;
border-radius: 40px;
}
.example__sygnet {
height: 100px;
width: 100px;
background-color: #ffffff;
padding: 10px;
border-radius: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
object-fit: contain;
position: absolute;
bottom: -50px;
right: calc(50% - 50px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.example__image {
width: 100%;
height: auto;
display: block;
border-radius: 40px;
}
.example__secondary {
background-color: #1e274a;
color: #ffffff;
}
.example__secondary .example__item p {
color: #ffffff;
}
.example__light {
background-color: #efefef;
}
.example__images {
display: flex;
position: relative;
margin-bottom: 50px;
}
.example__content {
margin-top: 24px;
}
.example__item {
margin-bottom: 20px;
font-size: 15px;
line-height: 1.5;
}
@media (min-width: 1900px) {
.example__item {
font-size: 16px;
}
}
.example__item p {
display: block;
margin-top: 12px;
}
.example__item span {
display: block;
font-weight: 400;
display: block;
color: #069aff;
}
@media (min-width: 1100px) {
.example__container {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 24px;
}
.example__header {
grid-column: 1/3;
}
.example__light {
grid-column: 1/2;
grid-row: 2/3;
}
.example__secondary {
grid-column: 2/3;
grid-row: 2/3;
}
}
@media (min-width: 1380px) {
.example__container {
display: flex;
flex-direction: column;
}
.example__card {
padding: 60px 0;
width: 100%;
display: flex;
align-items: stretch;
flex-direction: row;
gap: 0;
}
.example__header span {
display: block;
}
.example__light {
flex-direction: row-reverse;
background-color: transparent;
padding-top: 0;
padding-bottom: 0;
}
.example__light .example__sygnet {
right: unset;
left: -90px;
}
.example__secondary {
position: relative;
}
.example__secondary::before {
content: "";
position: absolute;
background-color: #1e274a;
top: 0;
bottom: 0;
left: 50%;
z-index: -1;
width: 300vw;
height: 100%;
transform: translateX(-50%);
display: block;
}
.example__secondary::after {
content: "";
position: absolute;
aspect-ratio: 460/230;
width: 300px;
height: auto;
right: 0;
top: 0;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/example_decor.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
z-index: 1;
}
.example__image {
height: 100%;
object-fit: cover;
}
.example__images {
width: 50%;
height: auto;
margin-bottom: 0;
}
.example__sygnet {
top: calc(50% - 90px);
right: -90px;
left: unset;
width: 180px;
height: 180px;
}
.example__item {
margin-bottom: 10px;
}
.example__light .example__content {
padding-right: 150px;
padding-left: 50px;
}
.example__secondary .example__content {
padding-left: 150px;
padding-right: 50px;
}
.example__content {
width: 50%;
margin-top: 0;
display: flex;
flex-direction: column;
}
.example__content .heading-large {
line-height: 1.2;
}
.example__content::before {
content: "";
display: block;
margin-bottom: auto;
height: 40px;
}
.example__content .button {
margin-top: auto;
justify-self: flex-end;
}
}
@media (min-width: 1900px) {
.example__header {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.example__card {
margin-top: 54px;
margin-bottom: 0;
}
.example__light .example__content {
padding: 0px 150px;
}
.example__secondary .example__content {
padding: 0px 150px;
}
}
.benefits {
margin-top: 50px;
margin-bottom: 50px;
}
.benefits__header {
text-align: center;
display: block;
}
.benefits__text {
text-align: center;
margin-top: 12px;
}
.benefits__cards {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 40px;
}
.benefits__card {
aspect-ratio: 1/1;
border: 1px solid #069aff;
border-radius: 40px;
width: 100%;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.benefits__card:hover .benefits__icon {
display: none;
}
.benefits__card:hover .benefits__name {
display: none;
}
.benefits__card:hover .benefits__content {
display: flex;
}
.benefits__icon {
height: 32px;
width: 32px;
margin-top: 20px;
margin-left: 20px;
}
.benefits__name {
margin: 20px 20px 20px;
font-size: 14px;
}
.benefits__content {
background-color: #069aff;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
font-size: 20px;
height: 100%;
line-height: 30px;
color: #ffffff;
}
@media (min-width: 668px) {
.benefits__cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.benefits__icon {
margin-top: 50px;
margin-left: 50px;
height: 64px;
width: 64px;
}
.benefits__name {
font-size: unset;
margin: 20px 50px 40px;
}
}
@media (min-width: 900px) {
.benefits__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
.benefits__card {
max-width: 100%;
width: 100%;
aspect-ratio: 1/1.5;
}
}
@media (min-width: 1100px) {
.benefits__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
.benefits__card {
max-width: 100%;
width: 100%;
aspect-ratio: 1/1.1;
}
}
@media (min-width: 1380px) {
.benefits {
margin: 100px 0;
}
.benefits__container {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.benefits__container > * {
grid-column: 2/12;
}
.benefits__cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
align-items: stretch;
}
.benefits__card {
max-width: 100%;
width: 100%;
aspect-ratio: 1/1.1;
}
.benefits__icon {
height: 60px;
width: 60px;
margin-top: 50px;
margin-left: 50px;
}
.benefits__name {
margin: 20px 50px 40px;
}
}
@media (min-width: 1900px) {
.benefits__header {
max-width: 950px;
margin-left: auto;
margin-right: auto;
}
.benefits__container {
max-width: 1360px;
}
.benefits__container > * {
grid-column: 1/13;
}
.benefits__cards {
margin-top: 60px;
}
.benefits__card {
aspect-ratio: 1/1;
}
}
.testimonies {
position: relative;
margin: 60px 0;
}
.testimonies::after {
content: "";
position: absolute;
width: 300vw;
height: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0.5;
background-color: #ebebef;
top: 0;
bottom: 0;
}
.testimonies__container {
z-index: 1;
position: relative;
padding-top: 50px;
padding-bottom: 50px;
}
.testimonies__header {
text-align: center;
display: block;
max-width: 950px;
margin-left: auto;
margin-right: auto;
}
.testimonies__slider {
margin-top: 32px;
}
.testimonies__slider > .swiper-prev,
.testimonies__slider > .swiper-next {
display: none;
}
.testimonies .swiper .swiper-navigation {
display: flex;
gap: 12px;
position: relative;
z-index: 10;
align-items: center;
flex-direction: row;
}
.testimonies .swiper .swiper-navigation .swiper-pagination-bullet {
width: 6px;
padding: 10px;
height: 6px;
border-radius: 3px;
display: block;
position: relative;
}
.testimonies .swiper .swiper-navigation .swiper-pagination-bullet:hover {
cursor: pointer;
}
.testimonies .swiper .swiper-navigation .swiper-pagination-bullet::after {
content: "";
position: absolute;
top: 7px;
background-color: #1e274a;
left: 7px;
bottom: 10px;
width: 6px;
height: 6px;
transition: width 0.12s linear;
border-radius: 3px;
}
.testimonies .swiper .swiper-navigation .swiper-pagination-bullet-active {
width: 70px;
}
.testimonies .swiper .swiper-navigation .swiper-pagination-bullet-active::after {
background-color: #069aff;
width: 50px;
}
.testimonies .swiper .swiper-controls {
margin-top: 40px;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
z-index: 10;
justify-content: space-between;
}
.testimonies .swiper .swiper-controls .swiper-prev,
.testimonies .swiper .swiper-controls .swiper-next {
height: 60px;
width: 60px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.testimonies .swiper .swiper-controls .swiper-prev svg *,
.testimonies .swiper .swiper-controls .swiper-next svg * {
stroke: #069aff !important;
transition: stroke 0.12s linear;
}
.testimonies .swiper .swiper-controls .swiper-prev:hover,
.testimonies .swiper .swiper-controls .swiper-next:hover {
cursor: pointer;
}
.testimonies .swiper .swiper-controls .swiper-prev:hover svg *,
.testimonies .swiper .swiper-controls .swiper-next:hover svg * {
stroke: #1e274a !important;
}
.testimonies .swiper .swiper-controls .swiper-next svg {
transform: rotate(-90deg);
}
.testimonies .swiper .swiper-controls .swiper-prev svg {
transform: rotate(90deg);
}
.testimonies .swiper .swiper-slide {
padding-bottom: 20px;
}
.testimonial {
background-color: #ffffff;
border-radius: 40px;
padding: 20px;
display: flex;
flex-direction: column-reverse;
gap: 32px;
position: relative;
}
.testimonial::after {
content: "";
position: absolute;
aspect-ratio: 135/110;
width: 100px;
height: auto;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/quote.svg);
background-repeat: no-repeat;
background-size: contain;
bottom: -20px;
right: 32px;
}
.testimonial__person {
display: grid;
grid-template-columns: 80px 1fr;
column-gap: 20px;
}
.testimonial__person img {
width: 80px;
height: 80px;
object-fit: cover;
display: block;
grid-column: 1/2;
grid-row: 1/3;
}
.testimonial__text .button {
margin-top: 32px;
}
@media (min-width: 1100px) {
.testimonial {
display: grid;
grid-template-columns: 2fr 1fr;
padding: 40px;
}
.testimonial__person {
grid-template-rows: auto 1fr;
}
.testimonies .swiper .swiper-navigation {
gap: 24px;
}
.testimonies .swiper .swiper-controls {
justify-content: center;
gap: 50px;
}
}
@media (min-width: 1380px) {
.testimonies {
width: 1300px;
left: 50%;
transform: translateX(-50%);
position: relative;
}
.testimonies__container {
padding-top: 80px;
padding-bottom: 80px;
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.testimonies__container > * {
grid-column: 2/12;
}
.testimonies__slider {
margin-top: 50px;
}
.testimonies__header span {
display: block;
}
.testimonial {
column-gap: 70px;
padding: 70px;
}
.testimonial::after {
right: 166px;
bottom: -34px;
width: 135px;
}
.testimonial__person {
grid-template-columns: 90px 1fr !important;
}
.testimonial__person img {
width: 90px !important;
height: 90px !important;
}
.testimonial__name {
margin-top: 13px !important;
}
}
@media (min-width: 1900px) {
.testimonies {
width: 1800px;
margin: 100px auto;
}
.testimonies__container > * {
grid-column: 1/13;
}
.testimonies__slider {
display: flex;
flex-direction: row;
margin-top: 80px;
align-items: center;
}
.testimonies .swiper {
max-width: 1360px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.testimonial {
column-gap: 70px;
padding: 70px;
}
.testimonial::after {
right: 166px;
bottom: -34px;
width: 135px;
}
.testimonial__person {
grid-template-columns: 135px 1fr !important;
}
.testimonial__person img {
width: 135px !important;
height: 135px !important;
}
.testimonial__name {
margin-top: 13px !important;
}
}
.contact {
margin: 0 0 50px;
}
.contact__image {
display: none;
}
.contact__container {
border-radius: 40px;
padding: 30px 12px 12px;
background-color: #069aff;
}
.contact__header {
color: #ffffff;
display: block;
text-align: center;
}
.contact__text {
color: #ffffff;
display: block;
text-align: center;
margin-top: 12px;
}
.formSwitcher {
margin-top: 30px;
}
.formSwitcher__row {
display: flex;
flex-direction: row;
}
.formSwitcher__title {
width: 50%;
text-transform: uppercase;
text-align: center;
color: #ffffff;
border-radius: 30px 30px 0 0px;
padding: 20px 30px;
position: relative;
}
.formSwitcher__title::after {
content: "";
position: absolute;
width: 100%;
height: 100px;
top: 100%;
left: 0;
right: 0;
}
.formSwitcher__title--active {
background-color: #ffffff;
font-weight: 600;
color: #1e274a;
}
.formSwitcher__title--active::after {
background-color: #ffffff;
}
.formSwitcher__title:hover {
cursor: pointer;
}
.formSwitcher__content {
background-color: #ffffff;
border-radius: 30px;
position: relative;
padding: 20px;
z-index: 2;
display: none;
}
.formSwitcher__content fieldset {
padding-bottom: 0 !important;
}
.formSwitcher__content--active {
display: block;
}
@media (min-width: 900px) {
.contact__inner {
position: relative;
}
.contact__inner::after {
content: "";
position: absolute;
width: 1060px;
height: auto;
aspect-ratio: 1060/520;
left: -400px;
top: calc(50% - 260px);
background-repeat: no-repeat;
background-size: contain;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/on.svg);
z-index: 0;
}
.contact__inner > * {
position: relative;
z-index: 1;
}
}
@media (min-width: 1380px) {
.contact {
position: relative;
width: 1300px;
left: 50%;
transform: translateX(-50%);
margin: 100px 0px;
}
.contact__image {
display: block;
width: 100%;
position: relative;
height: 100%;
}
.contact__image img {
position: absolute;
height: calc(100% + 140px);
width: auto;
object-fit: contain;
bottom: -12px;
display: block;
left: -70px;
}
.contact__inner {
display: grid;
gap: 50px;
grid-template-columns: 2fr 3fr;
}
.formSwitcher .formidable-form form {
margin-top: 24px;
}
.formSwitcher__content {
padding: 30px 40px;
}
.formSwitcher__title {
padding: 20px 40px;
}
}
@media (min-width: 1900px) {
.contact {
position: relative;
width: 1800px;
left: 50%;
transform: translateX(-50%);
}
.contact .container {
padding: 70px;
}
.contact__header {
margin: 0 30px;
}
.contact__text {
margin-top: 30px;
}
.contact__forms {
margin-top: 74px;
}
.contact__inner {
grid-template-columns: repeat(12, 1fr);
gap: 0;
}
.contact__inner::after {
left: -300px;
}
.contact__image {
grid-column: 1/7;
}
.contact__image img {
bottom: -70px;
left: 0;
height: calc(100% + 180px);
}
.contact__image--right img {
bottom: 0px;
left: -60px;
height: calc(100% + 160px);
width: calc(100% + 100px);
object-position: right;
}
.contact__content {
grid-column: 7/13;
margin-right: 70px;
}
}
.faq {
position: relative;
}
.faq::after {
content: "";
position: absolute;
top: 0;
transform: translateX(-50%);
width: 300vw;
left: 50%;
height: 1px;
background-color: #c4c4c4;
}
.faq__container {
padding-top: 50px;
padding-bottom: 50px;
display: flex;
flex-direction: column;
gap: 48px;
}
.faq__text {
margin-top: 8px;
}
.faq__questions {
display: flex;
flex-direction: column;
gap: 24px;
}
.faq__question {
border: 1px solid #069aff;
border-radius: 24px;
}
.faq__question summary {
padding: 10px 40px 10px 20px;
border-radius: 16px;
position: relative;
}
.faq__question summary:hover {
cursor: pointer;
}
.faq__question summary:hover::after {
transform: rotate(0deg);
}
.faq__question summary::after {
content: "";
position: absolute;
top: calc(50% - 4px);
right: 16px;
height: 0;
width: 0;
border-top: 8px solid #069aff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
transition: transform 0.12s linear;
will-change: transform;
}
.faq__question .content {
padding: 10px 20px;
}
.faq__question[open] summary::after {
transform: rotate(180deg);
}
.faq__question[open] summary:hover {
cursor: pointer;
}
.faq__question[open] summary:hover::after {
transform: rotate(0deg);
}
details {
appearance: none;
background-image: none;
}
details summary {
list-style: none;
appearance: none;
background-image: none;
}
details summary::-webkit-details-marker {
display: none;
}
@media (min-width: 1380px) {
.faq {
width: 1300px;
left: 50%;
position: relative;
transform: translateX(-50%);
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.faq > * {
grid-column: 2/12;
}
.faq__container {
padding-top: 80px;
padding-bottom: 100px;
display: grid;
grid-template-columns: 1fr 3fr;
}
}
@media (min-width: 1900px) {
.faq {
width: 1360px;
}
.faq > * {
grid-column: 1/13;
}
.faq__container {
max-width: 1360px;
grid-template-columns: 1fr 830px;
gap: 200px;
}
.faq__header {
margin-top: 20px;
}
} .productHero {
position: relative;
max-width: 100%;
margin-bottom: 200px;
}
.productHero__background {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.productHero__background img {
width: 100%;
height: 100%;
object-fit: cover;
}
.productHero__background::after {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: #151c33;
opacity: 90%;
display: block;
}
.productHero__container {
position: relative;
z-index: 1;
color: #ffffff;
padding-bottom: 64px;
height: 100%;
padding-top: 28px;
}
.productHero__container::before {
content: "";
aspect-ratio: 460/230;
width: 250px;
height: auto;
background-repeat: no-repeat;
z-index: 1;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/product_decor.svg);
background-size: contain;
position: absolute;
top: 0;
left: -50px;
}
.productHero__container > * {
position: relative;
z-index: 2;
}
.productHero__content {
display: flex;
flex-direction: column;
margin-top: 32px;
}
.productHero__header {
text-align: center;
display: block;
}
.productHero__list {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
}
.productHero__item {
border: 1px solid #c4c4c4;
padding: 12px 20px 12px 50px;
border-radius: 20px;
transition: all 0.12s linear;
position: relative;
}
.productHero__item::after {
content: "";
position: absolute;
top: calc(50% - 5px);
left: 20px;
background-color: #069aff;
width: 10px;
height: 10px;
border-radius: 5px;
}
.productHero__item:hover {
background-color: #069aff;
border-color: #069aff;
cursor: pointer;
}
.productHero__item:hover::after {
background-color: #1e274a;
}
.productHero__signatures {
display: flex;
flex-direction: row;
background-color: #ebebef;
align-items: center;
justify-content: center;
padding: 10px 4px;
gap: 10px;
margin-top: 32px;
border-radius: 40px;
}
.productHero__signaturecontainer {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.productHero__signaturecontainer:hover .productHero__tooltip {
transition: opacity 0.12s linear 0.5s;
opacity: 1;
}
.productHero__tooltip {
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(50% + 10px) calc(100% - 10px), 50% 100%, calc(50% - 10px) calc(100% - 10px), 0% calc(100% - 10px));
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translate(-50%, 0);
font-size: 14px;
color: #1e274a;
background-color: #ffffff;
padding: 10px 10px 20px;
text-align: center;
white-space: nowrap;
pointer-events: none;
opacity: 0;
}
.productHero__signature--text {
color: #1e274a;
text-align: center;
}
.productHero__signature--image {
height: 28px;
display: block;
}
.productHero__banner {
background-color: #f6f6f6;
margin-top: 40px;
margin-bottom: -200px;
border-radius: 40px;
padding: 24px;
}
.productHero__more {
margin-top: 16px;
border: none;
margin-left: auto;
display: flex;
flex-direction: row;
color: #1e274a;
text-decoration: none;
background-color: transparent;
gap: 10px;
align-items: center;
width: fit-content;
}
.productHero__more:hover {
cursor: pointer;
}
.productHero details summary:hover {
cursor: pointer;
}
.productHero details summary .productHero__more #plus {
display: block;
}
.productHero details summary .productHero__more #minus {
display: none;
}
.productHero details .content {
margin-top: 12px;
}
.productHero details[open] summary .productHero__more #plus {
display: none;
}
.productHero details[open] summary .productHero__more #minus {
display: block;
}
.heroSlider {
width: 100%;
}
.heroSlider__slide {
width: 100%;
display: block;
z-index: 3;
object-fit: contain;
position: relative;
aspect-ratio: 4/3;
border-radius: 50px;
object-position: right;
}
.heroSlider__slide--center {
object-position: center;
}
.heroSlider__controls {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 24px;
margin-top: 24px;
}
.heroSlider__next, .heroSlider__prev {
background-color: transparent;
border: none;
height: 40px;
width: 40px;
}
.heroSlider__next svg, .heroSlider__prev svg {
width: 100%;
height: 100%;
}
.heroSlider__next:hover, .heroSlider__prev:hover {
cursor: pointer;
}
.heroSlider__prev {
transform: rotate(90deg);
}
.heroSlider__next {
transform: rotate(-90deg);
}
.heroSlider__pagination {
display: flex;
gap: 10px;
flex-direction: row;
}
.heroSlider__pagination .swiper-pagination-bullet {
width: 6px;
padding: 10px;
height: 6px;
border-radius: 3px;
display: block;
position: relative;
}
.heroSlider__pagination .swiper-pagination-bullet:hover {
cursor: pointer;
}
.heroSlider__pagination .swiper-pagination-bullet::after {
content: "";
position: absolute;
top: 7px;
background-color: #ffffff;
left: 7px;
bottom: 10px;
width: 6px;
height: 6px;
transition: width 0.12s linear;
border-radius: 3px;
}
.heroSlider__pagination .swiper-pagination-bullet-active {
width: 70px;
}
.heroSlider__pagination .swiper-pagination-bullet-active::after {
width: 50px;
background-color: #069aff;
}
.heroSlider .swiper-slide {
position: relative;
opacity: 0 !important;
}
.heroSlider .swiper-slide::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 50px;
border: 1px solid #069aff;
z-index: 1;
border-radius: 50px;
}
.heroSlider .swiper-slide-active {
opacity: 1 !important;
}
@media (min-width: 450px) {
.productHero__container::before {
width: 300px;
}
}
@media (min-width: 668px) {
.productHero__container::before {
left: -55px;
width: 300px;
}
}
@media (min-width: 1100px) {
.productHero {
margin-bottom: 120px;
}
.productHero__inner {
display: flex;
gap: 40px;
align-items: flex-end;
}
.productHero__signatures {
margin-bottom: 92px;
}
.productHero__slider {
width: calc(50% - 20px);
}
.productHero__content {
width: calc(50% - 20px);
}
.productHero__list {
margin-top: 30px;
}
.productHero__banner {
margin-top: 100px;
padding: 50px;
}
.heroSlider__slide {
aspect-ratio: 1.2/1;
object-fit: contain;
object-position: bottom right;
}
.heroSlider__controls {
height: 68px;
}
}
@media (min-width: 1380px) {
.productHero__container {
padding-top: 24px;
}
.productHero__signatures {
padding: 0 70px;
height: 50px;
align-items: center;
justify-content: space-around;
}
.productHero__breadcrumbs {
margin-top: 20px;
}
.productHero__signature {
height: 36px;
}
.productHero__signature--image {
height: 28px;
object-fit: contain;
object-position: center center;
}
.productHero__signature--text {
font-size: 20px;
line-height: 36px;
}
.productHero__inner {
gap: 60px;
}
.productHero__content {
width: calc(50% - 30px);
}
.productHero__slider {
width: calc(50% - 30px);
}
.productHero__list {
margin-top: 20px;
}
.productHero__banner {
margin-top: 35px;
}
.productHero__container::before {
left: -120px;
top: -70px;
width: 460px;
}
.heroSlider .swiper-slide::after {
top: 70px;
}
.heroSlider__controls {
margin-top: 20px;
}
.heroSlider__prev, .heroSlider__next {
width: 50px;
height: 50px;
}
.heroSlider__prev svg, .heroSlider__next svg {
width: 100%;
height: 100%;
}
}
@media (min-width: 1900px) {
.productHero__container {
margin-top: 0px;
max-width: 1360px;
}
.productHero__inner {
display: flex;
flex-direction: row;
align-items: stretch;
}
.productHero__signatures {
margin-top: 40px;
margin-bottom: 108px;
}
.productHero__content {
margin-top: 0;
}
.productHero__header {
padding: 0 20px;
margin-top: 70px;
}
.productHero__slider {
width: calc(50% - 30px);
height: auto;
display: grid;
grid-template-rows: 1fr auto;
}
.productHero__slider .swiper {
height: 100%;
width: 100%;
}
.heroSlider__slide {
aspect-ratio: unset;
width: 100%;
height: 100%;
}
.heroSlider__controls {
width: 100%;
margin-top: 40px;
}
}
.usage__container {
padding-top: 48px;
padding-bottom: 48px;
}
.usage__header {
text-align: center;
display: block;
}
.usage__inner {
display: flex;
flex-direction: column-reverse;
}
.usage__cards {
display: flex;
width: 100%;
flex-direction: column;
margin-top: 32px;
}
.usage__card {
display: none;
flex-direction: column;
width: 100%;
}
.usage__card--active {
display: flex;
}
.usage__image {
width: 100%;
aspect-ratio: 16/7;
border-radius: 40px;
display: block;
}
.usage__image img {
width: 100%;
height: 100%;
aspect-ratio: 16/9;
border-radius: 40px;
object-fit: cover;
}
.usage__buttons {
display: flex;
flex-direction: column;
margin-top: 24px;
gap: 10px;
}
.usage__button {
background-color: transparent;
border: 1px solid #069aff;
color: #1e274a;
border-radius: 40px;
font-display: fallback;
flex-direction: row;
align-items: center;
padding: 10px 20px;
font-weight: 600;
line-height: 24px;
transition: background-color 0.12s linear, color 0.12s linear;
}
.usage__button--active {
background-color: #069aff;
color: #ffffff;
}
.usage__button:hover {
cursor: pointer;
background-color: #069aff;
color: #ffffff;
}
.usage__title {
margin-top: 12px;
margin-bottom: 4px;
color: #069aff;
}
@media (min-width: 1100px) {
.usage__inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px;
margin-top: 50px;
}
.usage__buttons {
margin-top: 0;
}
.usage__cards {
margin-top: 0;
}
.usage__title {
margin-top: 20px;
}
.usage__button {
text-align: left;
}
}
@media (min-width: 1380px) {
.usage__container {
max-width: 1360px;
padding-top: 0;
padding-bottom: 0;
}
.usage__header {
margin-top: 0;
}
}
.configurations {
padding-top: 40px;
padding-bottom: 40px;
}
.configurations__header {
text-align: center;
display: block;
margin-bottom: 32px;
}
.configurations__text {
margin-bottom: 20px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.configurations__table {
margin-bottom: 20px;
}
.configurations__table--desktop {
display: none;
}
.configurations__table--desktop table {
border: none;
border-collapse: collapse;
margin-bottom: 24px;
width: 100%;
}
.configurations__table--desktop table tbody {
border: none;
}
.configurations__table--desktop table tr {
border: none;
}
.configurations__table--desktop table tr td,
.configurations__table--desktop table tr th {
padding: 10px;
text-align: center;
border: none;
}
.configurations__table--desktop table tr th {
background-color: rgba(30, 39, 74, 0.9333333333);
color: #ffffff;
}
.configurations__table--desktop table tr td {
background-color: #ffffff;
white-space: nowrap;
position: relative;
}
.configurations__table--desktop table tr td .tooltipRow {
position: relative;
}
.configurations__table--desktop table tr td .tooltipRow::after {
content: "i";
cursor: pointer;
background-color: #ffffff;
width: 16px;
height: 16px;
max-width: 16px;
max-height: 16px;
position: absolute;
top: 50%;
left: calc(100% + 18px);
transform: translateY(-50%);
border-radius: 50%;
border: 1px solid #1e274a;
color: #1e274a;
font-size: 13px;
line-height: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.configurations__table--desktop table tr td .tooltipRow:hover .tooltip {
opacity: 1;
transition: opacity 0.12s linear 0.5s;
}
.configurations__table--desktop table tr td .tooltip {
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(90% + 10px) calc(100% - 10px), 90% 100%, calc(90% - 10px) calc(100% - 10px), 0% calc(100% - 10px));
position: absolute;
bottom: 100%;
left: 50%;
transform: translate(-80%, 0);
font-size: 14px;
color: #ffffff;
background-color: #1e274a;
padding: 10px 10px 20px;
text-align: center;
white-space: nowrap;
pointer-events: none;
opacity: 0;
}
.configurations__table--desktop table tr th:first-of-type {
border-radius: 20px 0 0 20px;
}
.configurations__table--desktop table tr th:last-of-type {
border-radius: 0 20px 20px 0;
}
.configurations__table--desktop table tr:nth-of-type(2n) {
border-radius: 25px;
}
.configurations__table--desktop table tr:nth-of-type(2n) td:first-of-type {
border-radius: 20px 0 0 20px;
}
.configurations__table--desktop table tr:nth-of-type(2n) td:last-of-type {
border-radius: 0 20px 20px 0;
}
.configurations__table--desktop table tr:nth-of-type(2n) td {
background-color: #ebebef;
}
.configurations__table--mobile {
display: block;
width: 100%;
overflow-x: auto;
}
.configurations__table--mobile table {
border: none;
border-collapse: collapse;
margin-bottom: 24px;
width: 100%;
}
.configurations__table--mobile table tbody {
border: none;
}
.configurations__table--mobile table tr {
border: none;
}
.configurations__table--mobile table tr td,
.configurations__table--mobile table tr th {
padding: 10px;
text-align: center;
border: none;
}
.configurations__table--mobile table tr th {
background-color: rgba(30, 39, 74, 0.9333333333);
color: #ffffff;
}
.configurations__table--mobile table tr td {
background-color: #ffffff;
white-space: nowrap;
position: relative;
}
.configurations__table--mobile table tr td .tooltipRow {
position: relative;
}
.configurations__table--mobile table tr td .tooltipRow::after {
content: "i";
cursor: pointer;
background-color: #ffffff;
width: 16px;
height: 16px;
max-width: 16px;
max-height: 16px;
position: absolute;
top: 50%;
left: calc(100% + 18px);
transform: translateY(-50%);
border-radius: 50%;
border: 1px solid #1e274a;
color: #1e274a;
font-size: 13px;
line-height: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.configurations__table--mobile table tr td .tooltipRow:hover .tooltip {
opacity: 1;
transition: opacity 0.12s linear 0.5s;
}
.configurations__table--mobile table tr td .tooltip {
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(90% + 10px) calc(100% - 10px), 90% 100%, calc(90% - 10px) calc(100% - 10px), 0% calc(100% - 10px));
position: absolute;
bottom: 100%;
left: 50%;
transform: translate(-90%, 0);
font-size: 14px;
color: #ffffff;
background-color: #1e274a;
padding: 10px 10px 20px;
text-align: center;
white-space: nowrap;
pointer-events: none;
opacity: 0;
}
.configurations__table--mobile table tr th:first-of-type {
border-radius: 20px 0 0 20px;
}
.configurations__table--mobile table tr th:last-of-type {
border-radius: 0 20px 20px 0;
}
.configurations__table--mobile table tr:nth-of-type(2n) {
border-radius: 25px;
}
.configurations__table--mobile table tr:nth-of-type(2n) td:first-of-type {
border-radius: 20px 0 0 20px;
}
.configurations__table--mobile table tr:nth-of-type(2n) td:last-of-type {
border-radius: 0 20px 20px 0;
}
.configurations__table--mobile table tr:nth-of-type(2n) td {
background-color: #ebebef;
}
@media (min-width: 900px) {
.configurations__table table {
margin-bottom: 0;
}
}
@media (min-width: 1100px) {
.configurations__table {
display: block;
}
.configurations__table--mobile {
display: none;
}
.configurations__table--desktop {
display: block;
}
}
@media (min-width: 1380px) {
.configurations {
width: 1300px;
position: relative;
left: 50%;
transform: translateX(-50%);
padding-top: 0;
padding-bottom: 0;
margin: 100px 0;
}
.configurations__table--desktop {
margin-top: 40px;
overflow: visible;
}
.configurations__table--desktop table {
overflow: visible;
}
.configurations__table--desktop table tr td,
.configurations__table--desktop table tr th {
padding: 20px 12px;
}
.configurations__table--desktop table tr th {
height: 100px;
}
.configurations__table--desktop table tr td .tooltip {
transform: translateX(-50%);
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(50% + 10px) calc(100% - 10px), 50% 100%, calc(50% - 10px) calc(100% - 10px), 0% calc(100% - 10px));
}
}
@media (min-width: 1900px) {
.configurations {
max-width: 1360px;
width: 1360px;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-left: auto;
margin-right: auto;
}
}
.files__container {
padding-top: 40px;
padding-bottom: 40px;
}
.files__header {
display: block;
color: #069aff;
text-align: center;
}
.files__inner {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 24px;
}
.files__button {
border: 1px solid #069aff;
background-color: transparent;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding: 12px 20px;
font-weight: 300 !important;
border-radius: 40px;
text-decoration: none;
color: #000000;
width: 100%;
font-family: Sora;
text-decoration: none;
color: #069aff;
font-size: 15px;
}
.files__button:hover {
cursor: pointer;
}
.files__extension {
display: flex;
flex-direction: row;
color: #069aff;
align-items: center;
gap: 8px;
text-transform: uppercase;
}
@media (min-width: 1100px) {
.files__header {
text-align: left;
}
.files__container {
padding-top: 80px;
padding-bottom: 80px;
}
.files__inner {
margin-top: 25px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 30px;
}
}
@media (min-width: 1380px) {
.files__container {
padding-bottom: 0;
margin-top: 100px;
padding-top: 0;
margin-bottom: 150px;
}
}
@media (min-width: 1900px) {
.files__container {
max-width: 1360px;
}
}
.cardsSlider {
text-decoration: none;
padding-top: 40px;
padding-bottom: 40px;
}
.cardsSlider__header {
text-align: center;
display: block;
}
.cardsSlider__slider {
margin-top: 32px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 20px;
}
.cardsSlider .swiper {
width: 100%;
display: flex;
}
.cardsSlider .swiper-slide {
display: flex;
flex-direction: row;
justify-content: center;
}
.cardsSlider__prev, .cardsSlider__next {
position: relative;
z-index: 2;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.cardsSlider__prev svg, .cardsSlider__next svg {
width: 40px;
height: 40px;
}
.cardsSlider__prev svg *, .cardsSlider__next svg * {
stroke: #069aff !important;
}
.cardsSlider__prev:hover, .cardsSlider__next:hover {
cursor: pointer;
}
.cardsSlider__prev {
transform: rotate(90deg);
}
.cardsSlider__next {
transform: rotate(-90deg);
}
@media (min-width: 1100px) {
.cardsSlider {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 1300px;
padding-top: 90px;
padding-bottom: 90px;
}
.cardsSlider__slider {
gap: 100px;
margin-top: 40px;
}
.cardsSlider__prev svg, .cardsSlider__next svg {
width: 60px;
height: 60px;
}
}
@media (min-width: 1900px) {
.cardsSlider {
width: 1800px;
left: 50%;
transform: translateX(-50%);
position: relative;
}
.cardsSlider__slider {
grid-template-columns: auto 1360px auto;
}
}
.accessoryCard {
border-radius: 24px;
padding: 24px;
overflow: hidden;
border: 1px solid #069aff;
max-width: 350px;
text-decoration: none !important;
position: relative;
position: relative;
}
.accessoryCard--back {
position: absolute;
inset: 0;
background-color: rgba(30, 39, 74, 0.9411764706);
padding: 24px;
color: #ffffff;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s linear;
}
.accessoryCard:hover .accessoryCard--back {
opacity: 1;
pointer-events: all;
}
.accessoryCard__link,
.accessoryCard a {
text-decoration: none !important;
}
.accessoryCard__header {
color: #069aff;
text-decoration: none !important;
}
.accessoryCard__header span {
display: block;
line-height: 1;
font-size: 14px;
font-weight: 400;
}
.accessoryCard .button {
margin-top: 24px;
}
.accessoryCard__image {
display: block;
position: relative;
width: calc(100% + 48px);
}
.accessoryCard__image img {
width: 100%;
position: relative;
left: -24px;
display: block;
bottom: -24px;
}
.accessoryCard:hover {
border-color: #1e274a;
}
.accessoryCard:hover .accessoryCard__header {
color: #1e274a;
}
@media (min-width: 1100px) {
.accessoryCard {
display: flex;
flex-direction: column;
height: auto;
}
.accessoryCard__image {
margin-top: auto;
}
}
@media (min-width: 1380px) {
.accessoryCard {
max-width: 440px;
padding: 50px;
border-radius: 40px;
}
.accessoryCard--back {
padding: 50px;
}
.accessoryCard__header {
letter-spacing: 0.54px;
text-decoration: none;
}
.accessoryCard__image {
width: calc(100% + 100px);
}
.accessoryCard__image img {
bottom: -50px;
left: -50px;
right: -50px;
}
}
.effects__container {
padding-top: 40px;
}
.effects__header {
text-align: center;
max-width: 900px;
display: block;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1380px) {
.effects {
width: 1300px;
left: 50%;
transform: translateX(-50%);
position: relative;
}
}
.gallery {
position: relative;
padding-bottom: 40px;
padding-top: 40px;
}
.gallery::after {
content: "";
background-color: #ebebef;
top: 0;
bottom: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 0;
width: 300vw;
display: block;
}
.gallery > * {
position: relative;
z-index: 1;
}
.gallery__header {
display: block;
text-align: center;
}
.gallery__inner {
margin-top: 40px;
}
.gallery__inner {
display: flex;
flex-direction: column;
}
.gallery__bigSlider {
width: 100%;
}
.gallery__bigSlider .swiper {
width: 100%;
}
.gallery__bigSlider .swiper-slide {
width: 100%;
background-color: #ffffff;
border-radius: 40px;
overflow: hidden;
aspect-ratio: 9/8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.gallery__bigSlider .swiper-slide img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.gallery__thumbnails {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 40px;
margin-top: 24px;
}
.gallery__thumbnails .swiper-next svg,
.gallery__thumbnails .swiper-prev svg {
width: 60px;
height: 60px;
}
.gallery__thumbnails .swiper-next svg *,
.gallery__thumbnails .swiper-prev svg * {
stroke: #069aff !important;
}
.gallery__thumbnails .swiper-next:hover,
.gallery__thumbnails .swiper-prev:hover {
cursor: pointer;
}
.gallery__thumbnails .swiper-prev {
grid-column: 1/2;
grid-row: 2/3;
margin-left: auto;
}
.gallery__thumbnails .swiper-prev svg {
transform: rotate(90deg);
}
.gallery__thumbnails .swiper-next {
grid-column: 2/3;
grid-row: 2/3;
}
.gallery__thumbnails .swiper-next svg {
transform: rotate(-90deg);
}
.gallery__thumbnails .swiper {
margin-bottom: 20px;
grid-column: 1/3;
width: 100%;
}
.gallery__thumbnails .swiper-slide {
width: 100%;
background-color: #ffffff;
overflow: hidden;
border-radius: 20px;
}
.gallery__thumbnails .swiper-slide img {
width: 100%;
overflow: hidden;
border-radius: 20px;
aspect-ratio: 16/9;
object-fit: contain;
}
@media (min-width: 1100px) {
.gallery__inner {
aspect-ratio: 16/9;
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: row;
position: relative;
}
.gallery__bigSlider {
width: calc(70% - 20px);
height: 100%;
}
.gallery__bigSlider .swiper {
height: 100%;
width: 100%;
}
.gallery__thumbnails {
height: 100%;
margin-top: 0;
width: calc(30% - 20px);
justify-content: center;
align-items: center;
justify-content: space-between;
display: flex;
flex-direction: column;
}
.gallery__thumbnails .swiper {
height: 100%;
width: 100%;
margin: 20px 0;
}
.gallery__thumbnails .swiper-slide {
aspect-ratio: 16/9;
width: 100%;
height: auto;
}
.gallery__thumbnails .swiper-slide img {
aspect-ratio: 16/9;
}
.gallery__thumbnails .swiper-prev {
margin-left: unset;
}
.gallery__thumbnails .swiper-prev svg {
transform: rotate(-180deg);
}
.gallery__thumbnails .swiper-next svg {
transform: rotate(0deg);
}
}
@media (min-width: 1380px) {
.gallery {
padding-top: 100px;
padding-bottom: 100px;
}
.gallery__inner {
margin-top: 40px;
}
}
@media (min-width: 1900px) {
.gallery__inner {
margin-top: 70px;
margin-left: auto;
margin-right: auto;
max-width: 1360px;
}
}
.variant {
margin: 50px auto;
position: relative;
}
.variant::before {
content: "";
position: absolute;
width: 300vw;
left: 50%;
transform: translateX(-50%);
top: -50px;
bottom: -50px;
background-color: #ebebef;
opacity: 0.5;
z-index: -1;
}
.variant::after {
content: "";
position: absolute;
aspect-ratio: 744/648;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/variant_decor.svg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 300px;
left: -60%;
top: -20%;
z-index: -1;
}
.variant__heading {
text-align: center;
}
.variant__text {
text-align: center;
margin-top: 20px;
}
.variant__inner {
margin-top: 32px;
}
.variant__image {
aspect-ratio: 700/390;
border-radius: 36px;
width: 100%;
}
.variant__image img {
border-radius: 36px;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.variant__form {
margin-top: 24px;
}
.variant__form fieldset {
border: none;
}
.variant__form fieldset .frm_fields_container {
gap: 12px;
}
.variant__form .button {
width: 100%;
}
.variant__form form {
display: flex;
flex-direction: column;
gap: 12px;
border: none;
}
.variant__form select {
width: 100%;
background-color: #ffffff;
border: none;
border-radius: 24px;
height: 45px;
appearance: none;
padding: 0 22px;
font-size: 15px;
line-height: 1.5;
font-weight: 300 !important;
font-family: Sora;
position: relative;
color: #1E274A !important;
}
@media (min-width: 1900px) {
.variant__form select {
font-size: 16px;
}
}
.variant .frm_form_field.form-field:has(select) {
position: relative;
}
.variant .frm_form_field.form-field:has(select)::after {
content: "";
position: absolute;
top: calc(50% - 3px);
right: 22px;
width: 0;
height: 0;
display: block;
border-top: 6px solid #069aff;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.variant__row {
width: 100%;
}
.variant__row--button {
margin-top: 10px;
display: flex;
}
.variant__row--double {
display: flex;
flex-direction: column;
gap: 12px;
}
@media (min-width: 900px) {
.variant__form .button {
width: fit-content;
margin: 0 auto;
}
.variant__row--double {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
@media (min-width: 1380px) {
.variant {
margin: 80px 0;
}
.variant::before {
top: -80px;
bottom: -80px;
}
.variant::after {
width: 600px;
left: -400px;
top: -200px;
}
.variant__heading, .variant__text {
max-width: 80%;
margin-inline: auto;
}
.variant__inner {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 20px;
margin-top: 30px;
}
.variant__image {
grid-column: 1/6;
}
.variant__form {
grid-column: 6/11;
margin-top: 0;
}
}
@media (min-width: 1900px) {
.variant {
margin: 170px 0 100px;
display: grid;
grid-template-columns: repeat(10, 1fr);
}
.variant::after {
top: -320px;
left: -300px;
}
.variant__heading {
grid-column: 1/11;
margin-inline: 50px;
max-width: 100%;
}
.variant__image {
height: 100%;
width: 100%;
aspect-ratio: unset;
}
.variant__text {
grid-column: 3/9;
margin-inline: 0px;
max-width: 100%;
}
.variant__inner {
margin-top: 64px;
gap: 64px;
grid-column: 1/11;
}
}
.productTabs {
position: relative;
font-family: Sora !important;
color: #1e274a !important;
}
.productTabs--dark {
padding: 20px;
margin: 50px 0;
}
.productTabs--dark::after {
content: "";
position: absolute;
background-color: #EBEBEF;
border-radius: 40px;
top: 0;
bottom: 0;
left: 0px;
right: 0px;
z-index: 1;
}
.productTabs--dark > * {
position: relative;
z-index: 2;
}
.productTabs--dark:has(+ .bannerBlock) {
padding-bottom: 70px;
}
.productTabs--dark:has(+ .bannerBlock) + .bannerBlock {
z-index: 10;
position: relative;
margin-top: -50px;
}
.productTabs__header {
display: block;
width: 100%;
text-align: center;
}
.productTabs__text {
text-align: center;
}
.productTabs__container {
padding: 32px 0;
}
.productTabs__navigation {
margin-top: 24px;
margin-bottom: 0;
}
.productTabs__innerList {
list-style: none;
margin-left: 0 !important;
padding-left: 16px;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: -10px;
display: none;
margin-top: 0px !important;
position: relative;
}
.productTabs__innerList::after {
content: "";
position: absolute;
left: 0;
height: calc(100% - 15px);
top: 10px;
bottom: 0;
width: 4px;
background-color: #069aff;
}
.productTabs__innerList:has(.productTabs__link--active) {
display: flex;
flex-direction: column;
gap: 10px;
}
.productTabs__wrapper {
margin-top: 40px;
border-top: 1px solid #DBDBDB;
padding-top: 40px;
}
.productTabs__list {
list-style: none;
margin-left: 0 !important;
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
.productTabs__item {
margin: 0;
padding: 0;
}
.productTabs__link {
background-color: transparent;
border: none;
height: 30px;
display: flex;
align-items: center;
font-size: 17px;
color: #000000 !important;
font-weight: 600;
transition: color 0.12s linear;
position: relative;
padding-right: 20px;
}
.productTabs__link img {
height: 10px;
width: 10px;
display: block;
transform: rotate(0deg);
position: absolute;
top: calc(50% - 5px);
right: 0;
transition: all 0.12s linear;
}
.productTabs__link:hover {
cursor: pointer;
color: #069aff !important;
}
.productTabs__link--active {
color: #069aff !important;
}
.productTabs__link--active img {
filter: brightness(0) saturate(100%) invert(51%) sepia(84%) saturate(3467%) hue-rotate(180deg) brightness(100%) contrast(102%);
transform: rotate(90deg);
}
.productTabs__link--active + .productTabs__innerList {
display: flex;
flex-direction: column;
gap: 10px;
}
.productTabs--horizontal .productTabs__list {
flex-direction: row;
flex-wrap: wrap;
}
.productTab__view {
display: none;
}
.productTab__view--active {
display: block;
}
.productTab__media {
border-radius: 12px;
overflow: hidden;
margin-bottom: 16px;
}
.productTab__content strong {
font-weight: 600;
}
.productTab__content + .button {
margin: 16px 0 0;
}
.productTab__content ul,
.productTab__content ol {
margin-left: 4px !important;
}
.productTab__content ul li,
.productTab__content ol li {
margin-left: 20px;
}
.productTab__image, .productTab__video, .productTab__gallery {
width: 100%;
max-width: 100%;
aspect-ratio: 16/9;
height: auto;
}
.productTab__gallery {
aspect-ratio: unset;
}
.productTab__gallery img {
aspect-ratio: 16/9;
border-radius: 12px;
}
.productTab__swiper {
height: 100%;
}
.productTab__swiper {
height: 100%;
}
.productTab__gallery .swiper {
max-width: 100%;
position: relative;
}
.productTab__gallery .swiper-controls {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 12px;
}
.productTab__gallery .swiper-prev, .productTab__gallery .swiper-next {
position: relative;
z-index: 2;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: #ffffff;
border: 2px solid #069aff;
border-radius: 50%;
width: 32px;
height: 32px;
}
.productTab__gallery .swiper-prev svg, .productTab__gallery .swiper-next svg {
width: 16px;
height: 16px;
}
.productTab__gallery .swiper-prev svg *, .productTab__gallery .swiper-next svg * {
stroke-width: 2 !important;
stroke: #069aff !important;
}
.productTab__gallery .swiper-prev:hover, .productTab__gallery .swiper-next:hover {
cursor: pointer;
}
.productTab__gallery .swiper-prev {
transform: rotate(-90deg);
}
.productTab__gallery .swiper-next {
transform: rotate(90deg);
}
.productTab__gallery .swiper-wrapper {
width: 100%;
}
.productTab__gallery .swiper-slide {
width: 100%;
}
.productTab__gallery .swiper-slide img {
width: 100%;
}
.productTab__image {
overflow: hidden;
}
.productTab__image img {
height: 100%;
object-fit: cover;
display: block;
width: 100%;
transform-origin: center;
transition: transform 0.05s linear;
}
.productTab__image:hover img {
transform: scale(1.02);
}
.productTab__content {
margin-top: 12px;
}
.productTab__content a:not(.button) {
text-decoration: underline !important;
}
.productTab__content ul,
.productTab__content ol {
margin: 10px 0;
}
.productTab__content p {
margin: 10px 0;
}
.productTab__content blockquote {
background-color: #efefef;
padding: 20px;
border-radius: 16px;
margin: 10px 0 10px 0px;
}
.productTab__content > *:last-of-type {
margin-bottom: 0;
}
.productTab__video {
background-color: #069aff;
}
.productTab__video video {
width: 100%;
display: block;
}
@media (min-width: 900px) {
.productTabs--dark:has(+ .bannerBlock) {
padding-bottom: 100px;
}
.productTabs__link {
height: fit-content;
text-align: left;
}
}
@media (min-width: 1100px) {
.productTabs {
height: auto;
}
.productTabs__container {
padding: 32px 0;
display: grid;
grid-template-rows: auto auto 1fr;
grid-template-columns: repeat(12, 1fr);
gap: 0 80px;
}
.productTabs__wrapper {
grid-column: 5/13;
grid-row: 3/5;
margin-top: 0;
padding-top: 0;
border-top: none;
position: relative;
}
.productTabs__wrapper::after {
content: "";
position: absolute;
left: -40px;
height: 100%;
width: 1px;
top: 0;
bottom: 0;
background-color: #DBDBDB;
}
.productTabs__header {
grid-column: 1/13;
grid-row: 1/2;
margin-bottom: 15px;
font-size: 32px;
}
.productTabs__text {
grid-column: 1/13;
grid-row: 2/3;
margin-bottom: 30px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.productTabs__navigation {
grid-column: 1/5;
grid-row: 3/4;
}
.productTabs__link {
font-size: 19px;
line-height: 1.5;
}
}
@media (min-width: 1100px) and (min-width: 1900px) {
.productTabs__link {
font-size: 25px;
}
}
@media (min-width: 1100px) {
.productTabs .productTab__video, .productTabs .productTab__image {
aspect-ratio: 720/333;
width: 100%;
height: auto;
}
.productTabs .productTab__gallery img {
aspect-ratio: 720/333;
width: 100%;
height: auto;
object-fit: cover;
}
.productTabs .productTab__header {
font-size: 25px;
font-weight: 600;
color: #069aff;
}
.productTabs .productTab__text {
font-size: 17px;
font-weight: 300;
}
.productTabs .productTab__gallery .themeNavigation {
margin-top: 0;
}
.productTabs .productTab__gallery .swiper-prev, .productTabs .productTab__gallery .swiper-next {
width: 48px;
height: 48px;
}
.productTabs .productTab__gallery .swiper-prev svg, .productTabs .productTab__gallery .swiper-next svg {
height: 24px;
width: 24px;
}
.productTabs--horizontal .productTabs__container {
grid-template-rows: auto auto auto 1fr;
}
.productTabs--horizontal .productTabs__wrapper {
grid-column: 1/13;
grid-row: 4/5;
margin-top: 32px;
padding-top: 16px;
}
.productTabs--horizontal .productTabs__wrapper::after {
left: 0;
right: 0;
top: -16px;
bottom: unset;
height: 1px;
width: 100%;
}
.productTabs--horizontal .productTabs__navigation {
grid-column: 1/13;
}
.productTabs--horizontal .productTab__view--active {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 30px;
}
.productTabs--horizontal .productTab .button, .productTabs--horizontal .productTab__header, .productTabs--horizontal .productTab__content {
grid-column: 2/3;
}
.productTabs--horizontal .productTab__upper {
grid-column: 1/2;
grid-row: 1/6;
}
}
@media (min-width: 1380px) {
.productTabs {
max-width: 1400px;
width: 1400px;
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 100px 0;
padding: 0;
}
.productTabs__container {
padding: 0 20px;
max-width: 1360px;
width: 1360px;
}
.productTabs--dark {
margin: 30px 0;
padding: 70px 0;
}
.productTabs--dark:has(+ .bannerBlock) {
padding-bottom: 100px;
margin-bottom: 0;
}
.productTabs--dark:has(+ .bannerBlock) + .bannerBlock {
margin-top: -50px;
}
.productTabs__list {
gap: 32px;
}
.productTabs__list, .productTabs__innerList {
gap: 20px;
}
.productTabs__innerList {
padding-top: 20px;
}
.productTabs__link {
font-size: 17px;
line-height: 1.5;
font-size: 25px;
}
}
@media (min-width: 1380px) and (min-width: 1900px) {
.productTabs__link {
font-size: 20px;
}
}
@media (min-width: 1380px) {
.productTab__header {
font-size: 19px;
line-height: 1.5;
}
}
@media (min-width: 1380px) and (min-width: 1900px) {
.productTab__header {
font-size: 25px;
}
}
@media (min-width: 1900px) {
.productTabs {
max-width: 1800px;
width: 1800px;
}
.productTabs__header {
font-size: 50px;
}
.productTabs__container {
grid-template-columns: auto 720px;
gap: 0 120px;
}
.productTabs__text, .productTabs__header {
grid-column: 1/3;
}
.productTabs__navigation {
grid-column: 1/2;
}
.productTabs__wrapper {
grid-column: 2/3;
}
.productTabs__wrapper::after {
left: -60px;
}
.productTabs--horizontal .productTabs__container {
grid-template-columns: 100%;
}
.productTabs--horizontal .productTabs__container .productTab__gallery {
width: 100%;
max-width: 100%;
}
.productTabs--horizontal .productTabs__container .productTab__gallery .swiper {
width: 100%;
max-width: 100%;
}
.productTabs--horizontal .productTabs__container .productTab__gallery .swiper-wrapper {
width: 100%;
max-width: 100%;
}
.productTabs--horizontal .productTabs__container .productTab__gallery .swiper-slide {
width: 100%;
max-width: 100%;
}
.productTabs--horizontal .productTabs__wrapper,
.productTabs--horizontal .productTabs__navigation,
.productTabs--horizontal .productTabs__text,
.productTabs--horizontal .productTabs__header {
grid-column: 1/2;
}
} .bannerBlock {
border-radius: 30px;
padding: 24px;
margin: 48px 0 24px;
background-color: #069aff;
display: flex;
flex-direction: column-reverse;
}
.bannerBlock__header {
color: #ffffff;
display: block;
text-align: center;
font-size: 24px;
line-height: 30px;
}
.bannerBlock__text {
color: #ffffff;
display: block;
text-align: center;
margin-top: 8px;
font-size: 16px;
}
.bannerBlock__image {
width: 100%;
max-width: 300px;
margin-right: auto;
margin-left: auto;
z-index: 0;
position: relative;
}
.bannerBlock__image img {
display: block;
width: 100%;
position: relative;
z-index: 1;
}
.bannerBlock__image::after {
content: "";
position: absolute;
width: 300px;
height: auto;
aspect-ratio: 1060/520;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
background-repeat: no-repeat;
background-size: contain;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/on.svg);
z-index: 0;
}
.bannerBlock__content .button {
margin-left: auto;
margin-right: auto;
margin-top: 12px;
}
@media (min-width: 668px) {
.bannerBlock {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.bannerBlock__header {
text-align: left;
}
.bannerBlock__text {
text-align: left;
margin-top: 18px;
}
.bannerBlock__image {
height: 100%;
transform: none;
position: relative;
}
.bannerBlock__image img {
position: absolute;
display: block;
height: calc(100% + 48px + 64px);
width: 100%;
object-fit: contain;
object-position: center bottom;
top: -88px;
bottom: -24px;
}
.bannerBlock__image::after {
top: 50%;
bottom: unset;
transform: translate(-50%, -50%);
}
.bannerBlock__content {
position: relative;
z-index: 1;
}
.bannerBlock__content .button {
margin-top: 18px;
margin-left: 0;
}
}
@media (min-width: 1100px) {
.bannerBlock {
margin: 64px 0;
}
.bannerBlock__text {
font-weight: 300;
letter-spacing: 0.4px;
font-size: 20px;
line-height: 35px;
}
.bannerBlock__header {
font-size: 40px;
letter-spacing: 0.8px;
line-height: 51px;
}
.bannerBlock__image {
max-width: unset;
}
.bannerBlock__image::after {
width: 400px;
}
.bannerBlock__image img {
max-width: unset;
width: auto;
}
}
@media (min-width: 1380px) {
.bannerBlock {
width: 1400px;
left: 50%;
position: relative;
transform: translateX(-50%) !important;
padding: 60px;
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.bannerBlock__image {
grid-column: 1/6;
max-width: 100%;
}
.bannerBlock__image img {
max-width: 100%;
height: calc(100% + 120px + 64px);
top: -124px;
bottom: -60px;
}
.bannerBlock__image::after {
width: 660px;
}
.bannerBlock__content {
grid-column: 7/13;
}
}
@media (min-width: 1900px) {
.bannerBlock {
width: 1800px;
margin: 140px 0 100px;
}
.bannerBlock__image {
grid-column: 2/7;
}
.bannerBlock__image img {
height: calc(100% + 170px + 64px);
top: -174px;
}
.bannerBlock__image::after {
left: 40%;
}
.bannerBlock__content {
padding: 0 40px;
}
}
.single-contact-form {
border-radius: 30px;
padding: 18px;
margin: 24px 0;
background-color: #069aff;
display: flex;
flex-direction: column-reverse;
}
.single-contact-form__header {
color: #ffffff;
display: block;
text-align: center;
}
.single-contact-form__text {
margin-top: 8px;
}
.single-contact-form__text, .single-contact-form__tag {
color: #ffffff;
display: block;
font-weight: 300;
text-align: center;
}
.single-contact-form__tag {
font-weight: 700;
margin-top: 8px;
}
.single-contact-form__image {
width: 100%;
max-width: 300px;
margin-right: auto;
margin-left: auto;
z-index: 0;
transform: translate(0, 18px);
position: relative;
}
.single-contact-form__image img {
display: block;
width: 100%;
position: relative;
z-index: 1;
}
.single-contact-form__image::after {
content: "";
position: absolute;
width: 600px;
height: auto;
aspect-ratio: 1060/520;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
background-repeat: no-repeat;
background-size: contain;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/on.svg);
z-index: 0;
}
.single-contact-form__form {
background-color: #ffffff;
padding: 16px;
border-radius: 30px;
margin-top: 16px;
}
.single-contact-form__form form .wpcf7-response-output {
margin: 0;
margin-top: 20px;
font-family: Oswald;
font-size: 13px;
letter-spacing: 0.1em;
border: none;
color: #069aff;
padding: 0;
}
.single-contact-form__form form textarea,
.single-contact-form__form form input:not([type=checkbox]) {
width: 100%;
border: none;
border: 1px solid #c4c4c4;
border-radius: 20px;
padding: 10px 20px;
font-size: 16px;
font-weight: 300;
resize: none;
margin-bottom: 6px;
margin-top: 6px;
transition: color 0.12s linear, border-color 0.12s linear;
}
.single-contact-form__form form textarea:focus,
.single-contact-form__form form input:not([type=checkbox]):focus {
outline: none;
color: #069aff !important;
border-bottom: 1px solid #069aff !important;
}
.single-contact-form__form form textarea:focus::placeholder,
.single-contact-form__form form input:not([type=checkbox]):focus::placeholder {
color: #069aff;
}
.single-contact-form__form form .wpcf7-not-valid-tip {
font-size: 13px;
width: 100% !important;
}
.single-contact-form__form form .wpcf7-list-item {
margin-left: 0;
font-size: 13px;
line-height: 17px;
font-weight: 100;
margin-top: 12px;
}
.single-contact-form__form form input[type=checkbox] {
accent-color: #069aff;
}
.single-contact-form__form form .button {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 900px) {
.single-contact-form {
display: grid;
overflow-x: hidden;
grid-template-columns: repeat(12, 1fr);
}
.single-contact-form__image {
grid-column: 1/7;
max-width: unset;
height: 100%;
transform: none;
display: block;
position: relative;
}
.single-contact-form__image::after {
width: 300px;
}
.single-contact-form__image img {
position: absolute;
display: block;
height: calc(100% + 36px + 64px);
width: 150%;
right: 0;
object-fit: contain;
object-position: bottom center;
top: -82px;
bottom: -18px;
}
.single-contact-form__content {
grid-column: 7/13;
}
}
@media (min-width: 1100px) {
.single-contact-form__image::after {
width: 500px;
}
}
@media (min-width: 1380px) {
.single-contact-form {
margin: 100px 0;
padding: 60px;
overflow: unset;
width: 1300px;
left: 50%;
transform: translateX(-50%);
position: relative;
}
.single-contact-form__image {
max-width: 100%;
position: relative;
grid-column: 1/6;
width: 100%;
}
.single-contact-form__image::after {
width: 660px;
}
.single-contact-form__image img {
width: 100%;
max-width: 100%;
height: calc(100% + 120px + 64px);
top: -124px;
bottom: -60px;
}
.single-contact-form__form {
border-radius: 28px;
margin-top: 50px;
padding: 40px;
}
.single-contact-form__text, .single-contact-form__tag {
margin-top: 20px;
}
.single-contact-form__header, .single-contact-form__tag, .single-contact-form__text {
padding: 0 13 0px;
}
}
@media (min-width: 1900px) {
.single-contact-form {
width: 1800px;
left: 50%;
transform: translateX(-50%);
position: relative;
}
.single-contact-form__text {
padding: 0px 100px;
}
.single-contact-form__header {
padding: 0px 100px;
}
.single-contact-form__image {
grid-column: 1/7;
}
.single-contact-form__form {
grid-column: 7/13;
}
}
.banner-dark-block {
background-color: #151C33;
border-radius: 40px;
padding: 24px 30px;
margin: 32px 0;
overflow: hidden;
position: relative;
}
.banner-dark-block__header {
color: #ffffff;
text-align: center;
display: block;
position: relative;
z-index: 1;
}
.banner-dark-block__text {
margin-top: 24px;
color: #ffffff;
text-align: center;
position: relative;
z-index: 1;
}
.banner-dark-block .button {
margin-left: auto;
margin-right: auto;
margin-top: 24px;
}
.banner-dark-block::before {
content: "";
position: absolute;
width: 200px;
aspect-ratio: 460/230;
top: 0;
display: block;
height: auto;
left: 0;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/darkbannerup.svg);
background-size: contain;
}
.banner-dark-block::after {
content: "";
position: absolute;
width: 200px;
aspect-ratio: 460/230;
bottom: 0;
display: block;
height: auto;
right: 0;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/darkbannerdown.svg);
background-size: contain;
}
@media (min-width: 1100px) {
.banner-dark-block {
width: 1300px;
left: 50%;
position: relative;
transform: translateX(-50%);
display: grid;
padding: 84px 0;
grid-template-columns: repeat(12, 1fr);
}
.banner-dark-block > * {
grid-column: 2/12;
}
.banner-dark-block::after, .banner-dark-block::before {
width: 400px;
}
}
@media (min-width: 1900px) {
.banner-dark-block {
width: 1800px;
left: 50%;
position: relative;
transform: translateX(-50%);
}
.banner-dark-block > * {
grid-column: 3/11;
}
.banner-dark-block__text {
grid-column: 4/10;
}
}
.cardsBlock__header {
text-align: center;
display: block;
}
.cardsBlock__text {
margin-top: 20px;
text-align: center;
}
.cardsBlock__inner {
margin-top: 45px;
display: flex;
flex-direction: column;
gap: 24px;
word-break: break-word;
}
.cardsBlockCard {
display: flex;
flex-direction: column;
gap: 12px;
padding: 28px 24px;
border: 1px solid #069aff;
border-radius: 40px;
}
.cardsBlockCard__image {
height: 48px;
width: 48px;
display: block;
object-fit: contain;
}
.cardsBlockCard__header {
font-size: 20px;
line-height: 24px;
display: block;
}
.cardsBlockCard__text {
font-size: 15px;
line-height: 1.5;
}
@media (min-width: 1900px) {
.cardsBlockCard__text {
font-size: 16px;
}
}
@media (min-width: 668px) {
.cardsBlock__inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (min-width: 900px) {
.cardsBlock {
margin: 48px 0;
}
.cardsBlock__inner {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1100px) {
.cardsBlockCard {
padding: 40px 36px;
}
.cardsBlockCard__header {
font-size: 25px;
line-height: 30px;
min-height: 60px;
}
.cardsBlockCard__text {
font-size: 17px;
line-height: 25px;
}
}
@media (min-width: 1380px) {
.cardsBlockCard {
width: 100%;
}
.cardsBlock {
margin: 64px 0;
display: grid;
grid-template-columns: repeat(12, 1fr);
width: 1300px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.cardsBlock__header {
grid-column: 3/11;
grid-row: 1/2;
}
.cardsBlock__text {
grid-column: 3/11;
grid-row: 2/3;
}
.cardsBlock__inner {
grid-column: 1/13;
grid-row: 3/4;
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1900px) {
.cardsBlockCard__inner {
padding: 40px 32px;
}
.cardsBlock {
width: 1360px;
margin: 100px 0;
}
.cardsBlock__header {
grid-column: 3/11;
}
.cardsBlock__text {
grid-column: 3/11;
}
.cardsBlock__inner {
grid-column: 1/13;
gap: 48px;
grid-template-columns: repeat(4, 1fr);
}
}
.listBlock {
margin: 48px 0;
}
.listBlock__header {
text-align: center;
display: block;
}
.listBlock__text {
margin-top: 24px;
text-align: center;
}
.listBlock__text > * {
margin-bottom: 24px;
}
.listBlock__inner {
margin-top: 40px;
display: flex;
flex-direction: column;
gap: 24px;
}
.listBlock__item {
border-radius: 40px;
padding: 30px 30px 30px 40px;
border: 1px solid #069aff;
}
.listBlock__title {
font-weight: 700;
margin-bottom: 12px;
position: relative;
}
.listBlock__title::before {
content: "";
position: absolute;
width: 12px;
height: 12px;
background-color: #069aff;
border-radius: 6px;
left: -20px;
top: calc(50% - 6px);
}
.listBlock__description {
line-height: 2;
}
@media (min-width: 900px) {
.listBlock__item {
padding: 40px 60px;
}
.listBlock__title::before {
left: -28px;
}
}
@media (min-width: 1380px) {
.listBlock {
margin: 100px 0;
}
.listBlock__text {
margin-top: 40px;
}
.listBlock__inner {
margin-top: 24px;
}
}
@media (min-width: 1900px) {
.listBlock {
margin: 80px 0 90px;
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.listBlock__header {
grid-column: 2/12;
grid-row: 1/2;
}
.listBlock__text {
grid-column: 2/12;
grid-row: 2/3;
}
.listBlock__inner {
grid-column: 1/13;
grid-row: 3/4;
}
}
.switcherBlock {
margin: 32px 0;
position: relative;
}
.switcherBlock::after {
content: "";
background-color: #ebebef;
top: -32px;
bottom: -32px;
opacity: 0.6;
left: 50%;
width: 300vw;
transform: translateX(-50%);
z-index: 0;
position: absolute;
}
.switcherBlock > * {
z-index: 1;
position: relative;
}
.switcherBlock__header {
text-align: center;
display: block;
}
.switcherBlock__description {
margin-top: 24px;
text-align: center;
}
.switcherBlock__buttons {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 10px;
}
.switcherBlock__button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
max-width: 100%;
width: fit-content;
text-align: center;
text-decoration: none;
font-family: Sora;
border-radius: 25px;
min-height: 45px;
padding: 0 30px;
transition: border-color 0.15s linear, color 0.15s linear, background-color 0.15s linear;
color: #1e274a;
background-color: #ffffff;
width: 100%;
border: 1px solid #069aff;
}
.switcherBlock__button:hover {
background-color: #069aff;
color: #ffffff;
cursor: pointer;
}
.switcherBlock__button--active {
background-color: #069aff;
color: #ffffff;
}
.switcherBlock__texts {
display: flex;
flex-direction: column;
}
.switcherBlock__text {
display: none;
}
.switcherBlock__text--active {
display: block;
}
@media (min-width: 1100px) {
.switcherBlock {
margin: 160px 0 170px;
}
.switcherBlock::after {
top: -80px;
bottom: -80px;
}
.switcherBlock__inner {
display: grid;
grid-template-columns: 2fr 3fr;
gap: 64px;
margin-top: 24px;
}
.switcherBlock__button {
justify-content: flex-start;
text-align: left;
}
.switcherBlock__texts {
margin-top: 24px;
}
}
@media (min-width: 1380px) {
.switcherBlock {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.switcherBlock__header {
grid-column: 3/11;
}
.switcherBlock__description {
grid-column: 3/11;
margin-top: 40px;
}
.switcherBlock__inner {
grid-column: 1/13;
margin-top: 46px;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1900px) {
.switcherBlock__inner {
grid-template-columns: 1fr 1fr;
}
}
.galleryBlock {
margin: 48px 0;
position: relative;
}
.galleryBlock::after {
content: "";
background-color: #ebebef;
top: -48px;
bottom: -48px;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 0;
width: 300vw;
display: block;
}
.galleryBlock > * {
position: relative;
z-index: 1;
}
.galleryBlock__container {
padding-bottom: 40px;
padding-top: 40px;
}
.galleryBlock__header {
display: block;
text-align: center;
}
.galleryBlock__inner {
margin-top: 40px;
}
.galleryBlock__inner {
display: flex;
flex-direction: column;
}
.galleryBlock__bigSlider {
width: 100%;
}
.galleryBlock__bigSlider .swiper {
width: 100%;
}
.galleryBlock__bigSlider .swiper-slide {
width: 100%;
background-color: #ffffff;
border-radius: 40px;
overflow: hidden;
aspect-ratio: 9/8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.galleryBlock__bigSlider .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.galleryBlock__thumbnails {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 40px;
margin-top: 24px;
}
.galleryBlock__thumbnails .swiper-next svg,
.galleryBlock__thumbnails .swiper-prev svg {
width: 60px;
height: 60px;
}
.galleryBlock__thumbnails .swiper-next svg *,
.galleryBlock__thumbnails .swiper-prev svg * {
stroke: #069aff !important;
}
.galleryBlock__thumbnails .swiper-next:hover,
.galleryBlock__thumbnails .swiper-prev:hover {
cursor: pointer;
}
.galleryBlock__thumbnails .swiper-prev {
grid-column: 1/2;
grid-row: 2/3;
margin-left: auto;
}
.galleryBlock__thumbnails .swiper-prev svg {
transform: rotate(90deg);
}
.galleryBlock__thumbnails .swiper-next {
grid-column: 2/3;
grid-row: 2/3;
}
.galleryBlock__thumbnails .swiper-next svg {
transform: rotate(-90deg);
}
.galleryBlock__thumbnails .swiper {
margin-bottom: 20px;
grid-column: 1/3;
width: 100%;
}
.galleryBlock__thumbnails .swiper-slide {
width: 100%;
background-color: #ffffff;
overflow: hidden;
border-radius: 20px;
}
.galleryBlock__thumbnails .swiper-slide img {
width: 100%;
overflow: hidden;
border-radius: 20px;
aspect-ratio: 16/9;
object-fit: cover;
}
@media (min-width: 1100px) {
.galleryBlock__inner {
aspect-ratio: 16/9;
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: row;
position: relative;
}
.galleryBlock__bigSlider {
width: calc(75% - 20px);
height: 100%;
}
.galleryBlock__bigSlider .swiper {
height: 100%;
width: 100%;
}
.galleryBlock__thumbnails {
height: 100%;
margin-top: 0;
width: calc(25% - 20px);
justify-content: center;
align-items: center;
justify-content: space-between;
display: flex;
flex-direction: column;
}
.galleryBlock__thumbnails .swiper {
height: 100%;
width: 100%;
margin: 20px 0;
}
.galleryBlock__thumbnails .swiper-slide {
aspect-ratio: 16/9;
width: 100%;
height: auto;
}
.galleryBlock__thumbnails .swiper-slide img {
aspect-ratio: 16/9;
}
.galleryBlock__thumbnails .swiper-prev {
margin-left: unset;
}
.galleryBlock__thumbnails .swiper-prev svg {
transform: rotate(-180deg);
}
.galleryBlock__thumbnails .swiper-next svg {
transform: rotate(0deg);
}
}
@media (min-width: 1380px) {
.galleryBlock {
margin: 190px 0;
}
.galleryBlock::after {
top: -90px;
bottom: -120px;
}
.galleryBlock__container {
padding-top: 100px;
padding-bottom: 100px;
}
.galleryBlock__inner {
margin-top: 40px;
}
}
@media (min-width: 1900px) {
.galleryBlock__inner {
margin-top: 70px;
margin-left: auto;
margin-right: auto;
max-width: 1360px;
}
}
.two-columns-intro {
margin: 0 0 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
@media (min-width: 1100px) {
.two-columns-intro {
display: grid;
margin: 24px 0 48px;
grid-template-columns: repeat(12, 1fr);
}
.two-columns-intro__header {
grid-column: 1/5;
}
.two-columns-intro__text {
grid-column: 6/13;
}
}
@media (min-width: 1380px) {
.two-columns-intro {
display: grid;
margin: 32px 0 64px;
width: 1080px;
}
.two-columns-intro__header {
grid-column: 1/6;
}
.two-columns-intro__text {
grid-column: 7/13;
}
}
@media (min-width: 1900px) {
.two-columns-intro {
display: grid;
width: 1360px;
margin: 100px auto 60px;
}
.two-columns-intro__header {
grid-column: 1/6;
}
.two-columns-intro__text {
grid-column: 7/13;
margin-left: 10px;
}
}
.primary-background-intro {
border-radius: 40px;
padding: 30px;
margin: 12px 0 32px;
display: flex;
flex-direction: column;
gap: 24px;
background-color: #069aff;
}
.primary-background-intro__header {
color: #ffffff;
}
.primary-background-intro__text {
color: #ffffff;
margin-top: 16px;
}
.primary-background-intro__image {
width: 100%;
}
.primary-background-intro__image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 40px;
}
@media (min-width: 1100px) {
.primary-background-intro {
margin: 24px 0 64px;
display: grid;
grid-template-columns: 2fr 1fr;
}
}
@media (min-width: 1380px) {
.primary-background-intro {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 1300px;
padding: 20px;
grid-template-columns: repeat(12, 1fr);
}
.primary-background-intro__content {
grid-column: 1/7;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
height: 100%;
padding: 0 50px;
}
.primary-background-intro__image {
grid-column: 7/13;
}
}
@media (min-width: 1900px) {
.primary-background-intro {
align-items: center;
width: 1800px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.primary-background-intro__content {
padding: 0;
padding-left: 52px;
grid-column: 2/7;
}
.primary-background-intro__image {
grid-column: 8/13;
}
}
.product-category {
margin: 32px 0;
padding-top: 32px;
padding-bottom: 32px;
position: relative;
}
.product-category > * {
z-index: 1;
position: relative;
}
.product-category::after {
content: "";
background-color: #ebebef;
opacity: 0.5;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 300vw;
transform: translateX(-50%);
}
.product-category__buttons {
display: flex;
flex-direction: column;
}
.product-category__buttons__topLayer {
display: flex;
flex-direction: row;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #C6C6C6;
}
.product-category__buttons__bottomLayer {
margin-top: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
}
.product-category__masterButton {
background-color: transparent;
border: none;
font-weight: 600;
font-size: 16px;
line-height: 21px;
position: relative;
cursor: pointer;
}
.product-category__masterButton::after {
content: "";
position: absolute;
bottom: -20px;
left: -10px;
right: -10px;
background-color: #069aff;
height: 4px;
width: calc(100% + 20px);
border-radius: 4px;
opacity: 0;
transition: opacity 0.12s linear;
}
.product-category__masterButton:first-of-type::after {
left: 0;
width: calc(100% + 10px);
}
.product-category__masterButton--active::after {
opacity: 1;
}
.product-category__button {
font-size: 16px;
background-color: transparent;
border: none;
line-height: 20px;
font-family: Sora;
font-weight: 300;
color: #1e274a;
transition: color 0.12s linear;
}
.product-category__button--active, .product-category__button:hover {
cursor: pointer;
color: #069aff;
}
.product-category__cards {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 32px;
}
.product-category__header {
text-align: center;
margin-left: auto;
margin-right: auto;
display: block;
max-width: 900px;
margin-bottom: 24px;
}
.product-category__text {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 900px;
margin-bottom: 32px;
}
@media (min-width: 668px) {
.product-category__cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
width: fit-content;
max-width: 100%;
}
}
@media (min-width: 1100px) {
.product-category {
margin: 32px 0;
padding: 64px 0;
position: relative;
}
.product-category::before {
z-index: 10;
content: "";
position: absolute;
aspect-ratio: 610/880;
height: 600px;
top: 0;
transform: translateY(-35%);
left: calc(100% + 32px);
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/product-archive-decor.svg);
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
}
.product-category__cards {
grid-template-columns: repeat(3, 1fr);
}
.product-category__cards--2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1380px) {
.product-category__buttons__bottomLayer {
gap: 20px 36px;
}
.product-category__cards {
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin-top: 70px;
}
.product-category__cards--3 {
grid-template-columns: repeat(3, 1fr);
}
.product-category__cards--2 {
grid-template-columns: repeat(2, 1fr);
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.product-category__text {
margin-bottom: 64px;
}
}
@media (min-width: 1900px) {
.product-category {
max-width: 1360px;
padding: 90px 0px 210px;
margin-left: auto;
margin-right: auto;
}
.product-category::before {
height: 880px;
transform: translateY(-40%);
}
.product-category + .bannerBlock {
margin-top: 50px;
}
}
.expert-advice {
padding: 32px 0;
}
.expert-advice__tag {
text-align: center;
display: block;
}
.expert-advice__title {
display: block;
text-align: center;
margin-top: 18px;
}
.expert-advice__text {
text-align: center;
margin-top: 12px;
}
.expert-advice__cards {
display: flex;
flex-direction: column;
gap: 32px;
margin-top: 32px;
}
.expert-advice__card {
padding: 30px;
border-radius: 40px;
border: 1px solid #069aff;
display: grid;
grid-template-columns: 48px 1fr;
gap: 20px;
}
.expert-advice__icon {
width: 48px;
height: 48px;
object-fit: contain;
object-position: center;
}
.expert-advice__header {
grid-column: 2/3;
}
.expert-advice__content {
grid-column: 1/3;
}
@media (min-width: 1100px) {
.expert-advice {
margin: 64px 0;
}
.expert-advice__title {
margin-top: 24px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.expert-advice__text {
margin-top: 32px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.expert-advice__cards {
max-width: 1360px;
margin-left: auto;
margin-right: auto;
gap: 64px;
margin-top: 64px;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.expert-advice__card {
padding: 36px 50px;
gap: 30px;
grid-template-columns: 64px 1fr;
}
.expert-advice__icon {
width: 64px;
height: 64px;
}
.expert-advice__header {
padding-right: 200px;
}
}
@media (min-width: 1380px) {
.expert-advice {
margin: 60px 0;
padding: 0;
}
.expert-advice__container {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
.expert-advice__headeer {
grid-column: 3/9;
margin-top: 24px;
}
.expert-advice__tag {
grid-column: 3/9;
}
.expert-advice__text {
grid-column: 3/9;
margin-top: 33px;
}
.expert-advice__cards {
gap: 44px;
margin-top: 60px;
}
}
.description-with-image {
margin: 32px 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.description-with-image__content {
gap: 18px;
display: flex;
flex-direction: column;
}
.description-with-image__image {
width: 100%;
position: relative;
}
.description-with-image__image img {
width: 100%;
display: block;
margin-top: auto;
object-position: right bottom;
height: 100%;
object-fit: contain;
max-height: 300px;
aspect-ratio: 1/1;
z-index: 2;
}
.description-with-image__image::after {
content: "";
position: absolute;
width: 300px;
height: auto;
aspect-ratio: 1060/520;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
background-repeat: no-repeat;
background-size: contain;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/on-dark.svg);
z-index: -1;
}
@media (min-width: 668px) {
.description-with-image__image::after {
width: 500px;
}
}
@media (min-width: 1100px) {
.description-with-image {
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: flex-end;
}
.description-with-image__content {
grid-column: 1/9;
}
.description-with-image__image {
grid-column: 9/13;
}
.description-with-image__image img {
max-height: 100%;
}
}
@media (min-width: 1380px) {
.description-with-image {
margin: 64px auto 100px;
max-width: 1360px;
}
.description-with-image__content {
grid-column: 1/7;
}
.description-with-image__image {
grid-column: 7/13;
}
.description-with-image__image::after {
width: 700px;
}
.description-with-image__image img {
transform: translateX(150px);
}
.description-with-image__content {
gap: 44px;
}
}
@media (min-width: 1900px) {
.description-with-image__header {
font-size: 75px;
}
}
.qualityBlock {
margin-top: 50px;
margin-bottom: 40px;
position: relative;
}
.qualityBlock::after {
content: "";
width: 300vw;
bottom: -40px;
position: absolute;
left: 50%;
height: 1px;
background-color: #C4C4C4;
transform: translateX(-50%);
}
.qualityBlock__container {
display: flex;
flex-direction: column;
gap: 32px;
}
.qualityBlock__slide {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.qualityBlock__slide img {
display: block;
width: 130px;
mix-blend-mode: color-burn;
object-fit: contain;
object-position: center;
height: 130px;
}
.qualityBlock .swiper-pagination {
display: flex;
margin-top: 48px;
justify-content: center;
gap: 24px;
flex-direction: row;
}
.qualityBlock .swiper-pagination .swiper-pagination-bullet {
width: 6px;
padding: 10px;
height: 6px;
border-radius: 3px;
display: block;
position: relative;
}
.qualityBlock .swiper-pagination .swiper-pagination-bullet:hover {
cursor: pointer;
}
.qualityBlock .swiper-pagination .swiper-pagination-bullet::after {
content: "";
position: absolute;
top: 7px;
background-color: #1e274a;
left: 7px;
bottom: 10px;
width: 6px;
height: 6px;
transition: width 0.12s linear;
border-radius: 3px;
}
.qualityBlock .swiper-pagination .swiper-pagination-bullet-active {
width: 70px;
}
.qualityBlock .swiper-pagination .swiper-pagination-bullet-active::after {
background-color: #069aff;
width: 50px;
}
@media (min-width: 1100px) {
.qualityBlock__container {
display: flex;
flex-direction: row;
align-items: center;
}
.qualityBlock__slider {
width: 50%;
}
.qualityBlock__header {
width: 50%;
}
}
@media (min-width: 1380px) {
.qualityBlock__container {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.qualityBlock__container > * {
grid-column: 2/12;
}
.qualityBlock__slider {
width: 100%;
grid-column: 7/12;
grid-row: 1/2;
}
.qualityBlock__header {
grid-column: 2/7;
grid-row: 1/2;
width: 100%;
}
}
@media (min-width: 1900px) {
.qualityBlock {
margin: 100px 0;
}
.qualityBlock::after {
bottom: -50px;
}
.qualityBlock__container {
max-width: 1360px;
}
.qualityBlock__container {
display: flex;
flex-direction: row;
align-items: center;
}
.qualityBlock__slider {
width: 50%;
}
.qualityBlock__header {
width: 50%;
}
.qualityBlock__slide img {
width: 150px;
height: 150px;
}
}
.case-study-intro {
margin: 30px 0 50px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
}
.case-study-intro + .case-study-archive {
margin-top: -20px;
z-index: 10;
position: relative;
}
.case-study-intro > * {
z-index: 1;
position: relative;
}
.case-study-intro::before {
content: "";
pointer-events: none;
position: absolute;
aspect-ratio: 745/650;
height: 250px;
width: auto;
top: 0;
left: -100px;
background: url(//luxon.pl/wp-content/themes/Luxon/img/contact_intro_line.svg) no-repeat;
background-size: contain;
}
.case-study-intro::after {
content: "";
pointer-events: none;
position: absolute;
aspect-ratio: 610/880;
height: 250px;
width: auto;
top: calc(100% - 125px);
right: -150px;
background: url(//luxon.pl/wp-content/themes/Luxon/img/contact_intro_arrow.svg) no-repeat;
background-size: contain;
}
@media (min-width: 900px) {
.case-study-intro::before {
height: 350px;
top: -20px;
left: -60px;
z-index: 0;
}
.case-study-intro::after {
height: 400px;
right: -200px;
top: 100%;
z-index: 0;
}
}
@media (min-width: 1100px) {
.case-study-intro {
max-width: 1360px;
margin: 50px auto 50px;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.case-study-intro + .case-study-archive {
margin-top: 50px;
}
}
@media (min-width: 1380px) {
.case-study-intro {
margin: 20px auto 50px;
}
.case-study-intro::before {
height: 650px;
left: -210px;
top: -40px;
}
.case-study-intro::after {
height: 880px;
left: calc(100% + 80px);
top: -20px;
right: unset;
}
}
@media (min-width: 1900px) {
.case-study-intro {
margin: 50px auto 50px;
max-width: 1360px;
}
}
.case-study-archive {
margin: 50px 0;
}
.case-study-archive__buttons {
display: flex;
gap: 10px;
flex-direction: column;
}
.case-study-archive__buttons .button {
width: 100%;
}
.case-study-archive__more {
margin-top: 24px;
}
.case-study-archive__more .button {
margin-left: auto;
margin-right: auto;
}
.case-study-archive__cards::before, .case-study-archive__cards::after {
transition: all 0.12s linear;
}
.case-study-archive__cards.loading {
position: relative;
}
.case-study-archive__cards.loading::after {
content: "";
position: absolute;
border-radius: 50px;
top: 50%;
width: 50px;
height: 50px;
left: 50%;
transform: translate(-50%, -50%);
border: 10px solid #069aff;
border-top: 10px solid transparent;
z-index: 2;
animation: rotate 2s linear infinite forwards;
}
.case-study-archive__cards.loading::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
top: 0;
left: 0;
backdrop-filter: blur(4px);
background-color: rgba(255, 255, 255, 0.1333333333);
z-index: 1;
}
.case-study-archive__cards .case-study-card:first-of-type {
padding-top: 0;
margin-top: 0;
}
@media (min-width: 668px) {
.case-study-archive__buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.case-study-archive__cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (min-width: 1100px) {
.case-study-archive {
margin: 50px 0 50px;
}
.case-study-archive__buttons {
max-width: 1360px;
margin: 0 auto;
}
}
@media (min-width: 1380px) {
.case-study-archive__buttons {
margin-top: 68px;
max-width: 1080px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.case-study-archive__buttons .button {
width: fit-content;
}
.case-study-archive__cards {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 1300px;
margin-top: 50px;
display: flex;
flex-direction: column;
}
}
@media (min-width: 1900px) {
.case-study-archive {
width: 1800px;
left: 50%;
transform: translateX(-50%);
position: relative;
}
.case-study-archive__cards {
width: 1800px;
}
}
@keyframes rotate {
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
} .contactIntro {
display: flex;
flex-direction: column;
margin: 0px auto 32px;
max-width: 1360px;
}
.contactIntro__row {
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
}
.contactIntro__row::before {
content: "";
pointer-events: none;
position: absolute;
aspect-ratio: 745/650;
height: 250px;
width: auto;
top: 0;
left: -100px;
background: url(//luxon.pl/wp-content/themes/Luxon/img/contact_intro_line.svg) no-repeat;
background-size: contain;
z-index: -1;
}
.contactIntro__row::after {
content: "";
pointer-events: none;
position: absolute;
aspect-ratio: 610/880;
height: 250px;
width: auto;
top: calc(100% - 125px);
right: -150px;
background: url(//luxon.pl/wp-content/themes/Luxon/img/contact_intro_arrow.svg) no-repeat;
background-size: contain;
z-index: -1;
}
.contactIntro__banner {
display: none;
position: relative;
padding: 20px 10px;
margin-top: 32px;
}
.contactIntro__banner::after {
content: "";
background-color: #f6f6f6;
border-radius: 20px;
z-index: -1;
position: absolute;
inset: 0 -10px 0 -10px;
}
.contactIntro__scrolldown {
margin-top: 24px;
display: flex;
flex-direction: row;
justify-content: center;
}
.contactIntro__scrolldown svg {
animation: scrollDown 2s infinite forwards;
width: 40px;
height: 40px;
display: block;
padding: 1px;
}
.contactIntro__scrolldown svg * {
stroke: #1e274a !important;
}
.contactIntro__scrolldown:hover {
cursor: pointer;
}
.contactIntro__text {
display: none;
}
@keyframes scrollDown {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
}
@media (min-width: 900px) {
.contactIntro {
margin: 32px auto;
}
.contactIntro__row {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.contactIntro__row::before {
height: 350px;
top: -20px;
left: -60px;
z-index: 3;
}
.contactIntro__row::after {
height: 400px;
right: -200px;
top: 100%;
z-index: 3;
}
.contactIntro__heading {
grid-column: 1/6;
}
.contactIntro__text {
grid-column: 6/13;
display: block;
}
.contactIntro__banner {
display: block;
padding: 40px;
}
.contactIntro__banner::after {
border-radius: 25px;
inset: 0;
}
}
@media (min-width: 1100px) {
.contactIntro__heading {
grid-column: 1/7;
}
.contactIntro__text {
grid-column: 7/13;
}
.contactIntro + .contact__container {
margin-top: -50px;
}
}
@media (min-width: 1380px) {
.contactIntro {
margin-top: 0px;
}
.contactIntro__row {
gap: 24px;
}
.contactIntro__row::before {
height: 650px;
left: -210px;
z-index: -1;
top: -40px;
}
.contactIntro__row::after {
height: 880px;
left: calc(100% + 80px);
top: -90px;
z-index: -1;
right: unset;
}
.contactIntro__heading {
grid-column: 1/7;
padding-right: 50px;
line-height: 1.5;
}
.contactIntro__heading span {
display: block;
}
.contactIntro__banner {
margin-top: 30px;
padding: 90px;
}
.contactIntro__scrolldown svg {
height: 60px;
width: 60px;
}
}
@media (min-width: 1900px) {
.contactIntro {
margin-top: 80px;
}
.contactIntro__banner {
margin-top: 90px;
padding: 90px;
}
}
.mapBlock {
width: 100%;
height: auto;
aspect-ratio: 4/4;
position: relative;
}
.mapBlock .acf-map {
position: absolute;
top: 0;
margin: 0;
width: 100vw;
left: 50%;
transform: translateX(-50%);
height: calc(100% + 24px);
}
@media (min-width: 900px) {
.mapBlock {
aspect-ratio: 1360/620;
}
}
@media (min-width: 1100px) {
.mapBlock .acf-map {
height: calc(100% + 60px);
}
}
@media (min-width: 1380px) {
.mapBlock .acf-map {
width: 125vw;
}
}
@media (min-width: 1900px) {
.mapBlock .acf-map {
width: 100vw;
}
}
.companyInfo {
display: flex;
flex-direction: column;
gap: 24px;
margin: 32px 0 0;
}
.companyInfo__card {
position: relative;
padding: 30px 0;
}
.companyInfo__card > * {
z-index: 1;
}
.companyInfo__card::after {
content: "";
position: absolute;
background-color: #ebebef;
opacity: 0.5;
border-radius: 30px 30px 0 0;
width: 300vw;
left: 50%;
top: 0px;
bottom: 0px;
transform: translateX(-50%);
}
.companyInfo__card, .companyInfo__plain {
display: flex;
flex-direction: column;
gap: 20px;
}
.companyInfo__iconsSet {
text-decoration: none;
display: grid;
grid-template-columns: 48px 1fr;
gap: 12px;
}
.companyInfo__iconsSet svg {
width: 48px;
height: 48px;
}
.companyInfo__iconsSet .companyInfo__text,
.companyInfo__iconsSet .companyInfo__text * {
transition: color 0.12s linear;
}
.companyInfo a.companyInfo__iconsSet:hover {
cursor: pointer;
color: #069aff;
}
.companyInfo a.companyInfo__iconsSet:hover .companyInfo__text,
.companyInfo a.companyInfo__iconsSet:hover .companyInfo__text * {
color: #069aff;
}
.companyInfo__text {
margin-top: 12px;
}
.companyInfo__text p:not(:last-of-type) {
padding-bottom: 40px;
}
@media (min-width: 1380px) {
.contact + .companyInfo {
margin-top: -36px;
}
.companyInfo {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
margin: 64px 0;
width: 1300px;
left: 50%;
transform: translateX(-50%);
position: relative;
}
.companyInfo__text {
margin-top: 5px;
}
.companyInfo__text, .companyInfo__text * {
line-height: 1.6;
}
.companyInfo__iconSet {
gap: 18px;
}
.companyInfo__plain {
grid-column: 1/7;
padding: 100px 0;
gap: 30px;
}
.companyInfo__card {
gap: 30px;
padding: 100px 0px 50px 50px;
grid-column: 7/13;
}
.companyInfo__card::after {
border-radius: 30px 0 0 40px;
left: 0;
transform: none;
width: 100vw;
}
}
@media (min-width: 1900px) {
.companyInfo {
width: 1800px;
left: 50%;
transform: translateX(-50%);
position: relative;
}
} .blog-archive {
margin: 0px auto 32px;
max-width: 1360px;
}
.blog-archive__row {
margin-bottom: 24px;
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
}
.blog-archive .product-category__buttons {
margin-bottom: 32px;
}
.blog-archive__button {
font-size: 16px;
background-color: transparent;
border: none;
line-height: 20px;
font-family: Sora;
font-weight: 300;
color: #1e274a;
transition: color 0.12s linear;
}
.blog-archive__button--active, .blog-archive__button:hover {
cursor: pointer;
color: #069aff;
}
.blog-archive__cards {
transition: height 0.1s linear;
display: flex;
flex-direction: column;
gap: 20px;
}
.blog-archive__cards::before, .blog-archive__cards::after {
transition: all 0.12s linear;
}
.blog-archive__cards.blog-archive--loading {
position: relative;
}
.blog-archive__cards.blog-archive--loading::after {
content: "";
position: absolute;
border-radius: 50px;
top: 50%;
width: 50px;
height: 50px;
left: 50%;
transform: translate(-50%, -50%);
border: 10px solid #069aff;
border-top: 10px solid transparent;
z-index: 2;
animation: rotate 2s linear infinite forwards;
}
.blog-archive__cards.blog-archive--loading::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
top: 0;
left: 0;
backdrop-filter: blur(4px);
background-color: rgba(255, 255, 255, 0.1333333333);
z-index: 10;
}
@media (min-width: 900px) {
.blog-archive {
gap: 48px;
}
.blog-archive__row {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.blog-archive__row::before {
height: 350px;
top: -20px;
left: -60px;
z-index: 3;
}
.blog-archive__row::after {
height: 400px;
right: -200px;
top: 100%;
z-index: 3;
}
.blog-archive__cards, .blog-archive__buttons {
z-index: 3;
position: relative;
}
.blog-archive__heading {
grid-column: 1/6;
}
.blog-archive__text {
grid-column: 6/13;
}
.blog-archive__cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (min-width: 1100px) {
.blog-archive__heading {
grid-column: 1/7;
}
.blog-archive__text {
grid-column: 7/13;
}
.blog-archive__row {
margin-bottom: 32px;
}
.blog-archive .product-category__buttons {
margin-bottom: 48px;
}
.blog-archive__cards {
gap: 32px;
}
.blog-archive__cards--2 {
grid-template-columns: repeat(2, 1fr);
}
.blog-archive__cards--3 {
grid-template-columns: repeat(3, 1fr);
}
.blog-archive__cards--4 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1380px) {
.blog-archive {
max-width: 1080px;
gap: 64px;
}
.blog-archive__row {
gap: 24px;
margin-bottom: 48px;
}
.blog-archive__row::before {
height: 650px;
left: -210px;
top: -40px;
}
.blog-archive__row::after {
height: 880px;
left: calc(100% + 80px);
top: -90px;
right: unset;
}
.blog-archive__text {
margin-top: 14px;
}
.blog-archive__heading {
grid-column: 1/5;
padding-right: 50px;
line-height: 1.5;
}
.blog-archive__heading span {
display: block;
}
}
@media (min-width: 1900px) {
.blog-archive {
max-width: 1360px;
}
} .aboutIntro {
display: flex;
flex-direction: column;
margin: 0px auto 32px;
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
}
.aboutIntro::before {
content: "";
pointer-events: none;
position: absolute;
aspect-ratio: 745/650;
height: 250px;
width: auto;
top: 0;
left: -100px;
background: url(//luxon.pl/wp-content/themes/Luxon/img/contact_intro_line.svg) no-repeat;
background-size: contain;
}
.aboutIntro::after {
content: "";
pointer-events: none;
position: absolute;
aspect-ratio: 610/880;
height: 250px;
width: auto;
top: calc(100% - 125px);
right: -150px;
background: url(//luxon.pl/wp-content/themes/Luxon/img/contact_intro_arrow.svg) no-repeat;
background-size: contain;
}
.aboutIntro__content {
display: flex;
flex-direction: column;
gap: 24px;
}
@media (min-width: 900px) {
.aboutIntro {
margin: 32px auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.aboutIntro::before {
height: 350px;
top: -20px;
left: -60px;
z-index: 3;
}
.aboutIntro::after {
height: 400px;
right: -200px;
top: 20%;
z-index: 3;
}
.aboutIntro__heading {
grid-column: 1/6;
}
.aboutIntro__content {
grid-column: 6/13;
}
.aboutIntro__title {
grid-column: 1/13;
text-align: center;
margin-top: 50px;
z-index: 5;
position: relative;
}
}
@media (min-width: 1100px) {
.aboutIntro__heading {
grid-column: 1/5;
}
.aboutIntro__content {
grid-column: 7/13;
}
}
@media (min-width: 1380px) {
.aboutIntro {
margin-top: 0px;
gap: 24px;
margin-bottom: 70px;
max-width: 1080px;
}
.aboutIntro::before {
z-index: -1;
height: 650px;
left: -210px;
top: -40px;
}
.aboutIntro::after {
height: 880px;
left: calc(100% + 80px);
top: -340px;
z-index: -1;
right: unset;
}
.aboutIntro__heading {
grid-column: 1/5;
line-height: 1.5;
}
.aboutIntro__heading span {
display: block;
}
}
@media (min-width: 1900px) {
.aboutIntro {
margin-top: 80px;
max-width: 1360px;
}
}
.allProducts {
margin: 0 0 50px;
}
.allProducts__image {
display: none;
}
.allProducts__inner {
border-radius: 40px;
padding: 30px;
background-color: #069aff;
}
.allProducts__heading {
text-align: center;
}
.allProducts__text {
margin-top: 20px;
text-align: center;
}
.allProducts .button {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
@media (min-width: 900px) {
.allProducts__inner {
overflow: hidden;
position: relative;
}
.allProducts__inner::after {
content: "";
position: absolute;
aspect-ratio: 2773/530;
width: auto;
height: 300px;
left: 30%;
top: calc(50% - 150px);
background-repeat: no-repeat;
background-size: contain;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/lux.svg);
z-index: 0;
opacity: 0.7;
}
.allProducts__inner > * {
position: relative;
z-index: 1;
}
}
@media (min-width: 1380px) {
.allProducts {
overflow-y: clip;
margin: 0px;
margin: -70px auto 70px;
padding-top: 70px;
width: 1300px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.allProducts__image {
display: block;
width: 100%;
position: relative;
height: 100%;
}
.allProducts__image img {
position: absolute;
height: calc(100% + 240px);
width: auto;
object-fit: contain;
bottom: -100px;
display: block;
right: -100px;
}
.allProducts__inner {
display: grid;
gap: 50px;
padding: 100px;
overflow: visible;
grid-template-columns: 1fr 1fr;
}
.allProducts__inner::after {
bottom: 0;
top: unset;
height: 500px;
left: 45%;
}
.allProducts__heading {
text-align: left;
}
.allProducts__text {
text-align: left;
margin-top: 20px;
}
.allProducts .button {
margin-left: 0;
margin-top: 40px;
}
.allProducts--inside .allProducts__inner {
padding: 70px 100px;
align-items: center;
}
.allProducts--inside .allProducts__inner::after {
content: unset;
}
.allProducts--inside .allProducts__image {
grid-column: 2/3;
display: block;
height: 100%;
aspect-ratio: 16/9;
width: auto;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
bottom: 0;
mask-image: url(//luxon.pl/wp-content/themes/Luxon/img/x-krzywe.svg);
mask-size: cover;
mask-position: center;
}
.allProducts--inside .allProducts__image img {
height: 100%;
display: block;
width: 100%;
object-fit: cover;
bottom: 0;
right: 0;
}
}
@media (min-width: 1900px) {
.allProducts {
margin: -60px 0 60px;
width: 1800px;
left: 50%;
position: relative;
transform: translateX(-50%);
}
.allProducts__inner {
padding: 100px;
grid-template-columns: repeat(12, 1fr);
}
.allProducts__image {
grid-column: 7/13;
}
.allProducts__image img {
height: calc(100% + 300px);
}
.allProducts--inside .allProducts__image {
grid-column: 7/13;
left: unset;
transform: none;
}
.allProducts__content {
grid-column: 2/7;
}
}
.aboutCards {
max-width: 1360px;
margin: 50px auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.aboutCards__card {
position: relative;
border-radius: 30px;
overflow: hidden;
aspect-ratio: 1/1;
width: 300px;
max-width: 100%;
}
.aboutCards__card:hover {
cursor: pointer;
}
.aboutCards__card:hover .aboutCards__back {
opacity: 1;
}
.aboutCards__front {
background-color: #ffffff;
border: 1px solid #069aff;
border-radius: 30px;
height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
padding: 30px;
}
.aboutCards__back {
position: absolute;
inset: -1px;
opacity: 0;
padding: 30px;
background-color: #1e274a;
transition: 0.12s linear opacity;
}
@media (min-width: 668px) {
.aboutCards {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.aboutCards {
gap: 30px;
width: fit-content;
}
}
@media (min-width: 1100px) {
.aboutCards {
grid-template-columns: repeat(3, 320px);
position: relative;
width: 100%;
}
.aboutCards__card {
width: 100%;
}
.aboutCards::before {
content: "";
position: absolute;
aspect-ratio: 450/930;
height: 400px;
width: auto;
position: absolute;
top: calc(50% - 200px);
right: calc(120% + 50px);
transform: rotate(180deg);
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/aboutCardsArrow.svg);
background-size: contain;
background-repeat: no-repeat;
}
.aboutCards::after {
content: "";
position: absolute;
aspect-ratio: 450/930;
height: 400px;
width: auto;
z-index: -1;
position: absolute;
top: calc(50% - 200px);
left: calc(100% + 50px);
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/aboutCardsArrow.svg);
background-size: contain;
background-repeat: no-repeat;
}
}
@media (min-width: 1380px) {
.aboutCards {
max-width: 1080px;
gap: 16px;
grid-template-columns: repeat(4, 1fr);
width: 100%;
margin: 70px auto;
}
.aboutCards::before {
right: calc(50% - 170px);
transform: translateX(-50vw) rotate(180deg);
}
.aboutCards::after {
left: calc(50% - 170px);
transform: translateX(50vw);
}
.aboutCards__card {
width: 100%;
}
.aboutCards__front {
padding: 20px;
}
.aboutCards__back {
padding: 20px;
}
}
@media (min-width: 1900px) {
.aboutCards {
max-width: 1360px;
grid-template-columns: repeat(4, 320px);
gap: 24px;
}
.aboutCards__front {
padding: 30px;
}
.aboutCards__back {
padding: 30px;
}
}
.modernization {
margin: 40px auto;
display: flex;
flex-direction: column;
max-width: 1360px;
gap: 32px;
}
.modernization--reversed {
flex-direction: column-reverse;
}
.modernization__content {
display: flex;
flex-direction: column;
gap: 20px;
}
.modernization__image {
width: 100%;
}
.modernization__image img {
border-radius: 40px;
width: 100%;
display: block;
}
.modernization .button {
max-width: 100%;
width: fit-content;
}
@media (min-width: 1380px) {
.modernization {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 32px;
margin: 70px auto;
max-width: 1300px;
align-items: center;
}
.modernization__image {
grid-column: 6/11;
}
.modernization__image img {
aspect-ratio: 16/9;
height: auto;
object-fit: cover;
width: 100%;
}
.modernization__content {
grid-column: 1/6;
padding-right: 50px;
gap: 36px;
}
.modernization .button {
grid-column: 1/6;
}
.modernization--reversed .modernization__image {
grid-column: 1/6;
grid-row: 1;
}
.modernization--reversed .modernization__content {
padding-right: 0px;
padding-left: 50px;
grid-row: 1;
grid-column: 6/11;
}
}
@media (min-width: 1900px) {
.modernization {
max-width: 1360px;
}
}
.aboutNumbers {
max-width: 1360px;
padding: 40px 0;
margin: 40px auto;
position: relative;
}
.aboutNumbers::after {
content: "";
position: absolute;
background-color: #ebebef;
width: 300vw;
left: 50%;
transform: translateX(-50%);
top: 0;
opacity: 0.5;
bottom: 0;
}
.aboutNumbers > * {
position: relative;
z-index: 1;
}
.aboutNumbers__inner {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 32px;
}
.aboutNumbers__heading {
text-align: center;
}
.aboutNumbers__bar {
background-color: #ffffff;
padding: 30px;
border-radius: 40px;
}
@media (min-width: 900px) {
.aboutNumbers {
padding: 60px 0 100px;
}
.aboutNumbers__inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1100px) {
.aboutNumbers {
margin: 70px auto;
}
.aboutNumbers__inner {
gap: 20px;
margin-top: 60px;
}
}
@media (min-width: 1380px) {
.aboutNumbers {
max-width: 1080px;
}
}
@media (min-width: 1900px) {
.aboutNumbers {
max-width: 1360px;
}
}
.personalQuote {
position: relative;
padding: 50px 0 0;
margin: 32px 0;
}
.personalQuote::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 300vw;
transform: translateX(-50%);
opacity: 1;
background-color: #ebebef;
opacity: 0.5;
}
.personalQuote__inner {
position: relative;
z-index: 1;
background-color: #ffffff;
padding: 20px;
border-radius: 20px;
}
.personalQuote__inner::after {
content: "";
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/quote.svg);
background-size: contain;
aspect-ratio: 135/110;
width: 70px;
height: auto;
display: block;
position: absolute;
bottom: -30px;
right: 0;
}
.personalQuote__person {
position: relative;
display: block;
z-index: 1;
margin-top: 20px;
width: 250px;
margin-left: auto;
margin-right: auto;
}
.personalQuote__details {
margin-top: 20px;
}
@media (min-width: 900px) {
.personalQuote {
display: grid;
padding: 70px 0;
}
.personalQuote__inner {
padding: 50px 200px 50px 50px;
}
.personalQuote__inner::after {
width: 100px;
left: 65%;
right: unset;
bottom: -50px;
}
.personalQuote__person {
right: -100px;
bottom: 0;
position: absolute;
}
}
@media (min-width: 1100px) {
.personalQuote {
padding: 130px 0;
max-width: 1360px;
margin: 70px auto;
}
.personalQuote__inner {
padding-right: 40%;
z-index: 10;
}
.personalQuote__inner::after {
width: 135px;
left: calc(50% - 70px);
bottom: -60px;
}
.personalQuote__person {
width: auto;
height: calc(100% + 20px);
z-index: 10;
margin-top: 0;
top: -20px;
bottom: 0;
right: -50px;
}
}
@media (min-width: 1380px) {
.personalQuote {
max-width: 1300px;
padding: 80px 0;
}
.personalQuote__inner::after {
width: 110px;
left: calc(50% - 100px);
bottom: -60px;
}
}
@media (min-width: 1900px) {
.personalQuote {
padding: 130px 0;
max-width: 1360px;
}
.personalQuote__inner::after {
width: 135px;
left: calc(50% - 70px);
bottom: -60px;
}
}
.tabs {
display: flex;
flex-direction: column;
gap: 16px;
}
.tabs__tab {
padding: 30px;
border: 1px solid #069aff;
border-radius: 40px;
position: relative;
}
.tabs__tab::after {
content: "";
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
top: 36px;
left: 10px;
background-color: #069aff;
}
.tabs__tag {
font-weight: 300;
margin-top: 20px;
color: #92D3FF;
margin-left: auto;
text-align: right;
}
.tabs__tag::first-letter {
color: #069aff;
font-weight: 800;
}
@media (min-width: 900px) {
.tabs__tab {
display: grid;
grid-template-columns: repeat(10, 1fr);
align-items: center;
}
.tabs__tab::after {
top: calc(50% - 6px);
left: 30px;
}
.tabs__tag {
grid-column: 8/11;
text-align: left;
padding-left: 50px;
width: 100%;
grid-row: 1/2;
margin-top: 0;
}
.tabs__text {
grid-column: 1/8;
grid-row: 1/2;
padding-left: 30px;
}
}
@media (min-width: 1380px) {
.tabs {
margin: 70px auto;
max-width: 1300px;
}
.tabs__tab {
padding: 24px;
}
.tabs__tag {
font-size: 30px;
transform: scale(0.8);
}
}
@media (min-width: 1900px) {
.tabs {
max-width: 1360px;
}
.tabs__tag {
transform: none;
}
} .postHero {
height: 100vh;
position: relative;
}
.postHero__background {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.postHero__background::after {
content: "";
position: absolute;
inset: 0;
background-color: #151c33;
opacity: 75%;
display: block;
}
.postHero__category {
margin-top: auto;
}
.postHero__heading {
max-width: 100%;
text-align: center;
word-wrap: break-word;
margin-bottom: auto;
padding-bottom: 50px;
margin-top: 40px;
}
.postHero__container {
position: relative;
z-index: 1;
display: flex;
align-items: center;
flex-direction: column;
padding-bottom: 64px;
height: 100%;
padding-top: 20px;
}
.postHero__breadcrumbs {
justify-self: flex-start;
margin-right: auto;
z-index: 2;
}
.postHero__scrolldown {
margin-top: auto;
width: 50px;
height: 50px;
}
.postHero__scrolldown svg {
animation: scrollDown 2s infinite forwards;
}
.postHero__scrolldown svg * {
transition: stroke 0.12s linear;
}
.postHero__scrolldown:hover svg * {
stroke: #069aff !important;
}
@media (min-width: 900px) {
.postHero {
height: 600px;
width: 100%;
}
.postHero__container {
position: relative;
}
.postHero__container::before {
content: "";
position: absolute;
aspect-ratio: 1156.67/929;
height: 100%;
top: 0;
bottom: 0;
left: -390px;
background-size: contain;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/heroDecor.svg);
}
}
@media (min-width: 1100px) {
.postHero {
height: 700px;
}
.postHero__breadcrumbs {
margin-top: 50px;
}
.postHero__container::before {
left: -460px;
}
}
@media (min-width: 1380px) {
.postHero {
height: 880px;
}
.postHero__container {
padding-bottom: 90px;
}
.postHero__container::before {
left: -600px;
}
.postHero__heading {
margin-top: 80px;
}
.postHero__scrolldown {
margin-bottom: 100px;
width: 48px;
height: 48px;
}
}
@media (min-width: 1900px) {
.postHero {
height: 1080px;
max-height: 1080px;
}
.postHero__container {
max-width: 1360px;
}
.postHero__container::before {
left: -740px;
}
}
.singleContent__container .wp-block-columns *,
.singleContent__container > p,
.singleContent__container > ul,
.singleContent__container > ol {
font-size: 17px;
line-height: 1.5;
}
.singleContent__container .wp-block-columns * > li,
.singleContent__container > p > li,
.singleContent__container > ul > li,
.singleContent__container > ol > li {
font-size: 17px;
line-height: 1.5;
}
@media (min-width: 1900px) {
.singleContent__container .wp-block-columns * > li,
.singleContent__container > p > li,
.singleContent__container > ul > li,
.singleContent__container > ol > li {
font-size: 20px;
}
}
@media (min-width: 1900px) {
.singleContent__container .wp-block-columns *,
.singleContent__container > p,
.singleContent__container > ul,
.singleContent__container > ol {
font-size: 20px;
}
}
@media (min-width: 1100px) {
.singleContent__container {
margin: 60px auto;
}
}
@media (min-width: 1380px) {
.singleContent .blog.blog__container {
width: 1300px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.singleContent__container {
max-width: 1080px;
}
}
@media (min-width: 1900px) {
.singleContent .blog.blog__container {
width: 1360px;
}
.singleContent__container {
max-width: 1360px;
}
.singleContent__container .wp-block-columns *,
.singleContent__container > p,
.singleContent__container > ul,
.singleContent__container > ol {
font-size: 19px;
line-height: 1.5;
}
.singleContent__container .wp-block-columns * > li,
.singleContent__container > p > li,
.singleContent__container > ul > li,
.singleContent__container > ol > li {
font-size: 19px;
line-height: 1.5;
}
}
@media (min-width: 1900px) and (min-width: 1900px) {
.singleContent__container .wp-block-columns * > li,
.singleContent__container > p > li,
.singleContent__container > ul > li,
.singleContent__container > ol > li {
font-size: 25px;
}
}
@media (min-width: 1900px) and (min-width: 1900px) {
.singleContent__container .wp-block-columns *,
.singleContent__container > p,
.singleContent__container > ul,
.singleContent__container > ol {
font-size: 25px;
}
}
.freeAnalysis {
margin: 0 0 50px;
}
.freeAnalysis__image {
display: none;
}
.freeAnalysis__inner {
border-radius: 40px;
padding: 30px;
background-color: #069aff;
}
.freeAnalysis__heading {
text-align: center;
}
.freeAnalysis .button {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
@media (min-width: 900px) {
.freeAnalysis__inner {
overflow: hidden;
position: relative;
}
.freeAnalysis__inner::after {
content: "";
position: absolute;
width: 660px;
height: auto;
aspect-ratio: 1060/520;
left: -200px;
top: calc(50% - 60px);
background-repeat: no-repeat;
background-size: contain;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/on.svg);
z-index: 0;
opacity: 0.4;
}
.freeAnalysis__inner > * {
position: relative;
z-index: 1;
}
}
@media (min-width: 1380px) {
.freeAnalysis {
overflow-y: clip;
left: 50%;
position: relative;
transform: translateX(-50%);
width: 1300px;
margin: 0px;
padding: 70px 0px;
}
.freeAnalysis__image {
display: block;
position: absolute;
top: unset;
bottom: 0;
right: 50px;
height: calc(100% + 200px);
width: 43%;
object-fit: contain;
object-position: bottom;
}
.freeAnalysis__image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.freeAnalysis__inner {
display: grid;
gap: 20px 50px;
padding: 100px;
overflow: visible;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr auto;
}
.freeAnalysis__inner::after {
width: 1080px;
}
.freeAnalysis__heading {
text-align: left;
grid-column: 1/8;
grid-row: 1/2;
}
.freeAnalysis .button {
margin-left: 0;
margin-top: 0;
grid-column: 1/8;
grid-row: 2/3;
}
}
@media (min-width: 1900px) {
.freeAnalysis {
width: 1800px;
}
.freeAnalysis__inner {
padding: 100px;
grid-template-columns: repeat(12, 1fr);
}
.freeAnalysis__inner::after {
width: 800px;
right: 0;
left: unset;
bottom: unset;
top: 50%;
transform: translateY(-50%);
}
.freeAnalysis__image {
height: calc(100% + 300px);
}
.freeAnalysis__heading {
grid-column: 2/8;
}
.freeAnalysis .button {
grid-column: 2/8;
}
}
.testimoniesBlock {
background-color: #ebebef;
position: relative;
margin: 40px 0;
z-index: 1;
position: relative;
padding: 40px 0;
}
.testimoniesBlock::after {
content: "";
position: absolute;
width: 300vw;
height: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #ebebef;
top: 0;
bottom: 0;
z-index: -1;
}
.testimoniesBlock__header {
text-align: center;
display: block;
max-width: 950px;
margin-left: auto;
margin-right: auto;
}
.testimonial {
background-color: #ffffff;
border-radius: 40px;
padding: 20px;
display: flex;
flex-direction: column-reverse;
gap: 32px;
position: relative;
}
.testimonial::after {
content: "";
position: absolute;
aspect-ratio: 135/110;
width: 50px;
height: auto;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/quote.svg);
background-repeat: no-repeat;
background-size: contain;
bottom: -20px;
right: 0px;
}
.testimonial__person {
display: grid;
grid-template-columns: 80px 1fr;
column-gap: 20px;
}
.testimonial__person img {
width: 80px;
height: 80px;
object-fit: cover;
display: block;
grid-column: 1/2;
grid-row: 1/3;
}
.testimonial__name {
font-size: 16px;
color: #069aff;
font-weight: 600;
}
.testimonial__position {
font-size: 15px;
font-weight: 400;
line-height: 19px;
}
.testimonial__text {
font-size: 17px;
line-height: 1.5;
}
@media (min-width: 1900px) {
.testimonial__text {
font-size: 20px;
}
}
.testimonial__text .button {
margin-top: 32px;
}
@media (min-width: 1100px) {
.testimonial {
display: grid;
grid-template-columns: 2fr 1fr;
padding: 40px;
}
.testimonial__person {
grid-template-rows: auto 1fr;
}
}
@media (min-width: 1380px) {
.testimoniesBlock {
width: 1080px;
position: relative;
left: 50%;
transform: translateX(-50%);
padding-top: 80px;
padding-bottom: 80px;
}
.testimonial {
column-gap: 70px;
padding: 70px;
}
.testimonial::after {
right: 166px;
bottom: -34px;
width: 135px;
}
.testimonial__person {
grid-template-columns: 135px 1fr;
}
.testimonial__person img {
width: 135px;
height: 135px;
}
.testimonial__name {
margin-top: 23px;
}
}
@media (min-width: 1900px) {
.testimoniesBlock {
width: 1360px;
margin: 80px 0;
}
}
.blogImage {
width: 100%;
display: block;
border-radius: 32px;
}
@media (min-width: 1100px) {
.blogImage {
border-radius: 40px;
}
}
.author {
position: relative;
margin: 60px 0;
}
.author::after {
content: "";
position: absolute;
width: 300vw;
height: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0.5;
background-color: #ebebef;
top: 0;
bottom: 0;
}
.author__text {
text-align: center;
margin: 20px auto;
max-width: 1000px;
}
.author__container {
z-index: 1;
position: relative;
padding-top: 50px;
padding-bottom: 50px;
}
.author__header {
text-align: center;
display: block;
max-width: 950px;
margin-left: auto;
margin-right: auto;
}
.author__slider {
margin-top: 32px;
}
.author__slider > .swiper-prev,
.author__slider > .swiper-next {
display: none;
}
.author .swiper .swiper-navigation {
display: flex;
gap: 12px;
align-items: center;
flex-direction: row;
}
.author .swiper .swiper-navigation .swiper-pagination-bullet {
width: 6px;
padding: 10px;
height: 6px;
border-radius: 3px;
display: block;
position: relative;
}
.author .swiper .swiper-navigation .swiper-pagination-bullet:hover {
cursor: pointer;
}
.author .swiper .swiper-navigation .swiper-pagination-bullet::after {
content: "";
position: absolute;
top: 7px;
background-color: #1e274a;
left: 7px;
bottom: 10px;
width: 6px;
height: 6px;
transition: width 0.12s linear;
border-radius: 3px;
}
.author .swiper .swiper-navigation .swiper-pagination-bullet-active {
width: 70px;
}
.author .swiper .swiper-navigation .swiper-pagination-bullet-active::after {
background-color: #069aff;
width: 50px;
}
.author .swiper .swiper-controls {
margin-top: 40px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.author .swiper .swiper-controls .swiper-prev,
.author .swiper .swiper-controls .swiper-next {
height: 60px;
width: 60px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.author .swiper .swiper-controls .swiper-prev svg *,
.author .swiper .swiper-controls .swiper-next svg * {
stroke: #069aff !important;
transition: stroke 0.12s linear;
}
.author .swiper .swiper-controls .swiper-prev:hover,
.author .swiper .swiper-controls .swiper-next:hover {
cursor: pointer;
}
.author .swiper .swiper-controls .swiper-prev:hover svg *,
.author .swiper .swiper-controls .swiper-next:hover svg * {
stroke: #1e274a !important;
}
.author .swiper .swiper-controls .swiper-next svg {
transform: rotate(-90deg);
}
.author .swiper .swiper-controls .swiper-prev svg {
transform: rotate(90deg);
}
.author .swiper .swiper-slide {
padding-bottom: 20px;
}
.authorI {
background-color: #ffffff;
border-radius: 40px;
padding: 20px;
display: flex;
flex-direction: column-reverse;
gap: 32px;
position: relative;
}
.authorI::after {
content: "";
display: none;
position: absolute;
aspect-ratio: 135/110;
width: 100px;
height: auto;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/quote.svg);
background-repeat: no-repeat;
background-size: contain;
bottom: -20px;
right: 32px;
}
.authorI__person {
display: grid;
grid-template-columns: 80px 1fr;
column-gap: 20px;
}
.authorI__person img {
width: 80px;
height: 80px;
object-fit: cover;
display: block;
grid-column: 1/2;
grid-row: 1/3;
}
.authorI__text .button {
margin-top: 32px;
}
@media (min-width: 1100px) {
.authorI {
display: grid;
grid-template-columns: 2fr 1fr;
padding: 40px;
}
.authorI__person {
grid-template-rows: auto 1fr;
}
.author .swiper .swiper-navigation {
gap: 24px;
}
.author .swiper .swiper-controls {
justify-content: center;
gap: 50px;
}
}
@media (min-width: 1380px) {
.author {
width: 1300px;
left: 50%;
transform: translateX(-50%);
position: relative;
}
.author__container {
padding-top: 80px;
padding-bottom: 80px;
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.author__container > * {
grid-column: 2/12;
}
.author__slider {
margin-top: 50px;
}
.author__header span {
display: block;
}
.authorI {
column-gap: 70px;
padding: 70px;
}
.authorI::after {
right: 166px;
bottom: -34px;
width: 135px;
}
.authorI__person {
grid-template-columns: 90px 1fr !important;
}
.authorI__person img {
width: 90px !important;
height: 90px !important;
}
.authorI__name {
margin-top: 13px !important;
}
}
@media (min-width: 1900px) {
.author {
width: 1800px;
margin: 100px auto;
}
.author__container > * {
grid-column: 1/13;
}
.author__slider {
display: flex;
flex-direction: row;
margin-top: 80px;
align-items: center;
}
.author .swiper {
max-width: 1360px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.authorI {
column-gap: 70px;
padding: 70px;
}
.authorI::after {
right: 166px;
bottom: -34px;
width: 135px;
}
.authorI__person {
grid-template-columns: 135px 1fr !important;
}
.authorI__person img {
width: 135px !important;
height: 135px !important;
}
.authorI__name {
margin-top: 13px !important;
}
}
.tip {
padding: 40px 20px;
margin: 40px -20px;
position: relative;
background-color: #ffffff;
border-radius: 30px;
}
.tip::after {
content: "";
top: -20px;
bottom: -20px;
position: absolute;
left: 50%;
width: 200vw;
transform: translateX(-50%);
z-index: -1;
background-color: #ffffff;
}
.tip--darkContent {
background-color: #ebebef;
}
.tip--dark::after {
background-color: #ebebef;
}
.tip__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.tip__image {
width: 40px;
height: 40px;
object-fit: contain;
object-position: center;
display: block;
}
.tip__image__container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
@media (min-width: 900px) {
.tip {
margin-top: 70px;
margin-bottom: 70px;
display: grid;
grid-template-columns: 80px 1fr;
gap: 100px;
padding-left: 40px;
padding-right: 40px;
margin-left: 0;
margin-right: 0;
}
.tip::after {
top: -35px;
bottom: -35px;
}
.tip__image {
width: 100%;
aspect-ratio: 1/1;
height: auto;
}
} .challanges {
margin: 32px 0;
}
.challanges__heading {
text-align: center;
}
.challanges__cards {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(4, 300px);
gap: 30px;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.challanges__cards::-webkit-scrollbar {
display: none;
}
.challanges__card {
scroll-snap-align: center;
aspect-ratio: 1/1;
border: 1px solid #069aff;
border-radius: 40px;
width: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.challanges__icon {
height: 64px;
width: 64px;
margin-top: 50px;
margin-left: 50px;
}
.challanges__text {
margin: 20px 50px 40px;
}
@media (min-width: 900px) {
.challanges {
margin: 50px 0;
}
.challanges__cards {
margin-top: 60px;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1100px) {
.challanges__cards {
align-items: stretch;
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1380px) {
.challanges {
margin: 75px 0;
}
.challanges__cards {
grid-template-columns: repeat(var(--columns, 4), 1fr);
}
}
.concept {
margin: 30px 0;
display: flex;
flex-direction: column;
gap: 32px;
}
.concept__row {
display: flex;
flex-direction: column;
gap: 10px;
}
.concept__image {
width: 100%;
border-radius: 40px;
overflow: hidden;
}
.concept__card {
border: 1px solid #069aff;
border-radius: 40px;
padding: 30px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.concept__product {
position: relative;
left: -30px;
width: 100%;
display: block;
margin-top: auto;
bottom: -30px;
}
.concept__text {
margin-top: 20px;
}
@media (min-width: 900px) {
.concept__row {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
.concept__row--reversed .concept__image {
grid-column: 2/3;
grid-row: 1/2;
}
.concept__row--reversed .concept__card {
grid-column: 1/2;
grid-row: 1/2;
}
.concept__image {
object-fit: cover;
}
}
@media (min-width: 1100px) {
.concept__row {
grid-template-columns: 2fr 1fr;
}
.concept__row--reversed {
grid-template-columns: 1fr 2fr;
}
}
@media (min-width: 1380px) {
.concept {
margin: 60px 0;
gap: 40px;
}
.concept__card {
padding: 64px 40px;
}
.concept__row {
gap: 40px;
grid-template-columns: 7fr 3fr;
}
.concept__row--reversed {
grid-template-columns: 3fr 7fr;
}
.concept__product {
bottom: -64px;
left: -40px;
right: -40px;
width: calc(100% + 80px);
}
}
.effectBlock {
position: relative;
--position: 50%;
}
.effectBlock__image {
aspect-ratio: 16/9;
width: 100%;
height: 100%;
object-position: left;
object-fit: cover;
display: block;
background-size: cover;
}
.effectBlock__image--1 {
position: absolute;
inset: 0;
width: var(--position);
}
.effectBlock__input {
cursor: pointer;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.effectBlock__controll {
position: absolute;
pointer-events: none;
inset: 0;
left: var(--position);
}
.effectBlock__controll img {
top: 50%;
position: absolute;
pointer-events: none;
width: 50px;
transform: translate(-50%, -50%);
}
.effectBlock__controll::after {
pointer-events: none;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -1px;
width: 2px;
background-color: #ffffff;
}
@media (min-width: 1100px) {
.effectBlock {
margin: 40px 0;
}
.effectBlock__controll img {
width: 120px;
}
.effectBlock__controll::after {
left: -3px;
width: 7px;
}
}
@media (min-width: 1380px) {
.effectBlock {
width: 1300px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
}
@media (min-width: 1900px) {
.effectBlock {
width: 1800px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
}
.finansialAnalysis {
display: flex;
flex-direction: column;
gap: 32px;
margin: 30px 0;
}
.finansialAnalysis__card {
padding: 30px;
border-radius: 40px;
border: 1px solid #069aff;
}
.finansialAnalysis__heading {
text-align: center;
margin-bottom: 32px;
display: block;
padding: 0 40px;
}
.finansialAnalysis__image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
width: 400px;
display: block;
}
@media (min-width: 1100px) {
.finansialAnalysis {
margin: 64px 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.finansialAnalysis__card {
display: flex;
flex-direction: column;
}
.finansialAnalysis__image {
margin-top: auto;
width: unset;
}
}
.caseStudyGallery {
position: relative;
}
.caseStudyGallery__prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10px;
background-color: #ffffff;
padding: 16px;
border-radius: 50%;
z-index: 20;
aspect-ratio: 1/1;
}
.caseStudyGallery__prev svg {
transform: rotate(-90deg);
width: 20px;
height: 20px;
display: block;
}
.caseStudyGallery__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
background-color: #ffffff;
padding: 16px;
border-radius: 50%;
z-index: 20;
aspect-ratio: 1/1;
}
.caseStudyGallery__next svg {
transform: rotate(90deg);
width: 20px;
height: 20px;
display: block;
}
.caseStudyGallery__prev:hover, .caseStudyGallery__next:hover {
cursor: pointer;
}
.caseStudyGallery__prev:hover svg *, .caseStudyGallery__next:hover svg * {
stroke: #069aff;
}
.caseStudyGallery .swiper-slide img {
aspect-ratio: 16/9;
width: 100%;
object-fit: cover;
}
.caseStudyGallery .swiper-navigation {
display: flex;
gap: 24px;
align-items: center;
flex-direction: row;
justify-content: center;
margin-top: 30px;
width: 100%;
}
.caseStudyGallery .swiper-navigation .swiper-pagination-bullet {
width: 6px;
padding: 10px;
height: 6px;
border-radius: 3px;
display: block;
position: relative;
}
.caseStudyGallery .swiper-navigation .swiper-pagination-bullet:hover {
cursor: pointer;
}
.caseStudyGallery .swiper-navigation .swiper-pagination-bullet::after {
content: "";
position: absolute;
top: 7px;
background-color: #1e274a;
left: 7px;
bottom: 10px;
width: 6px;
height: 6px;
transition: width 0.12s linear;
border-radius: 3px;
}
.caseStudyGallery .swiper-navigation .swiper-pagination-bullet-active {
width: 70px;
}
.caseStudyGallery .swiper-navigation .swiper-pagination-bullet-active::after {
background-color: #069aff;
width: 50px;
}
@media (min-width: 900px) {
.caseStudyGallery__prev {
left: 34px;
}
.caseStudyGallery__next {
right: 34px;
}
}
@media (min-width: 1380px) {
.caseStudyGallery__prev, .caseStudyGallery__next {
padding: 14px;
}
.caseStudyGallery__prev svg, .caseStudyGallery__next svg {
width: 26px;
height: 26px;
}
}
@media (min-width: 1380px) {
.caseStudyGallery {
position: relative;
width: 1800px;
transform: translate(-50%);
left: 50%;
}
}
.caseStudyIntro {
margin-top: 10px;
}
.caseStudyIntro__inner {
background-color: #069aff;
padding: 30px;
border-radius: 40px;
margin-top: 24px;
}
.caseStudyIntro__logo {
width: 90px;
height: 90px;
display: block;
border-radius: 50%;
background-color: #ffffff;
display: block;
overflow-y: clip;
overflow-x: clip;
}
.caseStudyIntro__logo img {
width: 100%;
object-fit: contain;
height: 100%;
display: block;
}
.caseStudyIntro__heading {
margin-top: 18px;
}
.caseStudyIntro__text {
margin-top: 24px;
}
.caseStudyIntro__image {
display: none;
}
@media (min-width: 1100px) {
.caseStudyIntro {
margin-top: -40px;
}
.caseStudyIntro__inner {
display: grid;
grid-template-columns: repeat(12, 1fr);
position: relative;
overflow: hidden;
}
.caseStudyIntro__heading {
line-height: 1.2;
margin-top: 30px;
}
.caseStudyIntro__heading b {
display: block;
}
.caseStudyIntro__logo {
width: 140px;
height: 140px;
}
.caseStudyIntro__text {
margin-top: 30px;
}
.caseStudyIntro__content {
grid-column: 1/7;
grid-row: 1/2;
display: flex;
flex-direction: column;
}
.caseStudyIntro__image {
display: block;
grid-column: 7/13;
grid-row: 1/2;
width: calc(100% + 60px);
position: absolute;
top: -30px;
bottom: -30px;
}
.caseStudyIntro__image::after {
content: "";
position: absolute;
inset: 0;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/x-krzywe.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.caseStudyIntro__image img {
height: 100%;
display: block;
width: 100%;
object-fit: cover;
}
}
@media (min-width: 1380px) {
.caseStudyIntro {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 1300px;
}
.caseStudyIntro__logo {
width: 140px;
height: 140px;
}
.caseStudyIntro__inner {
padding: 50px;
}
.caseStudyIntro__image {
top: -50px;
bottom: -50px;
object-fit: right;
height: calc(100% + 100px);
}
.caseStudyIntro__image img {
width: 100%;
}
.caseStudyIntro__content {
grid-column: 1/6;
}
}
@media (min-width: 1900px) {
.caseStudyIntro {
width: 1360px;
margin-bottom: 100px;
}
.caseStudyIntro__inner {
position: relative;
padding-left: 0;
padding-right: 0;
overflow: visible;
}
.caseStudyIntro__inner::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1800px;
display: block;
transform: translateX(-50%);
border-radius: 40px;
z-index: -1;
background-color: #069aff;
}
.caseStudyIntro__image {
grid-column: 8/13;
}
}
.other {
margin: 40px 0;
position: relative;
}
.other::after {
content: "";
aspect-ratio: 745/650;
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/other_decor.svg);
background-size: contain;
background-repeat: no-repeat;
width: 700px;
height: auto;
position: absolute;
left: 0;
top: 40px;
z-index: -1;
}
.other__heading {
text-align: center;
}
.other__posts {
display: flex;
flex-direction: column;
margin-top: 40px;
gap: 24px;
}
.other .button {
margin-left: auto;
margin-right: auto;
margin-top: 24px;
}
.other__image {
aspect-ratio: 690/370;
border-radius: 40px;
width: 100%;
}
.other__title {
margin-top: 12px;
}
.other__title span {
display: block;
}
.other__post__link {
text-decoration: none;
}
.other .card__link {
margin-top: 12px;
}
@media (min-width: 1100px) {
.other {
margin: 60px 0;
}
.other::after {
width: 750px;
left: -100px;
top: 200px;
}
.other__posts {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: stretch;
}
.other__post {
display: flex;
flex-direction: column;
}
.other .card__link {
margin-top: auto;
}
.other .button {
margin-top: 50px;
}
}
@media (min-width: 1380px) {
.other__posts {
gap: 40px;
margin-top: 50px;
}
.other__title {
margin-top: 24px;
margin-bottom: 24px;
}
}
@media (min-width: 1900px) {
.other {
margin: 90px 0;
}
.other::after {
left: -250px;
}
}
.parameters {
position: relative;
padding: 32px 0;
}
.parameters::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 300vw;
transform: translateX(-50%);
opacity: 0.5;
background-color: #ebebef;
}
.parameters > * {
z-index: 1;
position: relative;
}
.parameters__inner {
display: grid;
grid-template-columns: repeat(5, 250px);
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.parameters__inner::hover {
cursor: pointer;
}
.parameters__inner::-webkit-scrollbar {
display: none;
}
.parameters__card {
scroll-snap-align: center;
background-color: #ffffff;
border-radius: 40px;
padding: 40px;
}
.parameters__text {
margin-top: 30px;
}
@media (min-width: 900px) {
.parameters {
padding: 50px 0;
margin: 20px auto;
}
.parameters__inner {
overflow: visible;
width: 100%;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1100px) {
.parameters {
padding: 90px 0;
}
.parameters__inner {
gap: 10px;
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1380px) {
.parameters {
margin: 50px 0;
}
.parameters__inner {
grid-template-columns: repeat(var(--columns, 5), 1fr);
}
}
.rangeBlock {
display: flex;
flex-direction: column;
gap: 32px;
margin: 32px 0;
}
.rangeBlock__row {
display: flex;
flex-direction: column;
gap: 20px;
}
.rangeBlock__cards {
display: flex;
flex-direction: row;
gap: 10px;
flex-wrap: wrap;
}
.rangeBlock__card {
padding: 12px;
background-color: #ebebef;
border-radius: 24px;
display: block;
}
.rangeBlock__cols {
display: flex;
flex-direction: column;
gap: 20px;
}
.rangeBlock__cols b, .rangeBlock__cols strong {
font-weight: 600;
}
@media (min-width: 900px) {
.rangeBlock {
margin: 60px 0;
}
.rangeBlock__row {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
@media (min-width: 1100px) {
.rangeBlock {
gap: 48px;
}
.rangeBlock__card {
padding: 30px 40px;
}
}
@media (min-width: 1380px) {
.rangeBlock {
margin: 100px 0;
gap: 70px;
}
.rangeBlock__row {
grid-template-columns: 3fr 7fr;
align-items: center;
}
.rangeBlock__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.rangeBlock__card {
width: 100%;
}
.rangeBlock__cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
}
.resultsBlock {
display: flex;
flex-direction: column;
gap: 24px;
margin: 32px 0;
}
.resultsBlock__card {
border: 1px solid #069aff;
padding: 30px;
border-radius: 40px;
}
@media (min-width: 900px) {
.resultsBlock {
margin: 48px 0;
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1100px) {
.resultsBlock {
gap: 20px;
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1900px) {
.resultsBlock {
width: 1800px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
}
.video {
margin: 30px 0;
}
.video iframe {
width: 100%;
aspect-ratio: 16/9;
height: auto;
}
@media (min-width: 900px) {
.video {
margin: 50px 0;
}
}
@media (min-width: 1100px) {
.video {
margin: 70px 0;
}
}
@media (min-width: 1380px) {
.video {
margin: 90px 0;
}
} .introModern {
position: relative;
padding: 40px 0;
margin-bottom: 40px;
}
.introModern__image {
width: calc(100% + 16px - 50px);
height: 100%;
position: absolute;
top: 0;
left: -16px;
right: 50px;
bottom: 0;
}
.introModern__image__decor {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-bottom: 100px solid #069aff;
border-right: 100px solid transparent;
display: block;
}
.introModern__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0 24px 24px 0;
}
.introModern__content {
position: relative;
z-index: 2;
background-color: #ffffff;
margin: 0 0 0 0px;
border-radius: 24px 0 0 24px;
padding: 24px;
}
@media (min-width: 500px) {
.introModern__image {
left: 50%;
transform: translateX(-50vw);
right: unset;
width: 65vw;
}
.introModern__content {
margin: 0 0 0 100px;
}
}
@media (min-width: 900px) {
.singleContent__container:has(.introModern) {
margin-top: 0;
}
.introModern {
padding: 60px 0;
margin-bottom: 60px;
}
.introModern__content {
padding: 40px;
margin: 0 0 0 25%;
}
.introModern__text {
margin-top: 24px;
}
}
@media (min-width: 1380px) {
.introModern {
padding: 60px 0;
margin-bottom: 80px;
}
.introModern__decor {
border-bottom: 166px solid #069aff;
border-right: 166px solid transparent;
}
.introModern__content {
margin-left: 45%;
}
.introModern__image {
left: 50%;
transform: translateX(-58.1395348837vw);
right: unset;
width: 63.9534883721vw;
}
}
@media (min-width: 1900px) {
.introModern {
padding: 70px 0;
}
.introModern__image {
left: 50%;
transform: translateX(-52.6315789474vw);
right: unset;
width: 57.8947368421vw;
}
}
.gridGallery {
margin: 40px 0;
}
.gridGallery__swiper .swiper {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.gridGallery__swiper .swiper-slide {
height: calc((100% - 35px) / 2) !important;
}
.gridGallery__swiper .swiper-slide a {
aspect-ratio: 16/9;
width: 100%;
height: auto;
overflow: hidden;
border-radius: 25px;
display: block;
}
.gridGallery__swiper .swiper-slide a:hover img {
transform: scale(1.03);
}
.gridGallery__swiper .swiper-slide img {
transition: transform 0.12s linear;
aspect-ratio: 16/9;
width: 100%;
height: auto;
display: block;
}
@media (min-width: 1100px) {
.gridGallery {
margin: 140px 0px;
}
}
.modernCaseStudies {
margin: 40px 0;
}
.modernCaseStudies__heading, .modernCaseStudies__text {
text-align: center;
margin-bottom: 20px;
}
.modernCaseStudies__swiper {
margin-top: 40px;
}
.modernCaseStudies__card {
margin-top: 0;
}
.modernCaseStudies__card__images {
position: relative;
width: 100%;
border-radius: 25px;
overflow: hidden;
aspect-ratio: 1/1;
}
.modernCaseStudies__card__background {
width: 100%;
height: 100%;
display: block;
}
.modernCaseStudies__card__logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
padding: 10px 20px;
min-width: 200px;
border-radius: 20px;
max-width: 50%;
object-fit: contain;
object-position: center;
height: 20%;
filter: grayscale(1);
}
.modernCaseStudies__card__title {
margin-top: 20px;
color: #1e274a;
}
.modernCaseStudies__card__hover {
position: absolute;
background-color: rgba(30, 39, 74, 0.9294117647);
top: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
aspect-ratio: 1/1;
border-radius: 25px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
gap: 30px;
opacity: 0;
transition: opacity 0.12s linear;
}
.modernCaseStudies__card__hover .button {
margin-top: 20px;
}
.modernCaseStudies__card__name {
font-size: 19px;
line-height: 1.5;
text-align: center;
}
@media (min-width: 1900px) {
.modernCaseStudies__card__name {
font-size: 25px;
}
}
.modernCaseStudies__card__list span {
font-size: 19px;
line-height: 1.5;
text-align: center;
font-weight: 300;
display: block;
}
@media (min-width: 1900px) {
.modernCaseStudies__card__list span {
font-size: 25px;
}
}
.modernCaseStudies__card__list span b {
font-weight: 600;
}
.modernCaseStudies__card:hover .modernCaseStudies__card__hover {
opacity: 1;
}
.themeNavigation {
display: grid;
z-index: 1;
gap: 40px;
width: fit-content;
margin: 20px auto 0;
grid-template-columns: 40px 1fr 40px;
}
.themeNavigation .swiper-next,
.themeNavigation .swiper-prev {
height: 40px;
width: 40px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: #ffffff;
border-radius: 50%;
}
.themeNavigation .swiper-next svg *,
.themeNavigation .swiper-prev svg * {
stroke: #069aff !important;
}
.themeNavigation .swiper-next.swiper-button-disabled,
.themeNavigation .swiper-prev.swiper-button-disabled {
pointer-events: none;
filter: grayscale(1);
}
.themeNavigation .swiper-next:hover,
.themeNavigation .swiper-prev:hover {
cursor: pointer !important;
background-color: #069aff;
}
.themeNavigation .swiper-next:hover svg *,
.themeNavigation .swiper-prev:hover svg * {
stroke: #ffffff !important;
}
.themeNavigation .swiper-next svg {
transform: rotate(-90deg);
}
.themeNavigation .swiper-prev svg {
transform: rotate(90deg);
}
.themeNavigation .swiper-pagination {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px;
width: 150px !important;
}
.themeNavigation .swiper-pagination .swiper-pagination-bullet {
background-color: #1e274a;
display: block;
width: 6px;
height: 6px;
border-radius: 3px;
display: none;
transition: width 0.05s linear, background-color 0.05s linear;
}
.themeNavigation .swiper-pagination .swiper-pagination-bullet-active {
display: block;
}
.themeNavigation .swiper-pagination .swiper-pagination-bullet-active-prev-prev {
display: block;
opacity: 0.5;
}
.themeNavigation .swiper-pagination .swiper-pagination-bullet-active-prev {
display: block;
opacity: 1;
}
.themeNavigation .swiper-pagination .swiper-pagination-bullet-active-main {
width: 40px;
background-color: #069aff;
}
.themeNavigation .swiper-pagination .swiper-pagination-bullet-active-next {
opacity: 1;
display: block;
}
.themeNavigation .swiper-pagination .swiper-pagination-bullet-active-next-next {
display: block;
opacity: 0.5;
}
@media (min-width: 1100px) {
.modernCaseStudies {
margin: 140px 0px;
}
.modernCaseStudies__swiper {
margin-top: 50px;
}
.modernCaseStudies__text {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.themeNavigation {
width: 500px;
margin-top: 40px;
}
.themeNavigation .swiper-pagination {
width: 100% !important;
gap: 40px;
}
.themeNavigation .swiper-next,
.themeNavigation .swiper-prev {
width: 62px;
height: 62px;
}
}
.cardWithIcons {
background-color: #ffffff;
position: relative;
padding: 30px 0 40px;
}
.cardWithIcons > * {
position: relative;
z-index: 2;
}
.cardWithIcons__heading, .cardWithIcons__text {
text-align: center;
}
.cardWithIcons__heading {
margin-bottom: 12px;
}
.cardWithIcons__grid {
margin-top: 40px;
display: grid;
grid-template-columns: 1fr;
gap: 34px;
align-items: stretch;
}
.cardWithIcons a.cardWithIcons__card {
text-decoration: none;
color: #1e274a;
}
.cardWithIcons__card {
background-color: #ffffff;
display: flex;
flex-direction: column;
border-radius: 25px;
padding: 30px 28px;
height: auto;
}
.cardWithIcons__card__icon {
display: block;
width: auto;
height: 50px;
margin-left: 0;
margin-right: auto;
}
.cardWithIcons__card__title {
margin-top: 20px;
font-size: 19px;
line-height: 1.5;
}
@media (min-width: 1900px) {
.cardWithIcons__card__title {
font-size: 25px;
}
}
.cardWithIcons__card__text {
margin-top: 20px;
}
.cardWithIcons__card__text:has(.button) {
height: 100%;
display: flex;
flex-direction: column;
}
.cardWithIcons__card--border {
border: 1px solid #069aff;
}
.cardWithIcons__card--dark {
background-color: #ebebef;
}
.cardWithIcons__card .button {
margin-top: auto;
}
.cardWithIcons--dark::after {
content: "";
position: absolute;
background-color: #ebebef;
top: 0;
bottom: 0;
left: 50%;
display: block;
height: 100%;
width: 200vw;
transform: translateX(-50%);
}
@media (min-width: 900px) {
.cardWithIcons {
padding: 50px 0 80px;
}
.cardWithIcons__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 35px;
}
.cardWithIcons--columns-2 .cardWithIcons__grid, .cardWithIcons--columns-3 .cardWithIcons__grid, .cardWithIcons--columns-4 .cardWithIcons__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1100px) {
.cardWithIcons {
padding: 50px 0 130px;
}
.cardWithIcons__grid {
margin-top: 44px;
}
.cardWithIcons--columns-2 .cardWithIcons__grid {
grid-template-columns: repeat(2, 1fr);
}
.cardWithIcons--columns-3 .cardWithIcons__grid {
grid-template-columns: repeat(3, 1fr);
}
.cardWithIcons--columns-4 .cardWithIcons__grid {
grid-template-columns: repeat(4, 1fr);
}
.cardWithIcons__text {
margin-top: 22px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.cardWithIcons__card {
padding: 40px;
}
}
@media (min-width: 1380px) {
.cardWithIcons {
width: 1080px;
left: 50%;
position: relative;
transform: translateX(-50%);
}
.cardWithIcons--bigContainer {
width: 1300px;
}
}
@media (min-width: 1900px) {
.cardWithIcons {
width: 1360px;
}
.cardWithIcons--bigContainer {
width: 1800px;
}
}
.articles {
margin: 50px 0;
}
.articles__heading {
text-align: center;
display: block;
position: relative;
}
.articles__heading::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: calc(100% - 20px);
border-left: 36px solid #069aff;
border-top: 36px solid transparent;
border-bottom: 36px solid transparent;
}
.articles__heading::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(100% - 20px);
border-right: 36px solid #069aff;
border-top: 36px solid transparent;
border-bottom: 36px solid transparent;
}
.articles__text {
text-align: center;
margin-top: 10px;
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
.articles__row {
display: flex;
flex-direction: column;
margin-top: 32px;
gap: 14px;
}
.articles__card {
border-radius: 15px;
background-color: #EBEBEF;
display: flex;
text-decoration: none;
color: #1e274a;
flex-direction: column;
}
.articles__card img {
width: 100%;
aspect-ratio: 312/170;
height: auto;
border-radius: 15px;
display: block;
}
.articles__card__heading {
color: #069aff;
}
.articles__card__content {
padding: 20px;
text-align: center;
}
.articles__card__text {
margin-top: 15px;
}
@media (min-width: 900px) {
.articles__heading::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: calc(100% - 20px);
border-left: 1000px solid #069aff;
border-top: 1000px solid transparent;
border-bottom: 1000px solid transparent;
}
.articles__heading::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(100% - 20px);
border-right: 1000px solid #069aff;
border-top: 1000px solid transparent;
border-bottom: 1000px solid transparent;
}
}
@media (min-width: 900px) {
.articles__row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (min-width: 1380px) {
.articles {
max-width: 1400px;
width: 1400px;
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 100px 0;
}
.articles__heading::after {
right: 100%;
}
.articles__heading::before {
left: 100%;
}
.articles__row {
margin-top: 50px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
}
@media (min-width: 1900px) {
.articles {
width: 1800px;
max-width: 1800px;
}
.articles__row {
gap: 60px;
margin-top: 74px;
}
}
.caseStudySwitcher {
margin: 50px 0;
}
.caseStudySwitcher__darkBackground {
background-color: #1e274a;
color: #ffffff;
border-radius: 15px 15px 0 0;
padding: 30px 30px 50px 30px;
position: relative;
}
.caseStudySwitcher__darkBackground::after {
content: "";
z-index: -1;
}
.caseStudySwitcher__heading {
text-align: center;
}
.caseStudySwitcher__text {
text-align: center;
color: #ffffff;
margin-top: 10px;
}
.caseStudySwitcher__select {
width: fit-content;
margin-left: auto;
margin-right: auto;
position: relative;
}
.caseStudySwitcher__select::after {
content: "";
width: 0;
height: 0;
border-top: 4px solid #069aff;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30px;
}
.caseStudySwitcher__select select {
background-color: #ffffff;
margin-top: 20px;
width: 200px;
height: 40px;
border-radius: 24px;
appearance: none;
padding: 0 20px;
display: block;
}
.caseStudySwitcher__buttons {
display: none;
}
.caseStudySwitcher__slider {
margin-top: -20px;
}
.caseStudySwitcher__slider .swiper-slide a {
text-decoration: none;
}
.caseStudySwitcher__decor {
display: none;
}
@media (min-width: 900px) {
.caseStudySwitcher__darkBackground {
padding-bottom: 100px;
padding-top: 50px;
overflow: hidden;
border-radius: 24px;
position: relative;
}
.caseStudySwitcher__darkBackground > * {
z-index: 2;
position: relative;
}
.caseStudySwitcher__select {
display: none;
}
.caseStudySwitcher__buttons {
margin-top: 20px;
display: flex;
flex-direction: row;
gap: 50px;
border: 1px solid #069aff;
border-radius: 23px;
height: 46px;
width: fit-content;
margin-left: auto;
margin-right: auto;
padding: 0 24px;
}
.caseStudySwitcher__text {
margin-top: 16px;
}
.caseStudySwitcher__button {
background-color: transparent;
border: none;
color: #ffffff;
}
.caseStudySwitcher__button:hover {
color: #069aff;
cursor: pointer;
}
.caseStudySwitcher__button--active {
color: #069aff;
}
.caseStudySwitcher__slider {
max-width: 700px;
margin-top: -50px;
margin-left: auto;
margin-right: auto;
}
.caseStudySwitcher__decor--1 {
width: 460px;
display: block;
height: 240px;
position: absolute;
top: 0;
left: 0;
}
.caseStudySwitcher__decor--1 img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: top left;
}
.caseStudySwitcher__decor--2 {
width: 460px;
display: block;
height: 240px;
position: absolute;
top: 0;
right: 0;
}
.caseStudySwitcher__decor--2 img {
display: block;
width: 100%;
transform: scaleX(-100%);
height: 100%;
object-fit: contain;
object-position: top left;
}
}
@media (min-width: 1100px) {
.caseStudySwitcher {
width: 1040px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.caseStudySwitcher__slider {
max-width: 1000px;
}
}
@media (min-width: 1380px) {
.caseStudySwitcher {
width: 1400px;
margin: 100px 0;
}
.caseStudySwitcher__text {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.caseStudySwitcher__slider {
max-width: 1200px;
}
}
@media (min-width: 1900px) {
.caseStudySwitcher {
width: 1800px;
}
.caseStudySwitcher__slider {
max-width: 1380px;
}
}
.heroNew {
margin: 0 0 30px;
}
.heroNew__videos {
display: none;
}
.heroNew__header {
font-size: 30px;
position: relative;
width: 100%;
}
.heroNew__header::after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -65px;
border-left: 60px solid #069aff;
border-top: 75px solid transparent;
border-bottom: 75px solid transparent;
}
.heroNew__text {
margin-top: 8px;
}
.heroNew .button {
color: #1e274a;
margin-top: 30px;
}
.heroNew__cards {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.heroNew__card__tag {
font-size: 16px;
font-weight: 600;
color: #ffffff;
position: absolute;
bottom: 15px;
left: 30px;
z-index: 10;
text-transform: uppercase;
font-size: 16px;
letter-spacing: 0.32px;
line-height: 21px;
}
.heroNew__card__background {
aspect-ratio: 312/100;
width: 100%;
height: auto;
position: relative;
border-radius: 15px;
overflow: hidden;
}
.heroNew__card__background::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-color: rgba(30, 39, 74, 0.8);
mix-blend-mode: multiply;
}
.heroNew__card__background img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
.heroNew__card__hover {
display: none;
}
@media (min-width: 668px) {
.heroNew__header::after {
content: unset;
}
}
@media (min-width: 1100px) {
.heroNew {
margin-bottom: 50px;
margin-top: -24px;
position: relative;
left: 50%;
width: calc(var(--vw, 1vw) * 100);
transform: translateX(-50%);
padding: 0 20px;
}
.heroNew__container {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 50px;
}
.heroNew__cards {
gap: 0;
display: grid;
overflow: hidden;
margin-top: 0;
border-radius: 15px 0 0 15px;
grid-template-rows: repeat(3, 1fr);
}
.heroNew__card {
height: 100%;
position: relative;
overflow: hidden;
width: 100%;
text-decoration: none;
}
.heroNew__card__background {
aspect-ratio: unset;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
border-radius: 0;
height: 100%;
transition: all 0.3s ease-in-out;
}
.heroNew__card:hover .heroNew__card__background {
opacity: 0;
}
.heroNew__card:hover .heroNew__card__hover__wrapper {
left: 0;
}
.heroNew__card__hover {
display: block;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
.heroNew__card__hover img {
position: absolute;
inset: 0;
object-fit: cover;
object-position: center;
display: block;
z-index: -1;
width: 100%;
height: 100 .heroNew__card__hover img;
}
.heroNew__card__hover__wrapper {
padding: 10px;
position: relative;
width: fit-content;
left: -100%;
transition: all 0.3s ease-in-out;
height: fit-content;
margin-top: auto;
background-color: #ffffff;
border-radius: 0 15px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.heroNew__card__header {
font-size: 18px;
letter-spacing: 0.36px;
line-height: 21px;
color: #1e274a;
display: grid;
grid-template-columns: 1fr 42px;
gap: 20px;
}
.heroNew__card__arrow {
width: 42px;
height: 42px;
background-color: #069aff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.heroNew__card__arrow svg {
width: 20px;
height: 20px;
min-width: 20px;
object-fit: cover;
display: block;
transform: rotate(90deg);
}
.heroNew__card__arrow svg * {
stroke: #ffffff;
}
.heroNew__card__text {
font-size: 12px;
letter-spacing: 0.24px;
line-height: 15px;
}
.heroNew__videos {
display: block;
}
.heroNew__video {
width: 100%;
aspect-ratio: 1433/520;
height: auto;
margin-left: -20px;
overflow: hidden;
position: relative;
border-radius: 0 15px 15px 0;
display: block;
}
.heroNew__video:not(:first-of-type) {
display: none;
}
.heroNew__video img, .heroNew__video video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.heroNew__video svg {
position: absolute;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
display: none;
}
.heroNew__wrapper__content {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto auto;
gap: 20px 50px;
}
.heroNew__header {
grid-column: 1/2;
grid-row: 1/3;
z-index: 2;
font-size: 40px;
padding-left: 20px;
line-height: 50px;
position: relative;
height: fit-content;
}
.heroNew__header::after {
content: "";
left: -50px;
}
.heroNew__header::before {
content: "";
position: absolute;
z-index: -1;
top: -50px;
bottom: -44px;
left: -20px;
right: -50px;
background-color: #ffffff;
border-radius: 0 15px 15px 0;
}
.heroNew__text {
margin-top: 40px;
}
.heroNew .button {
margin-top: 0;
}
.heroNew--slim .heroNew__container {
display: flex;
}
.heroNew--slim .heroNew__video {
width: calc(100% + 20px);
}
.heroNew--slim .heroNew__wrapper__content {
gap: 20px 80px;
}
}
@media (min-width: 1380px) {
.heroNew {
width: calc(var(--vw, 1vw) * 100 * 1.1627906977);
transform: translateX(-50%);
padding: 0 20px;
margin-bottom: 90px;
}
.heroNew__card__hover__wrapper {
padding: 20px;
max-width: 70%;
margin-right: auto;
}
.heroNew__card__tag {
font-size: 30px;
line-height: 40px;
bottom: 30px;
left: 30px;
}
.heroNew__header {
padding-left: 50px;
font-size: 62px;
letter-spacing: 1.24px;
line-height: 75px;
}
.heroNew__header::after {
border-bottom-width: 300px;
border-top-width: 300px;
border-left-width: 300px;
left: unset;
right: 100%;
}
.heroNew__header::before {
left: -130px;
right: -90px;
top: -50px;
}
.heroNew__text {
font-size: 17px;
letter-spacing: 0.34px;
line-height: 28px;
padding-right: 190px;
}
.heroNew__wrapper__content {
gap: 20px 150px;
}
.heroNew .button {
height: fit-content;
}
.heroNew--slim .heroNew__container {
display: flex;
}
.heroNew--slim .heroNew__video {
width: calc(100% + 20px);
aspect-ratio: 1433/350;
}
.heroNew--slim .heroNew__wrapper__content {
gap: 20px 180px;
}
}
@media (min-width: 1900px) {
.heroNew {
margin-bottom: 100px;
width: calc(var(--vw, 1vw) * 100 * 1.0526315789);
transform: translateX(-50%);
max-width: 2021.0526315789px;
padding: 0 20px;
}
}
.productCategoriesSlider {
margin: 50px 0;
position: relative;
}
.productCategoriesSlider__decor {
top: -15px;
position: absolute;
aspect-ratio: 336/293;
width: 100%;
height: auto;
z-index: -1;
opacity: 0.5;
}
.productCategoriesSlider__decor svg {
width: 100%;
height: 100%;
object-fit: contain;
object-position: top left;
}
.productCategoriesSlider__heading {
color: #1e274a;
text-align: center;
margin-bottom: 10px;
}
.productCategoriesSlider__text {
text-align: center;
}
.productCategoriesSlider__card {
margin: 0 auto;
width: 214px;
border-radius: 20px;
border: 1px solid #C6C6C6;
padding: 20px;
height: auto;
background-color: #ffffff;
aspect-ratio: 214/293;
overflow: hidden;
position: relative;
}
.productCategoriesSlider__card__title {
font-size: 16px;
letter-spacing: 0.32px;
line-height: 21px;
text-align: center;
margin-bottom: 16px;
transition: color 0.12s linear;
}
.productCategoriesSlider__card img {
position: absolute;
display: block;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: right bottom;
max-height: 150px;
}
.productCategoriesSlider__card .button {
margin-left: auto;
margin-right: auto;
}
.productCategoriesSlider__card:hover .productCategoriesSlider__card__title {
color: #069aff;
}
.productCategoriesSlider__card:hover .button {
background-color: #069aff;
color: #ffffff;
}
.productCategoriesSlider__slider {
display: none;
}
.productCategoriesSlider__list {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.productCategoriesSlider .button {
margin-left: auto;
margin-right: auto;
}
@media (min-width: 668px) {
.productCategoriesSlider__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 20px;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 900px) {
.productCategoriesSlider__list {
display: none;
}
.productCategoriesSlider__slider {
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
.productCategoriesSlider__slider .swiper-slide {
width: 285px;
}
.productCategoriesSlider__slider .swiper.disabled {
overflow: visible !important;
}
.productCategoriesSlider__slider .swiper.disabled .swiper-navigation {
margin-top: 0;
}
.productCategoriesSlider__slider .swiper.disabled .swiper-wrapper {
display: flex;
flex-direction: row;
width: 100% !important;
max-width: 100% !important;
gap: 10px;
justify-content: center;
}
.productCategoriesSlider__card {
width: 285px;
height: auto;
aspect-ratio: 285/392;
}
.productCategoriesSlider__card img {
max-height: 250px;
}
}
@media (min-width: 1100px) {
.productCategoriesSlider__decor {
width: 744px;
}
}
@media (min-width: 1380px) {
.productCategoriesSlider {
max-width: 1400px;
width: 1400px;
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 80px 0 100px;
}
.productCategoriesSlider__decor {
top: -70px;
left: 50px;
opacity: 1;
z-index: 20;
}
.productCategoriesSlider *:not(.productCategoriesSlider__decor) {
z-index: 21;
}
.productCategoriesSlider__text {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.productCategoriesSlider .themeNavigation {
margin-top: 60px;
}
.productCategoriesSlider__slider {
margin-bottom: 40px;
}
}
@media (min-width: 1900px) {
.productCategoriesSlider {
max-width: 1800px;
width: 1800px;
}
.productCategoriesSlider__decor {
left: 280px;
top: -63px;
width: 744px;
height: 647px;
}
}
* {
scroll-behavior: smooth;
scroll-padding-top: 100px;
}
@media (min-width: 1100px) {
* {
scroll-padding-top: 200px;
}
}
@media (min-width: 1380px) {
html {
zoom: 0.86;
}
}
@media (min-width: 1900px) {
html {
zoom: 0.95;
}
}
@media (min-width: 1100px) {
.gallery::after,
.galleryBlock::after,
.variant::before,
.companyInfo__card::after,
.parameters::after,
.testimoniesBlock::after,
.personalQuote::after,
.aboutNumbers::after,
.switcherBlock::after,
.product-category::after,
.galleryBlock::after,
.testimonies::after,
.qualityBlock::after,
.faq::after {
width: 300vw;
}
}
.singleContent__fixedCta {
display: none;
}
@media (min-width: 1380px) {
.singleContent {
display: grid;
grid-template-columns: 250px 1fr 250px;
width: 100%;
}
.singleContent__container {
grid-column: 2;
}
.singleContent__fixedCta {
border-radius: 0px 0 0 20px;
background-color: #069aff;
display: block;
padding: 30px 18px 30px 30px;
position: sticky;
top: 100px;
margin-top: 100px;
z-index: 20;
height: fit-content;
text-align: center;
box-shadow: 8px 8px 40px -16px rgb(66, 68, 90);
transition: transform 0.12s linear;
}
.singleContent__fixedCta .button {
z-index: 2;
padding: 0 20px;
position: relative;
}
.singleContent__fixedCta span {
font-size: 26px;
}
.singleContent__fixedCta p {
margin-top: 20px;
}
.singleContent__fixedCta--none {
display: none;
}
.singleContent__fixedCta__close {
position: absolute;
background-color: #069aff;
width: 40px;
height: 80px;
top: 0px;
cursor: pointer;
border-radius: 10px 0px 0 10px;
left: -40px;
}
.singleContent__fixedCta__close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
background-image: url(//luxon.pl/wp-content/themes/Luxon/img/chevro-right.svg);
background-size: 35%;
background-position: center;
background-repeat: no-repeat;
filter: brightness(0) invert(1);
}
.singleContent__fixedCta--closed {
transform: translateX(100%);
}
.singleContent__fixedCta--closed .singleContent__fixedCta__image {
opacity: 0;
}
.singleContent__fixedCta--closed .singleContent__fixedCta__close::after {
transform: translate(-50%, -50%) scaleX(-1);
}
.singleContent__fixedCta__image {
width: 100%;
aspect-ratio: 190/318;
height: auto;
position: relative;
}
.singleContent__fixedCta__image img {
right: -10px;
position: absolute;
top: 0;
width: calc(100% + 60px);
}
}
.categoryCard__image--center {
object-position: center;
}
.frm_dropzone svg {
width: 0px;
}
.formidable-form .customFormidableFileUpload .frm_dropzone .dz-message.needsclick span:last-of-type {
padding-left: 0px !important;
}
.formidable-form .customFormidableFileUpload .frm_dropzone .dz-message.needsclick span:last-of-type::before {
width: 0px;
}
.blue-bullet::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: #069AFF;
border-radius: 50%;
margin-right: 0.5em;
vertical-align: baseline;
}
.blue-bullet {
font-size: 16px;
line-height: 1.5;
display: inline-block;
}
@media (min-width: 1380px) {
.singleContent__container > section.contact:first-child {
margin-top: -32px;
}
.singleContent__container .benefits,
.singleContent__container .testimonies,
.singleContent__container .cooperation,
.singleContent__container .about,
.singleContent__container .qualityBlock,
.singleContent__container .products {
width: 1300px !important;
transform: translatex(-50%);
position: relative;
left: 50%;
}
}
.case-study-card__image,
.case-study-card__sygnet {
overflow: hidden;
}
.case-study-card__sygnet img,
.case-study-card__image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.example__image,
.example__sygnet {
overflow: hidden;
}
.example__sygnet img,
.example__image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.megamenu__card--button {
background: #069aff;
}
.megamenu__card--button .megamenu__title {
color: #ffffff;
margin-bottom: 20px;
font-size: 28px;
}
.megamenu__card--button .megamenu__image {
height: 48px;
width: 48px;
margin-left: auto;
margin-right: auto;
}
.categoryCard__hover {
opacity: 0;
bottom: 0;
}
.categoryCard__hover__text {
color: #fff;
font-size: 14px;
}
.categoryCard__hover__button {
margin-left: auto;
margin-right: auto;
}
.categoryCard__hover {
height: 100%;
}
.categoryCard:hover .categoryCard__hover {
height: 100%;
opacity: 1;
display: grid;
grid-template-rows: auto 1fr auto;
padding: 20px;
background-color: rgba(31, 38, 71, 0.9);
}
@media (min-width: 1900px) {
.categoryCard__hover__text {
font-size: 16px;
}
}
@media (min-width: 1900) {
.variant::before {
bottom: -100px;
}
}
@media (min-width: 1380px) {
.singleContent__container > section.contact:first-child {
margin-top: -32px;
}
.case-study-archive__buttons {
flex-wrap: wrap;
justify-content: center;
}
.singleContent__container .testimonies,
.singleContent__container .cooperation,
.singleContent__container .about,
.singleContent__container .qualityBlock,
.singleContent__container .products {
width: 1300px !important;
transform: translatex(-50%);
position: relative;
left: 50%;
}
}
@media (min-width: 1900px) {
.singleContent__container .results,
.singleContent__container .cards,
.singleContent__container .example,
.singleContent__container .contact {
width: 1800px !important;
transform: translatex(-50%);
position: relative;
left: 50%;
}
}
@media (min-width: 1380px) and (max-width: 1900px) {
.challanges__cards.challanges__cards--4 {
grid-template-columns: repeat(4, 1fr);
max-width: 100%;
scroll-snap-type: none;
overflow-x: visible;
gap: 10px;
}
.challanges__card {
width: 100%;
aspect-ratio: 1/1;
}
.challanges__icon {
margin-top: 32px;
height: 48px;
width: 48px;
margin-left: 32px;
}
.challanges__text {
margin: 20px 32px 40px;
}
}
.categoryCard__hover {
position: absolute;
display: block;
bottom: -70px;
left: 0;
right: 0;
height: 70px;
text-align: center;
padding: 4px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: #069aff;
color: #ffffff;
font-size: 16px;
transition: bottom 0.12s linear;
}
.wp-block-heading {
margin: 20px 0;
}
.singleContent__container a:not(.button) {
text-decoration: none;
color: #069aff;
}
.singleContent__container ul,
.singleContent__container ol {
margin-left: 20px;
}
@media (min-width: 1380px) {
.caseStudyIntro__image img {
margin-left: 1px;
width: calc(100% - 1px);
}
}
.cooperation .swiper-slide {
height: 100% !important;
opacity: 0 !important;
}
.cooperation .swiper-slide-active {
z-index: 10;
opacity: 1 !important;
}
.cooperation .swiper-wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
.cooperation .swiper-wrapper .swiper-slide {
display: flex;
height: 100%;
justify-content: space-between;
}
body {
max-width: 100%;
position: relative;
overflow-x: clip;
}
.header {
max-width: 100%;
width: 100%;
}
.gallery::after,
.galleryBlock::after,
.variant::before,
.companyInfo__card::after,
.parameters::after,
.testimoniesBlock::after,
.personalQuote::after,
.aboutNumbers::after,
.switcherBlock::after,
.product-category::after,
.galleryBlock::after,
.testimonies::after,
.qualityBlock::after,
.faq::after {
width: 100vw;
}
@media (min-width: 1100px) {
.gallery::after,
.galleryBlock::after,
.variant::before,
.companyInfo__card::after,
.parameters::after,
.testimoniesBlock::after,
.personalQuote::after,
.aboutNumbers::after,
.switcherBlock::after,
.product-category::after,
.galleryBlock::after,
.testimonies::after,
.qualityBlock::after,
.faq::after {
width: 300vw;
}
.case-study-intro::after,
.aboutIntro::after,
.blog-archive__row::after,
.contactIntro__row::after {
display: block;
}
}
.case-study-intro::after,
.aboutIntro::after,
.blog-archive__row::after,
.contactIntro__row::after {
display: none;
}
@media (max-width: 1100px) {
.productHero__tooltip {
white-space: initial;
width: 180px;
}
.productHero__signaturecontainer:last-of-type .productHero__tooltip {
left: calc(50% - 100px);
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(100% + 10px) calc(100% - 10px), 100% 100%, calc(100% - 10px) calc(100% - 10px), 0% calc(100% - 10px));
}
}
.hero__background::after {
background-color: transparent;
}
.footer__socials {
z-index: 2 !important;
position: relative;
}
.frm_dropzone .frmsvg.frm-svg-icon {
display: none !important;
}
@media (min-width: 1200px) {
.blog-archive__buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px 20px;
}
}
@media (min-width: 1380px) {
.singleContent__container .benefits .container {
width: 1400px !important;
position: relative;
left: 50%;
transform: translatex(-50%);
}
}
@media (min-width: 1380px) and (max-width: 1900px) {
.productCard {
max-width: 440px;
padding: 50px;
border-radius: 40px;
}
}
@media (min-width: 1900px) {
.variant::before {
bottom: -100px;
}
}
.singleContent {
position: relative;
}
.cardsSlider__prev,
.cardsSlider__next {
width: 50px;
height: fit-content;
margin-top: auto;
margin-bottom: auto;
}
.gallery::after {
opacity: 0.5;
}
@media (min-width: 1900px) {
.singleContent__container .benefits .container {
width: 1800px !important;
}
}
ol ul {
list-style-type: disc !important;
}
.frm_first {
grid-column: 1/7 !important;
}
.frm12 {
grid-column: 1/13 !important;
}
.testimonies__slider .swiper-slide {
opacity: 0 !important;
}
.testimonies__slider .swiper-slide-visible {
opacity: 1 !important;
z-index: 10;
}
.frm_required_field,
.frm_third {
display: block !important;
}
.frm_button_submit.frm_final_submit[disabled]:hover {
background-color: #1e274a;
}
.categoryCard__icon--2 {
left: 64px;
}
.categoryCard__image {
transition: transform 0.12s linear;
}
.categoryCard:hover .categoryCard__hover {
bottom: 0;
}
.variant .frm_screen_reader {
display: none;
}
.variant .frm_primary_label {
display: none;
}
.variant .frm_form_field {
margin-bottom: 12px;
}
.has-primary-background-color {
background-color: #069AFF;
}
@media (min-width: 900px) {
.frm_submit {
grid-column: 1/3;
width: 100%;
}
}
@media (min-width: 1380px) {
.variant .frm_form_field {
margin-bottom: 0px;
}
.variant .frm_fields_container {
display: grid;
grid-template-columns: 1fr, 1fr;
}
.variant .frm_form_field {
grid-column: 1/3;
}
.variant .frm6 {
grid-column: 2/3;
}
.variant .frm6.frm_first {
grid-column: 1/2;
}
}
details.faq__question > summary {
font-weight: 600;
}
details.faq__question div.content > * {
padding-left: 20px;
}
details.faq__question div.content > ul,
details.faq__question div.content > ol {
padding-left: 20px;
}
details.faq__question div.content > ol > * {
font-weight: 600;
}
ul ::marker {
color: #069AFF; font-size: 1.6em; }
.bluebg {
background-color: #069AFF !important;
}
.singleContent {
overflow-x: clip;
}
.swiper-grid > .swiper-wrapper {
flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
flex-wrap: wrap;
flex-direction: column;
}
.lb-loader,
.lightbox {
text-align: center;
line-height: 0;
}
body.lb-disable-scrolling {
overflow: hidden;
}
.singleContent__container:has(.primary-background-intro),
.singleContent__container:has(.two-columns-intro),
.singleContent__container:has(.heroNew) {
margin-top: 0 !important;
}