/* Start custom CSS for html, class: .elementor-element-b776996 *//* =========================================================
BALLONSWELT
LIEBE & HERZBALLONS
GLOBAL CATEGORY STRIP SYSTEM
LOCKED BALLONSWELT DESIGN + COLOR THEME
========================================================= */
/* =========================================================
ROOT
========================================================= */
.bw-love-wow {
position: relative;
isolation: isolate;
width: 100vw;
margin:
12px
calc(50% - 50vw)
16px;
overflow: hidden;
background: #FFFBF8;
border-top:
1px solid rgba(184, 95, 112, 0.14);
border-bottom:
1px solid rgba(184, 95, 112, 0.14);
box-sizing: border-box;
}
.bw-love-wow *,
.bw-love-wow *::before,
.bw-love-wow *::after {
box-sizing: border-box;
}
/* =========================================================
SHARED WIDTH
========================================================= */
.bw-love-wow-top {
width: 100%;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
}
.bw-love-wow-nav {
width: calc(100% - 40px);
max-width: 1060px;
margin-left: auto;
margin-right: auto;
}
/* =========================================================
TOP
========================================================= */
.bw-love-wow-top {
position: relative;
display: grid;
grid-template-columns:
minmax(0, 1fr)
165px;
align-items: center;
gap: 20px;
min-height: 80px;
padding:
12px
20px
11px;
border-bottom:
1px solid rgba(60, 48, 51, 0.10);
}
/* =========================================================
COPY
========================================================= */
.bw-love-wow-copy {
min-width: 0;
}
/* =========================================================
EYEBROW
========================================================= */
.bw-love-wow-eyebrow {
display: flex;
align-items: center;
gap: 8px;
margin:
0
0
7px;
color: #B85F70;
font-size: 8px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.45px;
text-transform: uppercase;
}
.bw-love-wow-eyebrow::before {
content: "";
display: block;
width: 19px;
height: 1px;
flex:
0
0
19px;
background: #B85F70;
opacity: 0.65;
}
/* =========================================================
MAIN COPY ROW
========================================================= */
.bw-love-wow-main {
display: grid;
grid-template-columns:
auto
minmax(250px, 470px);
align-items: center;
gap: 26px;
}
/* =========================================================
HEADING
========================================================= */
.bw-love-wow h2 {
margin: 0;
color: #3C3033;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(27px, 2.25vw, 34px);
line-height: 1.02;
font-weight: 400;
letter-spacing: -0.65px;
white-space: nowrap;
}
.bw-love-wow h2 em {
color: #B85F70;
font-style: italic;
font-weight: 400;
}
/* =========================================================
DESCRIPTION
========================================================= */
.bw-love-wow-text {
max-width: 470px;
margin: 0;
color: #8A7A7D;
font-size: 10.5px;
line-height: 1.48;
}
/* =========================================================
BENEFITS
========================================================= */
.bw-love-wow-benefits {
display: flex;
align-items: center;
flex-wrap: wrap;
gap:
4px
17px;
margin-top: 7px;
}
.bw-love-wow-benefits span {
color: #8A7A7D;
font-size: 7.6px;
line-height: 1.25;
font-weight: 500;
white-space: nowrap;
}
/* =========================================================
ANIMATED ART
========================================================= */
.bw-love-wow-art {
position: relative;
display: block;
width: 165px;
height: 70px;
justify-self: end;
pointer-events: none;
}
/* =========================================================
SPARKS
========================================================= */
.bw-love-wow-spark {
position: absolute;
color: #B85F70;
font-size: 7px;
line-height: 1;
opacity: 0.45;
animation:
bwLoveSpark
4.4s
ease-in-out
infinite;
}
.bw-love-wow-spark-1 {
top: 8px;
left: 5px;
}
.bw-love-wow-spark-2 {
top: 44px;
right: 1px;
animation-delay: -1.2s;
}
.bw-love-wow-spark-3 {
top: 6px;
right: 26px;
font-size: 5px;
animation-delay: -2.1s;
}
/* =========================================================
BALLOONS
========================================================= */
.bw-love-wow-balloon {
position: absolute;
display: block;
width: 40px;
height: 76px;
transform-origin:
50%
100%;
}
.bw-love-wow-balloon-body {
position: relative;
display: block;
width: 34px;
height: 40px;
margin:
0
auto;
font-size: 0;
border-radius:
52%
52%
48%
48%;
box-shadow:
inset
5px
5px
7px
rgba(255, 255, 255, 0.28),
inset
-5px
-6px
9px
rgba(60, 48, 51, 0.08);
}
.bw-love-wow-balloon-body::before {
content: "";
position: absolute;
top: 7px;
left: 8px;
width: 6px;
height: 10px;
border-radius: 50%;
background:
rgba(255, 255, 255, 0.38);
transform:
rotate(25deg);
}
.bw-love-wow-balloon-body::after {
content: "";
position: absolute;
left: 50%;
bottom: -4px;
width: 6px;
height: 6px;
background: inherit;
transform:
translateX(-50%)
rotate(45deg);
}
.bw-love-wow-balloon-string {
display: block;
width: 1px;
height: 30px;
margin:
4px
auto
0;
background:
rgba(138, 122, 125, 0.35);
}
/* =========================================================
BALLOON POSITIONS
========================================================= */
.bw-love-wow-balloon-1 {
top: 2px;
left: 1px;
animation:
bwLoveFloat1
5.2s
ease-in-out
infinite;
}
.bw-love-wow-balloon-1
.bw-love-wow-balloon-body {
background: #E9C7CE;
}
.bw-love-wow-balloon-2 {
top: 15px;
left: 59px;
animation:
bwLoveFloat2
5.9s
ease-in-out
infinite;
}
.bw-love-wow-balloon-2
.bw-love-wow-balloon-body {
background: #B85F70;
}
.bw-love-wow-balloon-3 {
top: 0;
left: 115px;
animation:
bwLoveFloat3
6.4s
ease-in-out
infinite;
}
.bw-love-wow-balloon-3
.bw-love-wow-balloon-body {
background: #F9F1F2;
}
/* =========================================================
CATEGORY NAVIGATION
========================================================= */
.bw-love-wow-nav {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
align-items: start;
padding:
11px
0
12px;
}
/* =========================================================
CATEGORY
========================================================= */
.bw-love-wow-choice {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-width: 0;
padding:
0
18px;
color: #3C3033 !important;
text-align: center;
text-decoration: none !important;
}
/* =========================================================
SEPARATORS
========================================================= */
.bw-love-wow-choice:not(:first-child)::before {
content: "";
position: absolute;
left: 0;
top: 14px;
width: 1px;
height: 37px;
background:
rgba(60, 48, 51, 0.10);
}
/* =========================================================
MOTIF
========================================================= */
.bw-love-wow-motif {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex:
0
0
52px;
margin-bottom: 7px;
border:
1px solid
rgba(184, 95, 112, 0.20);
border-radius: 50%;
background: #FFFFFF;
color: #B85F70;
font-family:
"Apple Color Emoji",
"Segoe UI Emoji",
"Noto Color Emoji",
Georgia,
serif;
font-size: 21px;
line-height: 1;
box-shadow:
0
3px
10px
rgba(60, 48, 51, 0.03);
transition:
transform
280ms
cubic-bezier(.16, 1, .3, 1),
border-color
220ms
ease,
box-shadow
280ms
ease,
background-color
220ms
ease;
}
/* =========================================================
INDIVIDUAL MOTIFS
SAME PALETTE — NO CATEGORY-SPECIFIC COLORS
========================================================= */
.bw-love-wow-choice-heart
.bw-love-wow-motif,
.bw-love-wow-choice-message
.bw-love-wow-motif,
.bw-love-wow-choice-valentine
.bw-love-wow-motif,
.bw-love-wow-choice-favourite
.bw-love-wow-motif {
background: #FFFFFF;
border-color:
rgba(184, 95, 112, 0.20);
color: #B85F70;
}
/* TEXT SYMBOLS */
.bw-love-wow-choice-heart
.bw-love-wow-motif,
.bw-love-wow-choice-favourite
.bw-love-wow-motif {
font-family:
Georgia,
"Times New Roman",
serif;
}
.bw-love-wow-choice-heart
.bw-love-wow-motif {
font-size: 23px;
}
.bw-love-wow-choice-favourite
.bw-love-wow-motif {
font-size: 18px;
}
/* =========================================================
CATEGORY COPY
========================================================= */
.bw-love-wow-choice-copy {
min-width: 0;
}
.bw-love-wow-choice-copy strong {
display: block;
margin-bottom: 3px;
color: #3C3033;
font-size: 11px;
line-height: 1.18;
font-weight: 700;
transition:
color
220ms
ease;
}
.bw-love-wow-choice-copy small {
display: block;
color: #8A7A7D;
font-size: 7.4px;
line-height: 1.3;
}
/* =========================================================
HOVER
========================================================= */
@media
(hover:hover)
and
(pointer:fine) {
.bw-love-wow-choice:hover
.bw-love-wow-motif {
border-color:
rgba(184, 95, 112, 0.42);
background: #F9F1F2;
box-shadow:
0
8px
18px
rgba(60, 48, 51, 0.055);
transform:
translateY(-3px)
scale(1.035);
}
.bw-love-wow-choice:hover
.bw-love-wow-choice-copy strong {
color: #B85F70;
}
}
/* =========================================================
FOCUS
========================================================= */
.bw-love-wow-choice:focus-visible {
outline: none;
}
.bw-love-wow-choice:focus-visible
.bw-love-wow-motif {
outline:
2px solid
rgba(184, 95, 112, 0.45);
outline-offset: 3px;
}
/* =========================================================
ANIMATIONS
========================================================= */
@keyframes bwLoveFloat1 {
0%,
100% {
transform:
translate3d(0, 0, 0)
rotate(-3deg);
}
50% {
transform:
translate3d(2px, -6px, 0)
rotate(2deg);
}
}
@keyframes bwLoveFloat2 {
0%,
100% {
transform:
translate3d(0, 0, 0)
scale(0.84)
rotate(3deg);
}
50% {
transform:
translate3d(-2px, -5px, 0)
scale(0.84)
rotate(-2deg);
}
}
@keyframes bwLoveFloat3 {
0%,
100% {
transform:
translate3d(0, 0, 0)
scale(0.94)
rotate(2deg);
}
50% {
transform:
translate3d(2px, -7px, 0)
scale(0.94)
rotate(-2deg);
}
}
@keyframes bwLoveSpark {
0%,
100% {
opacity: 0.18;
transform:
scale(0.85);
}
50% {
opacity: 0.65;
transform:
scale(1.1);
}
}
/* =========================================================
TABLET
========================================================= */
@media
(min-width: 768px)
and
(max-width: 1024px) {
.bw-love-wow-top {
max-width: 900px;
grid-template-columns:
minmax(0, 1fr)
125px;
gap: 12px;
min-height: 76px;
padding:
11px
15px;
}
.bw-love-wow-nav {
width:
calc(100% - 30px);
max-width: 880px;
}
.bw-love-wow-main {
grid-template-columns:
auto
minmax(220px, 1fr);
gap: 18px;
}
.bw-love-wow h2 {
font-size: 25px;
}
.bw-love-wow-text {
font-size: 9.5px;
}
.bw-love-wow-art {
width: 125px;
transform:
scale(0.76);
transform-origin:
center right;
}
.bw-love-wow-motif {
width: 48px;
height: 48px;
flex-basis: 48px;
font-size: 19px;
}
.bw-love-wow-choice {
padding:
0
10px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media
(max-width: 767px) {
.bw-love-wow {
margin:
8px
calc(50% - 50vw)
12px;
}
.bw-love-wow-top {
grid-template-columns:
minmax(0, 1fr)
55px;
gap: 5px;
min-height: 0;
padding:
10px
10px
9px
12px;
}
.bw-love-wow-main {
display: block;
}
.bw-love-wow-eyebrow {
margin-bottom: 6px;
font-size: 6.2px;
letter-spacing: 1.05px;
}
.bw-love-wow h2 {
margin-bottom: 6px;
font-size:
clamp(20px, 5.8vw, 25px);
line-height: 1.03;
white-space: normal;
}
.bw-love-wow h2 em {
display: block;
margin-top: 2px;
}
.bw-love-wow-text {
display: none;
}
.bw-love-wow-benefits {
gap:
3px
9px;
margin-top: 6px;
}
.bw-love-wow-benefits span {
font-size: 5.8px;
}
.bw-love-wow-benefits span:nth-child(3) {
display: none;
}
.bw-love-wow-art {
width: 55px;
height: 52px;
transform:
scale(0.40);
transform-origin:
center right;
}
/* FOUR ACROSS */
.bw-love-wow-nav {
width: 100%;
grid-template-columns:
repeat(4, minmax(0, 1fr));
padding:
9px
2px
10px;
}
.bw-love-wow-choice {
padding:
0
3px;
}
.bw-love-wow-choice:not(:first-child)::before {
display: none;
}
.bw-love-wow-motif {
width: 40px;
height: 40px;
flex-basis: 40px;
margin-bottom: 6px;
font-size: 17px;
box-shadow: none;
}
.bw-love-wow-choice-heart
.bw-love-wow-motif {
font-size: 19px;
}
.bw-love-wow-choice-favourite
.bw-love-wow-motif {
font-size: 15px;
}
.bw-love-wow-choice-copy strong {
margin: 0;
font-size: 8.2px;
line-height: 1.15;
}
.bw-love-wow-choice-copy small {
display: none;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media
(max-width: 430px) {
.bw-love-wow-top {
grid-template-columns:
minmax(0, 1fr)
47px;
padding:
9px
8px
8px
10px;
}
.bw-love-wow h2 {
font-size:
clamp(19px, 6vw, 23px);
}
.bw-love-wow-benefits span {
font-size: 5.4px;
}
.bw-love-wow-art {
width: 47px;
transform:
scale(0.34);
}
.bw-love-wow-nav {
padding:
8px
0
9px;
}
.bw-love-wow-motif {
width: 37px;
height: 37px;
flex-basis: 37px;
font-size: 15px;
}
.bw-love-wow-choice-copy strong {
font-size: 7.7px;
}
}
/* =========================================================
VERY SMALL
========================================================= */
@media
(max-width: 350px) {
.bw-love-wow-nav {
grid-template-columns:
repeat(2, minmax(0, 1fr));
row-gap: 12px;
padding:
10px
5px
11px;
}
.bw-love-wow-motif {
width: 40px;
height: 40px;
flex-basis: 40px;
font-size: 17px;
}
.bw-love-wow-choice-copy strong {
font-size: 8.4px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media
(prefers-reduced-motion: reduce) {
.bw-love-wow-balloon,
.bw-love-wow-spark {
animation: none !important;
}
.bw-love-wow-motif,
.bw-love-wow-choice-copy strong {
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-db72413 *//* =========================================================
BALLONSWELT
LIEBE & HERZBALLONS GIFT STORY
SAME DESIGN SYSTEM AS ALL CATEGORY PAGES
========================================================= */
/* =========================================================
ROOT
========================================================= */
.bw-love-giftstory {
position: relative;
width: 100%;
margin:
46px
0
44px;
padding: 0;
background: #fffbf8;
box-sizing: border-box;
}
.bw-love-giftstory *,
.bw-love-giftstory *::before,
.bw-love-giftstory *::after {
box-sizing: border-box;
}
/* =========================================================
INNER
========================================================= */
.bw-love-giftstory-inner {
width:
calc(100% - 40px);
max-width: 1180px;
margin:
0
auto;
border-top:
1px solid
rgba(184, 95, 112, 0.18);
}
/* =========================================================
TOP AREA
========================================================= */
.bw-love-giftstory-top {
display: grid;
grid-template-columns:
minmax(0, 1.52fr)
365px;
align-items: center;
gap: 67px;
width: 100%;
padding:
35px
24px
46px;
}
/* =========================================================
COPY
========================================================= */
.bw-love-giftstory-copy {
min-width: 0;
}
/* =========================================================
EYEBROW
========================================================= */
.bw-love-giftstory-eyebrow {
display: flex;
align-items: center;
gap: 11px;
margin:
0
0
14px;
color: #b85f70;
font-size: 9.5px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
}
.bw-love-giftstory-eyebrow::before {
content: "";
display: block;
width: 28px;
height: 1px;
flex:
0
0
28px;
background: #b85f70;
}
/* =========================================================
HEADING
========================================================= */
.bw-love-giftstory-copy h2 {
max-width: 680px;
margin: 0;
color: #3c3033;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(36px, 3.35vw, 48px);
line-height: 1;
font-weight: 400;
letter-spacing: -1px;
}
.bw-love-giftstory-copy h2 > span {
display: block;
}
.bw-love-giftstory-copy h2 em {
display: block;
margin:
3px
0
6px;
color: #b85f70;
font-weight: 400;
font-style: italic;
}
/* =========================================================
INTRO
========================================================= */
.bw-love-giftstory-intro {
max-width: 700px;
margin-top: 25px;
padding-top: 20px;
border-top:
1px solid
rgba(60, 48, 51, 0.10);
}
.bw-love-giftstory-intro p {
max-width: 630px;
margin: 0;
color: #706467;
font-size: 13px;
line-height: 1.64;
}
/* =========================================================
VISUAL
========================================================= */
.bw-love-giftstory-visual {
position: relative;
display: block;
width: 365px;
height: 435px;
justify-self: end;
margin: 0;
overflow: hidden;
background-color: #f4e1d2;
border-radius:
184px
184px
15px
15px;
box-shadow:
0
19px
42px
rgba(60, 48, 51, 0.105);
}
/* =========================================================
VIDEO
========================================================= */
.bw-love-giftstory-video {
position: absolute;
z-index: 0;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position:
center
center;
}
/* =========================================================
VISUAL FINISH
========================================================= */
.bw-love-giftstory-visual::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(60, 48, 51, 0) 70%,
rgba(60, 48, 51, 0.05) 100%
);
}
/* =========================================================
SIX POINTS
========================================================= */
.bw-love-giftstory-points {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
width: 100%;
border-top:
1px solid
rgba(60, 48, 51, 0.12);
border-bottom:
1px solid
rgba(60, 48, 51, 0.12);
}
/* =========================================================
POINT
========================================================= */
.bw-love-giftstory-point {
position: relative;
display: grid;
grid-template-columns:
32px
minmax(0, 1fr);
gap: 12px;
min-width: 0;
padding:
25px
27px
27px;
transition:
background-color
260ms
ease;
}
/* SECOND ROW */
.bw-love-giftstory-point:nth-child(n + 4) {
border-top:
1px solid
rgba(60, 48, 51, 0.10);
}
/* VERTICAL SEPARATORS */
.bw-love-giftstory-point:not(:nth-child(3n + 1))::before {
content: "";
position: absolute;
top: 26px;
bottom: 26px;
left: 0;
width: 1px;
background:
rgba(60, 48, 51, 0.10);
}
/* =========================================================
NUMBER
========================================================= */
.bw-love-giftstory-number {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border:
1px solid
rgba(184, 95, 112, 0.31);
border-radius: 50%;
color: #b85f70;
font-size: 8px;
line-height: 1;
font-weight: 700;
transition:
background-color 220ms ease,
color 220ms ease,
border-color 220ms ease;
}
/* =========================================================
POINT HEADINGS
========================================================= */
.bw-love-giftstory-point h3 {
max-width: 285px;
margin:
1px
0
7px;
color: #3c3033;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 16px;
line-height: 1.24;
font-weight: 400;
}
/* =========================================================
POINT TEXT
========================================================= */
.bw-love-giftstory-point p {
max-width: 315px;
margin: 0;
color: #716568;
font-size: 12px;
line-height: 1.6;
}
/* =========================================================
FOOTER
========================================================= */
.bw-love-giftstory-footer {
width: 100%;
padding:
23px
24px
3px;
}
/* =========================================================
FOOTER MAIN
========================================================= */
.bw-love-giftstory-footer-main {
max-width: 880px;
}
.bw-love-giftstory-footer-main > p {
max-width: 850px;
margin:
0
0
16px;
color: #74686b;
font-size: 12.4px;
line-height: 1.64;
}
/* =========================================================
ACTIONS
========================================================= */
.bw-love-giftstory-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap:
9px
23px;
}
/* =========================================================
PRIMARY
========================================================= */
.bw-love-giftstory-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding-bottom: 4px;
color: #b85f70 !important;
border-bottom:
1px solid
rgba(184, 95, 112, 0.55);
font-size: 10.5px;
line-height: 1.2;
font-weight: 700;
text-decoration: none !important;
}
.bw-love-giftstory-primary span {
transition:
transform
250ms
cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
SECONDARY
========================================================= */
.bw-love-giftstory-secondary {
color: #75676a !important;
font-size: 9.5px;
line-height: 1.2;
font-weight: 600;
text-decoration: none !important;
transition:
color
220ms
ease;
}
/* =========================================================
HOVER
========================================================= */
@media
(hover: hover)
and
(pointer: fine) {
.bw-love-giftstory-point:hover {
background:
rgba(249, 241, 242, 0.40);
}
.bw-love-giftstory-point:hover
.bw-love-giftstory-number {
color: #ffffff;
background: #b85f70;
border-color: #b85f70;
}
.bw-love-giftstory-primary:hover span {
transform:
translateX(4px);
}
.bw-love-giftstory-secondary:hover {
color: #b85f70 !important;
}
}
/* =========================================================
TABLET
========================================================= */
@media
(min-width: 768px)
and
(max-width: 1050px) {
.bw-love-giftstory {
margin:
40px
0
38px;
}
.bw-love-giftstory-inner {
width:
calc(100% - 34px);
}
.bw-love-giftstory-top {
grid-template-columns:
minmax(0, 1fr)
300px;
gap: 38px;
padding:
31px
5px
39px;
}
.bw-love-giftstory-copy h2 {
font-size:
clamp(32px, 4vw, 41px);
}
.bw-love-giftstory-intro p {
font-size: 12px;
}
.bw-love-giftstory-visual {
width: 300px;
height: 380px;
border-radius:
150px
150px
12px
12px;
}
.bw-love-giftstory-point {
grid-template-columns:
29px
minmax(0, 1fr);
gap: 10px;
padding:
22px
17px
24px;
}
.bw-love-giftstory-point h3 {
font-size: 14.5px;
}
.bw-love-giftstory-point p {
font-size: 11.5px;
}
.bw-love-giftstory-footer {
padding-left: 5px;
padding-right: 5px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media
(max-width: 767px) {
.bw-love-giftstory {
margin:
32px
0
31px;
}
.bw-love-giftstory-inner {
width:
calc(100% - 26px);
}
/* TOP */
.bw-love-giftstory-top {
display: flex;
flex-direction: column;
gap: 25px;
padding:
27px
0
32px;
}
.bw-love-giftstory-copy h2 {
max-width: 560px;
font-size:
clamp(28px, 8vw, 37px);
}
.bw-love-giftstory-intro {
margin-top: 19px;
padding-top: 16px;
}
.bw-love-giftstory-intro p {
max-width: none;
font-size: 12.4px;
line-height: 1.6;
}
/* VISUAL */
.bw-love-giftstory-visual {
width:
min(100%, 380px);
height: 420px;
margin:
0
auto;
border-radius:
175px
175px
12px
12px;
}
/* POINTS */
.bw-love-giftstory-points {
display: block;
}
.bw-love-giftstory-point {
grid-template-columns:
29px
minmax(0, 1fr);
gap: 10px;
padding:
19px
0
20px;
border-top:
1px solid
rgba(60, 48, 51, 0.10);
}
.bw-love-giftstory-point:first-child {
border-top: 0;
}
.bw-love-giftstory-point::before {
display: none !important;
}
.bw-love-giftstory-number {
width: 26px;
height: 26px;
}
.bw-love-giftstory-point h3 {
max-width: 520px;
margin-bottom: 6px;
font-size: 15.5px;
}
.bw-love-giftstory-point p {
max-width: 600px;
font-size: 12px;
line-height: 1.6;
}
/* FOOTER */
.bw-love-giftstory-footer {
padding:
20px
0
3px;
}
.bw-love-giftstory-footer-main > p {
font-size: 11.8px;
line-height: 1.62;
}
.bw-love-giftstory-actions {
margin-top: 15px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media
(max-width: 430px) {
.bw-love-giftstory-inner {
width:
calc(100% - 20px);
}
.bw-love-giftstory-copy h2 {
font-size: 27px;
}
.bw-love-giftstory-visual {
width: 100%;
height: 385px;
border-radius:
150px
150px
10px
10px;
}
.bw-love-giftstory-intro p {
font-size: 12px;
}
.bw-love-giftstory-point h3 {
font-size: 15px;
}
.bw-love-giftstory-point p {
font-size: 11.7px;
}
.bw-love-giftstory-actions {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media
(prefers-reduced-motion: reduce) {
.bw-love-giftstory-video {
display: none;
}
.bw-love-giftstory-point,
.bw-love-giftstory-number,
.bw-love-giftstory-primary span,
.bw-love-giftstory-secondary {
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-84e5e1c *//* =========================================================
BALLONSWELT
LIEBE & HERZBALLONS FAQ
GLOBAL BALLONSWELT FAQ SYSTEM
========================================================= */
/* =========================================================
ROOT / FULL BLEED
========================================================= */
.bw-love-faq-static {
position: relative;
left: 50%;
width: 100vw;
max-width: none;
margin:
52px
0
46px;
padding: 0;
transform:
translateX(-50%);
background: #FFFBF8;
overflow-x: clip;
box-sizing: border-box;
}
.bw-love-faq-static *,
.bw-love-faq-static *::before,
.bw-love-faq-static *::after {
box-sizing: border-box;
}
/* =========================================================
MAIN SPLIT
========================================================= */
.bw-love-faq-static-inner {
position: relative;
display: grid;
grid-template-columns:
46%
54%;
width: 100%;
min-height: 555px;
margin: 0;
padding: 0;
overflow: hidden;
background: #FFFBF8;
border-top:
1px solid
rgba(184, 95, 112, 0.13);
border-bottom:
1px solid
rgba(184, 95, 112, 0.13);
}
/* =========================================================
LEFT MEDIA
========================================================= */
.bw-love-faq-static-media {
position: relative;
width: 100%;
min-width: 0;
min-height: 555px;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3C3033;
background-image:
url("/img/cms/ballonswelt-faq-dark-background.webp") !important;
background-repeat:
no-repeat !important;
background-size:
cover !important;
background-position:
60% center !important;
}
/* =========================================================
IMAGE OVERLAY
========================================================= */
.bw-love-faq-static-media::before {
content: "";
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(60, 48, 51, 0.76) 0%,
rgba(60, 48, 51, 0.48) 38%,
rgba(60, 48, 51, 0.16) 72%,
rgba(60, 48, 51, 0.03) 100%
);
}
/* =========================================================
LOWER SHADE
========================================================= */
.bw-love-faq-static-shade {
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(60, 48, 51, 0) 0%,
rgba(60, 48, 51, 0.04) 44%,
rgba(60, 48, 51, 0.30) 67%,
rgba(60, 48, 51, 0.82) 100%
);
}
/* =========================================================
LEFT CONTENT
========================================================= */
.bw-love-faq-static-media-content {
position: absolute;
z-index: 4;
left: 17%;
right: 8%;
bottom: 12.5%;
max-width: 590px;
color: #FFFFFF;
}
/* =========================================================
LABEL
========================================================= */
.bw-love-faq-static-label {
display: flex;
align-items: center;
gap: 11px;
margin:
0
0
13px;
color: #FFFFFF;
font-size: 9px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.9px;
text-transform: uppercase;
}
.bw-love-faq-static-label span {
display: block;
width: 29px;
height: 1px;
flex:
0
0
29px;
background:
rgba(255, 255, 255, 0.82);
}
/* =========================================================
LEFT HEADING
========================================================= */
.bw-love-faq-static-media-content h2 {
max-width: 560px;
margin:
0
0
14px;
padding: 0;
color: #FFFFFF;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(37px, 3vw, 52px);
line-height: 0.99;
font-weight: 400;
letter-spacing: -0.9px;
}
.bw-love-faq-static-media-content h2 em {
display: block;
margin-top: 4px;
color: #E9C7CE;
font-weight: 400;
font-style: italic;
}
/* =========================================================
DESCRIPTION
========================================================= */
.bw-love-faq-static-media-content > p {
max-width: 465px;
margin:
0
0
4px;
color:
rgba(255, 255, 255, 0.92);
font-size: 12.5px;
line-height: 1.6;
}
/* =========================================================
RIGHT FAQ PANEL
========================================================= */
.bw-love-faq-static-panel {
position: relative;
width: 100%;
min-width: 0;
min-height: 555px;
margin: 0;
padding:
43px
6vw
38px;
overflow: hidden;
background: #FFFBF8;
}
/* =========================================================
DECORATIVE QUESTION MARK
========================================================= */
.bw-love-faq-static-panel::after {
content: "?";
position: absolute;
z-index: 0;
top: -42px;
right: 3.5%;
color:
rgba(184, 95, 112, 0.025);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 185px;
line-height: 1;
font-style: italic;
pointer-events: none;
}
/* =========================================================
CONTENT WIDTH
========================================================= */
.bw-love-faq-static-head,
.bw-love-faq-static-list {
width: 100%;
max-width: 810px;
margin-left: auto;
margin-right: auto;
}
/* =========================================================
FAQ HEADER
========================================================= */
.bw-love-faq-static-head {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-bottom: 19px;
border-bottom:
1px solid
rgba(60, 48, 51, 0.13);
}
.bw-love-faq-static-head > span {
color: #B85F70;
font-size: 9px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
}
/* =========================================================
LIST
========================================================= */
.bw-love-faq-static-list {
position: relative;
z-index: 2;
padding: 0;
}
/* =========================================================
FAQ ITEM
========================================================= */
.bw-love-faq-static-item {
width: 100%;
margin: 0;
padding: 0;
border: 0;
border-bottom:
1px solid
rgba(60, 48, 51, 0.115);
border-radius: 0;
background: transparent;
overflow: visible;
}
/* =========================================================
SUMMARY
========================================================= */
.bw-love-faq-static-item summary {
position: relative;
display: grid;
grid-template-columns:
31px
minmax(0, 1fr)
40px;
align-items: center;
gap: 14px;
width: 100%;
min-height: 63px;
margin: 0;
padding:
12px
0;
list-style: none;
cursor: pointer;
outline: none;
}
.bw-love-faq-static-item summary::-webkit-details-marker {
display: none;
}
/* =========================================================
NUMBER
========================================================= */
.bw-love-faq-static-number {
color: #B85F70;
font-size: 8.5px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.4px;
}
/* =========================================================
QUESTION
========================================================= */
.bw-love-faq-static-question {
color: #3C3033;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 16.5px;
line-height: 1.32;
font-weight: 400;
transition:
color
220ms
ease,
transform
260ms
cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
PLUS / MINUS
========================================================= */
.bw-love-faq-static-item summary::after {
content: "+";
display: flex;
align-items: center;
justify-content: center;
justify-self: end;
width: 31px;
height: 31px;
border:
1px solid
rgba(184, 95, 112, 0.42);
border-radius: 50%;
color: #B85F70;
background: transparent;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 16px;
line-height: 1;
font-weight: 300;
transition:
color 220ms ease,
background-color 220ms ease,
border-color 220ms ease,
transform 280ms ease;
}
/* OPEN */
.bw-love-faq-static-item[open]
summary::after {
content: "−";
color: #FFFFFF;
background: #B85F70;
border-color: #B85F70;
transform:
rotate(180deg);
}
/* =========================================================
ANSWER
========================================================= */
.bw-love-faq-static-answer {
padding:
0
52px
18px
45px;
}
.bw-love-faq-static-answer p {
max-width: 675px;
margin: 0;
color: #8A7A7D;
font-size: 12.5px;
line-height: 1.67;
}
/* =========================================================
HOVER
========================================================= */
@media
(hover: hover)
and
(pointer: fine) {
.bw-love-faq-static-item summary:hover
.bw-love-faq-static-question {
color: #B85F70;
transform:
translateX(3px);
}
.bw-love-faq-static-item summary:hover::after {
background: #F9F1F2;
border-color:
rgba(184, 95, 112, 0.70);
}
.bw-love-faq-static-item[open]
summary:hover::after {
color: #FFFFFF;
background: #B85F70;
}
}
/* =========================================================
KEYBOARD
========================================================= */
.bw-love-faq-static-item summary:focus-visible {
outline:
2px solid
rgba(184, 95, 112, 0.42);
outline-offset: 3px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media
(min-width: 1600px) {
.bw-love-faq-static-inner {
grid-template-columns:
46%
54%;
}
.bw-love-faq-static-media-content {
left: 17.5%;
}
.bw-love-faq-static-panel {
padding-left: 6.5vw;
padding-right: 6.5vw;
}
}
/* =========================================================
TABLET
========================================================= */
@media
(min-width: 768px)
and
(max-width: 1100px) {
.bw-love-faq-static {
margin:
42px
0
38px;
}
.bw-love-faq-static-inner {
grid-template-columns:
43%
57%;
min-height: 520px;
}
.bw-love-faq-static-media,
.bw-love-faq-static-panel {
min-height: 520px;
}
.bw-love-faq-static-media {
background-position:
63% center !important;
}
.bw-love-faq-static-media-content {
left: 9%;
right: 7%;
bottom: 9%;
}
.bw-love-faq-static-media-content h2 {
font-size:
clamp(31px, 3.9vw, 42px);
}
.bw-love-faq-static-panel {
padding:
34px
30px
29px;
}
.bw-love-faq-static-head,
.bw-love-faq-static-list {
max-width: none;
}
.bw-love-faq-static-question {
font-size: 14.5px;
}
.bw-love-faq-static-answer {
padding:
0
45px
15px
41px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media
(max-width: 767px) {
.bw-love-faq-static {
width: 100vw;
margin:
34px
0
31px;
}
.bw-love-faq-static-inner {
display: block;
min-height: 0;
}
/* LEFT MEDIA */
.bw-love-faq-static-media {
min-height: 330px;
background-position:
62% center !important;
}
.bw-love-faq-static-media-content {
left: 22px;
right: 22px;
bottom: 21px;
max-width: 520px;
}
.bw-love-faq-static-label {
margin-bottom: 9px;
font-size: 8px;
}
.bw-love-faq-static-media-content h2 {
max-width: 470px;
margin-bottom: 10px;
font-size:
clamp(29px, 7.8vw, 38px);
}
.bw-love-faq-static-media-content > p {
max-width: 420px;
margin-bottom: 0;
font-size: 11.5px;
}
/* PANEL */
.bw-love-faq-static-panel {
min-height: 0;
padding:
25px
20px
20px;
}
.bw-love-faq-static-panel::after {
top: -14px;
right: -6px;
font-size: 105px;
}
.bw-love-faq-static-head,
.bw-love-faq-static-list {
max-width: none;
}
.bw-love-faq-static-head {
padding-bottom: 14px;
}
.bw-love-faq-static-head > span {
font-size: 8px;
}
.bw-love-faq-static-item summary {
grid-template-columns:
23px
minmax(0, 1fr)
30px;
gap: 9px;
min-height: 58px;
padding:
11px
0;
}
.bw-love-faq-static-number {
font-size: 7.8px;
}
.bw-love-faq-static-question {
font-size: 13.8px;
}
.bw-love-faq-static-item summary::after {
width: 26px;
height: 26px;
font-size: 14px;
}
.bw-love-faq-static-answer {
padding:
0
36px
15px
32px;
}
.bw-love-faq-static-answer p {
font-size: 11.6px;
line-height: 1.64;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media
(max-width: 430px) {
.bw-love-faq-static-media {
min-height: 290px;
background-position:
65% center !important;
}
.bw-love-faq-static-media-content {
left: 17px;
right: 17px;
bottom: 17px;
}
.bw-love-faq-static-media-content h2 {
font-size: 29px;
}
.bw-love-faq-static-panel {
padding:
22px
14px
18px;
}
.bw-love-faq-static-question {
font-size: 13.3px;
}
.bw-love-faq-static-item summary::after {
width: 24px;
height: 24px;
font-size: 13px;
}
.bw-love-faq-static-answer {
padding:
0
32px
14px
29px;
}
.bw-love-faq-static-answer p {
font-size: 11.3px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media
(prefers-reduced-motion: reduce) {
.bw-love-faq-static-question,
.bw-love-faq-static-item summary::after {
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-24ab39a *//* Ballonswelt Liebe FAQ Section */
.bw-love-faq {
max-width: 1180px;
margin: 42px auto 30px auto;
padding: 0 15px;
box-sizing: border-box;
}
.bw-love-faq-inner {
background: #fff8f9;
border: 1px solid #ead8dc;
border-radius: 22px;
padding: 34px 34px 30px 34px;
box-shadow: 0 10px 28px rgba(175, 92, 108, 0.06);
box-sizing: border-box;
}
.bw-love-faq-heading {
max-width: 820px;
margin: 0 auto 26px auto;
text-align: center;
}
.bw-love-faq-label {
display: block;
margin-bottom: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: #b85f70;
}
.bw-love-faq-heading h2 {
margin: 0 0 12px 0;
font-size: 28px;
line-height: 1.25;
font-weight: 500;
color: #b45d6e;
font-family: Georgia, "Times New Roman", serif;
}
.bw-love-faq-heading p {
margin: 0;
font-size: 14px;
line-height: 1.75;
color: #665d5f;
}
.bw-love-faq-list {
max-width: 900px;
margin: 0 auto;
}
.bw-love-faq-item {
background: #ffffff;
border: 1px solid #ead8dc;
border-radius: 16px;
margin-bottom: 10px;
box-sizing: border-box;
overflow: hidden;
transition: all 0.2s ease;
}
.bw-love-faq-item:hover {
border-color: #d69ca7;
box-shadow: 0 10px 22px rgba(175, 92, 108, 0.08);
}
.bw-love-faq-item summary {
position: relative;
padding: 17px 52px 17px 20px;
color: #2d2d2d;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
cursor: pointer;
list-style: none;
}
.bw-love-faq-item summary::-webkit-details-marker {
display: none;
}
.bw-love-faq-item summary::after {
content: "+";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: #b85f70;
font-size: 24px;
font-weight: 400;
line-height: 1;
}
.bw-love-faq-item[open] summary::after {
content: "−";
}
.bw-love-faq-content {
padding: 0 20px 18px 20px;
color: #6f6668;
font-size: 13.5px;
line-height: 1.75;
}
/* Tablet */
@media only screen and (max-width: 991px) {
.bw-love-faq {
margin: 34px auto 26px auto;
}
.bw-love-faq-inner {
padding: 30px 24px 26px 24px;
}
.bw-love-faq-heading h2 {
font-size: 25px;
}
}
/* Mobile */
@media only screen and (max-width: 767px) {
.bw-love-faq {
margin: 30px auto 24px auto;
padding: 0 12px;
}
.bw-love-faq-inner {
padding: 24px 16px 22px 16px;
border-radius: 18px;
}
.bw-love-faq-label {
font-size: 11px;
letter-spacing: 1.2px;
}
.bw-love-faq-heading {
margin-bottom: 20px;
}
.bw-love-faq-heading h2 {
font-size: 22px;
line-height: 1.3;
}
.bw-love-faq-heading p {
font-size: 13px;
line-height: 1.65;
}
.bw-love-faq-item {
border-radius: 14px;
}
.bw-love-faq-item summary {
padding: 15px 46px 15px 16px;
font-size: 14px;
}
.bw-love-faq-item summary::after {
right: 16px;
font-size: 22px;
}
.bw-love-faq-content {
padding: 0 16px 16px 16px;
font-size: 13px;
line-height: 1.65;
}
}/* End custom CSS */