/* =========================================================
LOVOL - HEADER / MENU FINAL
Desktop + responsive
========================================================= */
/* =========================================================
1. WSPÓLNY WYGLĄD HEADERA
działa na desktopie i mobile
========================================================= */
div.men_up2,
div.men_top_up {
background: rgba(5, 5, 5, 0.65) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: #fff !important;
box-shadow: none !important;
border: 0 !important;
}
div.men_up2 a,
div.men_top_up a,
div.men2 a,
div.men_top a {
color: #fff !important;
}
.men_select {
color: #fff !important;
}
.ind_a a, .ind_b a {
color: #151819 !important;
}
.ind_a a:hover, .ind_b a:hover {
color: #1478ff !important;
}
.breadcrumbs-target {
color: #1478ff !important;
}
ul li::before {
color: #1478ff !important;
}
/* =========================================================
2. DESKTOP 1101px+
pełne menu desktopowe
========================================================= */
@media screen and (min-width: 1101px) {
div.men_up2,
div.men_top_up {
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
padding: 10px 0 !important;
box-sizing: border-box !important;
}
div.men2,
div.men_top {
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
background: transparent !important;
color: #fff !important;
}
#logo,
#logo2 {
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
display: flex !important;
align-items: center !important;
}
#logo {
margin-left: 10px !important;
}
#logo2 {
margin-left: 10px !important;
margin-right: 0 !important;
}
#logo > a,
#logo2 > a {
height: 60px !important;
display: flex !important;
align-items: center !important;
}
#logo > a > img,
#logo2 > a > img {
max-height: 50px !important;
width: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
display: block !important;
}
div.men2 > .men_center,
div.men_top > .men_center,
div.men_top > .men_center_up {
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
}
div.men2 > .men_center > #mainmenu,
div.men_top > .men_center > #mainmenu,
div.men_top > .men_center_up > #mainmenu {
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
}
#mainmenu > li {
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
display: flex !important;
align-items: center !important;
position: relative !important;
box-sizing: border-box !important;
}
#mainmenu > li > a {
position: relative !important;
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 12px !important;
line-height: 60px !important;
display: block !important;
box-sizing: border-box !important;
color: #fff !important;
text-decoration: none !important;
border-bottom: 0 !important;
background: transparent !important;
overflow: hidden !important;
}
div.men_top > .men_center > #mainmenu > li > a,
div.men_top > .men_center_up > #mainmenu > li > a,
div.men2 > .men_center > #mainmenu > li > a {
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 60px !important;
}
#mainmenu > li:hover > a,
#mainmenu > li:focus > a,
#mainmenu > li.active > a,
#mainmenu > li.selected > a,
#mainmenu > li.current > a,
#mainmenu > li > a:hover,
#mainmenu > li > a:focus,
#mainmenu > li > a:active {
color: #fff !important;
border-bottom: 0 !important;
background: transparent !important;
outline: none !important;
}
#mainmenu > li > a::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 8px;
height: 2px;
background: #fff;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.28s ease;
}
#mainmenu > li:hover > a::after,
#mainmenu > li:focus-within > a::after,
#mainmenu > li.active > a::after,
#mainmenu > li.selected > a::after,
#mainmenu > li.current > a::after {
transform: scaleX(1);
}
#mainmenu > li > div {
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
background: transparent !important;
border-bottom: 0 !important;
box-sizing: border-box !important;
}
div.men_top > .men_center > #mainmenu > li > div,
div.men_top > .men_center_up > #mainmenu > li > div,
div.men2 > .men_center > #mainmenu > li > div {
margin-top: 0 !important;
}
#mainmenu > li:hover > div {
background: transparent !important;
color: #fff !important;
}
/* =========================================================
MODELS - div[template] w menu jak zwykły link
Nadpisuje template.css, który traktuje div jako ikonowy button 60px
========================================================= */
div.men2 > .men_center > #mainmenu > li > div[template],
div.men_top > .men_center > #mainmenu > li > div[template],
div.men_top > .men_center_up > #mainmenu > li > div[template],
#mainmenu > li > div[template] {
position: relative !important;
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
margin: 0 !important;
padding: 0 12px !important;
line-height: 60px !important;
box-sizing: border-box !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
color: #fff !important;
text-decoration: none !important;
background: transparent !important;
border-bottom: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
cursor: pointer !important;
}
/* hover jak zwykły link menu */
#mainmenu > li:hover > div[template],
#mainmenu > li > div[template]:hover {
color: #fff !important;
background: transparent !important;
border-bottom: 0 !important;
outline: none !important;
}
/* dolny animowany border jak w linku */
#mainmenu > li > div[template]::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 8px;
height: 2px;
background: #fff;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.28s ease;
}
#mainmenu > li:hover > div[template]::after,
#mainmenu > li:focus-within > div[template]::after,
#mainmenu > li.active > div[template]::after,
#mainmenu > li.selected > div[template]::after,
#mainmenu > li.current > div[template]::after {
transform: scaleX(1);
}
/* ikona angle-down wewnątrz div[template] */
#mainmenu > li > div[template] > z.fa-angle-down,
#mainmenu > li > div[template] > i.fa-angle-down,
#mainmenu > li > div[template] .fa-angle-down {
display: inline-block !important;
margin-left: 7px !important;
font-size: 13px !important;
line-height: 1 !important;
transform: translateY(1px);
color: rgba(255, 255, 255, 0.9) !important;
}
#mainmenu > li:hover > div[template] > z.fa-angle-down,
#mainmenu > li:hover > div[template] > i.fa-angle-down,
#mainmenu > li:hover > div[template] .fa-angle-down {
color: #fff !important;
}
/* wsparcie dla customowego znacznika z z FontAwesome */
#mainmenu > li > div[template] > z.fa-solid,
#mainmenu > li > div[template] > z.fa {
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
font-weight: 900 !important;
}
div.men_top_up div.men_top > div[style*="top:50%"] {
top: auto !important;
height: 60px !important;
display: flex !important;
align-items: center !important;
}
/* =========================================================
LOVOL - desktop dropdown menu
Poziom 2 i poziom 3 mają identyczny wygląd
========================================================= */
#mainmenu > li {
position: relative !important;
}
/* kontenery dropdownu: poziom 2 + poziom 3 */
#mainmenu > li > ul,
#mainmenu > li > ul > li > ul {
width: 260px !important;
min-width: 260px !important;
margin: 0 !important;
padding: 0 !important;
background: rgba(5, 5, 5, 0.90) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 0 !important;
border-radius: 0 !important;
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26) !important;
overflow: visible !important;
}
/* mostek hover: utrzymuje wywołanie dropdownu przy odsunięciu top:70px */
#mainmenu > li::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 60px;
height: 10px;
background: transparent;
z-index: 2999;
pointer-events: auto;
}
/* poziom 2: odsunięty wizualnie 10px niżej, bez utraty hovera */
#mainmenu > li > ul {
position: absolute !important;
top: 70px !important;
left: 0 !important;
z-index: 3000 !important;
}
/* poziom 3: startuje równo z elementem poziomu 2, korekta optyczna 1px */
#mainmenu > li > ul > li > ul {
position: absolute !important;
top: 0 !important;
left: 100% !important;
z-index: 3100 !important;
}
/* elementy listy: poziom 2 + poziom 3 */
#mainmenu > li > ul > li,
#mainmenu > li > ul > li > ul > li {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
box-sizing: border-box !important;
background: transparent !important;
clear: both !important;
}
/* linki: poziom 2 + poziom 3 */
#mainmenu > li > ul > li > a,
#mainmenu > li > ul > li > ul > li > a {
position: relative !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 14px 20px !important;
box-sizing: border-box !important;
font-family: var(--font-main), Arial, sans-serif !important;
font-size: 15px !important;
line-height: 1.35 !important;
letter-spacing: 0 !important;
text-align: left !important;
text-transform: none !important;
color: rgba(255, 255, 255, 0.86) !important;
background: transparent !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
border-bottom: 0 !important;
text-decoration: none !important;
transition:
color 0.22s ease,
padding-left 0.22s ease !important;
}
/* pierwszy element w każdym panelu bez górnej linii */
#mainmenu > li > ul > li:first-child > a {
border-top: 0 !important;
}
/* hover: poziom 2 + poziom 3 */
#mainmenu > li > ul > li:hover > a,
#mainmenu > li > ul > li > ul > li:hover > a {
color: #fff !important;
background: transparent !important;
padding-left: 24px !important;
}
/* animowana linia: poziom 2 + poziom 3 */
#mainmenu > li > ul > li > a::after,
#mainmenu > li > ul > li > ul > li > a::after {
content: "";
position: absolute;
left: 20px;
right: 20px;
bottom: 7px;
height: 1px;
background: rgba(255, 255, 255, 0.78);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.26s ease;
}
#mainmenu > li > ul > li:hover > a::after,
#mainmenu > li > ul > li > ul > li:hover > a::after {
transform: scaleX(1);
}
/* LOVOL - dropdown level 2 arrow alignment */
#mainmenu > li > ul > li > a {
position: relative !important;
padding-right: 44px !important;
}
#mainmenu > li > ul > li > a > z.fa-angle-right,
#mainmenu > li > ul > li > a > i.fa-angle-right,
#mainmenu > li > ul > li > a .fa-angle-right {
position: absolute !important;
right: 20px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 13px !important;
line-height: 1 !important;
color: rgba(255, 255, 255, 0.78) !important;
pointer-events: none !important;
}
#mainmenu > li > ul > li:hover > a > z.fa-angle-right,
#mainmenu > li > ul > li:hover > a > i.fa-angle-right,
#mainmenu > li > ul > li:hover > a .fa-angle-right {
color: #fff !important;
}
#mainmenu > li > a > z.fa-angle-down,
#mainmenu > li > a > i.fa-angle-down,
#mainmenu > li > a .fa-angle-down {
display: inline-block !important;
margin-left: 7px !important;
font-size: 13px !important;
line-height: 1 !important;
transform: translateY(1px);
color: rgba(255, 255, 255, 0.9) !important;
}
#mainmenu > li:hover > a > z.fa-angle-down,
#mainmenu > li:hover > a > i.fa-angle-down,
#mainmenu > li:hover > a .fa-angle-down {
color: #fff !important;
}
/* =========================================================
LOVOL - primary menu button
data-action="primary"
========================================================= */
#mainmenu > li[data-action="primary"] {
margin-left: auto !important;
}
#mainmenu > li[data-action="primary"] > a,
#mainmenu > li > a[data-action="primary"] {
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
padding: 0 22px !important;
line-height: 42px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #111 !important;
background: #fff !important;
border: 1px solid #fff !important;
border-radius: 999px !important;
font-family: var(--font-elements), Arial, sans-serif !important;
font-size: 14px !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
text-decoration: none !important;
box-shadow: none !important;
overflow: hidden !important;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease !important;
}
#mainmenu > li[data-action="primary"]:hover > a,
#mainmenu > li:hover > a[data-action="primary"] {
color: #fff !important;
background: transparent !important;
border-color: rgba(255, 255, 255, 0.85) !important;
transform: translateY(-1px);
}
/* bez standardowej kreski pod menu */
#mainmenu > li[data-action="primary"] > a::after,
#mainmenu > li > a[data-action="primary"]::after {
display: none !important;
content: none !important;
}
/* =========================================================
LOVOL - primary menu button
data-action="primary"
========================================================= */
#mainmenu > li[data-action="primary"] {
margin-left: auto !important;
margin-right: 0 !important;
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
display: flex !important;
align-items: center !important;
}
#mainmenu > li[data-action="primary"] > a,
#mainmenu > li > a[data-action="primary"] {
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
padding: 0 18px !important;
line-height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.72) !important;
border-radius: 999px !important;
font-family: var(--font-elements), Arial, sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
text-decoration: none !important;
white-space: nowrap !important;
box-shadow: none !important;
overflow: hidden !important;
transform: none !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
vertical-align: middle !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
background-color 0.32s ease,
color 0.32s ease,
border-color 0.32s ease !important;
}
#mainmenu > li[data-action="primary"]:hover > a,
#mainmenu > li:hover > a[data-action="primary"],
#mainmenu > li[data-action="primary"] > a:hover,
#mainmenu > li > a[data-action="primary"]:hover {
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
padding: 0 18px !important;
line-height: 38px !important;
color: #111 !important;
background: rgba(255, 255, 255, 0.96) !important;
border-color: rgba(255, 255, 255, 0.96) !important;
box-shadow: none !important;
transform: none !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* wyłączenie zwykłej kreski menu pod CTA */
#mainmenu > li[data-action="primary"] > a::after,
#mainmenu > li > a[data-action="primary"]::after {
display: none !important;
content: none !important;
}
}
/* =========================================================
3. RESPONSIVE 1100px-
Tu NIE wymuszamy widoczności #mainmenu.
Wyrównujemy tylko wysokości headera, logo i hamburger.
========================================================= */
@media screen and (max-width: 1100px) {
div.men_up2,
div.men_top_up {
height: 80px !important;
min-height: 80px !important;
max-height: 80px !important;
padding: 10px 0 !important;
box-sizing: border-box !important;
background: rgba(5, 5, 5, 0.85) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: #fff !important;
box-shadow: none !important;
border: 0 !important;
}
div.men2,
div.men_top {
position: relative !important;
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
box-sizing: border-box !important;
background: transparent !important;
color: #fff !important;
}
#logo,
#logo2 {
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
display: flex !important;
align-items: center !important;
}
#logo {
margin-left: 10px !important;
}
#logo2 {
margin-left: 10px !important;
margin-right: 0 !important;
}
#logo > a,
#logo2 > a {
height: 60px !important;
display: flex !important;
align-items: center !important;
}
#logo > a > img,
#logo2 > a > img {
max-height: 50px !important;
max-width: 260px !important;
width: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
display: block !important;
}
/* bardzo ważne:
responsive.css ukrywa .men_center, więc tutaj go NIE pokazujemy */
.men_center,
.men_center2 {
display: none;
}
/* hamburger w men_up2 */
div.men2 > div > .men_select,
div.men2 .men_select {
position: absolute !important;
top: 50% !important;
right: 20px !important;
margin-top: -25px !important;
width: 50px !important;
height: 50px !important;
color: #fff !important;
}
/* wrapper hamburgera w men_up_top.php ma inline top:50% */
div.men_top_up div.men_top > div[style*="top:50%"] {
position: absolute !important;
top: 0 !important;
right: 0 !important;
height: 60px !important;
width: 70px !important;
display: block !important;
}
/* hamburger w men_top_up */
div.men_top > div > .men_select,
div.men_top .men_select {
position: absolute !important;
top: 50% !important;
right: 20px !important;
margin-top: -25px !important;
width: 50px !important;
height: 50px !important;
color: #fff !important;
}
}
/* =========================================================
4. MAŁE TELEFONY
========================================================= */
@media screen and (max-width: 500px) {
#logo > a > img,
#logo2 > a > img {
max-height: 50px !important;
max-width: 250px !important;
}
div.men2 > div > .men_select,
div.men2 .men_select,
div.men_top > div > .men_select,
div.men_top .men_select {
right: 10px !important;
}
}
/* =========================================================
LOVOL - MOBILE / SIDE MENU men_left
Jasny panel boczny + szare litery + subtelne buttony
========================================================= */
.men_left {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 247, 249, 0.98) 100%) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
color: #2b2b2b !important;
border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: -18px 0 40px rgba(0, 0, 0, 0.18) !important;
padding: 22px !important;
box-sizing: border-box !important;
}
/* =========================================================
LOVOL - men_left structure
WAŻNE: bez !important na display przy uul,
żeby JS toggle / slideToggle działał poprawnie
========================================================= */
.men_left .men_left_list,
.men_left .men_left_list lli,
.men_left .men_left_list uul {
width: 100%;
max-width: 100%;
box-sizing: border-box;
list-style: none;
margin-left: 0;
padding-left: 0;
}
.men_left uul,
.men_left lli {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0;
}
/* jeśli elementy menu są owinięte w link */
.men_left .men_left_list a,
.men_left .men_left_list lli > a {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* główna lista ma być widoczna */
.men_left .men_left_list {
display: block !important;
margin-top: 24px !important;
}
/* zagnieżdżone podmenu ukryte przed kliknięciem */
.men_left .men_left_list lli > uul {
display: none;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 4px 0 12px 0;
padding: 0;
}
/* kiedy JS/jQuery ustawi display:block, podmenu się pokazuje */
.men_left .men_left_list lli > uul[style*="display: block"] {
display: block;
}
/* =========================================================
LOVOL - zamknięcie menu
========================================================= */
.men_select_close {
color: #303030 !important;
width: 50px !important;
height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: rgba(0, 0, 0, 0.04) !important;
border: 1px solid rgba(0, 0, 0, 0.10) !important;
cursor: pointer !important;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease !important;
}
.men_select_close:hover {
color: #111 !important;
background: rgba(0, 0, 0, 0.08) !important;
border-color: rgba(0, 0, 0, 0.18) !important;
transform: rotate(90deg) !important;
}
/* =========================================================
LOVOL - poziom 1
========================================================= */
.men_list_but1 {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 16px 52px 16px 18px !important;
margin: 0 0 10px 0 !important;
font-family: var(--font-main), Arial, sans-serif !important;
font-size: 20px !important;
letter-spacing: 0.02em !important;
line-height: 1.25 !important;
color: #242424 !important;
background: rgba(0, 0, 0, 0.045) !important;
border: none !important;
box-shadow: none !important;
overflow: hidden !important;
cursor: pointer !important;
transition:
background 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease,
color 0.25s ease !important;
}
/* =========================================================
LOVOL - poziom 2
Pełna szerokość. Wcięcie robimy paddingiem, nie marginem.
========================================================= */
.men_list_but2 {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 13px 46px 13px 30px !important;
margin: 7px 0 !important;
font-family: var(--font-elements), Arial, sans-serif !important;
font-size: 17px !important;
letter-spacing: 0.015em !important;
line-height: 1.25 !important;
color: #4a4a4a !important;
background: rgba(0, 0, 0, 0.028) !important;
border: none !important;
box-shadow: none !important;
overflow: hidden !important;
cursor: pointer !important;
transition:
background 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease,
color 0.25s ease !important;
}
/* =========================================================
LOVOL - poziom 3
Pełna szerokość. Wcięcie robimy paddingiem, nie marginem.
========================================================= */
.men_list_but3 {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 11px 40px 11px 42px !important;
margin: 5px 0 !important;
font-family: var(--font-light), Arial, sans-serif !important;
font-size: 15px !important;
letter-spacing: 0.01em !important;
line-height: 1.3 !important;
color: #666 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
overflow: hidden !important;
cursor: pointer !important;
}
/* =========================================================
LOVOL - efekt kreski z lewej
========================================================= */
.men_list_but1::before,
.men_list_but2::before,
.men_list_but3::before {
content: "";
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 3px;
background: #111;
transform: scaleY(0);
transform-origin: top center;
transition: transform 0.25s ease;
}
/* =========================================================
LOVOL - hover
========================================================= */
.men_list_but1:hover,
.men_list_but2:hover,
.men_list_but3:hover {
color: #111 !important;
background: rgba(0, 0, 0, 0.075) !important;
border-color: rgba(0, 0, 0, 0.15) !important;
transform: translateX(4px) !important;
}
.men_list_but1:hover::before,
.men_list_but2:hover::before,
.men_list_but3:hover::before {
transform: scaleY(1);
}
/* =========================================================
LOVOL - ikony rozwijania
========================================================= */
.men_list_icon {
color: rgba(0, 0, 0, 0.45) !important;
right: 16px !important;
cursor: pointer !important;
}
.men_list_icon i,
.men_list_icon z {
font-size: 16px;
line-height: 1;
display: block;
}
.men_list_but1:hover .men_list_icon,
.men_list_but2:hover .men_list_icon,
.men_list_but3:hover .men_list_icon {
color: #111 !important;
}
/* =========================================================
LOVOL - linki i elementy tekstowe
========================================================= */
.men_left a,
.men_left div {
color: inherit;
}
.men_left a,
.men_select_close,
.men_list_but1,
.men_list_but2,
.men_list_but3,
.men_list_icon {
cursor: pointer !important;
}
/* =========================================================
LOVOL - górne elementy w men_left
========================================================= */
.men_left .lang,
.men_left .waluta,
.menleft_top_right_content {
color: #333 !important;
}
.men_left .lang_switch,
.men_left .waluta_switch {
color: rgba(0, 0, 0, 0.62) !important;
}
.men_left .setlang,
.men_left .lang_switch:hover,
.men_left .waluta_switch:hover {
color: #111 !important;
}
/* =========================================================
LOVOL - Phoenix fullscreen banner under men_up2
men_up widoczny: men_up2 top 40px
men_up ukryty na małych ekranach: men_up2 top 0
========================================================= */
/* górny pasek zostaje normalnie w układzie */
div.men_up,
div.men {
position: relative !important;
z-index: 6000 !important;
}
/* men_top_up / sticky zawsze startuje od góry */
div.men_top_up {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
z-index: 5100 !important;
}
/* wrapper sticky, jeśli występuje */
div.men_up_top {
z-index: 5100 !important;
}
/* =========================================================
DESKTOP / TABLET - men_up widoczny
========================================================= */
@media screen and (min-width: 501px) {
/* men_up2 jako warstwa na banerze, ale dopiero pod men_up 40px */
div.men_up2 {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 40px !important;
z-index: 5000 !important;
}
/* baner zaczyna się pod men_up, czyli od 40px */
div.men_up4,
#men_up4,
#men_up4.fullscreen {
position: relative !important;
width: 100% !important;
min-width: 100% !important;
height: calc(100vh - 40px) !important;
min-height: 620px !important;
max-height: none !important;
overflow: hidden !important;
margin-top: 0 !important;
padding-top: 0 !important;
background: #050505 !important;
z-index: 1 !important;
}
}
/* =========================================================
MOBILE - men_up znika, więc men_up2 nie może mieć top 40px
========================================================= */
@media screen and (max-width: 500px) {
div.men_up2 {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
z-index: 5000 !important;
}
div.men_up4,
#men_up4,
#men_up4.fullscreen {
position: relative !important;
width: 100% !important;
min-width: 100% !important;
height: 100vh !important;
min-height: 480px !important;
max-height: none !important;
overflow: hidden !important;
margin-top: 0 !important;
padding-top: 0 !important;
background: #050505 !important;
z-index: 1 !important;
}
}
/* =========================================================
Phoenix / wspólne dla desktop + mobile
========================================================= */
/* Phoenix wypełnia cały baner */
#men_up4 .phoenix-slider,
div.men_up4 .phoenix-slider {
width: 100% !important;
min-width: 100% !important;
height: 100% !important;
min-height: 100% !important;
display: block !important;
position: relative !important;
}
/* slajd jako cover */
#men_up4 .phoenix-slider .phoenix-feather {
width: 100% !important;
min-width: 100% !important;
height: 100% !important;
min-height: 100% !important;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
/* obraz przed przetworzeniem przez JS */
#men_up4 .phoenix-slider .phoenix-feather > img {
width: 100% !important;
min-width: 100% !important;
height: 100% !important;
min-height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
}
/* video stabilnie jako cover */
#men_up4 .phoenix-video {
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
transform: translate(-50%, -50%) !important;
-webkit-transform: translate(-50%, -50%) !important;
background: transparent !important;
}
#men_up4 .phoenix-feather[video="true"] {
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* bez przyciemniania banera */
#men_up4 .texture-baner,
#men_up4 .texture-baner-two {
display: none !important;
background: none !important;
}
/* wyłączenie zoom animation */
#men_up4 .phoenix-feather-animation,
.phoenix-feather-animation {
transition: none !important;
transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
}
/* =========================================================
Phoenix dots na dole baneru
cienkie linie z dużym obszarem kliknięcia
========================================================= */
#men_up4 .container-dots-wrapper {
position: absolute !important;
left: 50% !important;
right: auto !important;
bottom: 28px !important;
top: auto !important;
width: auto !important;
height: 28px !important;
margin: 0 !important;
padding: 0 !important;
transform: translateX(-50%) !important;
z-index: 1010 !important;
}
#men_up4 .container-dots-inner {
display: block !important;
width: auto !important;
height: 28px !important;
margin: 0 !important;
padding: 0 !important;
}
#men_up4 .dots {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: auto !important;
height: 28px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#men_up4 .dots li {
position: relative !important;
display: block !important;
float: none !important;
width: 120px !important;
height: 28px !important;
margin: 0 !important;
padding: 0 !important;
text-indent: -999em !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
opacity: 1 !important;
cursor: pointer !important;
filter: none !important;
-webkit-filter: none !important;
}
#men_up4 .dots li::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
background: rgba(255, 255, 255, 0.42) !important;
transform: translateY(-50%);
transition:
background-color 0.28s ease,
height 0.28s ease !important;
}
#men_up4 .dots li.active {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
opacity: 1 !important;
}
#men_up4 .dots li.active::before {
height: 2px;
background: #fff !important;
}
/* =========================================================
banner opis / fullscreen transparent layer
========================================================= */
#men_up4 .baner_opis {
position: absolute !important;
left: 0 !important;
right: auto !important;
top: 0 !important;
bottom: auto !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
display: flex !important;
align-items: flex-end !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
padding: 0 8vw 105px 8vw !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
transform: none !important;
z-index: 1020 !important;
pointer-events: none !important;
}
/* treść opisu */
#men_up4 .baner_opis_text {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 760px !important;
box-sizing: border-box !important;
font-family: var(--font-heading), Arial, sans-serif !important;
font-size: 2.8rem !important;
line-height: 1.2 !important;
letter-spacing: -0.035em !important;
font-weight: normal !important;
color: #fff !important;
text-align: left !important;
opacity: 0;
transform: translateY(42px);
animation: bannerOpisUp 0.85s ease forwards;
}
#men_up4 .baner_opis_text > div {
position: relative !important;
}
#men_up4 .baner_opis_text span,
#men_up4 .baner_opis_text p,
#men_up4 .baner_opis_text div {
color: inherit !important;
}
/* mały opis, jeśli będzie użyty */
#men_up4 .baner_opis_small {
max-width: 620px !important;
margin-top: 24px !important;
padding: 0 !important;
border-left: 0 !important;
font-family: var(--font-main), Arial, sans-serif !important;
font-size: 18px !important;
line-height: 1.55 !important;
color: rgba(255, 255, 255, 0.86) !important;
background: transparent !important;
}
/* animacja wejścia od dołu */
@keyframes bannerOpisUp {
from {
opacity: 0;
transform: translateY(42px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
mobile korekta opisu i dots
========================================================= */
@media screen and (max-width: 500px) {
#men_up4 .baner_opis {
padding: 0 5vw 76px 5vw !important;
}
#men_up4 .baner_opis_text {
max-width: 92% !important;
font-size: 1.75rem !important;
line-height: 1.18 !important;
letter-spacing: -0.02em !important;
}
#men_up4 .baner_opis_small {
font-size: 15px !important;
line-height: 1.45 !important;
}
#men_up4 .container-dots-wrapper {
bottom: 22px !important;
}
#men_up4 .dots li {
width: 52px !important;
height: 28px !important;
}
}
/* =========================================================
AJAX / MODELS MODAL nad men_left
men_left ma z-index 11000, więc overlay musi być wyżej
========================================================= */
.overlay {
z-index: 13000 !important;
}
.overlay.overlay-display,
.overlay-display {
z-index: 13000 !important;
}
.modal {
position: relative !important;
z-index: 13010 !important;
}
#modal-content,
.modal-content {
position: relative !important;
z-index: 13020 !important;
}
/* =========================================================
LOVOL - MODELS MODAL / KAFLE MODELI
========================================================= */
.models-modal {
width: 100%;
box-sizing: border-box;
padding: 2px 0 8px 0;
font-family: var(--font-main), Arial, sans-serif;
color: #2b2f33;
}
.models-modal-head {
display: flex;
align-items: center;
gap: 34px;
padding: 0 0 18px 0;
margin-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.models-modal-title {
font-size: 17px;
line-height: 1.4;
color: rgba(0, 0, 0, 0.72);
white-space: nowrap;
}
.models-tabs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 28px;
}
.models-tab {
position: relative;
display: inline-block;
padding: 0 0 5px 0;
border: 0;
background: transparent;
font-family: var(--font-strong), var(--font-main), Arial, sans-serif;
font-size: 16px;
line-height: 1.4;
color: rgba(0, 0, 0, 0.68);
cursor: pointer;
user-select: none;
}
.models-tab::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: #111;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.24s ease;
}
.models-tab:hover,
.models-tab.active {
color: #111;
}
.models-tab:hover::after,
.models-tab.active::after {
transform: scaleX(1);
}
.models-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.model-card {
position: relative;
min-height: 344px;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
border-radius: 8px;
background: #e9eaec;
overflow: hidden;
}
.model-card-main {
display: flex;
flex: 1;
flex-direction: column;
color: inherit;
text-decoration: none;
}
.model-card-top {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
gap: 14px;
}
.model-card-title {
margin: 0 0 14px 0;
padding: 0;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.02em;
text-transform: uppercase;
color: #2b2f33;
}
.model-card-more {
display: inline-block;
padding: 8px 11px;
border-radius: 7px;
background: #fff;
font-family: var(--font-strong), var(--font-main), Arial, sans-serif;
font-size: 12px;
line-height: 1;
color: #244fbd;
}
.model-card-icon {
flex: 0 0 38px;
width: 38px;
height: 38px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.86;
}
.model-card-image-wrap {
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 155px;
margin: 10px 0 14px 0;
}
.model-card-image {
display: block;
max-width: 100%;
max-height: 170px;
object-fit: contain;
object-position: center;
transition: transform 0.45s ease;
}
.model-card:hover .model-card-image {
transform: scale(1.035);
}
.model-card-desc {
margin: -2px 0 14px 0;
font-family: var(--font-main), Arial, sans-serif;
font-size: 13px;
line-height: 1.45;
color: rgba(0, 0, 0, 0.64);
}
.model-card-config {
position: relative;
z-index: 3;
display: block;
width: 100%;
padding: 10px 14px;
box-sizing: border-box;
border: 1px solid #202326;
border-radius: 4px;
background: transparent;
color: #202326;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 12px;
line-height: 1.2;
letter-spacing: 0.02em;
transition:
background-color 0.24s ease,
color 0.24s ease,
border-color 0.24s ease;
}
.model-card-config:hover {
background: #202326;
color: #fff;
border-color: #202326;
}
.model-card-series {
display: none;
}
.models-empty {
grid-column: 1 / -1;
padding: 18px;
border-radius: 10px;
background: #f5f5f5;
color: rgba(0, 0, 0, 0.62);
}
@media screen and (max-width: 700px) {
.models-modal-head {
display: block;
}
.models-modal-title {
margin-bottom: 14px;
white-space: normal;
}
.models-tabs {
gap: 16px;
}
.models-grid {
grid-template-columns: 1fr;
}
.model-card {
min-height: 320px;
}
}
/* =========================================================
LOVOL - MODELS MODAL / korekta kart po usunieciu gornego CTA
========================================================= */
.models-grid {
align-items: stretch;
}
.model-card {
min-height: 395px;
opacity: 0;
transform: translateY(18px) scale(0.985);
animation: modelCardReveal 0.55s ease forwards;
}
.model-card:nth-child(1) { animation-delay: 0.04s; }
.model-card:nth-child(2) { animation-delay: 0.08s; }
.model-card:nth-child(3) { animation-delay: 0.12s; }
.model-card:nth-child(4) { animation-delay: 0.16s; }
.model-card:nth-child(5) { animation-delay: 0.20s; }
.model-card:nth-child(6) { animation-delay: 0.24s; }
.model-card:nth-child(7) { animation-delay: 0.28s; }
.model-card:nth-child(8) { animation-delay: 0.32s; }
@keyframes modelCardReveal {
from {
opacity: 0;
transform: translateY(18px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.model-card-top {
min-height: 54px;
}
.model-card-title {
margin-bottom: 0;
}
.model-card-image-wrap {
min-height: 230px;
margin: 14px 0 18px 0;
}
.model-card-image {
width: 100%;
height: 230px;
max-width: 100%;
max-height: none;
object-fit: contain;
object-position: center center;
}
/* Gorny przycisk zostaje wylaczony, gdyby zostal jeszcze w HTML */
.model-card-more {
display: none !important;
}
.model-card-config {
margin-top: auto;
padding: 11px 14px;
font-size: 12px;
letter-spacing: 0.03em;
}
@media screen and (max-width: 700px) {
.model-card {
min-height: 360px;
}
.model-card-image-wrap {
min-height: 205px;
}
.model-card-image {
height: 205px;
}
}
.models-modal-main-title {
display: block;
width: 100%;
max-width: 980px;
margin: 0 auto 28px auto;
padding: 0;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.08;
letter-spacing: -0.035em;
font-weight: normal;
color: #202326;
text-align: center;
}
@media screen and (max-width: 700px) {
.models-modal-main-title {
margin-bottom: 22px;
font-size: clamp(28px, 8vw, 38px);
letter-spacing: -0.025em;
}
}
/* =========================================================
LOVOL - MODELS ANCHOR SECTION / poziomy slider
========================================================= */
.lovol-models-anchor {
width: 100%;
box-sizing: border-box;
padding: clamp(46px, 5vw, 76px) 0;
background: #eeeeef;
color: #111;
overflow: hidden;
}
.lovol-models-anchor-inner {
width: min(100% - 48px, 1600px);
margin: 0 auto;
box-sizing: border-box;
}
.lovol-models-anchor-title {
margin: 0 0 26px 0;
padding: 0;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(34px, 4.2vw, 58px);
line-height: 1.05;
letter-spacing: -0.045em;
font-weight: normal;
text-align: center;
color: #050505;
}
.lovol-models-anchor-tabs {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0;
width: fit-content;
max-width: 100%;
margin: 0 auto clamp(34px, 4vw, 52px) auto;
padding: 5px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.78);
}
.lovol-models-anchor-tab {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 25px;
border: 0;
border-radius: 999px;
background: transparent;
color: #111;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 15px;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition:
background-color 0.24s ease,
color 0.24s ease;
}
.lovol-models-anchor-tab.active {
background: #d6d6d8;
}
.lovol-models-anchor-slider {
position: relative;
width: 100%;
}
.lovol-models-anchor-track {
display: flex;
gap: 18px;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 0 0 38px 0;
box-sizing: border-box;
-ms-overflow-style: none;
scrollbar-width: none;
}
.lovol-models-anchor-track::-webkit-scrollbar {
display: none;
}
.lovol-model-anchor-card {
position: relative;
flex: 0 0 calc((100% - 36px) / 3);
min-height: 430px;
padding: 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
border-radius: 28px;
background: #fff;
overflow: hidden;
scroll-snap-align: start;
opacity: 1;
transform: translateY(0) scale(1);
transition:
opacity 0.26s ease,
transform 0.26s ease,
box-shadow 0.30s ease;
}
.lovol-model-anchor-card:hover {
transform: translateY(-5px);
box-shadow: 0 22px 42px rgba(0, 0, 0, 0.10);
}
.lovol-model-anchor-card.is-hidden {
display: none;
}
.lovol-model-anchor-card-head {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
gap: 16px;
}
.lovol-model-anchor-intro {
margin-bottom: 7px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 14px;
line-height: 1.35;
color: #111;
}
.lovol-model-anchor-name {
margin: 0;
padding: 0;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(25px, 2.1vw, 32px);
line-height: 1.05;
letter-spacing: -0.035em;
font-weight: normal;
color: #050505;
}
.lovol-model-anchor-cena {
margin-top: 8px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
line-height: 1.35;
color: #111;
}
.lovol-model-anchor-cena > price {
margin-top: 8px;
font-family: var(--font-heading), var(--font-main), Arial, sans-serif;
font-size: 18px;
line-height: 1.35;
color: #111;
}
.lovol-model-anchor-meta {
margin-bottom: 10px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
line-height: 1.35;
color: #111;
}
.lovol-model-anchor-badge {
flex: 0 0 78px;
width: 78px;
height: 78px;
border-radius: 12px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.lovol-model-anchor-image-link {
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 215px;
margin: 12px 0 22px 0;
}
.lovol-model-anchor-image {
display: block;
width: 100%;
max-width: 430px;
height: 230px;
object-fit: contain;
object-position: center;
/*transition: transform 0.45s ease;*/
}
.lovol-model-anchor-card:hover .lovol-model-anchor-image {
/*transform: scale(1.035);*/
}
.lovol-model-anchor-actions {
display: flex;
gap: 16px;
margin-top: auto;
}
.lovol-model-anchor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 50px;
padding: 0 20px;
box-sizing: border-box;
border-radius: 999px;
border: 1px solid #202326;
font-family: var(--font-strong), var(--font-elements), Arial, sans-serif;
font-size: 13px;
line-height: 1;
letter-spacing: 0.05em;
text-decoration: none;
text-align: center;
}
.lovol-model-anchor-button-dark {
background: #202326;
color: #fff;
}
.lovol-model-anchor-button-dark:hover {
background: transparent;
color: #202326;
}
.lovol-models-anchor-empty {
flex: 0 0 100%;
padding: 24px;
border-radius: 18px;
background: #fff;
color: rgba(0, 0, 0, 0.62);
text-align: center;
}
.lovol-models-anchor-nav {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
max-width: 100%;
margin: 0 auto;
padding: 5px;
border-radius: 999px;
background: rgba(190, 190, 190, 0.76);
}
.lovol-models-anchor-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.88);
color: #111;
font-size: 15px;
cursor: pointer;
transition:
background-color 0.24s ease,
transform 0.24s ease;
}
.lovol-models-anchor-arrow:hover {
background: #fff;
transform: scale(1.04);
}
.lovol-models-anchor-prev {
background: rgba(160, 160, 160, 0.72);
}
.lovol-models-anchor-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
min-width: 230px;
padding: 0 24px;
box-sizing: border-box;
}
.lovol-models-anchor-dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(135, 135, 135, 0.38);
cursor: pointer;
transition:
width 0.24s ease,
background-color 0.24s ease;
}
.lovol-models-anchor-dot.active {
width: 16px;
background: #fff;
}
@media screen and (max-width: 1100px) {
.lovol-model-anchor-card {
flex-basis: calc((100% - 18px) / 2);
}
}
@media screen and (max-width: 700px) {
.lovol-models-anchor-inner {
width: min(100% - 28px, 1600px);
}
.lovol-models-anchor-tabs {
width: 100%;
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
}
.lovol-models-anchor-tab {
padding: 0 18px;
}
.lovol-model-anchor-card {
flex-basis: 86%;
min-height: 390px;
border-radius: 22px;
padding: 20px;
}
.lovol-model-anchor-image-link {
min-height: 190px;
}
.lovol-model-anchor-image {
height: 205px;
}
.lovol-models-anchor-dots {
min-width: 140px;
gap: 10px;
padding: 0 14px;
}
}
/* korekta nawigacji: kropka = jeden model */
.lovol-models-anchor-dots {
max-width: min(52vw, 420px);
overflow: hidden;
}
.lovol-models-anchor-dot {
flex: 0 0 auto;
}
/* =========================================================
LOVOL - model.php / hero jak baner Phoenix
Reszta strony korzysta z klas content.php:
bod_ind_b / ind_b / pagcontent / bod_ind_a / ind_a
========================================================= */
.lovol-model-hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 560px;
display: block;
overflow: hidden;
background: #050505;
color: #fff;
}
.lovol-model-hero-image,
.lovol-model-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.lovol-model-hero-image {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.lovol-model-hero.no-media {
background:
radial-gradient(circle at 72% 42%, rgba(255,255,255,0.10), transparent 34%),
linear-gradient(135deg, #151515 0%, #050505 100%);
}
.lovol-model-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.04) 0%,
rgba(0, 0, 0, 0.08) 42%,
rgba(0, 0, 0, 0.42) 74%,
rgba(0, 0, 0, 0.68) 100%
);
}
.lovol-model-hero-opis::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 145%;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.34) 48%,
rgba(0, 0, 0, 0.68) 100%
);
pointer-events: none;
z-index: -1;
}
.lovol-model-hero-opis {
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
width: 100%;
box-sizing: border-box;
padding: clamp(52px, 7vw, 108px) 0;
}
.lovol-model-hero-opis-inner {
width: min(100% - 48px, 1600px);
margin: 0 auto;
box-sizing: border-box;
}
.lovol-model-hero-kicker {
margin-bottom: 12px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
line-height: 1;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.74);
}
.lovol-model-hero-title {
margin: 0;
padding: 0;
max-width: 980px;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(44px, 6vw, 92px);
line-height: 0.96;
letter-spacing: -0.055em;
font-weight: normal;
color: #fff;
}
.lovol-model-hero-desc {
width: min(100%, 760px);
margin-top: 24px;
color: rgba(255, 255, 255, 0.88);
}
.lovol-model-hero-intro {
font-family: var(--font-main), Arial, sans-serif;
font-size: clamp(18px, 1.55vw, 24px);
line-height: 1.45;
}
.lovol-model-hero-meta {
width: fit-content;
max-width: 100%;
margin-top: 16px;
padding: 9px 13px;
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 999px;
background: rgba(255, 255, 255, 0.10);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
line-height: 1.2;
color: rgba(255, 255, 255, 0.90);
}
@media screen and (max-width: 700px) {
.lovol-model-hero {
height: 100vh;
min-height: 520px;
}
.lovol-model-hero-opis {
padding: 44px 0 58px 0;
}
.lovol-model-hero-opis-inner {
width: min(100% - 28px, 1600px);
}
.lovol-model-hero-desc {
margin-top: 18px;
}
}
/* =========================================================
LOVOL - model.php / powiązany blok jako baner
Działa tylko gdy powiązany plik ma bck_img obraz/video
========================================================= */
.lovol-model-block-hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 560px;
display: block;
overflow: hidden;
background: #050505;
color: #fff;
}
.lovol-model-block-hero-image,
.lovol-model-block-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.lovol-model-block-hero-image {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.lovol-model-block-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.12) 42%, rgba(0,0,0,0.58) 100%);
}
.lovol-model-block-hero-opis {
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
width: 100%;
box-sizing: border-box;
padding: clamp(44px, 6vw, 92px) 0;
}
.lovol-model-block-hero-opis-inner {
width: min(100% - 48px, 1600px);
margin: 0 auto;
box-sizing: border-box;
}
.lovol-model-block-hero .pagcontent {
color: #fff;
}
.lovol-model-block-hero .pagcontent h1,
.lovol-model-block-hero .pagcontent h2,
.lovol-model-block-hero .pagcontent h3,
.lovol-model-block-hero .pagcontent p,
.lovol-model-block-hero .pagcontent span,
.lovol-model-block-hero .pagcontent div {
color: inherit;
}
@media screen and (max-width: 700px) {
.lovol-model-block-hero {
height: 100vh;
min-height: 520px;
}
.lovol-model-block-hero-opis {
padding: 42px 0 56px 0;
}
.lovol-model-block-hero-opis-inner {
width: min(100% - 28px, 1600px);
}
}
/* =========================================================
LOVOL - filary + zdjęcie po prawej jak na screenie
========================================================= */
.lovol-pillars-layout {
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
.lovol-pillars-layout > .contact-flt {
float: none;
box-sizing: border-box;
}
.lovol-pillars-layout > .w60 {
display: flex;
}
.lovol-pillars-layout > .w40 {
display: flex;
}
/* lewa kolumna */
.lovol-pillars-box {
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 18px;
box-sizing: border-box;
}
.lovol-pillars-box .lovol-pillar-item {
position: relative;
display: grid;
grid-template-columns: 180px 1fr;
align-items: center;
gap: 30px;
min-height: 146px;
padding: 24px 30px;
box-sizing: border-box;
border-radius: 22px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
color: #202326;
overflow: hidden;
transition:
transform 0.28s ease,
box-shadow 0.28s ease,
border-color 0.28s ease;
}
.lovol-pillars-box .lovol-pillar-item:hover {
transform: translateY(-3px);
border-color: rgba(0, 0, 0, 0.14);
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.10);
}
.lovol-pillars-box .lovol-pillar-item::before {
content: "";
position: absolute;
left: 210px;
top: 24px;
bottom: 24px;
width: 1px;
background: rgba(0, 0, 0, 0.12);
}
.lovol-pillars-box .lovol-pillar-icon {
position: relative;
z-index: 2;
width: 180px;
min-width: 180px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
}
.lovol-pillars-box .lovol-pillar-icon img {
display: block;
width: 150px;
height: 83px;
max-width: 150px;
max-height: 83px;
object-fit: contain;
object-position: center;
}
.lovol-pillars-box .lovol-pillar-text {
position: relative;
z-index: 2;
padding-left: 2px;
box-sizing: border-box;
}
.lovol-pillars-box .lovol-pillar-text h3 {
margin: 0 0 8px 0 !important;
padding: 0 !important;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(24px, 2vw, 34px) !important;
line-height: 1.08 !important;
letter-spacing: -0.035em;
font-weight: normal;
color: #202326 !important;
}
.lovol-pillars-box .lovol-pillar-text p {
margin: 0 !important;
padding: 0 !important;
max-width: 560px;
font-family: var(--font-main), Arial, sans-serif;
font-size: 15px !important;
line-height: 1.52 !important;
color: rgba(0, 0, 0, 0.64) !important;
}
/* prawa kolumna - zdjęcie ma wysokość stosu kafli */
.lovol-pillars-image {
width: 100%;
height: 100%;
min-height: 100%;
display: block;
position: relative;
box-sizing: border-box;
overflow: hidden;
border-radius: 35px;
background: #f4f4f4;
}
.lovol-pillars-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.lovol-pillars-image.img-right img {
object-position: center right;
}
.lovol-pillars-image.img-left img {
object-position: center left;
}
.lovol-pillars-image.img-top img {
object-position: center top;
}
.lovol-pillars-image.img-bottom img {
object-position: center bottom;
}
/* =========================================================
Responsive
========================================================= */
@media screen and (max-width: 1100px) {
.lovol-pillars-box .lovol-pillar-item {
grid-template-columns: 150px 1fr;
gap: 24px;
min-height: 136px;
padding: 22px 24px;
}
.lovol-pillars-box .lovol-pillar-item::before {
left: 174px;
top: 22px;
bottom: 22px;
}
.lovol-pillars-box .lovol-pillar-icon {
width: 150px;
min-width: 150px;
height: 86px;
}
.lovol-pillars-box .lovol-pillar-icon img {
width: 132px;
height: auto;
max-width: 132px;
max-height: 74px;
}
}
@media screen and (max-width: 700px) {
.lovol-pillars-layout {
display: block;
}
.lovol-pillars-layout > .contact-flt {
float: none;
width: 100% !important;
}
.lovol-pillars-box .lovol-pillar-item {
grid-template-columns: 1fr;
gap: 16px;
min-height: auto;
padding: 24px;
text-align: center;
}
.lovol-pillars-box .lovol-pillar-item::before {
display: none;
}
.lovol-pillars-box .lovol-pillar-icon {
width: 100%;
min-width: 0;
height: 86px;
}
.lovol-pillars-box .lovol-pillar-icon img {
width: 150px;
height: 83px;
max-width: 150px;
max-height: 83px;
}
.lovol-pillars-box .lovol-pillar-text {
padding-left: 0;
}
.lovol-pillars-box .lovol-pillar-text p {
max-width: none;
}
.lovol-pillars-image {
height: 320px;
min-height: 320px;
margin-top: 18px;
border-radius: 12px;
}
}
/* =========================================================
LOVOL - sekcja kolorów na pełną szerokość strony
========================================================= */
.lovol-color-section {
background: #f1f1f1;
}
.lovol-color-section .ind_a {
background: transparent !important;
}
.lovol-color-section .pagcontent {
width: min(100% - 48px, 1600px);
margin: 0 auto;
box-sizing: border-box;
}
.lovol-color-content {
width: min(100%, 1100px);
margin: 0 auto 28px auto;
text-align: center;
}
.lovol-color-view {
position: relative;
width: 100%;
min-height: 620px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
overflow: hidden;
border-radius: 28px;
background: transparent;
}
.lovol-color-image-wrap {
position: relative;
width: 100%;
min-height: 620px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: clamp(24px, 4vw, 54px);
}
.lovol-color-image {
display: block;
max-width: 100%;
max-height: 600px;
border-radius: 35px;
object-fit: contain;
object-position: center;
opacity: 1;
transform: scale(1);
transition:
opacity 0.34s ease,
transform 0.34s ease;
}
.lovol-color-image.is-changing {
opacity: 0;
transform: scale(0.985);
}
.lovol-color-panel {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 18px;
max-width: calc(100% - 36px);
padding: 10px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-sizing: border-box;
}
.lovol-color-dots {
display: inline-flex;
align-items: center;
gap: 12px;
}
.lovol-color-dot {
position: relative;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.16),
0 0 0 0 rgba(0, 0, 0, 0);
transition:
transform 0.22s ease,
box-shadow 0.22s ease;
}
.lovol-color-dot:hover {
transform: scale(1.06);
}
.lovol-color-dot.active {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.85),
0 0 0 3px #fff,
0 0 0 5px rgba(0, 0, 0, 0.82);
}
.lovol-color-name {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 20px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.08);
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 14px;
line-height: 1;
color: #111;
white-space: nowrap;
}
@media screen and (max-width: 1100px) {
.lovol-color-view {
min-height: 520px;
border-radius: 22px;
}
.lovol-color-image-wrap {
min-height: 520px;
}
.lovol-color-image {
max-height: 460px;
}
}
@media screen and (max-width: 700px) {
.lovol-color-view {
min-height: 440px;
border-radius: 18px;
}
.lovol-color-image-wrap {
min-height: 440px;
padding: 20px;
}
.lovol-color-image {
max-height: 360px;
}
.lovol-color-panel {
bottom: 16px;
gap: 12px;
padding: 8px 12px;
}
.lovol-color-dot {
width: 30px;
height: 30px;
}
.lovol-color-name {
display: none;
}
}
/* =========================================================
LOVOL - blok karuzeli modelu / center mode
auto_action = karuzela
Wariant: szerokość aktywnego slajdu dopasowana do opisu
680px / proporcja okna 4:3
========================================================= */
.lovol-carousel-section {
background: #fff;
overflow: hidden;
}
.lovol-carousel-section .ind_a {
background: transparent !important;
}
.lovol-carousel-section .pagcontent {
width: 100%;
max-width: none;
margin: 0;
box-sizing: border-box;
}
.lovol-carousel-content {
width: min(100% - 48px, 1600px);
margin: 0 auto 24px auto;
text-align: center;
}
.lovol-carousel {
position: relative;
width: 100%;
box-sizing: border-box;
overflow: hidden;
margin-bottom: clamp(24px, 3vw, 42px);
}
.lovol-carousel-viewport {
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
overflow: hidden;
box-sizing: border-box;
}
.lovol-carousel-track {
display: flex;
align-items: flex-start;
gap: 30px;
width: max-content;
padding: 0 calc((100vw - min(680px, 68vw)) / 2);
box-sizing: border-box;
transition: transform 0.56s ease;
will-change: transform;
}
.lovol-carousel-slide {
flex: 0 0 min(680px, 68vw);
width: min(680px, 68vw);
box-sizing: border-box;
opacity: 0.55;
transition:
opacity 0.42s ease,
transform 0.42s ease;
}
.lovol-carousel-slide.active {
opacity: 1;
}
.lovol-carousel-image {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
max-height: 510px;
border-radius: 0;
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
}
/*
Pełne zdjęcia ciągników / 3:4 / pionowe:
trzymamy contain, żeby nie były wyższe niż okno 4:3.
*/
.lovol-carousel-image.fit-cover {
background-size: contain;
}
.lovol-carousel-image.fit-contain {
background-size: contain;
}
.lovol-carousel-image.fit-portrait {
background-size: contain;
}
/*
Tylko detale mogą być kadrowane.
*/
.lovol-carousel-image.fit-crop {
background-size: cover;
}
.lovol-carousel-caption {
width: min(100%, 680px);
margin: 14px auto 0 auto;
padding: 20px 28px;
box-sizing: border-box;
border-radius: 16px;
background: #f1f1f1;
text-align: center;
}
.lovol-carousel-caption h3 {
margin: 0 0 7px 0 !important;
padding: 0 !important;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(23px, 1.8vw, 31px) !important;
line-height: 1.08 !important;
letter-spacing: -0.035em;
font-weight: normal;
color: #111 !important;
}
.lovol-carousel-caption p {
margin: 0 !important;
padding: 0 !important;
font-family: var(--font-main), Arial, sans-serif;
font-size: 15px !important;
line-height: 1.52 !important;
color: rgba(0, 0, 0, 0.68) !important;
}
.lovol-carousel-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin: 20px auto 0 auto;
padding-bottom: 18px;
}
.lovol-carousel-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.26);
background: #fff;
color: #111;
font-size: 18px;
cursor: pointer;
transition:
transform 0.24s ease,
background-color 0.24s ease,
border-color 0.24s ease;
}
.lovol-carousel-arrow:hover {
transform: scale(1.04);
background: #f3f3f3;
border-color: rgba(0, 0, 0, 0.42);
}
.lovol-carousel-dots {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 80px;
}
.lovol-carousel-dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.20);
cursor: pointer;
transition:
width 0.24s ease,
background-color 0.24s ease;
}
.lovol-carousel-dot.active {
width: 18px;
border-radius: 999px;
background: #111;
}
.lovol-carousel-track.no-transition {
transition: none !important;
}
.lovol-carousel.is-jump .lovol-carousel-slide {
transition: none !important;
}
/* =========================================================
Tablet
========================================================= */
@media screen and (max-width: 1100px) {
.lovol-carousel-content {
width: min(100% - 40px, 1600px);
margin-bottom: 22px;
}
.lovol-carousel-track {
gap: 24px;
padding: 0 calc((100vw - min(640px, 78vw)) / 2);
}
.lovol-carousel-slide {
flex-basis: min(640px, 78vw);
width: min(640px, 78vw);
}
.lovol-carousel-image {
max-height: 480px;
}
.lovol-carousel-caption {
padding: 18px 24px;
}
}
/* =========================================================
Mobile
========================================================= */
@media screen and (max-width: 700px) {
.lovol-carousel-content {
width: min(100% - 28px, 1600px);
margin-bottom: 18px;
}
.lovol-carousel {
margin-bottom: 30px;
}
.lovol-carousel-viewport {
width: 100vw;
max-width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
transform: none;
overflow: hidden;
}
.lovol-carousel-track {
gap: 14px !important;
padding: 0 !important;
}
.lovol-carousel-slide {
flex-basis: calc(100vw - 28px);
width: calc(100vw - 28px);
}
.lovol-carousel-image {
height: clamp(245px, 75vw, 360px);
max-height: 360px;
aspect-ratio: auto;
border-radius: 0;
}
.lovol-carousel-caption {
width: calc(100vw - 28px);
margin: 10px auto 0 auto;
padding: 16px 18px;
border-radius: 15px;
}
.lovol-carousel-caption h3 {
font-size: 24px !important;
}
.lovol-carousel-caption p {
font-size: 14px !important;
line-height: 1.48 !important;
}
.lovol-carousel-nav {
gap: 14px;
margin-top: 16px;
padding-bottom: 24px;
}
.lovol-carousel-arrow {
width: 46px;
height: 46px;
}
}
.lovol-model-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin-top: 28px;
}
.hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 225px;
height: 56px;
padding: 0 32px;
box-sizing: border-box;
border: 2px solid #fff;
border-radius: 9px;
background: transparent;
color: #fff;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
.hero-btn:hover {
background: #fff;
color: #000 !important;
border-color: #fff;
}
.hero-btn.dark {
border-color: #111;
color: #111;
}
.hero-btn.dark:hover {
background: #111;
color: #fff !important;
border-color: #111;
}
@media screen and (max-width: 700px) {
.lovol-model-hero-cta {
gap: 12px;
}
.lovol-model-hero-cta .hero-btn {
min-width: 0;
width: 100%;
}
}
/* =========================================================
LOVOL - karta oferty / prawa kolumna przy filarach
========================================================= */
.lovol-offer-card {
width: 100%;
height: 100%;
min-height: 100%;
box-sizing: border-box;
}
.lovol-offer-card-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 520px;
padding: clamp(28px, 3vw, 48px);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 24px;
overflow: hidden;
background:
radial-gradient(circle at 82% 46%, rgba(31, 128, 255, 0.12) 0%, rgba(31, 128, 255, 0) 34%),
linear-gradient(135deg, #101419 0%, #050708 100%);
color: #fff;
}
.lovol-offer-card-inner::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(120deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 35%),
radial-gradient(circle at right center, rgba(255,255,255,0.06), rgba(255,255,255,0) 34%);
pointer-events: none;
}
.lovol-offer-card-inner::after {
content: "";
position: absolute;
right: 34px;
top: 50%;
width: 180px;
height: 180px;
transform: translateY(-50%);
border: 2px solid rgba(255,255,255,0.05);
border-radius: 32px;
opacity: 0.7;
pointer-events: none;
}
.lovol-offer-line {
position: relative;
z-index: 2;
width: 46px;
height: 4px;
margin-bottom: 22px;
border-radius: 999px;
background: #1478ff;
}
.lovol-offer-line.small {
width: 46px;
margin: 22px 0 24px 0;
}
.lovol-offer-title {
position: relative;
z-index: 2;
display: grid;
gap: 4px;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
line-height: 1.05;
letter-spacing: -0.04em;
}
.lovol-offer-title span {
font-size: clamp(26px, 2.4vw, 36px);
font-weight: 400;
}
.lovol-offer-title strong {
font-size: clamp(36px, 3.8vw, 54px);
font-weight: 700;
}
.lovol-offer-desc {
position: relative;
z-index: 2;
max-width: 390px;
margin-bottom: 28px;
font-family: var(--font-main), Arial, sans-serif;
font-size: 16px;
line-height: 1.55;
color: rgba(255,255,255,0.86);
}
.lovol-offer-buttons {
position: relative;
z-index: 2;
display: grid;
gap: 14px;
max-width: 330px;
}
.lovol-offer-buttons .offer-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 52px;
padding: 0 20px;
box-sizing: border-box;
border-radius: 9px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 15px;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
.lovol-offer-buttons .offer-btn span {
display: block;
}
.lovol-offer-buttons .offer-btn::after {
content: "›";
font-size: 30px;
line-height: 1;
font-weight: 300;
}
.lovol-offer-buttons .offer-btn-primary {
border: 1px solid #1478ff;
background: #1478ff;
color: #fff;
}
.lovol-offer-buttons .offer-btn-outline {
border: 1px solid rgba(255,255,255,0.78);
background: transparent;
color: #fff;
}
.lovol-offer-buttons .offer-btn-primary:hover,
.lovol-offer-buttons .offer-btn-outline:hover {
background: #fff;
border-color: #fff;
color: #111;
}
.lovol-offer-separator {
position: relative;
z-index: 2;
width: 330px;
max-width: 100%;
height: 1px;
margin: 28px 0 22px 0;
background: repeating-linear-gradient(
to right,
rgba(255,255,255,0.34) 0,
rgba(255,255,255,0.34) 5px,
transparent 5px,
transparent 10px
);
}
.lovol-offer-list {
position: relative;
z-index: 2;
display: grid;
gap: 13px;
margin: 0;
padding: 0;
}
.lovol-offer-list div {
position: relative;
padding-left: 34px;
font-family: var(--font-main), Arial, sans-serif;
font-size: 15px;
line-height: 1.35;
color: rgba(255,255,255,0.88);
}
.lovol-offer-list div::before {
content: "✓";
position: absolute;
left: 0;
top: -1px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #1478ff;
border-radius: 50%;
color: #1478ff;
font-size: 11px;
line-height: 1;
}
/* responsive */
@media screen and (max-width: 1100px) {
.lovol-offer-card-inner {
min-height: 460px;
}
.lovol-offer-buttons {
max-width: 100%;
}
}
@media screen and (max-width: 700px) {
.lovol-offer-card-inner {
min-height: auto;
padding: 30px 24px;
border-radius: 20px;
}
.lovol-offer-card-inner::after {
width: 130px;
height: 130px;
right: 20px;
opacity: 0.45;
}
.lovol-offer-desc,
.lovol-offer-buttons,
.lovol-offer-separator {
max-width: none;
width: 100%;
}
}
/* =========================================================
LOVOL - wyróżniony blok tekstowy title + opis
========================================================= */
.lovol-text-feature {
width: 100%;
display: grid;
grid-template-columns: 38% 1fr;
gap: clamp(36px, 7vw, 110px);
align-items: center;
padding: clamp(50px, 7vw, 100px) 0;
box-sizing: border-box;
}
.lovol-text-kicker {
margin-bottom: 10px;
font-family: var(--font-main), Arial, sans-serif;
font-size: clamp(16px, 1.2vw, 20px);
line-height: 1.3;
font-weight: 400;
color: rgba(0, 0, 0, 0.52);
}
.lovol-text-feature h2 {
margin: 0 !important;
padding: 0 !important;
max-width: 520px;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(34px, 3.5vw, 56px) !important;
line-height: 1.08 !important;
letter-spacing: -0.045em;
font-weight: 700;
color: #050505 !important;
}
.lovol-text-feature-content {
max-width: 760px;
}
.lovol-text-feature .lovol-offer-line {
margin: 0 0 18px 0;
}
.lovol-text-feature p {
margin: 0 !important;
padding: 0 !important;
font-family: var(--font-main), Arial, sans-serif;
font-size: clamp(15px, 1.05vw, 17px) !important;
line-height: 1.65 !important;
font-weight: 400;
color: rgba(0, 0, 0, 0.72) !important;
}
/* wariant prosty: tytuł, kreska, opis pod sobą */
.lovol-text-feature-simple {
display: block;
max-width: 620px;
padding: clamp(45px, 6vw, 80px) 0;
}
.lovol-text-feature-simple h2 {
max-width: 560px;
margin-bottom: 26px !important;
font-size: clamp(28px, 2.7vw, 40px) !important;
line-height: 1.12 !important;
}
.lovol-text-feature-simple .lovol-offer-line.small {
margin-bottom: 18px;
}
.lovol-text-feature-simple p {
max-width: 560px;
}
/* responsive */
@media screen and (max-width: 1100px) {
.lovol-text-feature {
grid-template-columns: 1fr;
gap: 28px;
}
.lovol-text-feature h2 {
max-width: 700px;
}
.lovol-text-feature-content {
max-width: 700px;
}
}
@media screen and (max-width: 700px) {
.lovol-text-feature {
padding: 42px 0;
}
.lovol-text-feature h2 {
font-size: 32px !important;
}
.lovol-text-feature-simple h2 {
font-size: 28px !important;
}
}
.text-plus-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 12px;
color: #050505 !important;
background: transparent;
border: 0;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none !important;
cursor: pointer;
transition: color 0.25s ease;
}
.text-plus-btn::before {
content: "";
width: 38px;
height: 38px;
flex: 0 0 38px;
border: 2px solid #050505;
border-radius: 50%;
background:
linear-gradient(#050505, #050505) center / 15px 2px no-repeat,
linear-gradient(#050505, #050505) center / 2px 15px no-repeat;
box-sizing: border-box;
transition:
background-color 0.28s ease,
border-color 0.28s ease;
}
.text-plus-btn span {
position: relative;
display: inline-flex;
align-items: center;
color: inherit !important;
line-height: 1;
transition: transform 0.28s ease;
}
.text-plus-btn span::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -7px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.28s ease;
}
.text-plus-btn:hover,
.text-plus-btn:focus,
.text-plus-btn:visited {
color: #050505 !important;
text-decoration: none !important;
}
.text-plus-btn:hover::before {
border-color: #050505;
background:
linear-gradient(#fff, #fff) center / 15px 2px no-repeat,
linear-gradient(#fff, #fff) center / 2px 15px no-repeat,
#050505;
}
.text-plus-btn:hover span {
transform: translateX(4px);
}
.text-plus-btn:hover span::after {
transform: scaleX(1);
}
/* wariant biały na ciemne tło */
.text-plus-btn.light {
color: #fff;
}
.text-plus-btn.light:hover {
color: #1478ff;
}
/* =========================================================
LOVOL - tabela techniczna / wyposażenie / cennik
auto_action = tabela
========================================================= */
.lovol-table-section {
background: #fff;
}
.lovol-table-section .ind_a {
background: transparent !important;
}
.lovol-table-content {
width: min(100%, 980px);
margin: 0 auto 34px auto;
text-align: center;
}
.lovol-table-wrap {
width: 100%;
box-sizing: border-box;
}
.lovol-table-title {
margin: 0 0 22px 0;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(30px, 3vw, 48px);
line-height: 1.08;
letter-spacing: -0.04em;
font-weight: 600;
color: #050505;
}
/* tabela desktop */
.lovol-tech-table {
width: 100%;
display: grid;
gap: 0;
border: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 18px;
overflow-x: auto;
overflow-y: hidden;
background: #fff;
}
.lovol-tech-table-row {
display: grid;
grid-template-columns: minmax(210px, 1.15fr) repeat(calc(var(--lovol-table-cols) - 1), minmax(0, 1fr));
width: 100%;
min-width: var(--lovol-table-min-width, 760px);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.lovol-tech-table-row:last-child {
border-bottom: 0;
}
.lovol-tech-table-cell {
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
padding: 15px 18px;
box-sizing: border-box;
border-right: 1px solid rgba(0, 0, 0, 0.08);
font-family: var(--font-main), Arial, sans-serif;
font-size: 15px;
line-height: 1.35;
font-weight: 400;
color: rgba(0, 0, 0, 0.76);
background: #fff;
min-width: 0;
overflow-wrap: anywhere;
word-break: normal;
text-align: center;
}
.lovol-tech-table-cell:last-child {
border-right: 0;
}
/* nagłówek tabeli */
.lovol-tech-table-head {
background: #f3f4f5;
}
.lovol-tech-table-head .lovol-tech-table-cell {
min-height: 58px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.035em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.78);
background: #f3f4f5;
border-right-color: rgba(0, 0, 0, 0.08);
}
/* pierwsza kolumna z nazwą parametru */
.lovol-tech-table-row:not(.lovol-tech-table-head) .lovol-tech-table-cell:first-child {
font-weight: 500;
color: #050505;
background: #fafafa;
}
/* hover desktop */
.lovol-tech-table-row:not(.lovol-tech-table-head):hover .lovol-tech-table-cell {
background: #f8f8f8;
}
.lovol-tech-table-row:not(.lovol-tech-table-head):hover .lovol-tech-table-cell:first-child {
background: #f3f4f5;
}
/* wspólny parametr / scalone kolumny */
.lovol-tech-table-row-common .lovol-tech-table-param {
font-weight: 500;
color: #050505;
background: #fafafa;
}
.lovol-tech-table-row-common .lovol-tech-table-common-value {
grid-column: 2 / -1;
justify-content: center;
text-align: center;
font-weight: 400;
color: rgba(0, 0, 0, 0.82);
background: #fff;
}
.lovol-tech-table-row-common:hover .lovol-tech-table-param {
background: #f3f4f5;
}
.lovol-tech-table-row-common:hover .lovol-tech-table-common-value {
background: #f8f8f8;
}
/* =========================================================
Tablet - klasyczna tabela z poziomym przewijaniem
========================================================= */
@media screen and (max-width: 1100px) {
.lovol-tech-table {
border-radius: 16px;
}
.lovol-tech-table-row {
min-width: var(--lovol-table-min-width, 760px);
}
.lovol-tech-table-cell {
padding: 14px 16px;
}
}
/* =========================================================
Mobile - karty z etykietami modeli
Wymaga data-label w PHP dla komórek wartości.
========================================================= */
@media screen and (max-width: 700px) {
.lovol-table-content {
margin-bottom: 26px;
text-align: left;
}
.lovol-table-title {
margin-bottom: 18px;
font-size: 30px;
}
.lovol-tech-table {
display: grid;
gap: 12px;
border: 0;
border-radius: 0;
background: transparent;
overflow: visible;
}
.lovol-tech-table-head {
display: none;
}
.lovol-tech-table-row {
min-width: 0;
display: grid;
grid-template-columns: 1fr;
border: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 14px;
overflow: hidden;
background: #fff;
}
.lovol-tech-table-cell {
min-height: auto;
display: grid;
grid-template-columns: 42% 1fr;
gap: 12px;
align-items: center;
padding: 12px 14px;
border-right: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
font-size: 14px;
line-height: 1.35;
background: #fff;
}
.lovol-tech-table-cell:last-child {
border-bottom: 0;
}
/* tytuł parametru na mobile */
.lovol-tech-table-row:not(.lovol-tech-table-head) .lovol-tech-table-cell:first-child {
display: block;
padding: 14px 16px;
background: #f3f4f5;
color: #050505;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.035em;
text-transform: uppercase;
}
/* wartości modeli na mobile */
.lovol-tech-table-cell:not(:first-child)::before {
content: attr(data-label);
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 12px;
line-height: 1.25;
font-weight: 500;
letter-spacing: 0.025em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.48);
}
/* hover na mobile wyłączamy, bo niepotrzebny */
.lovol-tech-table-row:not(.lovol-tech-table-head):hover .lovol-tech-table-cell,
.lovol-tech-table-row:not(.lovol-tech-table-head):hover .lovol-tech-table-cell:first-child {
background: inherit;
}
.lovol-tech-table-row:not(.lovol-tech-table-head):hover .lovol-tech-table-cell:first-child {
background: #f3f4f5;
}
/* wspólny parametr na mobile */
.lovol-tech-table-row-common .lovol-tech-table-param {
display: block;
padding: 14px 16px;
background: #f3f4f5;
color: #050505;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.035em;
text-transform: uppercase;
}
.lovol-tech-table-row-common .lovol-tech-table-common-value {
grid-column: auto;
display: block;
padding: 13px 16px;
text-align: left;
justify-content: flex-start;
background: #fff;
color: rgba(0, 0, 0, 0.82);
font-weight: 400;
}
.lovol-tech-table-row-common .lovol-tech-table-common-value::before {
content: "";
display: none;
}
.lovol-tech-table-row-common:hover .lovol-tech-table-param {
background: #f3f4f5;
}
.lovol-tech-table-row-common:hover .lovol-tech-table-common-value {
background: #fff;
}
}
/* =========================================================
LOVOL - opis w przerywniku hero / blok powiązany z bck_img
========================================================= */
.lovol-hero-text-card {
position: relative;
width: min(100%, 620px);
padding: clamp(28px, 4vw, 54px);
box-sizing: border-box;
border-radius: 26px;
background: rgba(0, 0, 0, 0.36);
border: 1px solid rgba(255, 255, 255, 0.16);
color: #fff;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: hidden;
}
.lovol-hero-text-card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 90% 20%, rgba(20, 120, 255, 0.20), transparent 34%),
linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%);
pointer-events: none;
}
.lovol-hero-text-card > * {
position: relative;
z-index: 2;
}
.lovol-hero-text-card .lovol-offer-line {
margin: 0 0 22px 0;
}
.lovol-hero-text-card-kicker {
margin-bottom: 10px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.68);
}
.lovol-hero-text-card h2 {
margin: 0 0 18px 0 !important;
padding: 0 !important;
max-width: 560px;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(34px, 4vw, 58px) !important;
line-height: 1.02 !important;
letter-spacing: -0.055em;
font-weight: 700;
color: #fff !important;
}
.lovol-hero-text-card p {
margin: 0 !important;
padding: 0 !important;
max-width: 520px;
font-family: var(--font-main), Arial, sans-serif;
font-size: clamp(15px, 1.2vw, 18px) !important;
line-height: 1.6 !important;
font-weight: 400;
color: rgba(255, 255, 255, 0.82) !important;
}
.lovol-hero-text-card-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 30px;
}
/* button hero w tej karcie może być trochę krótszy */
.lovol-hero-text-card-actions .hero-btn {
min-width: 190px;
}
/* text-plus na ciemnym tle */
.lovol-hero-text-card-actions .text-plus-btn.light,
.lovol-hero-text-card-actions .text-plus-btn.light:hover,
.lovol-hero-text-card-actions .text-plus-btn.light:visited,
.lovol-hero-text-card-actions .text-plus-btn.light:focus {
color: #fff !important;
}
.lovol-hero-text-card-actions .text-plus-btn.light::before {
border-color: #fff;
background:
linear-gradient(#fff, #fff) center / 15px 2px no-repeat,
linear-gradient(#fff, #fff) center / 2px 15px no-repeat;
}
.lovol-hero-text-card-actions .text-plus-btn.light:hover::before {
border-color: #fff;
background:
linear-gradient(#050505, #050505) center / 15px 2px no-repeat,
linear-gradient(#050505, #050505) center / 2px 15px no-repeat,
#fff;
}
/* responsive */
@media screen and (max-width: 700px) {
.lovol-model-block-hero-opis {
padding: 0 0 22px 0;
}
.lovol-hero-text-card {
width: 100%;
max-width: none;
padding: 22px 20px;
border-radius: 18px;
background: rgba(5, 7, 10, 0.68);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.lovol-hero-text-card::before {
display: none;
}
.lovol-hero-text-card .lovol-offer-line {
margin-bottom: 14px;
}
.lovol-hero-text-card-kicker {
margin-bottom: 8px;
font-size: 12px;
}
.lovol-hero-text-card h2 {
margin-bottom: 12px !important;
font-size: clamp(26px, 8vw, 34px) !important;
line-height: 1.05 !important;
}
.lovol-hero-text-card p {
font-size: 14px !important;
line-height: 1.45 !important;
}
.lovol-hero-text-card-actions {
margin-top: 20px;
gap: 10px;
}
.lovol-hero-text-card-actions .hero-btn {
height: 50px;
}
}
/* =========================================================
LOVOL - badge ponad X lat na polskim rynku
shortcode: [year]
========================================================= */
.lovol-year-badge {
width: 100%;
display: grid;
grid-template-columns: 150px minmax(0, 1fr) minmax(260px, 360px);
gap: clamp(24px, 4vw, 54px);
align-items: center;
padding: clamp(34px, 5vw, 64px);
box-sizing: border-box;
border-radius: 26px;
background: #f3f4f5;
overflow: hidden;
}
.lovol-year-badge-icon {
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #1478ff;
border-radius: 50%;
box-sizing: border-box;
}
.lovol-year-badge-icon span {
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: 48px;
line-height: 1;
font-weight: 700;
letter-spacing: -0.05em;
color: #1478ff;
}
.lovol-year-badge-content {
max-width: 760px;
}
.lovol-year-badge .lovol-offer-line {
margin: 0 0 20px 0;
}
.lovol-year-badge-kicker {
margin-bottom: 8px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.52);
}
.lovol-year-badge-title {
margin-bottom: 14px;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(34px, 4vw, 58px);
line-height: 1.04;
letter-spacing: -0.055em;
font-weight: 700;
color: #050505;
}
.lovol-year-badge-desc {
max-width: 620px;
font-family: var(--font-main), Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: rgba(0, 0, 0, 0.68);
}
.lovol-year-badge-actions {
margin-top: 22px;
}
.lovol-year-badge-photo {
position: relative;
width: 100%;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
padding: 28px 38px;
box-sizing: border-box;
overflow: hidden;
border-radius: 22px;
background:
radial-gradient(circle at 50% 45%, rgba(20, 120, 255, 0.13), transparent 46%),
linear-gradient(135deg, #ffffff 0%, #f2f5f9 100%);
border: 1px solid rgba(20, 120, 255, 0.16);
}
.lovol-year-badge-photo::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle, rgba(20, 120, 255, 0.18) 1.4px, transparent 1.6px);
background-size: 22px 22px;
opacity: 0.55;
mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
pointer-events: none;
}
.lovol-year-badge-photo::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: 34px;
height: 18px;
background: rgba(20, 120, 255, 0.32);
filter: blur(18px);
pointer-events: none;
}
.lovol-year-badge-photo img {
position: relative;
z-index: 2;
display: block;
width: 100%;
max-width: 94%;
height: auto;
object-fit: contain;
object-position: center;
filter:
drop-shadow(0 0 10px rgba(20, 120, 255, 0.18))
drop-shadow(0 12px 18px rgba(0, 0, 0, 0.14));
}
.lovol-year-badge-photo {
flex-direction: column;
gap: 14px;
}
.lovol-year-badge-photo-caption {
position: relative;
z-index: 2;
max-width: 420px;
font-family: var(--font-heading), var(--font-main), Arial, sans-serif;
font-size: 14px;
line-height: 1.35;
font-weight: 500;
letter-spacing: 0.055em;
text-transform: uppercase;
text-align: center;
color: rgba(0, 0, 0, 0.58);
}
/* tablet */
@media screen and (max-width: 1100px) {
.lovol-year-badge {
grid-template-columns: 120px 1fr;
}
.lovol-year-badge-icon {
width: 120px;
height: 120px;
}
.lovol-year-badge-icon span {
font-size: 40px;
}
.lovol-year-badge-photo {
grid-column: 1 / -1;
min-height: 300px;
}
}
/* mobile */
@media screen and (max-width: 700px) {
.lovol-year-badge {
grid-template-columns: 1fr;
gap: 22px;
padding: 30px 22px;
border-radius: 20px;
}
.lovol-year-badge-icon {
width: 118px;
height: 118px;
}
.lovol-year-badge-icon span {
font-size: 38px;
}
.lovol-year-badge-title {
font-size: 34px;
}
.lovol-year-badge-desc {
font-size: 15px;
line-height: 1.5;
}
.lovol-year-badge-photo {
min-height: 230px;
border-radius: 16px;
}
.lovol-year-badge-photo img {
border-radius: 16px;
}
}
/* =========================================================
LOVOL - uniwersalny tytuł sekcji
np. nad karuzelą, tabelą, blokiem koloru
========================================================= */
.lovol-section-title {
width: min(100%, 680px);
margin: 0 auto 28px auto;
padding-top: 42px;
box-sizing: border-box;
}
.lovol-section-title.center {
text-align: center;
}
.lovol-section-title.center .lovol-offer-line {
margin: 0 auto 20px auto;
}
.lovol-section-title h2 {
margin: 0 !important;
padding: 0 !important;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(34px, 4vw, 56px) !important;
line-height: 1.06 !important;
letter-spacing: -0.045em;
font-weight: normal;
color: #050505 !important;
}
.lovol-section-title p {
margin: 18px auto 0 auto !important;
padding: 0 !important;
max-width: 620px;
font-family: var(--font-main), Arial, sans-serif;
font-size: clamp(15px, 1.1vw, 17px) !important;
line-height: 1.62 !important;
font-weight: 400;
color: rgba(0, 0, 0, 0.68) !important;
}
/* wariant jaśniejszy na ciemne tło / baner */
.lovol-section-title.light h2 {
color: #fff !important;
}
.lovol-section-title.light p {
color: rgba(255, 255, 255, 0.78) !important;
}
/* mobile */
@media screen and (max-width: 700px) {
.lovol-section-title {
width: min(100% - 28px, 680px);
margin-bottom: 22px;
}
.lovol-section-title.center .lovol-offer-line {
margin-bottom: 16px;
}
.lovol-section-title h2 {
font-size: 32px !important;
line-height: 1.08 !important;
}
.lovol-section-title p {
margin-top: 14px !important;
font-size: 15px !important;
line-height: 1.5 !important;
}
}
/* =========================================================
LOVOL - cechy w opisie jako lekkie linie
========================================================= */
.lovol-feature-lines {
display: grid;
grid-template-columns: 1fr;
gap: 0;
width: 100%;
max-width: 680px;
margin: 28px 0 0 0;
border-top: 1px solid rgba(0, 0, 0, 0.10);
}
.lovol-feature-lines div {
position: relative;
display: grid;
grid-template-columns: 190px 1fr;
gap: 22px;
align-items: center;
padding: 15px 0 15px 18px;
box-sizing: border-box;
border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.lovol-feature-lines div::before {
content: "";
position: absolute;
left: 0;
top: 18px;
bottom: 18px;
width: 3px;
border-radius: 999px;
background: #1478ff;
}
.lovol-feature-lines strong {
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 14px;
line-height: 1.25;
font-weight: 500;
letter-spacing: 0.035em;
text-transform: uppercase;
color: #050505;
}
.lovol-feature-lines span {
font-family: var(--font-main), Arial, sans-serif;
font-size: 15px;
line-height: 1.45;
color: rgba(0, 0, 0, 0.68);
}
/* wariant na ciemne tło */
.lovol-feature-lines.light {
border-top-color: rgba(255, 255, 255, 0.18);
}
.lovol-feature-lines.light div {
border-bottom-color: rgba(255, 255, 255, 0.18);
}
.lovol-feature-lines.light strong {
color: #fff;
}
.lovol-feature-lines.light span {
color: rgba(255, 255, 255, 0.76);
}
/* mobile */
@media screen and (max-width: 700px) {
.lovol-feature-lines {
margin-top: 22px;
}
.lovol-feature-lines div {
grid-template-columns: 1fr;
gap: 4px;
padding: 14px 0 14px 16px;
}
.lovol-feature-lines div::before {
top: 16px;
bottom: 16px;
}
.lovol-feature-lines strong {
font-size: 13px;
}
.lovol-feature-lines span {
font-size: 14px;
}
}
/* =========================================================
LOVOL - nakładka specyfikacji na przerywniku hero
Lekka czarna tafla, biały tekst, bez blur
========================================================= */
.lovol-hero-spec-overlay {
position: relative;
width: min(100%, 720px);
display: grid;
gap: 0;
padding: 22px 28px;
box-sizing: border-box;
border-radius: 22px;
background:
linear-gradient(
90deg,
rgba(0, 0, 0, 0.58) 0%,
rgba(0, 0, 0, 0.42) 62%,
rgba(0, 0, 0, 0.20) 100%
);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.18);
overflow: hidden;
}
.lovol-hero-spec-overlay::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 0% 50%, rgba(20, 120, 255, 0.16), transparent 42%),
linear-gradient(90deg, rgba(255,255,255,0.05), transparent 70%);
pointer-events: none;
}
.lovol-hero-spec-row {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 190px 1fr;
gap: 26px;
align-items: center;
min-height: 48px;
padding: 12px 0 12px 18px;
box-sizing: border-box;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.lovol-hero-spec-row:last-child {
border-bottom: 0;
}
.lovol-hero-spec-row::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 3px;
height: 22px;
border-radius: 999px;
background: #1478ff;
transform: translateY(-50%);
}
.lovol-hero-spec-row strong {
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
line-height: 1.25;
font-weight: 500;
letter-spacing: 0.055em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.96) !important;
}
.lovol-hero-spec-row span {
font-family: var(--font-main), Arial, sans-serif;
font-size: 16px;
line-height: 1.42;
font-weight: 400;
color: rgba(255, 255, 255, 0.88) !important;
}
/* mobile */
@media screen and (max-width: 700px) {
.lovol-hero-spec-overlay {
width: 100%;
padding: 18px 18px;
border-radius: 18px;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.60) 0%,
rgba(0, 0, 0, 0.40) 100%
);
}
.lovol-hero-spec-row {
grid-template-columns: 1fr;
gap: 4px;
min-height: auto;
padding: 11px 0 11px 16px;
}
.lovol-hero-spec-row::before {
height: 28px;
}
.lovol-hero-spec-row strong {
font-size: 12px;
}
.lovol-hero-spec-row span {
font-size: 14px;
line-height: 1.38;
}
}
/* =========================================================
LOVOL - delikatne cechy pod karuzelą
========================================================= */
.lovol-feature-cards {
width: min(100% - 48px, 1100px);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 0;
row-gap: 38px;
margin: clamp(32px, 4vw, 52px) auto 0 auto;
padding-top: 28px;
border-top: 1px solid rgba(0, 0, 0, 0.10);
box-sizing: border-box;
}
.lovol-feature-card {
position: relative;
min-height: 0;
padding: 4px 28px;
box-sizing: border-box;
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.lovol-feature-card:not(:last-child) {
border-right: 1px solid rgba(0, 0, 0, 0.10);
}
/* przy 4 kolumnach usuń kreskę po 4. elemencie, żeby drugi rząd nie zaczynał od błędnego podziału */
.lovol-feature-card:nth-child(4n) {
border-right: 0;
}
.lovol-feature-card::after {
display: none;
}
.lovol-feature-card-number {
margin: 0 0 20px 0;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 12px;
line-height: 1;
font-weight: 500;
letter-spacing: 0.08em;
color: #1478ff;
}
.lovol-feature-card h3 {
margin: 0 0 12px 0 !important;
padding: 0 !important;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(22px, 1.55vw, 28px) !important;
line-height: 1.08 !important;
letter-spacing: -0.035em;
font-weight: normal;
color: #050505 !important;
}
.lovol-feature-card p {
margin: 0 !important;
padding: 0 !important;
font-family: var(--font-main), Arial, sans-serif;
font-size: 15px !important;
line-height: 1.55 !important;
color: rgba(0, 0, 0, 0.64) !important;
}
.lovol-feature-card:hover {
transform: none;
background: transparent;
border-color: rgba(0, 0, 0, 0.10);
}
/* wariant standardowego wyposażenia */
.lovol-feature-cards.standard {
width: min(100% - 48px, 1200px);
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: 42px;
}
.lovol-feature-cards.standard .lovol-feature-card {
padding-top: 4px;
padding-bottom: 4px;
}
.lovol-feature-cards.standard .lovol-feature-card h3 {
font-size: clamp(20px, 1.35vw, 25px) !important;
}
.lovol-feature-cards.standard .lovol-feature-card p {
font-size: 14px !important;
line-height: 1.5 !important;
}
/* tablet */
@media screen and (max-width: 1100px) {
.lovol-feature-cards {
width: min(100% - 40px, 900px);
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 34px;
}
.lovol-feature-card {
padding: 4px 24px;
}
.lovol-feature-card:nth-child(4n) {
border-right: 1px solid rgba(0, 0, 0, 0.10);
}
.lovol-feature-card:nth-child(2n) {
border-right: 0;
}
.lovol-feature-cards.standard {
width: min(100% - 40px, 900px);
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 34px;
}
}
/* mobile */
@media screen and (max-width: 700px) {
.lovol-feature-cards,
.lovol-feature-cards.standard {
width: min(100% - 28px, 680px);
grid-template-columns: 1fr;
row-gap: 0;
column-gap: 0;
margin-top: 30px;
padding-top: 0;
border-top: 0;
}
.lovol-feature-card,
.lovol-feature-cards.standard .lovol-feature-card {
padding: 20px 0;
border-right: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.lovol-feature-card:first-child {
padding-top: 0;
}
.lovol-feature-card:last-child {
border-bottom: 0;
}
.lovol-feature-card-number {
margin-bottom: 12px;
}
.lovol-feature-card h3,
.lovol-feature-cards.standard .lovol-feature-card h3 {
font-size: 26px !important;
}
.lovol-feature-card p,
.lovol-feature-cards.standard .lovol-feature-card p {
font-size: 14px !important;
line-height: 1.5 !important;
}
}
/* =========================================================
LOVOL - statusy wyposażenia w tabeli
Aktywne tylko dla tabela{status:1; ...}
========================================================= */
.lovol-table-status {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex: 0 0 18px;
border-radius: 50%;
box-sizing: border-box;
}
.lovol-table-status-standard {
background: #1478ff;
border: 2px solid #1478ff;
}
.lovol-table-status-option {
background: transparent;
border: 2px solid #1478ff;
}
.lovol-table-status-none {
width: 22px;
height: 18px;
flex-basis: 22px;
border-radius: 0;
}
.lovol-table-status-none::before {
content: "";
width: 18px;
height: 2px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.42);
}
.lovol-table-legend {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 18px 26px;
margin: 18px auto 0 auto;
padding: 0;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
line-height: 1.2;
font-weight: 400;
color: rgba(0, 0, 0, 0.62);
}
.lovol-table-legend div {
display: inline-flex;
align-items: center;
gap: 8px;
}
@media screen and (max-width: 700px) {
.lovol-table-status {
width: 16px;
height: 16px;
flex-basis: 16px;
}
.lovol-table-status-none {
width: 20px;
height: 16px;
flex-basis: 20px;
}
.lovol-table-status-none::before {
width: 16px;
}
.lovol-table-legend {
justify-content: flex-start;
gap: 14px 20px;
margin-top: 16px;
font-size: 12px;
}
}
/* =========================================================
LOVOL - formularz CTA modelu / salonowy układ
model_contact.php
========================================================= */
.lovol-model-contact-form {
width: 100%;
box-sizing: border-box;
font-family: var(--font-main), Arial, sans-serif;
color: #111;
}
.lovol-form-layout {
width: 100%;
display: grid;
grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
gap: clamp(28px, 4vw, 58px);
box-sizing: border-box;
}
/* =========================================================
Lewy panel - mocniejszy, bardziej wyrazisty
========================================================= */
.lovol-form-aside {
position: relative;
padding: clamp(28px, 4vw, 46px);
box-sizing: border-box;
border-radius: 22px;
background:
radial-gradient(circle at 100% 0%, rgba(20, 120, 255, 0.34), transparent 34%),
radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.10), transparent 38%),
linear-gradient(135deg, #11151b 0%, #050607 100%);
border: 1px solid rgba(255, 255, 255, 0.10);
color: #fff;
overflow: hidden;
}
.lovol-form-aside::after {
content: "";
position: absolute;
right: -90px;
bottom: -90px;
width: 240px;
height: 240px;
border-radius: 50%;
border: 1px solid rgba(20, 120, 255, 0.28);
pointer-events: none;
}
.lovol-form-aside > * {
position: relative;
z-index: 2;
}
.lovol-form-aside .lovol-offer-line {
margin: 0 0 22px 0;
}
.lovol-form-kicker {
margin-bottom: 10px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.62);
}
.lovol-form-aside h3 {
margin: 0 0 18px 0 !important;
padding: 0 !important;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(34px, 3.6vw, 56px) !important;
line-height: 1.03 !important;
letter-spacing: -0.055em;
font-weight: normal;
color: #fff !important;
}
.lovol-form-aside p {
margin: 0 !important;
padding: 0 !important;
font-family: var(--font-main), Arial, sans-serif;
font-size: 15px !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.72) !important;
}
/* model box */
.lovol-form-model-box {
margin-top: 28px;
padding: 18px 20px;
box-sizing: border-box;
border-radius: 16px;
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.16);
}
.lovol-form-model-box span {
display: block;
margin-bottom: 7px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 12px;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.50);
}
.lovol-form-model-box strong {
display: block;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(24px, 2vw, 34px);
line-height: 1.05;
letter-spacing: -0.035em;
font-weight: normal;
color: #fff;
}
/* benefity */
.lovol-form-benefits {
display: grid;
gap: 10px;
margin-top: 24px;
}
.lovol-form-benefits div {
position: relative;
padding-left: 20px;
font-family: var(--font-main), Arial, sans-serif;
font-size: 14px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.72);
}
.lovol-form-benefits div::before {
content: "";
position: absolute;
left: 0;
top: 0.68em;
width: 7px;
height: 7px;
border-radius: 50%;
background: #1478ff;
transform: translateY(-50%);
}
/* =========================================================
Prawa część formularza
========================================================= */
.lovol-form-main {
padding: clamp(24px, 3vw, 38px);
box-sizing: border-box;
border-radius: 22px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.lovol-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.lovol-form-field {
display: grid;
gap: 8px;
}
.lovol-form-field.full {
grid-column: 1 / -1;
}
.lovol-form-field label {
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 12px;
line-height: 1.2;
letter-spacing: 0.055em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.58);
}
.lovol-form-field input,
.lovol-form-field select,
.lovol-form-field textarea {
width: 100% !important;
min-height: 52px;
padding: 0 16px !important;
box-sizing: border-box;
border-radius: 12px !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
background: #f6f7f8 !important;
color: #111 !important;
font-family: var(--font-main), Arial, sans-serif !important;
font-size: 15px !important;
line-height: 1.35 !important;
box-shadow: none !important;
outline: none !important;
transition:
background-color 0.25s ease,
border-color 0.25s ease !important;
}
.lovol-form-field textarea {
min-height: 128px;
padding-top: 15px !important;
resize: vertical;
}
.lovol-form-field input:focus,
.lovol-form-field select:focus,
.lovol-form-field textarea:focus {
border-color: rgba(20, 120, 255, 0.55) !important;
background: #fff !important;
}
.lovol-form-field input[readonly] {
background: #f1f2f3 !important;
color: #111 !important;
cursor: default;
}
/* =========================================================
Zgoda
========================================================= */
.lovol-form-consent {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 10px;
align-items: flex-start;
margin-top: 18px;
font-family: var(--font-main), Arial, sans-serif;
font-size: 12px;
line-height: 1.45;
color: rgba(0, 0, 0, 0.60);
}
.lovol-form-consent input {
margin-top: 2px;
}
.lovol-form-consent a {
color: #111;
text-decoration: underline;
}
.lovol-form-consent p {
margin: 8px 0 0 0 !important;
padding: 0 !important;
font-size: 12px !important;
line-height: 1.35 !important;
color: rgba(0, 0, 0, 0.50) !important;
}
/* =========================================================
Button wysyłki - bez podskoku, jak nasze buttony
========================================================= */
.lovol-form-submit {
margin-top: 24px;
}
.lovol-form-submit-btn,
.lovol-form-submit-btn.click,
.lovol-form-submit-btn.click.black {
position: relative !important;
top: auto !important;
width: 100% !important;
min-height: 56px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 28px !important;
box-sizing: border-box !important;
border-radius: 9px !important;
border: 2px solid #111 !important;
background: #111 !important;
color: #fff !important;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif !important;
font-size: 13px !important;
line-height: 1 !important;
font-weight: 500 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
text-align: center !important;
text-decoration: none !important;
cursor: pointer !important;
box-shadow: none !important;
transform: none !important;
transition:
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease !important;
}
.lovol-form-submit-btn:hover,
.lovol-form-submit-btn.click:hover,
.lovol-form-submit-btn.click.black:hover {
top: auto !important;
margin-top: 0 !important;
background: transparent !important;
color: #111 !important;
border-color: #111 !important;
box-shadow: none !important;
transform: none !important;
}
/* =========================================================
Modal / mniejszy obiekt
========================================================= */
.modal .lovol-form-layout,
#modal-content .lovol-form-layout {
grid-template-columns: 1fr;
}
.modal .lovol-form-aside,
#modal-content .lovol-form-aside {
padding: 26px;
border-radius: 20px;
}
.modal .lovol-form-aside h3,
#modal-content .lovol-form-aside h3 {
font-size: 34px !important;
}
/* =========================================================
Responsive
========================================================= */
@media screen and (max-width: 1100px) {
.lovol-form-layout {
grid-template-columns: 1fr;
}
.lovol-form-main,
.lovol-form-aside {
border-radius: 20px;
}
.lovol-form-grid {
grid-template-columns: 1fr;
}
.lovol-form-aside h3 {
font-size: 34px !important;
}
}
@media screen and (max-width: 500px) {
.lovol-form-main,
.lovol-form-aside {
padding: 22px 18px;
}
.lovol-form-field input,
.lovol-form-field select,
.lovol-form-field textarea {
min-height: 50px;
font-size: 14px !important;
}
.lovol-form-submit-btn,
.lovol-form-submit-btn.click,
.lovol-form-submit-btn.click.black {
min-height: 52px !important;
border-radius: 9px !important;
}
}
/* =========================================================
LOVOL - komunikaty formularza / spokojniejszy styl
========================================================= */
.lovol-form-message {
width: 100%;
box-sizing: border-box;
}
.lovol-form-message:empty {
display: none;
}
.lovol-form-message .alert_mail,
.lovol-model-contact-form .alert_mail {
display: block;
width: 100%;
margin: 14px 0 16px 0;
padding: 14px 16px;
box-sizing: border-box;
border-radius: 10px;
background: rgba(20, 120, 255, 0.075);
border: 1px solid rgba(20, 120, 255, 0.20);
font-family: var(--font-main), Arial, sans-serif;
font-size: 14px;
line-height: 1.45;
color: rgba(0, 0, 0, 0.78);
text-align: left;
animation: lovolFormMessageIn 0.24s ease both;
}
.lovol-form-message .alert_mail::before,
.lovol-model-contact-form .alert_mail::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 9px;
border-radius: 50%;
background: #1478ff;
vertical-align: 1px;
}
/* błędy nie są agresywnie czerwone */
.lovol-form-message .alert_mail_error,
.lovol-model-contact-form .alert_mail_error {
background: rgba(20, 120, 255, 0.075);
border-color: rgba(20, 120, 255, 0.22);
color: rgba(0, 0, 0, 0.80);
}
.lovol-form-message .alert_mail_error::before,
.lovol-model-contact-form .alert_mail_error::before {
background: #1478ff;
}
/* sukces może być lekko mocniejszy */
.lovol-form-message .alert_mail_success,
.lovol-model-contact-form .alert_mail_success {
background: rgba(20, 120, 255, 0.10);
border-color: rgba(20, 120, 255, 0.28);
}
@keyframes lovolFormMessageIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
LOVOL - oznaczenie pól wymaganych / tylko obramowanie
========================================================= */
.lovol-model-contact-form .lovol-form-field input.lovol-field-error,
.lovol-model-contact-form .lovol-form-field select.lovol-field-error,
.lovol-model-contact-form .lovol-form-field textarea.lovol-field-error {
border-color: rgba(20, 120, 255, 0.9) !important;
background: #fff !important;
box-shadow: none !important;
}
.lovol-model-contact-form .lovol-form-field input.lovol-field-error:focus,
.lovol-model-contact-form .lovol-form-field select.lovol-field-error:focus,
.lovol-model-contact-form .lovol-form-field textarea.lovol-field-error:focus {
border-color: rgba(20, 120, 255, 1) !important;
background: #fff !important;
box-shadow: none !important;
}
.lovol-model-contact-form .lovol-form-consent.lovol-field-error {
padding: 12px !important;
margin-left: -12px !important;
margin-right: -12px !important;
border-radius: 12px !important;
background: transparent !important;
border: 1px solid rgba(20, 120, 255, 0.24) !important;
}
/* =========================================================
CMS - uniwersalne buttony
wersja niebieska / czarna
========================================================= */
.cms-btn-blue,
.cms-btn-black {
min-height: 48px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 24px;
box-sizing: border-box;
border-radius: 9px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
line-height: 1;
font-weight: 500;
letter-spacing: 0.045em;
text-transform: uppercase;
text-decoration: none !important;
cursor: pointer;
box-shadow: none !important;
transform: none !important;
transition:
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
.cms-btn-blue:hover,
.cms-btn-black:hover {
box-shadow: none !important;
transform: none !important;
}
.cms-btn-blue span,
.cms-btn-black span {
color: inherit !important;
}
.cms-btn-blue z,
.cms-btn-black z {
color: inherit !important;
}
/* niebieski */
.cms-btn-blue {
background: #1478ff !important;
border: 2px solid #1478ff !important;
color: #fff !important;
}
.cms-btn-blue:hover {
background: #050505 !important;
border-color: #050505 !important;
color: #fff !important;
}
/* czarny */
.cms-btn-black {
background: #050505 !important;
border: 2px solid #050505 !important;
color: #fff !important;
}
.cms-btn-black:hover {
background: transparent !important;
border-color: #050505 !important;
color: #050505 !important;
}
/* gdy button jest divem z parsera */
div.cms-btn-blue,
div.cms-btn-black {
width: fit-content;
}
/* gdy button jest linkiem */
a.cms-btn-blue,
a.cms-btn-black {
width: fit-content;
}
/* zabezpieczenie przed stylami .ind_a a:hover */
.ind_a a.cms-btn-blue:hover,
.ind_b a.cms-btn-blue:hover,
.ind_a a.cms-btn-black:hover,
.ind_b a.cms-btn-black:hover {
text-decoration: none !important;
}
/* mobile */
@media screen and (max-width: 700px) {
.cms-btn-blue,
.cms-btn-black {
min-height: 46px;
padding: 0 20px;
font-size: 12px;
letter-spacing: 0.04em;
}
}
/* =========================================================
CMS - newsletter dealer / nowoczesny element
========================================================= */
.cms-newsletter.dealer {
position: relative;
width: min(100% - 48px, 1120px);
margin: clamp(34px, 5vw, 70px) auto;
padding: clamp(24px, 3vw, 34px);
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.95fr);
gap: clamp(22px, 3vw, 38px);
align-items: stretch;
border-radius: 24px;
background:
radial-gradient(circle at 0% 0%, rgba(20, 120, 255, 0.24), transparent 34%),
radial-gradient(circle at 100% 100%, rgba(20, 120, 255, 0.12), transparent 30%),
linear-gradient(135deg, #080a0d 0%, #121820 100%);
overflow: hidden;
}
.cms-newsletter.dealer::after {
content: "";
position: absolute;
right: -120px;
top: -120px;
width: 320px;
height: 320px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.10);
pointer-events: none;
}
.cms-newsletter.dealer::before {
content: "";
position: absolute;
left: 34px;
bottom: 34px;
width: 130px;
height: 130px;
background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
background-size: 13px 13px;
opacity: 0.35;
pointer-events: none;
}
.cms-newsletter.dealer > * {
position: relative;
z-index: 2;
}
/* lewa część */
.cms-newsletter-visual {
padding: clamp(12px, 2vw, 18px);
box-sizing: border-box;
color: #fff;
}
.cms-newsletter-kicker {
margin: 0 0 16px 0;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 12px;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.58);
}
.cms-newsletter-visual h3 {
max-width: 620px;
margin: 0 0 18px 0 !important;
padding: 0 !important;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(38px, 5vw, 68px) !important;
line-height: 0.98 !important;
letter-spacing: -0.065em;
font-weight: normal;
color: #fff !important;
}
.cms-newsletter-visual p {
max-width: 560px;
margin: 0 !important;
padding: 0 !important;
font-family: var(--font-main), Arial, sans-serif;
font-size: 16px !important;
line-height: 1.62 !important;
color: rgba(255, 255, 255, 0.70) !important;
}
.cms-newsletter-points {
display: grid;
gap: 10px;
margin-top: 28px;
}
.cms-newsletter-points div {
position: relative;
padding-left: 22px;
font-family: var(--font-main), Arial, sans-serif;
font-size: 14px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.74);
}
.cms-newsletter-points div::before {
content: "";
position: absolute;
left: 0;
top: 0.7em;
width: 8px;
height: 8px;
border-radius: 50%;
background: #1478ff;
transform: translateY(-50%);
}
/* prawa karta */
.cms-newsletter-panel {
align-self: center;
padding: clamp(22px, 3vw, 34px);
box-sizing: border-box;
border-radius: 20px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}
.cms-newsletter-panel-title {
margin: 0 0 16px 0;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(26px, 2.4vw, 36px);
line-height: 1.05;
letter-spacing: -0.045em;
font-weight: normal;
color: #050505;
}
.cms-newsletter-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.cms-newsletter-mail {
width: 100%;
min-height: 50px;
padding: 0 16px;
box-sizing: border-box;
border-radius: 9px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: #f6f7f8;
color: #111;
font-family: var(--font-main), Arial, sans-serif;
font-size: 15px;
line-height: 1;
outline: none;
box-shadow: none;
transition:
background-color 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.cms-newsletter-mail:focus {
background: #fff;
border-color: rgba(20, 120, 255, 0.72);
box-shadow: 0 0 0 3px rgba(20, 120, 255, 0.08);
}
.cms-newsletter-btn {
min-height: 50px !important;
white-space: nowrap;
}
.cms-newsletter-result {
margin-top: 14px;
font-family: var(--font-main), Arial, sans-serif;
font-size: 14px;
line-height: 1.45;
color: rgba(0, 0, 0, 0.72);
}
.cms-newsletter-result:empty {
display: none;
}
.cms-newsletter-result .alert_mail,
.cms-newsletter-result {
border-radius: 10px;
}
.cms-newsletter-result .alert_mail {
margin: 0;
padding: 12px 14px;
background: rgba(20, 120, 255, 0.075);
border: 1px solid rgba(20, 120, 255, 0.20);
color: rgba(0, 0, 0, 0.78);
}
.cms-newsletter-note {
margin-top: 14px;
font-family: var(--font-main), Arial, sans-serif;
font-size: 12px;
line-height: 1.45;
color: rgba(0, 0, 0, 0.50);
}
/* modal */
#modal-content .cms-newsletter.dealer {
width: 100%;
margin: 0;
}
/* tablet */
@media screen and (max-width: 1100px) {
.cms-newsletter.dealer {
grid-template-columns: 1fr;
}
.cms-newsletter-panel {
max-width: 620px;
}
}
/* mobile */
@media screen and (max-width: 700px) {
.cms-newsletter.dealer {
width: min(100% - 28px, 680px);
padding: 20px;
border-radius: 20px;
}
.cms-newsletter-visual {
padding: 4px 2px 0 2px;
}
.cms-newsletter-visual h3 {
font-size: 38px !important;
}
.cms-newsletter-visual p {
font-size: 14px !important;
line-height: 1.55 !important;
}
.cms-newsletter-points {
margin-top: 22px;
}
.cms-newsletter-panel {
padding: 20px;
border-radius: 16px;
}
.cms-newsletter-form {
grid-template-columns: 1fr;
}
.cms-newsletter-btn {
width: 100% !important;
}
}
/* zgoda newslettera */
.cms-newsletter-consent {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 10px;
align-items: flex-start;
margin-top: 14px;
font-family: var(--font-main), Arial, sans-serif;
font-size: 12px;
line-height: 1.45;
color: rgba(0, 0, 0, 0.56);
}
.cms-newsletter-consent input {
margin-top: 2px;
}
.cms-newsletter-consent a {
color: #111;
text-decoration: underline;
}
/* =========================================================
CMS - szeroki blok zastrzeżeń / mały druk
========================================================= */
.cms-legal-note-wide {
width: min(100% - 64px, 1600px);
margin: clamp(42px, 5vw, 78px) auto 50px auto;
padding: 28px 0 0 0;
box-sizing: border-box;
border-top: 1px solid rgba(0, 0, 0, 0.10);
color: rgba(0, 0, 0, 0.58);
}
.cms-legal-note-wide p {
margin: 0 0 10px 0 !important;
padding: 0 !important;
font-family: var(--font-main), Arial, sans-serif;
font-size: 12px !important;
line-height: 1.62 !important;
font-weight: 400;
color: rgba(0, 0, 0, 0.58) !important;
}
.cms-legal-note-wide p:last-child {
margin-bottom: 0 !important;
}
.cms-legal-note-wide-title {
margin: 18px 0 10px 0 !important;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif !important;
font-size: 11px !important;
line-height: 1.3 !important;
font-weight: 600 !important;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.72) !important;
}
/* mobile */
@media screen and (max-width: 700px) {
.cms-legal-note-wide {
width: min(100% - 28px, 680px);
margin-top: 36px;
padding-top: 22px;
}
.cms-legal-note-wide p {
font-size: 11.5px !important;
line-height: 1.55 !important;
}
}
/* =========================================================
CMS - modal PDF viewer
========================================================= */
.cms-pdf-modal {
width: 100%;
box-sizing: border-box;
font-family: var(--font-main), Arial, sans-serif;
color: #111;
}
.cms-pdf-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.cms-pdf-modal-kicker {
margin-bottom: 8px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 11px;
line-height: 1.2;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.48);
}
.cms-pdf-modal-head h3 {
margin: 0 !important;
padding: 0 !important;
font-family: var(--font-heading), var(--font-strong), Arial, sans-serif;
font-size: clamp(28px, 3vw, 44px) !important;
line-height: 1.05 !important;
letter-spacing: -0.045em;
font-weight: normal;
color: #050505 !important;
}
.cms-pdf-download {
flex: 0 0 auto;
}
.cms-pdf-toolbar {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 14px;
padding: 12px;
box-sizing: border-box;
border-radius: 14px;
background: #f5f6f7;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.cms-pdf-nav {
min-height: 38px;
padding: 0 16px;
box-sizing: border-box;
border-radius: 9px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: #fff;
color: #111;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 12px;
line-height: 1;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition:
background-color 0.22s ease,
color 0.22s ease,
border-color 0.22s ease;
}
.cms-pdf-nav:hover {
background: #111;
border-color: #111;
color: #fff;
}
.cms-pdf-nav:disabled {
opacity: 0.35;
cursor: default;
pointer-events: none;
}
.cms-pdf-counter {
min-width: 120px;
font-family: var(--font-main), Arial, sans-serif;
font-size: 13px;
line-height: 1.3;
text-align: center;
color: rgba(0, 0, 0, 0.62);
}
.cms-pdf-stage {
width: 100%;
max-height: min(72vh, 860px);
padding: 18px;
box-sizing: border-box;
overflow: auto;
border-radius: 16px;
background:
radial-gradient(circle at 100% 0%, rgba(20, 120, 255, 0.06), transparent 32%),
#eef0f2;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.cms-pdf-stage canvas {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
background: #fff;
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18);
}
.cms-pdf-fallback,
.cms-pdf-alert {
display: none;
margin-top: 12px;
font-family: var(--font-main), Arial, sans-serif;
font-size: 13px;
line-height: 1.45;
color: rgba(0, 0, 0, 0.64);
}
.cms-pdf-fallback.visible {
display: block;
}
.cms-pdf-fallback a {
color: #1478ff;
text-decoration: underline;
}
.cms-pdf-alert {
display: block;
padding: 16px 18px;
box-sizing: border-box;
border-radius: 12px;
background: rgba(20, 120, 255, 0.075);
border: 1px solid rgba(20, 120, 255, 0.20);
color: rgba(0, 0, 0, 0.78);
}
/* modal */
#modal-content .cms-pdf-modal {
width: 100%;
}
/* mobile */
@media screen and (max-width: 700px) {
.cms-pdf-modal-head {
display: grid;
gap: 14px;
}
.cms-pdf-download {
width: 100% !important;
}
.cms-pdf-toolbar {
gap: 8px;
padding: 10px;
}
.cms-pdf-nav {
padding: 0 10px;
font-size: 11px;
}
.cms-pdf-counter {
min-width: 90px;
font-size: 12px;
}
.cms-pdf-stage {
max-height: 70vh;
padding: 10px;
border-radius: 12px;
}
}
/* =========================================================
LOVOL content.php - style kart folderow, ofert i aktualnosci
Dopinane na koncu custom.css
========================================================= */
/* wspolne siatki */
.lovol-news-layout {
width: min(100% - 64px, 1440px);
margin: 30px auto;
box-sizing: border-box;
clear: both;
}
.parent-container + .parent-container,
.blok_kafel2 + .blok_kafel2,
.blok_kafel + .blok_kafel {
margin-top: 26px;
}
/* =========================================================
KAFLE FOLDEROW I OFERT
========================================================= */
.blok_kafel2 .ind_kafel,
.parent-container .ind_kafel,
.offer-blok {
position: relative;
float: none !important;
width: 100% !important;
min-height: 390px;
margin: 0 !important;
padding: 0;
border-radius: 28px;
overflow: hidden;
background: #070707;
cursor: pointer;
isolation: isolate;
box-sizing: border-box;
box-shadow: 0 18px 45px rgba(0,0,0,.12);
transition: transform .28s ease, box-shadow .28s ease;
}
.blok_kafel2 .ind_kafel:hover,
.parent-container .ind_kafel:hover,
.offer-blok:hover {
transform: translateY(-6px);
box-shadow: 0 26px 62px rgba(0,0,0,.18);
}
.parent-container .ind_kafel .kafel-bg,
.blok_kafel2 .ind_kafel > .offer-icon,
.offer-blok .offer-ring {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -2;
transition: transform .45s ease, opacity .3s ease;
}
.blok_kafel2 .ind_kafel:hover > .offer-icon,
.parent-container .ind_kafel:hover .kafel-bg,
.offer-blok:hover .offer-ring {
transform: scale(1.06);
}
.parent-container .ind_kafel .kafel-overlay,
.blok_kafel2 .ind_kafel:before,
.parent-container .ind_kafel:before,
.offer-blok:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.48) 48%, rgba(0,0,0,.86) 100%);
z-index: -1;
pointer-events: none;
}
.parent-container .ind_kafel .kafel-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 34px;
color: #fff;
box-sizing: border-box;
}
.blok_kafel2 .ind_kafel > div:not(.offer-icon) {
position: relative;
z-index: 2;
}
.blok_kafel2 .ind_kafel,
.offer-blok {
display: flex !important;
flex-direction: column;
justify-content: flex-end;
padding: 34px;
color: #fff;
vertical-align: top;
}
.parent-container .offer-name,
.blok_kafel2 .offer-name,
.offer-title-name {
font-family: var(--font-head, Barlow Condensed, Barlow, Arial, sans-serif);
font-size: clamp(30px, 3vw, 48px);
font-weight: 700;
line-height: .95;
letter-spacing: -.03em;
text-transform: uppercase;
color: #fff;
margin: 0 0 16px;
}
.parent-container .offer-line,
.blok_kafel2 .offer-line {
display: block;
width: 68px;
height: 3px;
background: #1478ff;
margin: 0 0 18px;
}
.parent-container .offer-cont,
.blok_kafel2 .offer-cont {
font-size: 15px;
line-height: 1.55;
color: rgba(255,255,255,.82);
max-width: 520px;
}
.parent-container .offer-cont p,
.blok_kafel2 .offer-cont p {
margin: 0;
color: inherit;
}
.parent-container .kafel-content > .offer-icon {
position: relative;
inset: auto;
width: 56px !important;
height: 56px !important;
margin: 0 0 18px !important;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
filter: brightness(0) invert(1);
}
.offer-title-name,
.offer-title-more {
position: relative;
z-index: 2;
}
.offer-title-name {
margin: 0;
font-size: clamp(26px, 2.6vw, 40px);
line-height: 1;
}
.offer-title-more {
margin-top: 18px;
font-size: 12px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: #1478ff;
}
/* =========================================================
AKTUALNOSCI / BLOG - styl Volvo/LOVOL
========================================================= */
.lovol-news-inner {
padding-top: 22px;
padding-bottom: 70px;
}
.lovol-news-intro {
width: min(100% - 64px, 1440px);
margin: 0 auto 32px;
}
.lovol-news-layout {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.lovol-news-article {
background: transparent;
border: 0;
box-shadow: none;
overflow: visible;
box-sizing: border-box;
}
.lovol-news-article.is-hidden {
display: none !important;
}
.lovol-news-featured {
grid-column: 1 / -1;
margin-bottom: 22px;
}
.lovol-news-photo-link {
display: block;
overflow: hidden;
background: #e7e8ea;
text-decoration: none;
}
.lovol-news-featured .lovol-news-photo-link {
border-radius: 0;
}
.lovol-news-photo {
width: 100%;
background-size: cover;
background-position: center;
transition: transform .5s ease;
}
.lovol-news-featured .lovol-news-photo {
height: clamp(420px, 52vw, 720px);
}
.lovol-news-card .lovol-news-photo {
height: 310px;
}
.lovol-news-article:hover .lovol-news-photo {
transform: scale(1.035);
}
.lovol-news-body {
padding-top: 24px;
}
.lovol-news-featured .lovol-news-body {
width: min(100%, 840px);
margin: 0 auto;
padding-top: 26px;
}
.lovol-news-title {
margin: 0;
font-family: var(--font-heading);
font-weight: 500;
line-height: 1;
letter-spacing: -.035em;
text-transform: none;
}
.lovol-news-featured .lovol-news-title {
font-size: clamp(38px, 4.4vw, 66px);
}
.lovol-news-card .lovol-news-title {
font-size: clamp(25px, 2vw, 34px);
font-weight: 700;
line-height: 1.06;
}
.lovol-news-title a {
font-family: var(--font-heading);
color: #070707;
text-decoration: none;
}
.lovol-news-title a:hover {
color: #070707;
}
.lovol-news-line {
width: 54px;
height: 4px;
margin: 18px 0 20px 0;
border-radius: 999px;
background: #1478ff;
}
.lovol-news-featured .lovol-news-line {
margin-top: 22px;
margin-bottom: 22px;
}
.lovol-news-excerpt {
font-family: var(--font-main);
margin-top: 14px;
font-size: 16px;
line-height: 1.58;
color: rgba(0,0,0,.64);
}
.lovol-news-card .lovol-news-excerpt {
font-size: 15px;
line-height: 1.5;
}
.lovol-news-excerpt p {
margin: 0 0 10px;
font-family: var(--font-main);
}
.lovol-news-meta {
margin-top: 16px;
font-size: 14px;
color: rgba(0,0,0,.52);
font-family: var(--font-elements);
}
.lovol-news-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
font-family: var(--font-elements);
}
.lovol-news-tags span {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 15px;
border: 1px solid rgba(0,0,0,.14);
border-radius: 999px;
font-size: 13px;
line-height: 1;
color: #111;
background: rgba(255,255,255,.38);
font-family: var(--font-main);
}
.lovol-news-more-wrap {
width: min(100% - 64px, 1440px);
margin: 34px auto 0;
text-align: center;
box-sizing: border-box;
}
.lovol-news-more-btn {
width: auto;
min-width: 260px;
max-width: 100%;
}
.lovol-news-more-btn:hover {
background: transparent;
color: #202326;
border-color: #202326;
transform: translateY(-2px);
box-shadow: none;
}
/* stare klasy bloga zostawione jako fallback */
.news-feed {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.news-post {
float: none !important;
width: 100% !important;
margin: 0 !important;
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 18px 45px rgba(0,0,0,.08);
box-sizing: border-box;
}
.news-post-head {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 22px;
}
.news-post-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
overflow: hidden;
background: #f3f5f7;
flex: 0 0 auto;
}
.news-post-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-post-meta {
min-width: 0;
flex: 1;
}
.news-post-author {
font-weight: 700;
font-size: 14px;
color: #111;
}
.news-post-date {
font-size: 12px;
color: rgba(0,0,0,.52);
}
.news-post-badge {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #1478ff;
}
.news-post-photo-link {
display: block;
position: relative;
overflow: hidden;
}
.news-post-photo {
height: 310px;
background-size: cover;
background-position: center;
transition: transform .45s ease;
}
.news-post:hover .news-post-photo {
transform: scale(1.04);
}
.news-post-body {
padding: 26px 30px 30px;
}
.news-post-title {
margin: 0 0 12px;
font-family: var(--font-head, Barlow Condensed, Barlow, Arial, sans-serif);
font-size: clamp(30px, 2.8vw, 44px);
line-height: .98;
letter-spacing: -.03em;
text-transform: uppercase;
}
.news-post-title a {
color: #111;
text-decoration: none;
}
.news-post-excerpt {
font-size: 15px;
line-height: 1.62;
color: rgba(0,0,0,.62);
}
.news-post-actions {
margin-top: 24px;
}
/* =========================================================
RWD
========================================================= */
@media (max-width: 1100px) {
.parent-container,
.blok_kafel2,
.blok_kafel,
.news-feed,
.lovol-news-layout,
.lovol-news-intro,
.lovol-news-more-wrap {
width: min(100% - 38px, 900px);
}
.parent-container,
.blok_kafel2,
.blok_kafel,
.news-feed,
.lovol-news-layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lovol-news-featured {
grid-column: 1 / -1;
}
}
@media (max-width: 700px) {
.parent-container,
.blok_kafel2,
.blok_kafel,
.news-feed,
.lovol-news-layout,
.lovol-news-intro,
.lovol-news-more-wrap {
width: min(100% - 28px, 560px);
}
.parent-container,
.blok_kafel2,
.blok_kafel,
.news-feed,
.lovol-news-layout {
grid-template-columns: 1fr;
gap: 18px;
margin: 24px auto;
}
.blok_kafel2 .ind_kafel,
.parent-container .ind_kafel,
.offer-blok {
min-height: 320px;
border-radius: 22px;
}
.blok_kafel2 .ind_kafel,
.parent-container .ind_kafel .kafel-content,
.offer-blok {
padding: 24px;
}
.lovol-news-featured .lovol-news-photo,
.lovol-news-card .lovol-news-photo,
.news-post-photo {
height: 240px;
}
.lovol-news-featured .lovol-news-body {
width: 100%;
}
.news-post {
border-radius: 22px;
}
.news-post-body {
padding: 22px;
}
}
/* =========================================================
LOVOL - offer grid, 3 kolumny, bez paginacji
========================================================= */
.lovol-offer-grid-page {
background: #fff !important;
}
.lovol-offer-grid-inner {
padding-bottom: 70px;
}
.lovol-offer-grid-intro {
width: min(100% - 64px, 1440px);
margin: 0 auto 34px auto;
box-sizing: border-box;
}
.lovol-offer-grid {
width: min(100% - 64px, 1440px);
margin: 0 auto;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px 32px;
box-sizing: border-box;
}
.lovol-offer-grid-item {
display: block;
background: transparent;
box-sizing: border-box;
}
.lovol-offer-grid-item.is-hidden {
display: none !important;
}
.lovol-offer-grid-photo-link {
display: block;
width: 100%;
overflow: hidden;
background: #e8e9eb;
text-decoration: none;
}
.lovol-offer-grid-photo {
width: 100%;
height: 265px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform .45s ease;
}
.lovol-offer-grid-item:hover .lovol-offer-grid-photo {
transform: scale(1.035);
}
.lovol-offer-grid-body {
padding: 24px 0 0 0;
box-sizing: border-box;
}
.lovol-offer-grid-title {
margin: 0 !important;
padding: 0 !important;
font-family: var(--font-heading);
font-size: clamp(24px, 2vw, 30px) !important;
line-height: 1.08 !important;
letter-spacing: -0.025em;
font-weight: 700;
color: #202326 !important;
}
.lovol-offer-grid-title a {
font-family: var(--font-heading);
color: #202326 !important;
text-decoration: none !important;
}
.lovol-offer-grid-line {
width: 46px;
height: 4px;
margin: 16px 0 18px 0;
}
.lovol-offer-grid-excerpt {
font-family: var(--font-main);
font-size: 17px;
line-height: 1.45;
font-weight: 400;
color: rgba(0, 0, 0, 0.72);
}
.lovol-offer-grid-excerpt p,
.lovol-offer-grid-excerpt span,
.lovol-offer-grid-excerpt div {
font-family: var(--font-main);
color: inherit;
}
.lovol-offer-grid-excerpt p {
margin: 0;
padding: 0;
}
.lovol-offer-grid-more-wrap {
width: min(100% - 64px, 1440px);
margin: 42px auto 0 auto;
text-align: center;
box-sizing: border-box;
}
.lovol-offer-grid-more-btn {
width: auto !important;
min-width: 260px;
max-width: 100%;
}
.lovol-offer-grid-item.is-revealed {
animation: lovolOfferGridReveal .36s ease both;
}
@keyframes lovolOfferGridReveal {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media screen and (max-width: 1100px) {
.lovol-offer-grid,
.lovol-offer-grid-intro,
.lovol-offer-grid-more-wrap {
width: min(100% - 38px, 900px);
}
.lovol-offer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 700px) {
.lovol-offer-grid,
.lovol-offer-grid-intro,
.lovol-offer-grid-more-wrap {
width: min(100% - 28px, 560px);
}
.lovol-offer-grid {
grid-template-columns: 1fr;
gap: 26px;
}
.lovol-offer-grid-photo {
height: 230px;
}
.lovol-offer-grid-title {
font-size: 25px !important;
}
.lovol-offer-grid-excerpt {
font-size: 16px;
}
}
/* =========================================================
LOVOL - indywidualny button dla shortcode [button]
np. class: lovol-shortcode-btn lovol-shortcode-btn-dark
========================================================= */
.lovol-shortcode-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
min-width: 225px;
max-width: 100%;
min-height: 50px;
padding: 0 24px;
box-sizing: border-box;
border-radius: 999px;
border: 1px solid #202326;
background: transparent;
color: #202326 !important;
font-family: var(--font-strong);
font-size: 13px;
line-height: 1;
letter-spacing: 0.05em;
text-align: center;
text-decoration: none !important;
cursor: pointer;
transition:
background-color 0.24s ease,
color 0.24s ease,
border-color 0.24s ease;
}
.lovol-shortcode-btn span {
font-family: var(--font-strong);
color: inherit !important;
line-height: 1;
}
/* wariant jak "Pokaż więcej" w blogu */
.lovol-shortcode-btn.lovol-shortcode-btn-dark {
background: #202326;
color: #fff !important;
border-color: #202326;
}
.lovol-shortcode-btn.lovol-shortcode-btn-dark:hover {
background: transparent;
color: #202326 !important;
border-color: #202326;
}
/* wariant obrysowy */
.lovol-shortcode-btn.lovol-shortcode-btn-outline {
background: transparent;
color: #202326 !important;
border-color: #202326;
}
.lovol-shortcode-btn.lovol-shortcode-btn-outline:hover {
background: #202326;
color: #fff !important;
border-color: #202326;
}
/* wariant na ciemne tło */
.lovol-shortcode-btn.lovol-shortcode-btn-light {
background: transparent;
color: #fff !important;
border-color: rgba(255, 255, 255, 0.82);
}
.lovol-shortcode-btn.lovol-shortcode-btn-light:hover {
background: #fff;
color: #202326 !important;
border-color: #fff;
}
.lovol-map-route-box {
width: min(100% - 64px, 1440px);
margin: 0 auto 18px auto;
box-sizing: border-box;
}
.lovol-map-route-title {
margin-bottom: 12px;
font-family: var(--font-heading);
font-size: clamp(28px, 3vw, 44px);
line-height: 1;
letter-spacing: -0.035em;
text-transform: uppercase;
color: #202326;
}
.lovol-map-route-form {
display: flex;
gap: 12px;
align-items: stretch;
width: 100%;
max-width: 760px;
}
.lovol-map-route-form input {
width: 100%;
min-height: 50px;
padding: 0 18px;
box-sizing: border-box;
border: 1px solid rgba(32, 35, 38, 0.22);
border-radius: 999px;
background: #fff;
color: #202326;
font-family: var(--font-main);
font-size: 15px;
line-height: 1;
outline: none;
}
.lovol-map-route-form input:focus {
border-color: #202326;
}
.lovol-map-route-form button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 190px;
min-height: 50px;
padding: 0 22px;
box-sizing: border-box;
border-radius: 999px;
border: 1px solid #202326;
background: #202326;
color: #fff;
font-family: var(--font-strong);
font-size: 13px;
line-height: 1;
letter-spacing: 0.05em;
cursor: pointer;
transition: background-color .24s ease, color .24s ease;
}
.lovol-map-route-form button:hover {
background: transparent;
color: #202326;
}
.lovol-map-route-message {
min-height: 20px;
margin-top: 10px;
font-family: var(--font-main);
font-size: 14px;
line-height: 1.45;
color: rgba(0, 0, 0, 0.68);
}
@media screen and (max-width: 700px) {
.lovol-map-route-box {
width: min(100% - 28px, 560px);
}
.lovol-map-route-form {
flex-direction: column;
}
.lovol-map-route-form button {
width: 100%;
}
}
.lovol-contact-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin: 40px 0;
}
.lovol-contact-box {
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 28px;
padding: 34px;
box-shadow: 0 18px 50px rgba(0,0,0,.06);
}
.lovol-contact-label {
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: #1478ff;
margin-bottom: 14px;
}
.lovol-contact-box h3 {
margin: 0 0 14px;
font-size: clamp(22px, 2.2vw, 34px);
line-height: 1.1;
}
.lovol-contact-box h3 a {
color: #111;
text-decoration: none;
}
.lovol-contact-box h3 a:hover {
color: #1478ff;
}
.lovol-contact-box p {
margin: 0;
color: #555;
line-height: 1.55;
}
.lovol-contact-company {
display: flex;
justify-content: space-between;
gap: 30px;
background: #111;
color: #fff;
border-radius: 32px;
padding: 42px;
margin: 30px 0 40px;
}
.lovol-contact-company h3 {
margin: 0 0 14px;
font-size: clamp(26px, 3vw, 42px);
}
.lovol-contact-address {
font-size: clamp(20px, 2vw, 30px);
line-height: 1.35;
margin: 0;
}
.lovol-contact-company-data {
min-width: 260px;
align-self: center;
}
.lovol-contact-company-data p {
margin: 8px 0;
font-size: 18px;
}
@media screen and (max-width: 700px) {
.lovol-contact-grid {
grid-template-columns: 1fr;
}
.lovol-contact-company {
flex-direction: column;
}
}
/* =========================================================
LOVOL - FOOTER / STOPKA FINAL
CMS: stp, stp_dw
Content: lovol-footer-main, lovol-footer-bottom
========================================================= */
div.stp {
position: relative !important;
z-index: 1200 !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background:
radial-gradient(circle at 12% 0%, rgba(20, 120, 255, 0.22), transparent 34%),
linear-gradient(180deg, #111417 0%, #050607 100%) !important;
color: #fff !important;
text-align: left !important;
font-family: var(--font-main) !important;
overflow: hidden;
}
div.stp::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.20) 18%,
rgba(20, 120, 255, 0.62) 50%,
rgba(255, 255, 255, 0.20) 82%,
transparent 100%
);
pointer-events: none;
}
div.stp .texture-footer,
div.stp .stp-border {
display: none !important;
}
div.stp_dw {
position: relative !important;
z-index: 2 !important;
display: block !important;
width: min(100% - 64px, 1200px) !important;
max-width: 1200px !important;
min-width: 0 !important;
height: auto !important;
margin: 0 auto !important;
padding: 76px 0 58px 0 !important;
box-sizing: border-box !important;
color: #fff !important;
text-align: left !important;
font-family: var(--font-main) !important;
font-size: 15px !important;
line-height: 1.55 !important;
}
/* =========================================================
FOOTER CONTENT
========================================================= */
.lovol-footer-content {
display: block;
width: 100%;
box-sizing: border-box;
text-align: left;
}
.lovol-footer-main {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr 1.35fr;
gap: 64px;
width: 100%;
box-sizing: border-box;
text-align: left;
}
.lovol-footer-col {
min-width: 0;
text-align: left;
}
.lovol-footer-title {
margin: 0 0 22px 0;
font-family: var(--font-strong);
font-size: 18px;
line-height: 1.15;
font-weight: 700;
color: #fff;
text-align: left;
}
.lovol-footer-links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 11px;
width: 100%;
text-align: left;
}
.lovol-footer-link,
.footer_menu_link {
position: relative;
display: block;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
font-family: var(--font-strong);
font-size: 15px;
line-height: 1.28;
color: rgba(255, 255, 255, 0.88);
text-align: left;
}
.lovol-footer-link a,
.lovol-footer-links a,
.footer_menu_link a,
.lovol-footer-bottom-links a,
.lovol-footer-bottom-links .lovol-footer-modal-link {
position: relative;
display: inline-block;
padding-left: 0;
font-family: var(--font-main) !important;
color: rgba(255, 255, 255, 0.88) !important;
text-decoration: none !important;
text-align: left;
cursor: pointer;
transition:
color 0.22s ease,
padding-left 0.22s ease !important;
}
.lovol-footer-link a::before,
.lovol-footer-links a::before,
.footer_menu_link a::before,
.lovol-footer-bottom-links a::before,
.lovol-footer-bottom-links .lovol-footer-modal-link::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 2px;
background: #1478ff;
transform: translateY(-50%);
transition: width 0.22s ease;
}
.lovol-footer-link a:hover,
.lovol-footer-links a:hover,
.footer_menu_link a:hover,
.lovol-footer-bottom-links a:hover,
.lovol-footer-bottom-links .lovol-footer-modal-link:hover {
padding-left: 10px;
color: #fff !important;
}
.lovol-footer-link a:hover::before,
.lovol-footer-links a:hover::before,
.footer_menu_link a:hover::before,
.lovol-footer-bottom-links a:hover::before,
.lovol-footer-bottom-links .lovol-footer-modal-link:hover::before {
width: 4px;
}
.lovol-footer-text {
max-width: 330px;
font-family: var(--font-main);
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.72);
text-align: left;
}
.lovol-footer-text strong {
font-family: var(--font-strong);
color: #fff;
}
.lovol-footer-actions {
margin-top: 24px;
text-align: left;
}
.lovol-footer-actions .lovol-shortcode-btn {
min-width: 220px;
}
/* =========================================================
FOOTER BOTTOM
========================================================= */
.lovol-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
width: 100%;
margin-top: 74px;
padding-top: 26px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
box-sizing: border-box;
text-align: left;
}
.lovol-footer-bottom-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 18px;
text-align: left;
}
.lovol-footer-bottom-links .footer_menu_link {
display: inline-block !important;
font-family: var(--font-main) !important;
font-size: 13px;
line-height: 1.3;
color: rgba(255, 255, 255, 0.68) !important;
text-align: left;
}
.lovol-footer-bottom-links .footer_menu_link z,
.lovol-footer-bottom-links .footer_menu_link i {
display: none !important;
}
.lovol-footer-bottom-links a,
.lovol-footer-bottom-links .lovol-footer-modal-link {
font-family: var(--font-main) !important;
font-size: 13px;
line-height: 1.3;
color: rgba(255, 255, 255, 0.68) !important;
}
/* =========================================================
FOOTER SOCIAL - DIVY Z KLASĄ FONT AWESOME
CMS NIE UŻYWA
========================================================= */
.lovol-footer-social {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
font-family: var(--font-strong);
font-size: 12px;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
text-align: left;
}
.lovol-footer-social span {
font-family: var(--font-strong);
color: rgba(255, 255, 255, 0.72);
}
.lovol-footer-social a {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 50%;
color: rgba(255, 255, 255, 0.50) !important;
text-decoration: none !important;
transition:
color 0.22s ease,
border-color 0.22s ease,
background-color 0.22s ease,
transform 0.22s ease;
}
.lovol-footer-social a:hover {
color: #fff !important;
border-color: #1478ff;
background: rgba(20, 120, 255, 0.16);
transform: translateY(-2px);
}
.lovol-footer-social .fa,
.lovol-footer-social .fa-brands,
.lovol-footer-social .fa-solid,
.lovol-footer-social .fa-regular {
display: block !important;
font-family:
FontAwesome,
"Font Awesome 6 Brands",
"Font Awesome 5 Brands",
"Font Awesome 6 Free",
"Font Awesome 5 Free" !important;
font-size: 15px;
line-height: 1;
font-style: normal;
font-weight: normal !important;
color: inherit !important;
}
/* =========================================================
CZYSZCZENIE STARYCH KLAS CMS W STOPCE
========================================================= */
div.stp ul,
div.stp li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
text-align: left !important;
}
div.stp li::before {
display: none !important;
content: none !important;
}
div.stp .footer_block {
float: none !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-family: var(--font-main) !important;
color: rgba(255, 255, 255, 0.72) !important;
text-align: left !important;
}
div.stp .footer_block_name {
margin: 0 0 18px 0 !important;
padding: 0 !important;
font-family: var(--font-strong) !important;
font-size: 18px !important;
line-height: 1.15 !important;
color: #fff !important;
text-align: left !important;
}
div.stp .stp-box,
div.stp .motto_stp,
div.stp .contact-flt {
float: none !important;
width: auto !important;
font-family: var(--font-main) !important;
color: rgba(255, 255, 255, 0.72) !important;
text-align: left !important;
}
/* =========================================================
COPYRIGHT
========================================================= */
div.copyright,
.copyright {
width: 100% !important;
min-width: 0 !important;
padding: 18px 32px !important;
box-sizing: border-box !important;
background:
linear-gradient(180deg, #050607 0%, #030404 100%) !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
color: rgba(255, 255, 255, 0.42) !important;
font-family: var(--font-main) !important;
font-size: 12px !important;
line-height: 1.4 !important;
text-align: center !important;
}
div.copyright a,
.copyright a {
color: rgba(255, 255, 255, 0.62) !important;
font-family: var(--font-main) !important;
text-decoration: none !important;
}
div.copyright a:hover,
.copyright a:hover {
color: #fff !important;
}
/* =========================================================
TABLET
========================================================= */
@media screen and (max-width: 1100px) {
div.stp_dw {
width: min(100% - 38px, 900px) !important;
padding: 58px 0 46px 0 !important;
}
.lovol-footer-main {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 42px 46px;
}
.lovol-footer-bottom {
align-items: flex-start;
flex-direction: column;
justify-content: flex-start;
gap: 22px;
}
.lovol-footer-bottom-links,
.lovol-footer-social {
width: 100%;
justify-content: flex-start;
text-align: left;
}
}
/* =========================================================
MOBILE - FOOTER CENTERED
========================================================= */
@media screen and (max-width: 700px) {
div.stp {
background:
radial-gradient(circle at 50% 0%, rgba(20, 120, 255, 0.22), transparent 42%),
linear-gradient(180deg, #111417 0%, #050607 100%) !important;
}
div.stp_dw {
width: min(100% - 34px, 460px) !important;
padding: 42px 0 34px 0 !important;
text-align: center !important;
}
.lovol-footer-content {
text-align: center !important;
}
.lovol-footer-main {
display: grid;
grid-template-columns: 1fr;
gap: 34px;
width: 100%;
text-align: center !important;
}
.lovol-footer-col {
width: 100%;
text-align: center !important;
}
.lovol-footer-title {
margin: 0 0 16px 0;
font-size: 20px;
line-height: 1.1;
text-align: center !important;
}
.lovol-footer-links {
align-items: center !important;
justify-content: center !important;
gap: 10px;
text-align: center !important;
}
.lovol-footer-link,
.footer_menu_link {
width: 100%;
font-size: 15px;
line-height: 1.35;
text-align: center !important;
}
.lovol-footer-link a,
.lovol-footer-links a,
.footer_menu_link a,
.lovol-footer-bottom-links a,
.lovol-footer-bottom-links .lovol-footer-modal-link {
text-align: center !important;
}
.lovol-footer-link a:hover,
.lovol-footer-links a:hover,
.footer_menu_link a:hover,
.lovol-footer-bottom-links a:hover,
.lovol-footer-bottom-links .lovol-footer-modal-link:hover {
padding-left: 0 !important;
color: #fff !important;
}
.lovol-footer-link a::before,
.lovol-footer-links a::before,
.footer_menu_link a::before,
.lovol-footer-bottom-links a::before,
.lovol-footer-bottom-links .lovol-footer-modal-link::before {
left: 50%;
top: auto;
bottom: -5px;
width: 0;
height: 2px;
transform: translateX(-50%);
}
.lovol-footer-link a:hover::before,
.lovol-footer-links a:hover::before,
.footer_menu_link a:hover::before,
.lovol-footer-bottom-links a:hover::before,
.lovol-footer-bottom-links .lovol-footer-modal-link:hover::before {
width: 22px;
}
.lovol-footer-text {
max-width: 340px;
margin: 0 auto;
font-size: 15px;
line-height: 1.55;
text-align: center !important;
}
.lovol-footer-actions {
margin-top: 24px;
text-align: center !important;
}
.lovol-footer-actions .lovol-shortcode-btn,
.lovol-footer-actions .lovol-model-btn {
width: 100% !important;
max-width: 320px;
margin-left: auto !important;
margin-right: auto !important;
}
.lovol-footer-bottom {
display: flex;
flex-direction: column;
align-items: center !important;
justify-content: center !important;
gap: 24px;
margin-top: 42px;
padding-top: 24px;
text-align: center !important;
}
.lovol-footer-bottom-links {
display: flex;
flex-direction: column;
align-items: center !important;
justify-content: center !important;
width: 100%;
gap: 11px;
text-align: center !important;
}
.lovol-footer-bottom-links .footer_menu_link {
width: 100%;
font-size: 12px;
line-height: 1.35;
letter-spacing: 0.03em;
text-transform: uppercase;
text-align: center !important;
}
.lovol-footer-social {
display: flex;
flex-wrap: wrap;
align-items: center !important;
justify-content: center !important;
width: 100%;
gap: 12px;
text-align: center !important;
}
.lovol-footer-social span {
width: 100%;
margin: 0 0 2px 0;
text-align: center !important;
}
.lovol-footer-social a.fa,
.lovol-footer-social a.fa-brands,
.lovol-footer-social a.fa-solid,
.lovol-footer-social a.fa-regular {
width: 32px;
height: 32px;
font-size: 15px !important;
}
div.copyright,
.copyright {
padding: 16px 18px 72px 18px !important;
font-size: 12px !important;
line-height: 1.45 !important;
text-align: center !important;
}
}
/* =========================================================
FOOTER SOCIAL - FontAwesome bez elementów wewnątrz
HTML:
========================================================= */
.lovol-footer-social {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
font-family: var(--font-strong);
font-size: 12px;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
text-align: left;
}
.lovol-footer-social span {
font-family: var(--font-strong);
color: rgba(255, 255, 255, 0.72);
}
.lovol-footer-social a.fa,
.lovol-footer-social a.fa-brands,
.lovol-footer-social a.fa-solid,
.lovol-footer-social a.fa-regular {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 50%;
color: rgba(255, 255, 255, 0.50) !important;
background: transparent;
font-family:
FontAwesome,
"Font Awesome 6 Brands",
"Font Awesome 5 Brands",
"Font Awesome 6 Free",
"Font Awesome 5 Free" !important;
font-size: 15px !important;
line-height: 1 !important;
font-style: normal !important;
font-weight: normal !important;
text-align: center !important;
text-decoration: none !important;
transition:
color 0.22s ease,
border-color 0.22s ease,
background-color 0.22s ease,
transform 0.22s ease;
}
.lovol-footer-social a.fa::before,
.lovol-footer-social a.fa-brands::before,
.lovol-footer-social a.fa-solid::before,
.lovol-footer-social a.fa-regular::before {
display: block !important;
margin: 0 !important;
padding: 0 !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: 1 !important;
color: inherit !important;
}
.lovol-footer-social a.fa:hover,
.lovol-footer-social a.fa-brands:hover,
.lovol-footer-social a.fa-solid:hover,
.lovol-footer-social a.fa-regular:hover {
color: #fff !important;
border-color: #1478ff;
background: rgba(20, 120, 255, 0.16);
transform: translateY(-2px);
}
/* wyłączenie niebieskiej kreski linków dla ikon social */
.lovol-footer-social a.fa::after,
.lovol-footer-social a.fa-brands::after,
.lovol-footer-social a.fa-solid::after,
.lovol-footer-social a.fa-regular::after {
display: none !important;
content: none !important;
}
.lovol-footer-social a.fa:hover,
.lovol-footer-social a.fa-brands:hover,
.lovol-footer-social a.fa-solid:hover,
.lovol-footer-social a.fa-regular:hover {
padding-left: 0 !important;
}
/* =========================================================
LOVOL - CALLPAGE FORM
PHP: callpage_lovol.php
Zachowuje bazowe przełączniki widgetu, styluje formularz.
========================================================= */
/* globalny akcent widgetu zamiast starego #a89481 */
.wiget-circle,
.wiget_circleunderlay {
background: #1478ff !important;
}
.call-button-on,
.call-button:hover div {
color: #1478ff !important;
}
.call-button-on .call-line,
.call-button:hover .call-line {
background: #1478ff !important;
}
/* formularz */
#callmail.lovol-call-form {
width: 100%;
box-sizing: border-box;
}
.lovol-call-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 60px;
width: 100%;
box-sizing: border-box;
}
.lovol-call-wide {
grid-column: 1 / -1;
}
.lovol-call-field {
position: relative;
display: flex;
align-items: stretch;
min-height: 54px;
box-sizing: border-box;
border: 1px solid rgba(32, 35, 38, 0.18);
border-radius: 16px;
background: #fff;
overflow: hidden;
transition: border-color .22s ease, box-shadow .22s ease;
}
.lovol-call-field:focus-within {
border-color: #1478ff;
box-shadow: 0 0 0 4px rgba(20, 120, 255, 0.10);
}
.lovol-call-icon {
display: flex !important;
align-items: center;
justify-content: center;
width: 54px;
min-width: 54px;
height: 54px;
margin: 0;
padding: 0;
box-sizing: border-box;
color: #1478ff;
background: transparent;
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
font-weight: 900 !important;
font-size: 17px;
line-height: 1;
}
.lovol-call-input {
width: 100% !important;
min-width: 0;
height: 54px;
min-height: 54px;
margin: 0 !important;
padding: 0 18px 0 0 !important;
box-sizing: border-box;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: #202326 !important;
font-family: var(--font-main) !important;
font-size: 15px !important;
line-height: 54px !important;
}
.lovol-call-input:focus,
.lovol-call-input:active {
outline: 0 !important;
box-shadow: none !important;
}
.lovol-call-input::placeholder,
.lovol-call-textarea::placeholder {
color: rgba(32, 35, 38, 0.46);
font-family: var(--font-main) !important;
}
/* select bez Times/ramki systemowej */
.lovol-call-select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
cursor: pointer;
padding-right: 44px !important;
font-family: var(--font-main) !important;
}
.lovol-call-select option {
font-family: var(--font-main) !important;
font-size: 15px !important;
color: #202326;
background: #fff;
}
.lovol-call-select-field::after {
content: "\f107";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
font-weight: 900;
font-size: 13px;
line-height: 1;
color: rgba(32, 35, 38, 0.45);
pointer-events: none;
}
.lovol-call-select::-ms-expand {
display: none;
}
.lovol-call-textarea-field {
display: block;
min-height: 126px;
}
.lovol-call-textarea {
display: block;
width: 100% !important;
height: auto !important;
min-height: 126px !important;
padding: 17px 20px !important;
line-height: 1.55 !important;
resize: vertical;
}
/* zgoda */
.lovol-call-consent {
display: grid;
grid-template-columns: 24px 1fr;
gap: 10px;
align-items: flex-start;
width: 100%;
margin: 16px 0 0 0;
padding: 14px 0 0 0;
box-sizing: border-box;
font-family: var(--font-main) !important;
font-size: 12px;
line-height: 1.55;
color: rgba(32, 35, 38, 0.68);
text-align: left;
}
.lovol-call-checkbox-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.lovol-call-checkbox {
display: block !important;
width: 22px;
height: 22px;
margin: 1px 0 0 0 !important;
padding: 0 !important;
cursor: pointer;
}
.lovol-call-checkbox span {
display: block;
width: 22px;
height: 22px;
box-sizing: border-box;
border: 1px solid rgba(32, 35, 38, 0.24);
border-radius: 5px;
background: #fff;
transition: border-color .22s ease, background-color .22s ease;
}
.lovol-call-checkbox-input:checked + .lovol-call-checkbox span {
border-color: #1478ff;
background: rgba(20, 120, 255, 0.10);
}
.lovol-call-checkbox-input:checked + .lovol-call-checkbox span::before {
content: "\f00c";
display: block;
width: 22px;
height: 22px;
font-family: FontAwesome;
font-size: 14px;
line-height: 20px;
text-align: center;
color: #1478ff;
}
.lovol-call-consent-text {
font-family: var(--font-main) !important;
font-size: 12px;
line-height: 1.55;
color: rgba(32, 35, 38, 0.68);
cursor: pointer;
}
.lovol-call-consent-text a {
font-family: var(--font-main) !important;
color: #1478ff !important;
text-decoration: none !important;
}
.lovol-call-consent-text a:hover {
text-decoration: underline !important;
}
/* submit */
.lovol-call-actions {
width: 100%;
margin: 16px 0 0 0;
text-align: center;
}
#callmail .lovol-call-submit,
#callmail .click.black.lovol-call-submit {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
min-width: 260px;
max-width: 100%;
min-height: 52px;
margin: 0 auto !important;
padding: 0 28px !important;
box-sizing: border-box;
border: 1px solid #202326 !important;
border-radius: 999px !important;
background: #202326 !important;
color: #fff !important;
font-family: var(--font-strong) !important;
font-size: 13px !important;
line-height: 1 !important;
letter-spacing: .05em;
text-align: center !important;
text-decoration: none !important;
cursor: pointer;
transition: background-color .24s ease, color .24s ease, border-color .24s ease, transform .24s ease !important;
}
#callmail .lovol-call-submit:hover,
#callmail .click.black.lovol-call-submit:hover {
background: transparent !important;
color: #202326 !important;
border-color: #202326 !important;
transform: translateY(-1px);
}
/* walidacja */
#engincallpage .alert-div,
#engincallpage .alert_mail {
border-radius: 12px;
background: rgba(20, 120, 255, 0.10) !important;
color: #174f9f !important;
font-family: var(--font-main) !important;
}
#engincallpage .alert-div-err {
border-radius: 12px;
background: rgba(178, 16, 16, 0.10) !important;
color: #b21010 !important;
font-family: var(--font-main) !important;
}
.lovol-call-field:has(.reqd),
.lovol-call-checkbox-input.reqd + .lovol-call-checkbox span {
border-color: #1478ff !important;
background: rgba(20, 120, 255, 0.06) !important;
}
.lovol-call-field:has(.reqderr),
.lovol-call-checkbox-input.reqderr + .lovol-call-checkbox span {
border-color: #b21010 !important;
background: rgba(178, 16, 16, 0.06) !important;
}
@media screen and (max-width: 700px) {
.lovol-call-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.lovol-call-wide {
grid-column: auto;
}
.lovol-call-field {
min-height: 50px;
}
.lovol-call-icon {
width: 50px;
min-width: 50px;
height: 50px;
}
.lovol-call-input {
height: 50px;
min-height: 50px;
line-height: 50px !important;
}
.lovol-call-textarea {
min-height: 118px !important;
}
#callmail .lovol-call-submit,
#callmail .click.black.lovol-call-submit {
width: 100% !important;
min-width: 0;
}
}
select.przycisk,
select.przycisk option,
#call_dzien,
#call_dzien option,
#call_godzina,
#call_godzina option {
font-family: var(--font-main), Arial, sans-serif !important;
font-size: 18px !important;
}
.tr-brand-simple-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
margin: 35px 0 55px;
}
.tr-brand-simple-card {
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 24px;
padding: 30px 26px;
text-align: center;
box-shadow: 0 12px 35px rgba(0,0,0,.05);
}
.tr-brand-simple-logo {
height: 82px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.tr-brand-simple-logo img {
max-width: 210px;
max-height: 70px;
object-fit: contain;
filter: grayscale(1);
}
.tr-brand-simple-card p {
min-height: 54px;
margin: 0 0 22px;
color: #555;
line-height: 1.5;
font-size: 15px;
}
@media screen and (max-width: 1100px) {
.tr-brand-simple-grid {
grid-template-columns: 1fr;
}
.tr-brand-simple-card p {
min-height: auto;
}
}
.lovol-index-teaser {
width: auto;
max-width: 520px;
padding: clamp(18px, 2.4vw, 30px);
background:
radial-gradient(circle at 92% 34%, rgba(20, 120, 255, 0.16), transparent 30%),
linear-gradient(135deg, rgba(5, 6, 7, 0.84) 0%, rgba(16, 21, 28, 0.74) 58%, rgba(5, 6, 7, 0.78) 100%);
}
.lovol-index-teaser::after {
font-size: clamp(70px, 10vw, 150px);
right: clamp(10px, 2.5vw, 34px);
}
.lovol-index-teaser__kicker {
min-height: 28px;
padding: 0 12px;
margin-bottom: 14px;
font-size: 12px;
}
.lovol-index-teaser strong {
font-size: clamp(26px, 3.4vw, 48px);
line-height: 0.98;
}
.lovol-index-teaser span {
font-size: clamp(23px, 3vw, 40px);
line-height: 1;
}
.lovol-index-teaser em {
display: block;
max-width: 500px;
margin-top: 16px;
padding-left: 0;
border-left: 0;
font-family: var(--font-main), Arial, sans-serif;
font-size: clamp(14px, 1.05vw, 17px);
line-height: 1.45;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.84);
}
@media screen and (max-width: 700px) {
.lovol-index-teaser {
max-width: 88%;
padding: 20px;
}
.lovol-index-teaser strong {
font-size: 28px;
}
.lovol-index-teaser span {
font-size: 24px;
}
.lovol-index-teaser em {
font-size: 14px;
}
}
.lovol-bcg-claim {
position: relative;
z-index: 5;
width: min(86vw, 920px);
max-width: 920px;
margin: 0 auto;
box-sizing: border-box;
font-family: var(--font-strong), Arial, sans-serif;
font-size: clamp(24px, 3.4vw, 48px);
line-height: 1.08;
font-weight: 700;
letter-spacing: -0.03em;
color: #fff;
text-align: center;
text-wrap: balance;
text-shadow:
0 3px 14px rgba(0, 0, 0, 0.44),
0 12px 34px rgba(0, 0, 0, 0.34);
pointer-events: none;
}
/* =========================================================
LOVOL - INDEX hero-left / hero-right
auto_action: hero-left albo hero-right
========================================================= */
.lovol-index-split-hero {
width: 100%;
min-height: 100vh;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
background: #fff;
color: #202326;
overflow: hidden;
}
.lovol-index-split-hero-media {
position: relative;
width: 100%;
min-width: 0;
min-height: 100vh;
background: #050505;
overflow: hidden;
}
.lovol-index-split-hero-image,
.lovol-index-split-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.lovol-index-split-hero-image {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.lovol-index-split-hero-video {
object-fit: cover;
object-position: center center;
}
.lovol-index-split-hero-content {
width: 100%;
min-width: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding: clamp(72px, 8vw, 130px) clamp(34px, 6vw, 92px);
background: #fff;
overflow: hidden;
}
.lovol-index-split-hero-content > .pagcontent {
width: 100%;
max-width: 620px;
min-width: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.lovol-index-split-hero-content h1,
.lovol-index-split-hero-content h2,
.lovol-index-split-hero-content h3 {
max-width: 100%;
margin-top: 0;
overflow-wrap: normal;
word-break: normal;
}
.lovol-index-split-hero-content h1,
.lovol-index-split-hero-content h2 {
font-size: clamp(34px, 3.4vw, 58px) !important;
line-height: 1.05 !important;
}
.lovol-index-split-hero-content p,
.lovol-index-split-hero-content div,
.lovol-index-split-hero-content span {
max-width: 100%;
overflow-wrap: break-word;
}
/* hero-right: obraz po prawej, tekst po lewej */
.lovol-index-split-hero-right .lovol-index-split-hero-media {
order: 2;
}
.lovol-index-split-hero-right .lovol-index-split-hero-content {
order: 1;
}
/* hero-left: obraz po lewej, tekst po prawej */
.lovol-index-split-hero-left .lovol-index-split-hero-media {
order: 1;
}
.lovol-index-split-hero-left .lovol-index-split-hero-content {
order: 2;
}
/* mobile: zawsze obraz na górze, tekst pod spodem */
@media screen and (max-width: 1100px) {
.lovol-index-split-hero {
display: flex;
flex-direction: column;
min-height: 0;
}
.lovol-index-split-hero-media,
.lovol-index-split-hero-content,
.lovol-index-split-hero-right .lovol-index-split-hero-media,
.lovol-index-split-hero-right .lovol-index-split-hero-content,
.lovol-index-split-hero-left .lovol-index-split-hero-media,
.lovol-index-split-hero-left .lovol-index-split-hero-content {
order: initial;
}
.lovol-index-split-hero-media {
width: 100%;
min-height: 46vh;
}
.lovol-index-split-hero-content {
width: 100%;
min-height: auto;
padding: 42px 24px 52px;
}
.lovol-index-split-hero-content > .pagcontent {
width: min(100%, 680px);
max-width: 680px;
margin: 0 auto;
}
}
/* =========================================================
LOVOL - infolinia + modal button w men_up / men_left
========================================================= */
.lovol-menu-contact {
display: flex;
align-items: center;
gap: 10px;
box-sizing: border-box;
}
.lovol-menu-contact-phone {
display: inline-flex;
align-items: baseline;
gap: 7px;
color: inherit;
text-decoration: none;
font-family: var(--font-main), Arial, sans-serif;
line-height: 1;
white-space: nowrap;
}
.lovol-menu-contact-phone span {
font-size: 12px;
font-weight: 400;
color: currentColor;
opacity: 0.72;
}
.lovol-menu-contact-phone strong {
font-family: var(--font-main), Arial, sans-serif;
font-size: 16px;
font-weight: 700;
color: currentColor;
}
.lovol-menu-contact-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 0 13px;
box-sizing: border-box;
border: 1px solid currentColor;
border-radius: 999px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 12px;
line-height: 1;
white-space: nowrap;
color: inherit;
background: transparent;
cursor: pointer;
transition:
background-color 0.24s ease,
color 0.24s ease,
border-color 0.24s ease;
}
.lovol-menu-contact-button:hover {
background: #fff;
color: #111;
border-color: #fff;
}
/* wersja w górnym pasku */
.mentop_right .lovol-menu-contact-top {
float: left;
margin-left: 14px;
height: 40px;
color: #fff;
}
/* wersja w men_left */
.men_left .lovol-menu-contact-left {
width: 100%;
margin: 18px 0 18px 0;
padding: 14px;
border-radius: 14px;
background: rgba(0, 0, 0, 0.045);
color: #242424;
justify-content: space-between;
}
.men_left .lovol-menu-contact-left .lovol-menu-contact-phone {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.men_left .lovol-menu-contact-left .lovol-menu-contact-phone span {
font-size: 12px;
}
.men_left .lovol-menu-contact-left .lovol-menu-contact-phone strong {
font-size: 17px;
}
.men_left .lovol-menu-contact-left .lovol-menu-contact-button {
min-height: 38px;
padding: 0 16px;
border-color: rgba(0, 0, 0, 0.22);
}
.men_left .lovol-menu-contact-left .lovol-menu-contact-button:hover {
background: #111;
color: #fff;
border-color: #111;
}
@media screen and (max-width: 700px) {
.men_left .lovol-menu-contact-left {
align-items: stretch;
flex-direction: column;
gap: 12px;
}
.men_left .lovol-menu-contact-left .lovol-menu-contact-button {
width: 100%;
}
}
.mentop_right a {
color: #fff !important;
font-size: 16px !important;
}
/* =========================================================
LOVOL - href_ruler / scroll top
========================================================= */
.href_ruler {
position: fixed;
right: 40px;
bottom: 24px;
z-index: 7000;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(18, 22, 24, 0.86);
color: #fff;
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(10px);
cursor: pointer;
transition:
background-color 0.22s ease,
color 0.22s ease,
border-color 0.22s ease,
transform 0.22s ease,
box-shadow 0.22s ease;
}
.href_ruler z {
font-size: 15px;
line-height: 1;
color: currentColor;
}
.href_ruler:hover {
background: #fff;
color: #111;
border-color: #fff;
transform: translateY(-3px);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
@media screen and (max-width: 700px) {
.href_ruler {
right: 16px;
bottom: 16px;
width: 42px;
height: 42px;
}
.href_ruler z {
font-size: 14px;
}
}
.wiget_ruler {
bottom: 110px !important;
}
/* =========================================================
LOVOL - YouTube / video embed w treści CMS
========================================================= */
.pagcontent div:has(> iframe[src*="youtube.com/embed"]),
.pagcontent div:has(> iframe[src*="youtube-nocookie.com/embed"]),
.pagcontent div:has(> iframe[src*="youtu.be"]) {
position: relative !important;
width: min(100%, 1180px);
margin: clamp(28px, 4vw, 54px) auto;
padding-bottom: 56.25% !important;
padding-top: 0 !important;
height: 0 !important;
overflow: hidden;
border-radius: 22px;
background: #0c0f10;
box-shadow:
0 24px 70px rgba(0, 0, 0, 0.22),
0 8px 22px rgba(0, 0, 0, 0.14);
}
.pagcontent div:has(> iframe[src*="youtube.com/embed"])::before,
.pagcontent div:has(> iframe[src*="youtube-nocookie.com/embed"])::before,
.pagcontent div:has(> iframe[src*="youtu.be"])::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
inset 0 -38px 80px rgba(0, 0, 0, 0.18);
}
.pagcontent div:has(> iframe[src*="youtube.com/embed"])::after,
.pagcontent div:has(> iframe[src*="youtube-nocookie.com/embed"])::after,
.pagcontent div:has(> iframe[src*="youtu.be"])::after {
content: "LOVOL VIDEO";
position: absolute;
left: 18px;
top: 18px;
z-index: 3;
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 11px;
border-radius: 999px;
background: rgba(12, 15, 16, 0.72);
color: #fff;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1;
backdrop-filter: blur(10px);
pointer-events: none;
}
.pagcontent div:has(> iframe[src*="youtube.com/embed"]) iframe,
.pagcontent div:has(> iframe[src*="youtube-nocookie.com/embed"]) iframe,
.pagcontent div:has(> iframe[src*="youtu.be"]) iframe {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
border: 0 !important;
border-radius: inherit;
}
@media screen and (max-width: 700px) {
.pagcontent div:has(> iframe[src*="youtube.com/embed"]),
.pagcontent div:has(> iframe[src*="youtube-nocookie.com/embed"]),
.pagcontent div:has(> iframe[src*="youtu.be"]) {
width: 100%;
margin: 28px auto;
border-radius: 16px;
}
.pagcontent div:has(> iframe[src*="youtube.com/embed"])::after,
.pagcontent div:has(> iframe[src*="youtube-nocookie.com/embed"])::after,
.pagcontent div:has(> iframe[src*="youtu.be"])::after {
left: 12px;
top: 12px;
min-height: 24px;
padding: 0 9px;
font-size: 9px;
}
}
/* =========================================================
LOVOL - shortcode [newsroom{ID}] na stronie głównej
========================================================= */
.lovol-newsroom-shortcode {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
box-sizing: border-box;
padding: clamp(58px, 7vw, 96px) clamp(22px, 4vw, 56px);
background: transparent;
color: #151819;
overflow: hidden;
}
.lovol-newsroom-shortcode-inner {
width: min(100%, 1600px);
margin: 0 auto;
box-sizing: border-box;
}
.lovol-newsroom-shortcode-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
margin-bottom: clamp(28px, 4vw, 48px);
}
.lovol-newsroom-line {
width: 54px;
margin-bottom: 18px;
}
.lovol-newsroom-kicker {
margin-bottom: 8px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(21, 24, 25, 0.58);
}
.lovol-newsroom-title {
margin: 0;
font-family: var(--font-strong), var(--font-main), Arial, sans-serif;
font-size: clamp(34px, 4.8vw, 72px);
line-height: 0.94;
font-weight: 700;
letter-spacing: -0.045em;
color: #151819;
}
.lovol-newsroom-lead {
max-width: 560px;
margin: 18px 0 0;
font-size: clamp(15px, 1.2vw, 18px);
line-height: 1.55;
color: rgba(21, 24, 25, 0.66);
}
.lovol-newsroom-more,
.lovol-newsroom-more.lovol-model-anchor-button,
.lovol-newsroom-more.lovol-model-anchor-button-dark {
flex: 0 1 auto;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
padding: 0 22px;
border: 1px solid #151819 !important;
border-radius: 999px;
background: transparent !important;
color: #151819 !important;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1;
text-decoration: none !important;
white-space: nowrap;
transform: none !important;
box-shadow: none !important;
overflow: hidden;
transition:
background-color 0.22s ease,
color 0.22s ease,
border-color 0.22s ease !important;
}
.lovol-newsroom-more:hover,
.lovol-newsroom-more.lovol-model-anchor-button:hover,
.lovol-newsroom-more.lovol-model-anchor-button-dark:hover {
background: #151819 !important;
color: #fff !important;
border-color: #151819 !important;
transform: none !important;
box-shadow: none !important;
}
.lovol-newsroom-more span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.lovol-newsroom-more z {
flex: 0 0 auto;
font-size: 12px;
line-height: 1;
color: currentColor !important;
transform: none !important;
transition: none !important;
}
.lovol-newsroom-more:hover z {
color: currentColor !important;
transform: none !important;
}
.lovol-newsroom-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2vw, 26px);
}
.lovol-newsroom-card {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border-radius: 24px;
background: #fff;
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.08);
}
.lovol-newsroom-card-photo {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: #111;
background-size: cover;
background-position: center;
text-decoration: none !important;
}
.lovol-newsroom-card-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.28));
opacity: 0.72;
transition: opacity 0.24s ease;
}
.lovol-newsroom-card:hover .lovol-newsroom-card-photo::after {
opacity: 0.52;
}
.lovol-newsroom-card-badge {
position: absolute;
left: 16px;
top: 16px;
z-index: 2;
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 11px;
border-radius: 999px;
background: rgba(17, 19, 20, 0.78);
color: #fff;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
backdrop-filter: blur(8px);
}
.lovol-newsroom-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: clamp(22px, 2.5vw, 30px);
box-sizing: border-box;
}
.lovol-newsroom-card-date {
margin-bottom: 13px;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(21, 24, 25, 0.46);
}
.lovol-newsroom-card-title {
margin: 0 0 14px;
font-family: var(--font-strong), var(--font-main), Arial, sans-serif;
font-size: clamp(22px, 2vw, 32px);
line-height: 1.04;
font-weight: 700;
letter-spacing: -0.035em;
color: #151819;
}
.lovol-newsroom-card-title a {
color: inherit !important;
text-decoration: none !important;
}
.lovol-newsroom-card-excerpt {
font-size: 14px;
line-height: 1.55;
color: rgba(21, 24, 25, 0.68);
}
.lovol-newsroom-card-excerpt p:first-child,
.lovol-newsroom-card-excerpt div:first-child {
margin-top: 0;
}
.lovol-newsroom-card-excerpt p:last-child,
.lovol-newsroom-card-excerpt div:last-child {
margin-bottom: 0;
}
.lovol-newsroom-card-more {
display: inline-flex;
align-items: center;
gap: 9px;
width: max-content;
margin-top: auto;
padding-top: 22px;
color: #151819 !important;
text-decoration: none !important;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
.lovol-newsroom-card-more z {
font-size: 12px;
line-height: 1;
color: currentColor;
}
.lovol-newsroom-card-more:hover {
color: #151819 !important;
}
@media screen and (max-width: 1100px) {
.lovol-newsroom-grid {
grid-template-columns: 1fr;
}
.lovol-newsroom-card {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.lovol-newsroom-card-photo {
height: 100%;
min-height: 260px;
aspect-ratio: auto;
}
}
@media screen and (max-width: 700px) {
.lovol-newsroom-shortcode {
padding: 46px 18px;
}
.lovol-newsroom-shortcode-head {
display: block;
}
.lovol-newsroom-more {
width: 100%;
margin-top: 22px;
}
.lovol-newsroom-card {
display: flex;
border-radius: 18px;
}
.lovol-newsroom-card-photo {
min-height: 220px;
aspect-ratio: 16 / 10;
}
}
/* =========================================================
LOVOL - privacy / content style
========================================================= */
.lovol-privacy-page {
width: 100%;
background: #eeeeef !important;
color: #151819;
box-sizing: border-box;
}
.lovol-privacy-page .lovol-privacy-inner {
width: min(100%, 1600px);
max-width: 1600px;
margin: 0 auto;
padding: clamp(38px, 5vw, 78px) clamp(18px, 4vw, 64px) clamp(54px, 6vw, 96px);
box-sizing: border-box;
background: transparent !important;
}
.lovol-privacy-heading {
margin: 0 0 clamp(22px, 3vw, 38px) !important;
padding: 0 !important;
text-align: left;
}
.lovol-privacy-heading h1 {
margin: 0 !important;
color: #151819;
font-family: var(--font-strong), var(--font-main), Arial, sans-serif;
font-size: clamp(36px, 5vw, 72px) !important;
line-height: 0.98 !important;
font-weight: 700;
letter-spacing: -0.055em;
}
.lovol-privacy-content {
width: 100%;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
}
.lovol-privacy-actions {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
margin: 0 0 18px;
box-sizing: border-box;
}
.lovol-privacy-cookie-btn,
.lovol-privacy-cookie-btn.lovol-model-anchor-button,
.lovol-privacy-cookie-btn.lovol-model-anchor-button-dark {
display: inline-flex !important;
align-items: center;
justify-content: center;
max-width: 100%;
min-width: 0;
min-height: 44px;
padding: 0 20px !important;
box-sizing: border-box;
border: 1px solid #151819 !important;
border-radius: 999px !important;
background: transparent !important;
color: #151819 !important;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.02em;
line-height: 1 !important;
text-align: center;
text-decoration: none !important;
cursor: pointer;
transform: none !important;
box-shadow: none !important;
transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.lovol-privacy-cookie-btn:hover,
.lovol-privacy-cookie-btn.lovol-model-anchor-button:hover,
.lovol-privacy-cookie-btn.lovol-model-anchor-button-dark:hover {
background: #151819 !important;
color: #fff !important;
border-color: #151819 !important;
transform: none !important;
box-shadow: none !important;
}
.lovol-privacy-panel {
width: 100%;
margin: 0;
padding: clamp(28px, 4vw, 58px);
box-sizing: border-box;
border: 1px solid rgba(21, 24, 25, 0.08);
border-radius: 28px;
background: #fff;
box-shadow: 0 22px 58px rgba(0, 0, 0, 0.06);
}
.lovol-privacy-text {
width: 100%;
max-width: 1180px;
margin: 0 auto;
color: #2a2e30;
font-family: var(--font-main), Arial, sans-serif;
font-size: clamp(15px, 1.12vw, 17px);
line-height: 1.72;
}
.lovol-privacy-text h1,
.lovol-privacy-text h2,
.lovol-privacy-text h3,
.lovol-privacy-text h4 {
margin: 1.45em 0 0.55em;
color: #151819;
font-family: var(--font-strong), var(--font-main), Arial, sans-serif;
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.035em;
}
.lovol-privacy-text h1:first-child,
.lovol-privacy-text h2:first-child,
.lovol-privacy-text h3:first-child {
margin-top: 0;
}
.lovol-privacy-text h2 {
font-size: clamp(24px, 2.5vw, 38px);
}
.lovol-privacy-text h3 {
font-size: clamp(20px, 2vw, 28px);
}
.lovol-privacy-text p {
margin: 0 0 1.05em;
}
.lovol-privacy-text a {
color: #151819 !important;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
.lovol-privacy-text a:hover {
color: #000 !important;
}
.lovol-privacy-text ul,
.lovol-privacy-text ol {
margin: 0 0 1.25em 1.25em;
padding: 0;
}
.lovol-privacy-text li {
margin: 0 0 0.48em;
}
.lovol-privacy-text table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
font-size: 14px;
}
.lovol-privacy-text table th,
.lovol-privacy-text table td {
padding: 13px 14px;
border: 1px solid rgba(21, 24, 25, 0.12);
vertical-align: top;
}
.lovol-privacy-text table th {
background: #eeeeef;
color: #151819;
font-weight: 700;
}
@media screen and (max-width: 700px) {
.lovol-privacy-page .lovol-privacy-inner {
padding: 34px 16px 58px;
}
.lovol-privacy-actions {
justify-content: stretch;
}
.lovol-privacy-cookie-btn,
.lovol-privacy-cookie-btn.lovol-model-anchor-button,
.lovol-privacy-cookie-btn.lovol-model-anchor-button-dark {
width: 100%;
white-space: normal;
min-height: 46px;
}
.lovol-privacy-panel {
padding: 24px 18px;
border-radius: 20px;
}
.lovol-privacy-text table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
/* =========================================================
LOVOL - content title when hero is disabled
========================================================= */
.pagmen2.lovol-content-title-panel {
width: 100%;
max-width: none;
margin: 0 auto !important;
padding: clamp(92px, 10vw, 142px) clamp(22px, 4vw, 54px) clamp(34px, 5vw, 68px) !important;
box-sizing: border-box;
background: #eeeeef;
text-align: left !important;
}
.pagmen2.lovol-content-title-panel .lovol-content-title-panel-inner {
width: min(100%, 1600px);
margin: 0 auto;
box-sizing: border-box;
}
.pagmen2.lovol-content-title-panel .lovol-content-title-line {
width: 64px;
height: 3px;
margin: 0 0 18px;
display: block;
}
.pagmen2.lovol-content-title-panel h1 {
max-width: 980px;
margin: 0 !important;
padding: 0 !important;
color: #151819;
font-family: var(--font-strong), var(--font-main), Arial, sans-serif;
font-size: clamp(34px, 4.6vw, 72px) !important;
line-height: 0.96 !important;
font-weight: 800;
letter-spacing: -0.055em;
text-align: left !important;
text-transform: none;
}
@media screen and (max-width: 700px) {
.pagmen2.lovol-content-title-panel {
padding: 82px 22px 36px !important;
}
.pagmen2.lovol-content-title-panel h1 {
max-width: 100%;
font-size: clamp(30px, 10vw, 46px) !important;
letter-spacing: -0.045em;
}
}
/* =========================================================
LOVOL - artykuł tekstowy
Użycie w CMS:
...
========================================================= */
.lovol-article {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: clamp(28px, 4vw, 58px) 0 clamp(60px, 7vw, 110px);
box-sizing: border-box;
font-family: var(--font-main), Arial, sans-serif;
color: #303436;
}
.lovol-article p {
margin: 0 0 22px;
font-family: var(--font-main), Arial, sans-serif;
font-size: clamp(16px, 1.02vw, 18px);
line-height: 1.78;
font-weight: 400;
color: #303436;
}
.lovol-article > p:first-of-type {
margin-bottom: clamp(30px, 4vw, 52px);
padding: clamp(24px, 3vw, 38px);
box-sizing: border-box;
border-radius: 24px;
background: #eeeeef;
color: #151819;
}
.lovol-article > p:first-of-type strong {
display: block;
font-family: var(--font-strong), var(--font-main), Arial, sans-serif;
font-size: clamp(21px, 2vw, 34px);
line-height: 1.22;
font-weight: 700;
letter-spacing: -0.035em;
color: #151819;
}
.lovol-article h1,
.lovol-article h2,
.lovol-article h3,
.lovol-article h4,
.lovol-article h5,
.lovol-article h6 {
font-family: var(--font-strong), var(--font-main), Arial, sans-serif;
font-weight: 700;
letter-spacing: -0.035em;
color: #151819;
}
.lovol-article h2 {
position: relative;
margin: clamp(54px, 6vw, 86px) 0 22px;
padding-top: 24px;
font-size: clamp(27px, 2.45vw, 44px);
line-height: 1.08;
}
.lovol-article h2::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 68px;
height: 3px;
background: #151819;
}
.lovol-article h3 {
margin: 44px 0 18px;
font-size: clamp(22px, 1.8vw, 32px);
line-height: 1.16;
}
.lovol-article strong {
font-family: var(--font-strong), var(--font-main), Arial, sans-serif;
font-weight: 700;
color: #151819;
}
.lovol-article ul,
.lovol-article ol {
margin: 0 0 28px;
padding-left: 24px;
font-family: var(--font-main), Arial, sans-serif;
font-size: clamp(16px, 1.02vw, 18px);
line-height: 1.72;
color: #303436;
}
.lovol-article li {
margin-bottom: 10px;
}
.lovol-article blockquote {
margin: 42px 0;
padding: clamp(24px, 3vw, 38px);
box-sizing: border-box;
border-left: 4px solid #151819;
border-radius: 0 22px 22px 0;
background: #eeeeef;
font-family: var(--font-strong), var(--font-main), Arial, sans-serif;
font-size: clamp(20px, 1.7vw, 30px);
line-height: 1.32;
font-weight: 700;
color: #151819;
}
.lovol-article img,
.lovol-article figure {
display: block;
width: 100%;
max-width: 1180px;
height: auto;
margin: clamp(34px, 5vw, 70px) auto;
border-radius: 24px;
}
.lovol-article a {
color: #151819 !important;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.lovol-article a:hover {
color: #000 !important;
text-decoration-thickness: 2px;
}
@media screen and (max-width: 700px) {
.lovol-article {
max-width: 100%;
padding-top: 24px;
padding-bottom: 56px;
}
.lovol-article > p:first-of-type {
padding: 22px;
border-radius: 18px;
}
.lovol-article h2 {
margin-top: 48px;
}
.lovol-article img,
.lovol-article figure {
border-radius: 16px;
}
}
/* =========================================================
LOVOL - RESPONSIVE CLEANUP / TABLET + MOBILE FIX
Dodane na koncu pliku, zeby ujednolic zachowanie sekcji.
Breakpointy:
- desktop: 1101px+
- tablet: 701-1100px
- mobile: 700px-
- maly mobile: 500px-
========================================================= */
/* Bezpieczny box model tylko dla komponentow LOVOL */
[class^="lovol-"],
[class*=" lovol-"],
[class^="lovol-"]::before,
[class^="lovol-"]::after,
[class*=" lovol-"]::before,
[class*=" lovol-"]::after {
box-sizing: border-box;
}
/* Obrazy i media w komponentach nie moga wypychac layoutu */
[class^="lovol-"] img,
[class*=" lovol-"] img,
[class^="lovol-"] video,
[class*=" lovol-"] video {
max-width: 100%;
}
/* =========================================================
TABLET 701-1100px
Glowny cel: te same marginesy boczne i stabilne segmenty.
========================================================= */
@media screen and (min-width: 701px) and (max-width: 1100px) {
.lovol-models-anchor-inner,
.lovol-carousel-content,
.lovol-model-hero-opis-inner,
.lovol-model-block-hero-opis-inner,
.lovol-color-section .pagcontent,
.lovol-section-title,
.lovol-feature-cards,
.lovol-feature-cards.standard {
width: min(100% - 40px, 1200px) !important;
max-width: 1200px !important;
}
.lovol-section-title {
margin-left: auto !important;
margin-right: auto !important;
}
.lovol-model-hero,
.lovol-model-block-hero {
min-height: 560px !important;
}
.lovol-model-hero-opis,
.lovol-model-block-hero-opis {
padding-top: 70px !important;
padding-bottom: 70px !important;
}
.lovol-model-hero-title {
font-size: clamp(48px, 8vw, 76px) !important;
}
.lovol-model-hero-desc {
max-width: 680px !important;
}
#men_up4 .baner_opis {
padding-left: 40px !important;
padding-right: 40px !important;
padding-bottom: 92px !important;
}
#men_up4 .baner_opis_text {
max-width: 720px !important;
font-size: clamp(34px, 5vw, 48px) !important;
}
#men_up4 .dots li {
width: 88px !important;
}
.lovol-color-view,
.lovol-color-image-wrap {
min-height: 500px !important;
}
.lovol-color-image {
max-height: 440px !important;
}
.lovol-carousel-track {
gap: 22px !important;
padding-left: calc((100vw - min(620px, 82vw)) / 2) !important;
padding-right: calc((100vw - min(620px, 82vw)) / 2) !important;
}
.lovol-carousel-slide {
flex-basis: min(620px, 82vw) !important;
width: min(620px, 82vw) !important;
}
.lovol-carousel-caption {
width: min(100%, 620px) !important;
}
}
/* =========================================================
TABLET 701-1100px - sekcje pionowe
Sekcje dwukolumnowe czesto byly za ciasne, wiec skladamy je
w jeden logiczny pionowy segment.
========================================================= */
@media screen and (min-width: 701px) and (max-width: 1100px) {
.lovol-pillars-layout {
display: block !important;
}
.lovol-pillars-layout > .contact-flt,
.lovol-pillars-layout > .w60,
.lovol-pillars-layout > .w40 {
float: none !important;
width: 100% !important;
max-width: 100% !important;
display: block !important;
}
.lovol-pillars-layout > .w40 {
margin-top: 22px !important;
}
.lovol-pillars-image {
height: 420px !important;
min-height: 420px !important;
border-radius: 24px !important;
}
.lovol-offer-card-inner {
min-height: auto !important;
}
.lovol-year-badge {
grid-template-columns: 120px minmax(0, 1fr) !important;
gap: 28px !important;
}
.lovol-year-badge-photo {
grid-column: 1 / -1 !important;
min-height: 280px !important;
}
}
/* =========================================================
TABLET 701-1100px - karty i bloki
Ujednolicenie kart i blokow, zeby nie bylo raz desktopu,
raz mobile w sasiednich segmentach.
========================================================= */
@media screen and (min-width: 701px) and (max-width: 1100px) {
.lovol-text-feature {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
.lovol-text-feature h2,
.lovol-text-feature-content {
max-width: 100% !important;
}
.lovol-feature-cards,
.lovol-feature-cards.standard {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.lovol-feature-card {
padding-left: 22px !important;
padding-right: 22px !important;
}
.lovol-feature-card:nth-child(2n) {
border-right: 0 !important;
}
.lovol-feature-card:nth-child(2n + 1) {
border-right: 1px solid rgba(0, 0, 0, 0.10) !important;
}
.lovol-tech-table {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
}
/* =========================================================
MOBILE 700px-
Jeden standard szerokosci, mniejsze przerwy, bez poziomego
rozjezdzania sekcji.
========================================================= */
@media screen and (max-width: 700px) {
html,
body {
overflow-x: hidden;
}
.lovol-models-anchor-inner,
.lovol-carousel-content,
.lovol-model-hero-opis-inner,
.lovol-model-block-hero-opis-inner,
.lovol-color-section .pagcontent,
.lovol-section-title,
.lovol-feature-cards,
.lovol-feature-cards.standard {
width: min(100% - 28px, 100%) !important;
max-width: 100% !important;
}
.lovol-model-hero,
.lovol-model-block-hero {
min-height: 520px !important;
}
.lovol-model-hero-title {
font-size: clamp(38px, 12vw, 56px) !important;
line-height: 0.98 !important;
}
.lovol-model-hero-intro {
font-size: 16px !important;
line-height: 1.42 !important;
}
.lovol-model-hero-meta {
font-size: 12px !important;
border-radius: 18px !important;
}
.lovol-model-hero-cta {
width: 100% !important;
}
.lovol-model-hero-cta .hero-btn,
.lovol-hero-text-card-actions .hero-btn {
width: 100% !important;
min-width: 0 !important;
}
.lovol-pillars-layout {
display: block !important;
}
.lovol-pillars-layout > .contact-flt,
.lovol-pillars-layout > .w60,
.lovol-pillars-layout > .w40 {
float: none !important;
width: 100% !important;
max-width: 100% !important;
display: block !important;
}
.lovol-pillars-layout > .w40 {
margin-top: 18px !important;
}
.lovol-color-view,
.lovol-color-image-wrap {
min-height: 410px !important;
}
.lovol-color-image-wrap {
padding: 16px !important;
}
.lovol-color-image {
max-height: 330px !important;
border-radius: 20px !important;
}
.lovol-carousel-viewport {
width: 100vw !important;
max-width: 100vw !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
left: 50% !important;
transform: none !important;
}
.lovol-carousel-track {
gap: 14px !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
.lovol-carousel-slide {
flex-basis: calc(100vw - 28px) !important;
width: calc(100vw - 28px) !important;
}
.lovol-feature-cards,
.lovol-feature-cards.standard {
grid-template-columns: 1fr !important;
row-gap: 24px !important;
border-top: 0 !important;
padding-top: 0 !important;
}
.lovol-feature-card,
.lovol-feature-card:nth-child(n) {
padding: 0 0 22px 0 !important;
border-right: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
}
.lovol-feature-card:last-child {
border-bottom: 0 !important;
}
.lovol-year-badge {
grid-template-columns: 1fr !important;
}
.lovol-year-badge-photo {
grid-column: auto !important;
}
}
/* =========================================================
TABELA PARAMETROW - MOBILE 700px-
Na telefonach karta jest czytelniejsza niz szeroki
scroll. Wymaga data-label przy komorkach wartosci.
========================================================= */
@media screen and (max-width: 700px) {
.lovol-tech-table {
display: grid !important;
gap: 12px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
overflow: visible !important;
}
.lovol-tech-table-head {
display: none !important;
}
.lovol-tech-table-row {
min-width: 0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
border: 1px solid rgba(0, 0, 0, 0.10) !important;
border-radius: 14px !important;
overflow: hidden !important;
background: #fff !important;
}
.lovol-tech-table-cell {
min-height: auto !important;
display: grid !important;
grid-template-columns: 42% 1fr !important;
gap: 12px !important;
align-items: center !important;
padding: 12px 14px !important;
border-right: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
font-size: 14px !important;
line-height: 1.35 !important;
background: #fff !important;
}
.lovol-tech-table-cell:last-child {
border-bottom: 0 !important;
}
.lovol-tech-table-row:not(.lovol-tech-table-head) .lovol-tech-table-cell:first-child,
.lovol-tech-table-row-common .lovol-tech-table-param {
display: block !important;
padding: 14px 16px !important;
background: #f3f4f5 !important;
color: #050505 !important;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.035em !important;
text-transform: uppercase !important;
}
.lovol-tech-table-cell:not(:first-child)::before {
content: attr(data-label) !important;
font-family: var(--font-elements), var(--font-main), Arial, sans-serif !important;
font-size: 12px !important;
line-height: 1.25 !important;
font-weight: 500 !important;
letter-spacing: 0.025em !important;
text-transform: uppercase !important;
color: rgba(0, 0, 0, 0.48) !important;
}
.lovol-tech-table-row-common .lovol-tech-table-common-value {
grid-column: auto !important;
display: block !important;
padding: 13px 16px !important;
text-align: left !important;
justify-content: flex-start !important;
background: #fff !important;
color: rgba(0, 0, 0, 0.82) !important;
font-weight: 400 !important;
}
.lovol-tech-table-row-common .lovol-tech-table-common-value::before {
content: "" !important;
display: none !important;
}
}
/* =========================================================
SMALL MOBILE 500px-
Ostatnie korekty gestosci.
========================================================= */
@media screen and (max-width: 500px) {
#men_up4 .baner_opis_text {
max-width: 94% !important;
}
.lovol-color-view,
.lovol-color-image-wrap {
min-height: 360px !important;
}
.lovol-color-image {
max-height: 290px !important;
}
.lovol-carousel-image {
height: clamp(230px, 72vw, 330px) !important;
}
.lovol-offer-card-inner,
.lovol-year-badge,
.lovol-hero-text-card {
border-radius: 18px !important;
}
.lovol-tech-table-cell {
grid-template-columns: 1fr !important;
gap: 4px !important;
}
}