/* Start custom CSS for html, class: .elementor-element-42b18df *//* =========================================================
BALLONSWELT
MODERN COMPACT OCCASION SECTION
IMAGE-FIT FIX
COMPLETE READY-TO-PASTE CSS
========================================================= */
/* =========================================================
SECTION
========================================================= */
.occasion-section {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 64px 24px 42px;
position: relative;
box-sizing: border-box;
overflow: hidden;
background:
radial-gradient(
circle at 50% 5%,
rgba(233, 188, 196, 0.10),
transparent 32%
),
#fffbf8;
}
.occasion-section::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: min(90%, 1280px);
height: 1px;
transform: translateX(-50%);
background:
linear-gradient(
to right,
transparent,
rgba(215, 184, 190, 0.38),
transparent
);
}
.occasion-container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
}
/* =========================================================
HEADING
========================================================= */
.occasion-heading {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin: 0 0 32px;
text-align: center;
}
.occasion-heading span {
width: 58px;
height: 1px;
background: #dec8cc;
}
.occasion-heading h2 {
margin: 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: clamp(28px, 2.4vw, 36px);
line-height: 1.15;
font-weight: 400;
letter-spacing: -0.55px;
color: #3c3033;
}
.occasion-heading strong {
color: #b85f70;
font-weight: 500;
}
/* =========================================================
GRID
========================================================= */
.occasion-grid {
display: grid;
grid-template-columns:
repeat(5, minmax(0, 1fr));
gap: 17px;
width: 100%;
}
/* =========================================================
CARD
========================================================= */
.occasion-card {
position: relative;
display: block;
min-width: 0;
height: 310px;
overflow: hidden;
border: 0 !important;
border-radius: 19px;
background: #f6eceb;
text-decoration: none !important;
color: #ffffff !important;
isolation: isolate;
box-shadow:
0 5px 18px rgba(66, 42, 47, 0.055);
transform: translateY(0);
transition:
transform 550ms cubic-bezier(.16, 1, .3, 1),
box-shadow 550ms cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
IMAGE WRAPPER
========================================================= */
.occasion-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #f6e9e7;
}
/* =========================================================
IMAGE FIT FIX
IMPORTANT PART
========================================================= */
.occasion-image img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: block;
object-fit: cover;
/*
Move image slightly upward.
46% works better than exact 50% for balloon images.
*/
object-position: center 46%;
/*
Zoom removes empty space that exists
inside the original product image.
*/
transform: scale(1.13);
transform-origin: center center;
transition:
transform 900ms cubic-bezier(.16, 1, .3, 1),
filter 500ms ease;
}
/* =========================================================
OPTIONAL PER-CARD IMAGE ADJUSTMENTS
Useful because each product photo is framed differently
========================================================= */
/* Geburtstag */
.occasion-card:nth-child(1) .occasion-image img {
object-position: center 47%;
transform: scale(1.14);
}
/* Hochzeit */
.occasion-card:nth-child(2) .occasion-image img {
object-position: center 46%;
transform: scale(1.14);
}
/* Baby */
.occasion-card:nth-child(3) .occasion-image img {
object-position: center 47%;
transform: scale(1.13);
}
/* Liebe */
.occasion-card:nth-child(4) .occasion-image img {
object-position: center 46%;
transform: scale(1.14);
}
/* Bestseller */
.occasion-card:nth-child(5) .occasion-image img {
object-position: center 46%;
transform: scale(1.14);
}
/* =========================================================
IMAGE GRADIENT
========================================================= */
.occasion-card::before {
content: "";
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
background:
linear-gradient(
to bottom,
rgba(30, 20, 22, 0) 0%,
rgba(30, 20, 22, 0) 48%,
rgba(30, 20, 22, 0.07) 61%,
rgba(30, 20, 22, 0.60) 100%
);
transition:
background 500ms ease;
}
/* =========================================================
CATEGORY ICON
========================================================= */
.occasion-icon {
position: absolute;
z-index: 5;
left: 50%;
bottom: 80px;
width: 30px;
height: 30px;
margin: 0;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.94);
border:
1px solid rgba(255,255,255,0.76);
color: #b85f70;
box-shadow:
0 3px 12px rgba(56, 34, 39, 0.08);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
transition:
transform 400ms cubic-bezier(.16, 1, .3, 1),
box-shadow 350ms ease;
}
/* decorative lines */
.occasion-icon::before,
.occasion-icon::after {
content: "";
position: absolute;
top: 50%;
width: 20px;
height: 1px;
background:
rgba(255,255,255,0.68);
transform: translateY(-50%);
transition:
width 350ms cubic-bezier(.16, 1, .3, 1),
background 350ms ease;
}
.occasion-icon::before {
right: calc(100% + 8px);
}
.occasion-icon::after {
left: calc(100% + 8px);
}
.occasion-icon svg {
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
transition:
transform 400ms cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
CATEGORY TITLE
========================================================= */
.occasion-card h3 {
position: absolute;
z-index: 4;
left: 15px;
right: 15px;
bottom: 43px;
margin: 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 18px;
line-height: 1.12;
font-weight: 500;
letter-spacing: -0.15px;
color: #ffffff !important;
text-align: center;
text-shadow:
0 2px 11px rgba(0,0,0,0.19);
transition:
transform 400ms cubic-bezier(.16,1,.3,1);
}
/* =========================================================
CTA
========================================================= */
.occasion-card p {
position: absolute;
z-index: 4;
left: 50%;
bottom: 18px;
display: inline-block;
width: max-content;
max-width: calc(100% - 30px);
margin: 0;
padding: 0 0 3px;
transform: translateX(-50%);
font-size: 11px;
line-height: 1.3;
font-weight: 500;
letter-spacing: 0.2px;
color:
rgba(255,255,255,0.90) !important;
text-align: center;
white-space: nowrap;
}
/* CTA underline */
.occasion-card p::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background:
rgba(255,255,255,0.95);
transform: scaleX(0);
transform-origin: right center;
transition:
transform 350ms cubic-bezier(.16,1,.3,1);
}
/* =========================================================
HOVER
========================================================= */
@media (hover: hover) {
.occasion-card:hover {
transform: translateY(-5px);
box-shadow:
0 17px 38px rgba(72, 42, 49, 0.12);
}
/*
Existing 1.13 / 1.14 zoom becomes
slightly stronger on hover.
*/
.occasion-card:nth-child(1):hover .occasion-image img,
.occasion-card:nth-child(2):hover .occasion-image img,
.occasion-card:nth-child(3):hover .occasion-image img,
.occasion-card:nth-child(4):hover .occasion-image img,
.occasion-card:nth-child(5):hover .occasion-image img {
transform: scale(1.19);
}
.occasion-card:hover::before {
background:
linear-gradient(
to bottom,
rgba(30,20,22,0) 0%,
rgba(30,20,22,0) 44%,
rgba(30,20,22,0.08) 59%,
rgba(30,20,22,0.65) 100%
);
}
.occasion-card:hover .occasion-icon {
transform:
translateX(-50%)
translateY(-2px)
scale(1.05);
box-shadow:
0 5px 15px rgba(56,34,39,0.10);
}
.occasion-card:hover .occasion-icon::before,
.occasion-card:hover .occasion-icon::after {
width: 23px;
background:
rgba(255,255,255,0.78);
}
.occasion-card:hover .occasion-icon svg {
transform: scale(1.05);
}
.occasion-card:hover h3 {
transform: translateY(-2px);
}
.occasion-card p:hover::after {
transform: scaleX(1);
transform-origin: left center;
}
}
/* =========================================================
BESTSELLER BADGE
========================================================= */
.occasion-card-featured {
border: 0 !important;
}
.occasion-badge {
position: absolute;
z-index: 6;
top: 13px;
left: 13px;
padding: 5px 8px;
border-radius: 999px;
background:
rgba(174, 80, 99, 0.94);
color: #ffffff;
font-size: 8px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.4px;
box-shadow:
0 3px 10px rgba(89,38,50,0.12);
}
/* =========================================================
QUICK LINKS
========================================================= */
.occasion-quick-links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
width: 100%;
margin: 27px auto 0;
padding: 15px 0 0;
border-top:
1px solid rgba(218,190,196,0.38);
font-size: 12px;
line-height: 1.4;
white-space: nowrap;
}
/* darker label */
.occasion-quick-links span {
margin-right: 17px;
color: #443a3c;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.3px;
white-space: nowrap;
}
.occasion-quick-links a {
position: relative;
display: inline-flex;
align-items: center;
padding: 4px 13px;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #8e5963;
font-size: 12px;
font-weight: 500;
text-decoration: none !important;
transition:
color 300ms ease;
}
/* dot separator */
.occasion-quick-links a:not(:last-child)::after {
content: "·";
position: absolute;
right: -2px;
color: #d7bcc2;
font-size: 15px;
}
/* animated underline */
.occasion-quick-links a::before {
content: "";
position: absolute;
left: 13px;
right: 13px;
bottom: 0;
height: 1px;
background: #b85f70;
transform: scaleX(0);
transform-origin: right center;
transition:
transform 350ms cubic-bezier(.16,1,.3,1);
}
@media (hover: hover) {
.occasion-quick-links a:hover {
color: #b85f70;
}
.occasion-quick-links a:hover::before {
transform: scaleX(1);
transform-origin: left center;
}
}
/* =========================================================
TABLET
========================================================= */
@media only screen and (max-width: 1024px) {
.occasion-section {
padding:
54px
22px
40px;
}
.occasion-heading {
margin-bottom: 28px;
}
.occasion-heading h2 {
font-size: 30px;
}
.occasion-grid {
grid-template-columns:
repeat(3, minmax(0,1fr));
gap: 15px;
}
.occasion-card {
height: 320px;
}
.occasion-icon {
bottom: 82px;
}
.occasion-quick-links {
flex-wrap: wrap;
row-gap: 4px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media only screen and (max-width: 767px) {
.occasion-section {
padding:
42px
0
30px;
}
.occasion-heading {
gap: 11px;
margin:
0
20px
25px;
}
.occasion-heading span {
width: 35px;
}
.occasion-heading h2 {
font-size: 25px;
line-height: 1.18;
}
.occasion-grid {
display: flex;
width: auto;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
padding:
4px
20px
17px;
scroll-snap-type: x mandatory;
scroll-padding-left: 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.occasion-grid::-webkit-scrollbar {
display: none;
}
.occasion-card {
flex:
0
0
69vw;
width: 69vw;
min-width: 69vw;
height: 345px;
border-radius: 19px;
scroll-snap-align: start;
scroll-snap-stop: always;
box-shadow:
0 6px 20px rgba(71,44,50,0.065);
}
/*
Slightly stronger crop on mobile because
the cards are narrower.
*/
.occasion-image img,
.occasion-card:nth-child(1) .occasion-image img,
.occasion-card:nth-child(2) .occasion-image img,
.occasion-card:nth-child(3) .occasion-image img,
.occasion-card:nth-child(4) .occasion-image img,
.occasion-card:nth-child(5) .occasion-image img {
transform: scale(1.16);
object-position: center 46%;
}
.occasion-icon {
width: 29px;
height: 29px;
bottom: 84px;
}
.occasion-icon svg {
width: 11px;
height: 11px;
}
.occasion-icon::before,
.occasion-icon::after {
width: 18px;
}
.occasion-card h3 {
bottom: 44px;
font-size: 19px;
}
.occasion-card p {
bottom: 18px;
font-size: 11px;
}
.occasion-badge {
top: 12px;
left: 12px;
font-size: 8px;
}
.occasion-quick-links {
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
width: auto;
margin:
5px
20px
0;
padding:
16px
0
4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.occasion-quick-links::-webkit-scrollbar {
display: none;
}
.occasion-quick-links span {
flex:
0
0
auto;
margin-right: 14px;
}
.occasion-quick-links a {
flex:
0
0
auto;
padding:
4px
12px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media only screen and (max-width: 420px) {
.occasion-section {
padding-top: 38px;
}
.occasion-heading h2 {
font-size: 23px;
}
.occasion-heading span {
width: 28px;
}
.occasion-card {
flex-basis: 72vw;
width: 72vw;
min-width: 72vw;
height: 325px;
}
.occasion-image img {
transform: scale(1.17);
}
.occasion-icon {
bottom: 80px;
}
.occasion-card h3 {
bottom: 42px;
font-size: 18px;
}
.occasion-card p {
bottom: 17px;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
.occasion-card,
.occasion-image img,
.occasion-icon,
.occasion-icon::before,
.occasion-icon::after,
.occasion-icon svg,
.occasion-card h3,
.occasion-card p::after,
.occasion-quick-links a,
.occasion-quick-links a::before {
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-45f4a9e *//* =========================================================
BALLONSWELT
PREMIUM OCCASION MARQUEE
CREATIVE ELEMENTS / CSS ONLY
COMPLETE READY-TO-PASTE CSS
========================================================= */
/* =========================================================
SECTION
========================================================= */
.bw-occasion-marquee {
position: relative;
width: 100vw;
max-width: none;
margin-left:
calc(50% - 50vw);
margin-right:
calc(50% - 50vw);
overflow: hidden;
box-sizing: border-box;
background:
#3c3033;
border: 0;
}
/* RESET */
.bw-occasion-marquee *,
.bw-occasion-marquee *::before,
.bw-occasion-marquee *::after {
box-sizing: border-box;
}
/* =========================================================
VIEWPORT
========================================================= */
.bw-occasion-marquee-viewport {
position: relative;
width: 100%;
overflow: hidden;
padding:
20px
0;
}
/* =========================================================
SOFT EDGE MASK
This is subtler than putting visible gradient boxes
over the left and right edges.
========================================================= */
.bw-occasion-marquee-viewport {
-webkit-mask-image:
linear-gradient(
to right,
transparent 0,
#000 5%,
#000 95%,
transparent 100%
);
mask-image:
linear-gradient(
to right,
transparent 0,
#000 5%,
#000 95%,
transparent 100%
);
}
/* =========================================================
TRACK
========================================================= */
.bw-occasion-marquee-track {
display: flex;
align-items: center;
width: max-content;
white-space: nowrap;
will-change: transform;
animation:
bwOccasionMove
38s
linear
infinite;
}
/* =========================================================
REPEATED SET
========================================================= */
.bw-occasion-marquee-set {
flex:
0 0 auto;
display: flex;
align-items: center;
gap:
clamp(22px, 2vw, 36px);
padding-right:
clamp(22px, 2vw, 36px);
}
/* =========================================================
WORDS
========================================================= */
.bw-occasion-marquee-set span {
display: inline-block;
color:
#fffaf7;
font-family:
Arial,
Helvetica,
sans-serif;
font-size:
clamp(14px, 1.25vw, 18px);
line-height:
1;
font-weight:
500;
letter-spacing:
0.105em;
text-transform:
uppercase;
opacity:
0.92;
}
/* =========================================================
ROSE DIAMOND
========================================================= */
.bw-occasion-marquee-set i {
display: inline-block;
margin: 0;
color:
#d996a4;
font-family: inherit;
font-size:
7px;
line-height:
1;
font-style:
normal;
opacity:
0.9;
transform:
translateY(-1px);
}
/* =========================================================
ARROW
========================================================= */
.bw-occasion-marquee-set b {
display: inline-block;
margin-left:
-8px;
color:
#d996a4;
font-family:
Arial,
Helvetica,
sans-serif;
font-size:
21px;
line-height:
1;
font-weight:
300;
}
/* =========================================================
LOOP
We have 4 identical sets.
Therefore one set = 25% of total track width.
Moving exactly 25% gives a seamless repeat.
========================================================= */
@keyframes bwOccasionMove {
from {
transform:
translate3d(0, 0, 0);
}
to {
transform:
translate3d(-25%, 0, 0);
}
}
/* =========================================================
DESKTOP HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
.bw-occasion-marquee:hover
.bw-occasion-marquee-track {
animation-play-state:
paused;
}
}
/* =========================================================
TABLET
========================================================= */
@media
(min-width: 768px)
and
(max-width: 1050px) {
.bw-occasion-marquee-viewport {
padding:
18px
0;
}
.bw-occasion-marquee-set {
gap:
25px;
padding-right:
25px;
}
.bw-occasion-marquee-set span {
font-size:
14px;
letter-spacing:
0.09em;
}
.bw-occasion-marquee-set i {
font-size:
6px;
}
.bw-occasion-marquee-set b {
font-size:
19px;
}
.bw-occasion-marquee-track {
animation-duration:
34s;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.bw-occasion-marquee-viewport {
padding:
15px
0;
}
/*
Less fading at the edges on mobile.
We want the words to remain readable.
*/
.bw-occasion-marquee-viewport {
-webkit-mask-image:
linear-gradient(
to right,
transparent 0,
#000 20px,
#000 calc(100% - 20px),
transparent 100%
);
mask-image:
linear-gradient(
to right,
transparent 0,
#000 20px,
#000 calc(100% - 20px),
transparent 100%
);
}
.bw-occasion-marquee-set {
gap:
17px;
padding-right:
17px;
}
.bw-occasion-marquee-set span {
font-size:
12px;
letter-spacing:
0.085em;
}
.bw-occasion-marquee-set i {
font-size:
5px;
}
.bw-occasion-marquee-set b {
margin-left:
-5px;
font-size:
17px;
}
.bw-occasion-marquee-track {
animation-duration:
29s;
}
}
/* =========================================================
SMALL PHONE
========================================================= */
@media (max-width: 420px) {
.bw-occasion-marquee-viewport {
padding:
14px
0;
}
.bw-occasion-marquee-set {
gap:
14px;
padding-right:
14px;
}
.bw-occasion-marquee-set span {
font-size:
11px;
letter-spacing:
0.08em;
}
.bw-occasion-marquee-set i {
font-size:
4px;
}
.bw-occasion-marquee-set b {
margin-left:
-3px;
font-size:
16px;
}
.bw-occasion-marquee-track {
animation-duration:
27s;
}
}
/* =========================================================
VERY SMALL PHONE
========================================================= */
@media (max-width: 360px) {
.bw-occasion-marquee-set {
gap:
12px;
padding-right:
12px;
}
.bw-occasion-marquee-set span {
font-size:
10.5px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.bw-occasion-marquee-track {
animation:
none !important;
}
.bw-occasion-marquee-viewport {
overflow-x:
auto;
-webkit-mask-image:
none;
mask-image:
none;
scrollbar-width:
none;
}
.bw-occasion-marquee-viewport::-webkit-scrollbar {
display:
none;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-414ffec *//* =========================================================
BALLONSWELT – STORY + VIDEO SECTION
COMPLETE RESPONSIVE CSS
DESKTOP + TABLET + MOBILE + SMALL MOBILE
CHANGES:
- Benefits strip integrated into section
- Softer background difference
- No ugly bottom divider
- Mobile benefits are swipeable
- Part of next benefit remains visible
- One subtle swipe-hint movement on mobile
- No continuous auto-scrolling
========================================================= */
/* =========================================================
SECTION
========================================================= */
.bw-story-section {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 0;
overflow: hidden;
box-sizing: border-box;
background: #f7f3ee;
border-top:
1px solid
rgba(60, 48, 51, 0.05);
border-bottom: 0;
}
.bw-story-section *,
.bw-story-section *::before,
.bw-story-section *::after {
box-sizing: border-box;
}
/* =========================================================
MAIN AREA
========================================================= */
.bw-story-main {
width: min(100%, 1240px);
min-height: 500px;
margin: 0 auto;
display: grid;
grid-template-columns:
minmax(0, 1fr)
370px;
gap: 70px;
align-items: center;
padding:
46px
38px;
box-sizing: border-box;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.bw-story-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 600px;
display: flex;
flex-direction: column;
align-items: flex-start;
opacity: 0;
animation:
bwStoryReveal
850ms
cubic-bezier(.16, 1, .3, 1)
forwards;
}
@keyframes bwStoryReveal {
from {
opacity: 0;
transform:
translateY(22px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =========================================================
EYEBROW
========================================================= */
.bw-story-eyebrow {
display: inline-flex;
align-items: center;
gap: 11px;
margin:
0
0
16px;
color: #b85f70;
font-size: 10px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.75px;
text-transform: uppercase;
}
.bw-story-eyebrow::before {
content: "";
flex:
0
0
auto;
width: 30px;
height: 1px;
background: #b85f70;
opacity: 0.52;
}
/* =========================================================
HEADING
========================================================= */
.bw-story-content h2 {
max-width: 570px;
margin:
0
0
20px;
padding: 0;
color: #3c3033;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(38px, 3.4vw, 55px);
line-height: 1.04;
font-weight: 400;
letter-spacing: -1px;
}
.bw-story-content h2 em {
display: block;
color: #b85f70;
font-style: italic;
font-weight: 400;
}
/* =========================================================
DESCRIPTION
========================================================= */
.bw-story-intro {
max-width: 510px;
margin:
0
0
27px;
color: #706568;
font-size: 15px;
line-height: 1.7;
font-weight: 400;
}
/* =========================================================
BUTTON
========================================================= */
.bw-story-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 46px;
padding:
0
23px;
border: 0;
border-radius: 999px;
background: #3c3033;
color: #ffffff !important;
font-size: 12.5px;
line-height: 1;
font-weight: 600;
letter-spacing: 0.15px;
text-decoration: none !important;
box-shadow:
0 8px 22px
rgba(60, 48, 51, 0.13);
transition:
background-color 350ms ease,
transform 450ms cubic-bezier(.16, 1, .3, 1),
box-shadow 450ms ease;
}
.bw-story-button span {
display: inline-block;
font-size: 16px;
transition:
transform
350ms
cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
BUTTON HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
.bw-story-button:hover {
background: #b85f70;
color: #ffffff !important;
text-decoration: none !important;
transform:
translateY(-2px);
box-shadow:
0 12px 26px
rgba(151, 68, 85, 0.20);
}
.bw-story-button:hover span {
transform:
translateX(5px);
}
}
/* =========================================================
VIDEO AREA
========================================================= */
.bw-story-media {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
border-radius:
190px
190px
22px
22px;
background: #e8cbb8;
box-shadow:
0 18px 46px
rgba(80, 53, 45, 0.10);
opacity: 0;
transform:
translateX(24px);
animation:
bwVideoReveal
1s
180ms
cubic-bezier(.16, 1, .3, 1)
forwards;
isolation: isolate;
}
@keyframes bwVideoReveal {
to {
opacity: 1;
transform:
translateX(0);
}
}
/* =========================================================
VIDEO
========================================================= */
.bw-story-video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position:
center 47%;
transform:
scale(1.015);
transition:
transform
1.3s
cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
VIDEO HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
.bw-story-media:hover
.bw-story-video {
transform:
scale(1.045);
}
}
/* =========================================================
SUBTLE VIDEO OVERLAY
========================================================= */
.bw-story-media::after {
content: "";
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
background:
linear-gradient(
to bottom,
rgba(40, 30, 30, 0) 65%,
rgba(40, 30, 30, 0.08) 100%
);
}
/* =========================================================
VIDEO LABEL
========================================================= */
.bw-story-media-label {
position: absolute;
z-index: 5;
left: 18px;
bottom: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
padding:
8px
12px;
border:
1px solid
rgba(255, 255, 255, 0.72);
border-radius: 999px;
background:
rgba(255, 251, 248, 0.90);
color: #4b4043;
font-size: 10.5px;
line-height: 1;
font-weight: 600;
backdrop-filter:
blur(10px);
-webkit-backdrop-filter:
blur(10px);
box-shadow:
0 5px 18px
rgba(55, 39, 43, 0.09);
}
/* =========================================================
VIDEO LABEL DOT
========================================================= */
.bw-story-media-dot {
flex:
0
0
auto;
width: 6px;
height: 6px;
border-radius: 50%;
background: #b85f70;
box-shadow:
0 0 0 4px
rgba(184, 95, 112, 0.12);
animation:
bwStoryPulse
2.4s
ease-in-out
infinite;
}
@keyframes bwStoryPulse {
0%,
100% {
transform:
scale(1);
}
50% {
transform:
scale(1.3);
}
}
/* =========================================================
BENEFITS BAR
========================================================= */
.bw-story-benefits {
position: relative;
width: min(100%, 1240px);
margin: 0 auto;
padding:
18px
28px;
display: grid;
grid-template-columns:
repeat(5, minmax(0, 1fr));
box-sizing: border-box;
/*
Slightly lighter than the main section,
but still warm enough to belong to it.
*/
background: #faf7f3;
/*
Only one subtle separator.
*/
border-top:
1px solid
rgba(60, 48, 51, 0.055);
border-right: 0;
border-bottom: 0;
border-left: 0;
box-shadow: none;
}
/* =========================================================
BENEFIT
========================================================= */
.bw-story-benefit {
position: relative;
min-width: 0;
padding:
2px
16px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* =========================================================
BENEFIT SEPARATORS
========================================================= */
.bw-story-benefit:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 1px;
height: 29px;
transform:
translateY(-50%);
background:
rgba(60, 48, 51, 0.075);
}
/* =========================================================
BENEFIT ICON
========================================================= */
.bw-story-benefit-icon {
flex:
0
0
auto;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f9f1f2;
color: #b85f70;
transition:
transform 400ms cubic-bezier(.16, 1, .3, 1),
background-color 300ms ease;
}
.bw-story-benefit-icon svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
transition:
transform
400ms
cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
BENEFIT TEXT
========================================================= */
.bw-story-benefit > div:last-child {
min-width: 0;
}
.bw-story-benefit strong {
display: block;
margin:
0
0
2px;
color: #3c3033;
font-size: 12px;
line-height: 1.3;
font-weight: 700;
white-space: nowrap;
}
.bw-story-benefit span:not(.bw-story-benefit-icon) {
display: block;
color: #8a7a7d;
font-size: 10.5px;
line-height: 1.3;
white-space: nowrap;
}
/* =========================================================
BENEFIT HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
.bw-story-benefit:hover
.bw-story-benefit-icon {
transform:
translateY(-3px)
scale(1.07);
background:
#f3e4e8;
}
.bw-story-benefit:hover
.bw-story-benefit-icon svg {
transform:
scale(1.08);
}
}
/* =========================================================
TABLET
768px – 1024px
========================================================= */
@media only screen
and (min-width: 768px)
and (max-width: 1024px) {
.bw-story-main {
grid-template-columns:
minmax(0, 1fr)
320px;
gap: 42px;
min-height: 450px;
padding:
38px
28px;
}
.bw-story-content h2 {
font-size:
clamp(32px, 4vw, 43px);
}
.bw-story-intro {
font-size:
14px;
}
.bw-story-media {
height: 440px;
border-radius:
165px
165px
20px
20px;
}
/* =======================================================
TABLET BENEFITS
======================================================= */
.bw-story-benefits {
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap:
17px
0;
padding:
18px
24px;
}
.bw-story-benefit:nth-child(3)::after {
display: none;
}
.bw-story-benefit:nth-child(4) {
grid-column:
1 / 2;
transform:
translateX(50%);
}
.bw-story-benefit:nth-child(5) {
grid-column:
2 / 3;
transform:
translateX(50%);
}
}
/* =========================================================
MOBILE
<= 767px
========================================================= */
@media only screen and (max-width: 767px) {
/* =======================================================
SECTION
======================================================= */
.bw-story-section {
background:
#f7f3ee;
border-bottom:
0 !important;
}
/* =======================================================
MAIN MOBILE FLOW
======================================================= */
.bw-story-main {
display: flex;
flex-direction: column;
min-height: 0;
padding:
37px
18px
18px;
gap:
28px;
}
/* =======================================================
CONTENT
======================================================= */
.bw-story-content {
width: 100%;
max-width: none;
margin: 0;
align-items:
flex-start;
}
.bw-story-eyebrow {
margin-bottom:
12px;
font-size:
9px;
}
.bw-story-content h2 {
max-width:
520px;
margin-bottom:
15px;
font-size:
31px;
line-height:
1.06;
letter-spacing:
-0.7px;
}
.bw-story-content h2 em {
display: inline;
}
.bw-story-intro {
max-width:
500px;
margin-bottom:
21px;
font-size:
13px;
line-height:
1.6;
}
.bw-story-button {
min-height:
43px;
padding:
0
20px;
font-size:
12px;
}
/* =======================================================
MOBILE VIDEO
======================================================= */
.bw-story-media {
width:
min(100%, 360px);
height:
500px;
margin:
0
auto;
border-radius:
180px
180px
20px
20px;
box-shadow:
0 12px 32px
rgba(80, 53, 45, 0.09);
}
.bw-story-video {
object-position:
center 48%;
}
.bw-story-media-label {
left:
15px;
bottom:
15px;
}
/* =======================================================
MOBILE BENEFITS RAIL
- swipeable
- next item partly visible
- no full white card
======================================================= */
.bw-story-benefits {
display: flex;
width: 100%;
margin: 0;
padding:
17px
18px
19px;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
background:
#faf7f3;
border-top:
1px solid
rgba(60, 48, 51, 0.055);
border-right:
0;
border-bottom:
0 !important;
border-left:
0;
box-shadow:
none;
scroll-snap-type:
x mandatory;
scroll-padding-left:
18px;
overscroll-behavior-x:
contain;
-webkit-overflow-scrolling:
touch;
scrollbar-width:
none;
}
.bw-story-benefits::-webkit-scrollbar {
display: none;
}
/* =======================================================
MOBILE BENEFIT CARD
250px maximum leaves part of next item visible.
======================================================= */
.bw-story-benefit,
.bw-story-benefit:nth-child(4),
.bw-story-benefit:nth-child(5) {
flex:
0
0
min(76vw, 250px);
width:
min(76vw, 250px);
min-width:
min(76vw, 250px);
padding:
3px
19px;
justify-content:
flex-start;
transform:
none;
scroll-snap-align:
start;
/*
One-time swipe hint.
It moves once and stops.
*/
animation:
bwBenefitSwipeHint
1100ms
1000ms
cubic-bezier(.16, 1, .3, 1)
1;
}
/*
First item aligns with section edge.
*/
.bw-story-benefit:first-child {
padding-left:
0;
}
/*
On desktop/tablet #3 separator gets removed.
Mobile is horizontal again, so restore it.
*/
.bw-story-benefit:nth-child(3)::after {
display:
block;
}
/* =======================================================
MOBILE SWIPE HINT
Very subtle:
left a little → return to normal.
It runs ONE TIME only.
======================================================= */
@keyframes bwBenefitSwipeHint {
0% {
transform:
translateX(0);
}
38% {
transform:
translateX(-14px);
}
70% {
transform:
translateX(-14px);
}
100% {
transform:
translateX(0);
}
}
.bw-story-benefit-icon {
width:
34px;
height:
34px;
}
.bw-story-benefit strong {
font-size:
11.5px;
}
.bw-story-benefit span:not(.bw-story-benefit-icon) {
font-size:
10px;
}
}
/* =========================================================
SMALL MOBILE
<= 420px
========================================================= */
@media only screen and (max-width: 420px) {
.bw-story-main {
padding:
34px
14px
15px;
gap:
26px;
}
.bw-story-eyebrow {
font-size:
8.5px;
}
.bw-story-content h2 {
font-size:
28px;
line-height:
1.06;
}
.bw-story-intro {
font-size:
12.5px;
line-height:
1.58;
}
.bw-story-media {
width:
min(100%, 330px);
height:
460px;
border-radius:
165px
165px
18px
18px;
}
.bw-story-benefits {
padding:
16px
15px
18px;
scroll-padding-left:
15px;
}
.bw-story-benefit,
.bw-story-benefit:nth-child(4),
.bw-story-benefit:nth-child(5) {
flex-basis:
min(78vw, 235px);
width:
min(78vw, 235px);
min-width:
min(78vw, 235px);
padding:
3px
17px;
}
.bw-story-benefit:first-child {
padding-left:
0;
}
}
/* =========================================================
VERY SMALL MOBILE
<= 360px
========================================================= */
@media only screen and (max-width: 360px) {
.bw-story-main {
padding:
31px
12px
14px;
gap:
24px;
}
.bw-story-eyebrow {
margin-bottom:
10px;
font-size:
8px;
}
.bw-story-eyebrow::before {
width:
25px;
}
.bw-story-content h2 {
margin-bottom:
13px;
font-size:
26px;
line-height:
1.07;
letter-spacing:
-0.55px;
}
.bw-story-intro {
margin-bottom:
19px;
font-size:
12px;
line-height:
1.55;
}
.bw-story-button {
min-height:
42px;
padding:
0
18px;
font-size:
11.5px;
}
.bw-story-media {
width:
min(100%, 305px);
height:
430px;
border-radius:
153px
153px
17px
17px;
}
.bw-story-media-label {
left:
13px;
bottom:
13px;
padding:
7px
10px;
font-size:
9.5px;
}
.bw-story-benefits {
padding:
15px
13px
17px;
scroll-padding-left:
13px;
}
.bw-story-benefit,
.bw-story-benefit:nth-child(4),
.bw-story-benefit:nth-child(5) {
flex-basis:
min(80vw, 220px);
width:
min(80vw, 220px);
min-width:
min(80vw, 220px);
padding:
3px
15px;
}
.bw-story-benefit:first-child {
padding-left:
0;
}
.bw-story-benefit-icon {
width:
32px;
height:
32px;
}
.bw-story-benefit-icon svg {
width:
14px;
height:
14px;
}
.bw-story-benefit strong {
font-size:
11px;
}
.bw-story-benefit span:not(.bw-story-benefit-icon) {
font-size:
9.5px;
}
}
/* =========================================================
ACCESSIBILITY / REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.bw-story-content,
.bw-story-media,
.bw-story-media-dot,
.bw-story-benefit {
animation:
none !important;
opacity:
1 !important;
transform:
none !important;
}
.bw-story-video,
.bw-story-button,
.bw-story-button span,
.bw-story-benefit-icon,
.bw-story-benefit-icon svg {
transition:
none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f70ab20 *//* =========================================================
BALLONSWELT
FEATURED PRODUCT CAROUSEL
FINAL CORRECTED VERSION
IMPORTANT FIX:
- Desktop remains full product-card design
- Compact/tablet/mobile <= 1024px:
IMAGE + BADGE ONLY inside carousel
no duplicate title
no duplicate price
no "Ansehen"
no dark gradient
- 4 visible mobile balloons
- 6 desktop balloons
- tighter spacing
========================================================= */
/* =========================================================
SECTION
========================================================= */
.gift-discovery-section {
position: relative;
isolation: isolate;
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 25px 0;
overflow: hidden;
box-sizing: border-box;
background: #F8F3EE;
color: #3c3033;
--bw-scroll-1: 0px;
--bw-scroll-2: 0px;
--bw-scroll-3: 0px;
--bw-scroll-4: 0px;
--bw-scroll-5: 0px;
--bw-scroll-6: 0px;
}
.gift-discovery-section *,
.gift-discovery-section *::before,
.gift-discovery-section *::after {
box-sizing: border-box;
}
/* =========================================================
CONTENT LAYERS
========================================================= */
.gift-discovery-container {
position: relative;
z-index: 5;
width: 100%;
margin: 0;
padding: 0;
}
.gift-products-block {
position: relative;
z-index: 5;
width: 100%;
}
/* =========================================================
FLOATING BALLOON LAYER
========================================================= */
.bw-floating-balloons {
position: absolute;
z-index: 2;
inset: 0;
display: block !important;
width: 100%;
height: 100%;
overflow: hidden;
visibility: visible !important;
opacity: 1 !important;
pointer-events: none;
}
.bw-float-slot {
position: absolute;
z-index: 2;
display: block !important;
visibility: visible !important;
pointer-events: none;
will-change: transform;
}
/* =========================================================
DESKTOP BALLOON POSITIONS
========================================================= */
.bw-float-slot-1 {
top: 17%;
left: 4%;
transform:
translateY(var(--bw-scroll-1));
}
.bw-float-slot-2 {
top: 12%;
right: 4.5%;
transform:
translateY(var(--bw-scroll-2));
}
.bw-float-slot-3 {
left: 7%;
bottom: 23%;
transform:
translateY(var(--bw-scroll-3));
}
.bw-float-slot-4 {
right: 7%;
bottom: 22%;
transform:
translateY(var(--bw-scroll-4));
}
.bw-float-slot-5 {
top: 46%;
left: 1.2%;
transform:
translateY(var(--bw-scroll-5));
}
.bw-float-slot-6 {
top: 42%;
right: 1.2%;
transform:
translateY(var(--bw-scroll-6));
}
/* =========================================================
BALLOON BASE
========================================================= */
.bw-floating-balloon {
position: relative;
display: block !important;
visibility: visible !important;
border-radius: 50% 50% 46% 46%;
transform-origin: center bottom;
filter: saturate(0.84);
box-shadow:
inset -8px -11px 18px rgba(90, 61, 67, 0.09);
animation:
bwFloatingBalloon 9s ease-in-out infinite;
will-change: transform;
}
/* SHINE */
.bw-floating-balloon::before {
content: "";
position: absolute;
top: 15%;
left: 24%;
width: 18%;
height: 27%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.65);
transform: rotate(21deg);
}
/* STRING */
.bw-floating-balloon::after {
content: "";
position: absolute;
top: calc(100% - 1px);
left: 50%;
width: 1px;
height: 46px;
transform: translateX(-50%);
background:
linear-gradient(
to bottom,
rgba(103, 82, 87, 0.27),
rgba(103, 82, 87, 0.07),
transparent
);
}
/* =========================================================
INDIVIDUAL BALLOONS
========================================================= */
.bw-floating-balloon-1 {
width: 58px;
height: 73px;
opacity: 0.20;
background:
radial-gradient(
circle at 30% 24%,
#fff9fa 0%,
#f4dde3 28%,
#dfb7c2 68%,
#c98e9e 100%
);
animation-duration: 8.5s;
}
.bw-floating-balloon-2 {
width: 67px;
height: 84px;
opacity: 0.17;
background:
radial-gradient(
circle at 30% 24%,
#fffaf3 0%,
#f2dec8 29%,
#dfbf9e 67%,
#c99d72 100%
);
animation-duration: 10.5s;
animation-delay: -3s;
}
.bw-floating-balloon-3 {
width: 48px;
height: 61px;
opacity: 0.18;
background:
radial-gradient(
circle at 30% 24%,
#fff9fb 0%,
#f3dce5 30%,
#ddb7c4 68%,
#c991a3 100%
);
animation-duration: 9.4s;
animation-delay: -5s;
}
.bw-floating-balloon-4 {
width: 55px;
height: 69px;
opacity: 0.17;
background:
radial-gradient(
circle at 30% 24%,
#fffaf4 0%,
#f1dfcf 29%,
#dfc4aa 67%,
#c99e7f 100%
);
animation-duration: 8.8s;
animation-delay: -2s;
}
.bw-floating-balloon-5 {
width: 40px;
height: 51px;
opacity: 0.15;
background:
radial-gradient(
circle at 30% 24%,
#fff8fa 0%,
#f0d2da 29%,
#dcaebc 67%,
#c17e91 100%
);
animation-duration: 10.8s;
animation-delay: -6s;
}
.bw-floating-balloon-6 {
width: 44px;
height: 56px;
opacity: 0.15;
background:
radial-gradient(
circle at 30% 24%,
#fffaf5 0%,
#f2dfcf 29%,
#ddbea5 67%,
#c89e80 100%
);
animation-duration: 9.8s;
animation-delay: -4s;
}
/* =========================================================
BALLOON ANIMATION
========================================================= */
@keyframes bwFloatingBalloon {
0%,
100% {
transform:
translate3d(0, 0, 0)
rotate(-3deg);
}
25% {
transform:
translate3d(5px, -7px, 0)
rotate(1deg);
}
50% {
transform:
translate3d(-3px, -15px, 0)
rotate(3deg);
}
75% {
transform:
translate3d(4px, -7px, 0)
rotate(-1deg);
}
}
/* =========================================================
SECTION LABEL
========================================================= */
.gift-products-block > .section-label {
position: relative;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin: 0 0 7px;
color: #b85f70;
font-size: 8.5px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.55px;
text-transform: uppercase;
text-align: center;
}
.gift-products-block > .section-label::before,
.gift-products-block > .section-label::after {
content: "";
width: 22px;
height: 1px;
background:
rgba(184, 95, 112, 0.42);
}
/* =========================================================
HEADING
========================================================= */
.gift-products-block > h2 {
position: relative;
z-index: 6;
max-width: 850px;
margin: 0 auto 7px;
padding: 0 20px;
color: #382f31;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(31px, 3vw, 43px);
line-height: 1.05;
font-weight: 400;
letter-spacing: -0.85px;
text-align: center;
}
/* =========================================================
SUBTITLE
========================================================= */
.gift-products-block > .section-subtitle {
position: relative;
z-index: 6;
max-width: 670px;
margin: 0 auto 14px;
padding: 0 20px;
color: #796d70;
font-size: 12px;
line-height: 1.55;
text-align: center;
}
/* =========================================================
CAROUSEL
========================================================= */
.gift-carousel {
position: relative;
z-index: 6;
width: 100%;
max-width: 1540px;
margin: 0 auto;
padding: 3px 65px 5px;
}
.gift-carousel-stage {
position: relative;
width: 100%;
overflow: visible;
}
/* =========================================================
BACKGROUND WORD
========================================================= */
.gift-carousel-stage::before {
content: "Ballonboxen";
position: absolute;
z-index: 0;
top: 48%;
left: 50%;
transform:
translate(-50%, -50%);
color:
rgba(60, 48, 51, 0.028);
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(95px, 11vw, 175px);
line-height: 0.85;
font-weight: 400;
letter-spacing: -5px;
white-space: nowrap;
pointer-events: none;
text-decoration: none !important;
border: 0 !important;
}
/* =========================================================
PRODUCT GRID
========================================================= */
.gift-discovery-section .product-grid {
position: relative;
z-index: 3;
width: 100%;
display: grid !important;
grid-template-columns:
0.50fr
0.76fr
1.18fr
0.76fr
0.50fr;
align-items: center;
gap: 18px;
margin: 0;
padding: 0;
background: transparent !important;
}
/* =========================================================
PRODUCT CARD RESET
========================================================= */
.gift-discovery-section .product-card,
.gift-discovery-section .product-card-link {
position: relative;
width: 100%;
min-width: 0;
display: block;
margin: 0;
padding: 0;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: inherit !important;
text-decoration: none !important;
transform-origin: center;
transition:
transform 600ms cubic-bezier(.16, 1, .3, 1),
opacity 470ms ease,
filter 470ms ease;
}
/* =========================================================
FAR PRODUCTS
========================================================= */
.gift-discovery-section .is-left-far,
.gift-discovery-section .is-right-far {
z-index: 1;
opacity: 0.34;
filter:
saturate(0.74)
brightness(0.99);
transform:
translateY(14px)
scale(0.77);
}
/* =========================================================
SIDE PRODUCTS
========================================================= */
.gift-discovery-section .is-left,
.gift-discovery-section .is-right {
z-index: 3;
opacity: 0.60;
filter: saturate(0.87);
transform:
translateY(8px)
scale(0.89);
}
/* =========================================================
ACTIVE PRODUCT
========================================================= */
.gift-discovery-section .is-active {
z-index: 10;
opacity: 1;
filter: saturate(1);
transform:
translateY(0)
scale(1);
}
/* =========================================================
PRODUCT IMAGE
========================================================= */
.gift-discovery-section .product-image {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: 17px;
background: #eadfd6;
box-shadow:
0 9px 26px
rgba(62, 45, 41, 0.055);
isolation: isolate;
transition:
box-shadow 500ms ease,
border-radius 400ms ease;
}
.gift-discovery-section
.is-active
.product-image {
border-radius: 19px;
box-shadow:
0 22px 52px
rgba(62, 45, 41, 0.13);
}
/* =========================================================
IMAGE
========================================================= */
.gift-discovery-section
.product-image > img {
position: absolute;
z-index: 0;
inset: 0;
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
transform: scale(1.025);
transition:
transform
900ms
cubic-bezier(.16, 1, .3, 1);
}
.gift-discovery-section
.is-active
.product-image > img {
transform: scale(1.045);
}
/* =========================================================
DESKTOP IMAGE GRADIENT
========================================================= */
.gift-discovery-section
.product-image::after {
content: "";
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
height: 42%;
pointer-events: none;
background:
linear-gradient(
to top,
rgba(45, 34, 36, 0.73) 0%,
rgba(45, 34, 36, 0.46) 36%,
rgba(45, 34, 36, 0.16) 68%,
rgba(45, 34, 36, 0) 100%
);
}
/* =========================================================
BADGE
========================================================= */
.gift-discovery-section
.product-badge {
position: absolute;
z-index: 6;
top: 12px;
left: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 25px;
padding: 0 10px;
border:
1px solid
rgba(255, 255, 255, 0.72);
border-radius: 999px;
background:
rgba(255, 251, 248, 0.94);
color: #55494c;
font-size: 7px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.65px;
text-transform: uppercase;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}
/* =========================================================
DESKTOP PRODUCT CONTENT
========================================================= */
.gift-discovery-section
.product-content {
position: absolute;
z-index: 5;
left: 0;
right: 0;
bottom: 0;
width: 100%;
margin: 0;
padding:
15px 14px 14px !important;
background:
transparent !important;
border: 0 !important;
text-align: left;
}
.gift-discovery-section
.product-content h3 {
margin: 0 0 6px !important;
padding: 0 !important;
color: #ffffff !important;
font-size: 11px;
line-height: 1.28;
font-weight: 600;
text-shadow:
0 1px 3px
rgba(0, 0, 0, 0.20);
}
.gift-discovery-section
.is-active
.product-content {
padding:
19px 18px 18px !important;
}
.gift-discovery-section
.is-active
.product-content h3 {
max-width: 95%;
margin-bottom: 8px !important;
font-size: 15px;
line-height: 1.27;
}
/* =========================================================
HIDDEN DESCRIPTION
========================================================= */
.gift-discovery-section
.product-description {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* =========================================================
CARD FOOTER
========================================================= */
.gift-discovery-section
.product-footer {
display: flex !important;
align-items: center;
gap: 11px;
width: 100%;
margin: 0;
padding: 0;
}
.gift-discovery-section
.product-price {
display: inline-flex !important;
color: #ffffff !important;
font-size: 10.5px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
}
.gift-discovery-section
.is-active
.product-price {
font-size: 14px;
}
.gift-discovery-section
.product-button {
display: inline-flex !important;
align-items: center;
padding: 0 0 2px !important;
border: 0 !important;
border-bottom:
1px solid
rgba(255,255,255,.55) !important;
background:
transparent !important;
color: #ffffff !important;
font-size: 8.5px;
font-weight: 600;
white-space: nowrap;
}
.gift-discovery-section
.is-active
.product-button {
font-size: 10px;
}
.gift-discovery-section
.is-left-far
.product-content,
.gift-discovery-section
.is-right-far
.product-content {
display: none;
}
/* =========================================================
ARROWS
========================================================= */
.gift-carousel-arrow {
position: absolute;
z-index: 30;
top: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transform:
translateY(-50%);
border:
1px solid
rgba(60,48,51,.12);
border-radius: 50%;
background:
rgba(255,251,248,.97);
color: #3c3033;
cursor: pointer;
box-shadow:
0 8px 22px
rgba(60,48,51,.085);
}
.gift-carousel-prev {
left: 11px;
}
.gift-carousel-next {
right: 11px;
}
.gift-carousel-arrow svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
SUMMARY AREA
========================================================= */
.gift-discovery-footer {
position: relative;
z-index: 10;
width: calc(100% - 40px);
max-width: 1150px;
margin:
15px auto 0;
}
.featured-product-summary {
width: 100%;
display: grid;
grid-template-columns:
minmax(0,1fr)
auto;
align-items: center;
gap:
clamp(28px,4vw,58px);
padding:
19px 4px 20px;
border-top:
1px solid
rgba(60,48,51,.10);
border-bottom:
1px solid
rgba(60,48,51,.10);
}
.featured-product-summary-copy {
min-width: 0;
}
.featured-product-summary-badge {
margin: 0 0 6px;
color: #b85f70;
font-size: 8px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.featured-product-summary-title {
margin: 0 0 6px;
color: #3c3033;
font-size:
clamp(18px,1.65vw,23px);
line-height: 1.16;
font-weight: 700;
letter-spacing: -0.35px;
}
.featured-product-summary-description {
max-width: 650px;
margin: 0;
color: #817477;
font-size: 11.5px;
line-height: 1.5;
}
.featured-product-summary-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap:
clamp(22px,2.7vw,36px);
}
.featured-product-summary-price {
color: #3c3033;
font-size:
clamp(24px,2.3vw,31px);
line-height: 1;
font-weight: 700;
white-space: nowrap;
}
/* =========================================================
SUMMARY CTA
========================================================= */
.featured-product-summary-button {
min-height: 50px;
min-width: 200px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 0 21px;
border-radius: 9px;
background: #3c3033;
color: #ffffff !important;
text-decoration: none !important;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
box-shadow:
0 7px 18px
rgba(60,48,51,.08);
transition:
background-color 300ms ease,
transform 350ms cubic-bezier(.16,1,.3,1);
}
.featured-product-summary-button-arrow {
font-size: 17px;
transition:
transform 350ms cubic-bezier(.16,1,.3,1);
}
/* =========================================================
VIEW ALL
========================================================= */
.gift-discovery-view-all {
display: flex;
justify-content: center;
padding:
15px 0 0;
}
.view-all-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 5px 0 8px;
color: #66595c !important;
text-decoration: none !important;
font-size: 11px;
font-weight: 600;
}
.view-all-link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 47px;
height: 1px;
background:
rgba(60,48,51,.24);
}
.view-all-link-arrow {
font-size: 14px;
}
/* =========================================================
DESKTOP HOVER
========================================================= */
@media
(hover:hover)
and
(pointer:fine) {
.gift-discovery-section
.is-left:hover,
.gift-discovery-section
.is-right:hover {
opacity: .79;
transform:
translateY(5px)
scale(.92);
}
.gift-discovery-section
.is-active:hover
.product-image > img {
transform:
scale(1.075);
}
.gift-carousel-arrow:hover {
background: #3c3033;
color: #ffffff;
transform:
translateY(-50%)
scale(1.06);
}
.featured-product-summary-button:hover {
background: #b85f70;
transform:
translateY(-2px);
}
.featured-product-summary-button:hover
.featured-product-summary-button-arrow {
transform:
translateX(4px);
}
.view-all-link:hover::after {
width: 100%;
}
}
/* =========================================================
COMPACT / TABLET / MOBILE
<= 1024px
THIS IS THE IMPORTANT FIX.
========================================================= */
@media (max-width: 1024px) {
.gift-discovery-section {
padding:
22px 0;
}
/* -------------------------------------------------------
HEADER
------------------------------------------------------- */
.gift-products-block > .section-label {
justify-content:
flex-start;
margin:
0 17px 6px;
font-size: 8px;
}
.gift-products-block >
.section-label::after {
display: none;
}
.gift-products-block > h2 {
max-width: 760px;
margin:
0 17px 7px;
padding: 0;
font-size:
clamp(25px,5vw,34px);
line-height: 1.06;
letter-spacing: -0.6px;
text-align: left;
}
.gift-products-block >
.section-subtitle {
max-width: 720px;
margin:
0 17px 13px;
padding: 0;
font-size: 11px;
line-height: 1.5;
text-align: left;
}
/* -------------------------------------------------------
CAROUSEL
------------------------------------------------------- */
.gift-carousel {
width: 100%;
max-width: none;
padding:
2px 0 5px;
overflow: hidden;
}
.gift-carousel-stage {
overflow: hidden;
}
.gift-carousel-stage::before {
display: none !important;
}
/*
Far cards disappear.
*/
html body
.gift-discovery-section
.is-left-far,
html body
.gift-discovery-section
.is-right-far {
display: none !important;
}
/*
THREE VISIBLE CARDS
*/
html body
.gift-discovery-section
.product-grid {
width: 124% !important;
margin-left: -12% !important;
display: grid !important;
grid-template-columns:
0.84fr
1.46fr
0.84fr !important;
gap: 9px !important;
align-items: center;
}
html body
.gift-discovery-section
.product-image {
aspect-ratio:
3 / 4 !important;
}
/* =======================================================
CRITICAL FIX
Hide card copy on ALL compact layouts.
Very high specificity + !important so theme cannot
bring it back.
======================================================= */
html body
.gift-discovery-section
a.product-card
.product-image
.product-content,
html body
.gift-discovery-section
a.product-card-link
.product-image
.product-content,
html body
.gift-discovery-section
.product-card
.product-content,
html body
.gift-discovery-section
.is-active
.product-content,
html body
.gift-discovery-section
.is-left
.product-content,
html body
.gift-discovery-section
.is-right
.product-content {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/*
Kill dark image gradient too.
*/
html body
.gift-discovery-section
.product-card
.product-image::after,
html body
.gift-discovery-section
.product-card-link
.product-image::after,
html body
.gift-discovery-section
.is-active
.product-image::after,
html body
.gift-discovery-section
.is-left
.product-image::after,
html body
.gift-discovery-section
.is-right
.product-image::after {
content: none !important;
display: none !important;
background: none !important;
opacity: 0 !important;
}
/* -------------------------------------------------------
SIDE CARDS
------------------------------------------------------- */
html body
.gift-discovery-section
.is-left,
html body
.gift-discovery-section
.is-right {
opacity: 0.45 !important;
filter:
saturate(.84);
transform:
translateY(7px)
scale(.90) !important;
}
/* -------------------------------------------------------
ACTIVE
------------------------------------------------------- */
html body
.gift-discovery-section
.is-active {
z-index: 12;
opacity: 1 !important;
filter: saturate(1);
transform:
translateY(0)
scale(1) !important;
}
html body
.gift-discovery-section
.is-active
.product-image {
border-radius: 15px;
box-shadow:
0 15px 34px
rgba(62,45,41,.125);
}
html body
.gift-discovery-section
.is-active
.product-image > img {
transform:
scale(1.025);
}
/* -------------------------------------------------------
BADGES REMAIN VISIBLE
------------------------------------------------------- */
html body
.gift-discovery-section
.product-badge {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
top: 9px;
left: 9px;
min-height: 22px;
padding: 0 8px;
background:
rgba(255,251,248,.95);
color: #55494c;
font-size: 6.5px;
}
html body
.gift-discovery-section
.is-left
.product-badge,
html body
.gift-discovery-section
.is-right
.product-badge {
opacity: .75 !important;
transform:
scale(.90);
transform-origin: top left;
}
/* -------------------------------------------------------
ARROWS
------------------------------------------------------- */
.gift-carousel-arrow {
display: none !important;
}
/* =======================================================
BALLOONS
Four visible positions.
======================================================= */
.bw-float-slot-1 {
top: 11%;
left: 12px;
transform:
translateY(var(--bw-scroll-1));
}
.bw-float-slot-2 {
top: 29%;
right: 13px;
transform:
translateY(var(--bw-scroll-2));
}
.bw-float-slot-3 {
left: 14px;
bottom: 28%;
transform:
translateY(var(--bw-scroll-3));
}
.bw-float-slot-4 {
right: 15px;
bottom: 7%;
transform:
translateY(var(--bw-scroll-4));
}
.bw-float-slot-5,
.bw-float-slot-6 {
display: none !important;
}
.bw-floating-balloon-1 {
width: 39px;
height: 50px;
opacity: .22;
}
.bw-floating-balloon-2 {
width: 44px;
height: 56px;
opacity: .20;
}
.bw-floating-balloon-3 {
width: 35px;
height: 45px;
opacity: .21;
}
.bw-floating-balloon-4 {
width: 38px;
height: 49px;
opacity: .19;
}
.bw-floating-balloon::after {
height: 34px;
}
/* =======================================================
SUMMARY
======================================================= */
.gift-discovery-footer {
width:
calc(100% - 34px);
max-width: 760px;
margin-top: 13px;
}
.featured-product-summary {
display: block;
padding:
15px 0 16px;
}
.featured-product-summary-badge {
margin-bottom: 6px;
font-size: 7.5px;
}
.featured-product-summary-title {
max-width: 520px;
margin-bottom: 6px;
font-size: 17px;
line-height: 1.2;
}
.featured-product-summary-description {
max-width: 560px;
font-size: 10.5px;
line-height: 1.5;
}
.featured-product-summary-actions {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-top: 14px;
}
.featured-product-summary-price {
font-size: 22px;
}
.featured-product-summary-button {
min-width: 0;
min-height: 44px;
padding: 0 16px;
gap: 15px;
border-radius: 7px;
font-size: 10px;
}
.gift-discovery-view-all {
padding:
14px 0 0;
}
.view-all-link {
font-size: 10px;
}
}
/* =========================================================
SMALL MOBILE <= 430px
========================================================= */
@media (max-width: 430px) {
.gift-discovery-section {
padding:
20px 0;
}
.gift-products-block > h2 {
font-size:
clamp(24px,7vw,29px);
}
html body
.gift-discovery-section
.product-grid {
width: 128% !important;
margin-left: -14% !important;
grid-template-columns:
.85fr
1.48fr
.85fr !important;
gap: 8px !important;
}
.featured-product-summary-title {
font-size: 16px;
}
.featured-product-summary-description {
font-size: 10px;
}
.featured-product-summary-actions {
gap: 13px;
}
.featured-product-summary-price {
font-size: 20px;
}
.featured-product-summary-button {
min-height: 42px;
padding:
0 14px;
gap: 11px;
font-size: 9.5px;
}
/* Four balloons stay visible */
.bw-float-slot-1 {
top: 10%;
left: 9px;
}
.bw-float-slot-2 {
top: 30%;
right: 9px;
}
.bw-float-slot-3 {
left: 10px;
bottom: 29%;
}
.bw-float-slot-4 {
right: 11px;
bottom: 7%;
}
.bw-floating-balloon-1 {
width: 35px;
height: 45px;
}
.bw-floating-balloon-2 {
width: 39px;
height: 50px;
}
.bw-floating-balloon-3 {
width: 31px;
height: 40px;
}
.bw-floating-balloon-4 {
width: 34px;
height: 44px;
}
}
/* =========================================================
VERY SMALL MOBILE <= 370px
========================================================= */
@media (max-width: 370px) {
.gift-products-block > h2 {
font-size: 23px;
}
html body
.gift-discovery-section
.product-grid {
width: 132% !important;
margin-left: -16% !important;
grid-template-columns:
.86fr
1.51fr
.86fr !important;
gap: 7px !important;
}
.featured-product-summary-title {
font-size: 15px;
}
.featured-product-summary-description {
font-size: 9.5px;
}
.featured-product-summary-price {
font-size: 18px;
}
.featured-product-summary-button {
min-height: 40px;
padding:
0 12px;
gap: 9px;
font-size: 9px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.bw-float-slot {
transform: none !important;
}
.bw-floating-balloon {
animation: none !important;
}
.gift-discovery-section
.product-card,
.gift-discovery-section
.product-image > img,
.gift-carousel-arrow,
.featured-product-summary-button {
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e73779f *//* =========================================================
BALLONSWELT
SO FUNKTIONIERT DIE BALLONBOX
FINAL COMPLETE CSS
READY TO PASTE
DESIGN:
- Clean editorial 3-step journey
- No cards / boxes
- Animated progress dot
- Subtle active icon animation
- Horizontal desktop timeline
- Vertical mobile timeline
- Better readable typography
- Compact spacing
========================================================= */
/* =========================================================
SECTION
========================================================= */
.how-balloonbox-section {
position: relative;
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding:
30px
24px
28px;
overflow: hidden;
box-sizing: border-box;
background: #fffbf8;
color: #3c3033;
border-top:
1px solid
rgba(60, 48, 51, 0.05);
}
.how-balloonbox-section *,
.how-balloonbox-section *::before,
.how-balloonbox-section *::after {
box-sizing: border-box;
}
/* =========================================================
CONTAINER
========================================================= */
.how-container {
width: 100%;
max-width: 1080px;
margin: 0 auto;
}
/* =========================================================
HEADING
========================================================= */
.how-heading {
width: 100%;
max-width: 700px;
margin:
0
auto
20px;
text-align: center;
}
/* =========================================================
EYEBROW
========================================================= */
.how-label {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin:
0
0
7px;
color: #b85f70;
font-size: 8.5px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.how-label::before,
.how-label::after {
content: "";
display: block;
width: 20px;
height: 1px;
background:
rgba(184, 95, 112, 0.42);
}
/* =========================================================
MAIN HEADING
========================================================= */
.how-heading h2 {
margin:
0
0
7px;
padding: 0;
color: #382f31;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(29px, 2.8vw, 38px);
line-height: 1.07;
font-weight: 400;
letter-spacing: -0.7px;
}
/* =========================================================
SUBTITLE
========================================================= */
.how-subtitle {
max-width: 620px;
margin: 0 auto;
color: #7c7073;
font-size: 12.5px;
line-height: 1.55;
font-weight: 400;
}
/* =========================================================
STEPS WRAPPER
========================================================= */
.how-steps {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 0;
}
/* =========================================================
CONNECTING LINE
Icon centres:
16.666%
50%
83.333%
========================================================= */
.how-steps::before {
content: "";
position: absolute;
z-index: 0;
top: 42px;
left: 16.666666%;
right: 16.666666%;
height: 1.5px;
border-radius: 999px;
background:
linear-gradient(
to right,
rgba(184, 95, 112, 0.15),
rgba(184, 95, 112, 0.31),
rgba(184, 95, 112, 0.15)
);
}
/* =========================================================
MOVING JOURNEY DOT
========================================================= */
.how-steps::after {
content: "";
position: absolute;
z-index: 1;
top: 36.5px;
left:
calc(16.666666% - 5.5px);
width: 11px;
height: 11px;
border-radius: 50%;
background: #b85f70;
box-shadow:
0 0 0 4px rgba(184, 95, 112, 0.09),
0 2px 7px rgba(110, 54, 66, 0.15);
pointer-events: none;
animation:
howJourneyDot
7.2s
linear
infinite;
}
/* =========================================================
DESKTOP DOT ANIMATION
========================================================= */
@keyframes howJourneyDot {
0%,
10% {
left:
calc(16.666666% - 5.5px);
}
14% {
left:
calc(19% - 5.5px);
}
35% {
left:
calc(41% - 5.5px);
}
43% {
left:
calc(48% - 5.5px);
}
46%,
56% {
left:
calc(50% - 5.5px);
}
60% {
left:
calc(52% - 5.5px);
}
80% {
left:
calc(75% - 5.5px);
}
88% {
left:
calc(81% - 5.5px);
}
92%,
100% {
left:
calc(83.333333% - 5.5px);
}
}
/* =========================================================
INDIVIDUAL STEP
========================================================= */
.how-step {
position: relative;
z-index: 2;
min-width: 0;
margin: 0;
padding:
0
28px;
background: transparent;
border: 0;
box-shadow: none;
text-align: center;
}
/* =========================================================
STEP NUMBER
========================================================= */
.how-number {
display: block;
margin:
0
0
7px;
color:
rgba(60, 48, 51, 0.30);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 11px;
line-height: 1;
font-weight: 400;
letter-spacing: 1px;
transition:
color
300ms
ease;
}
/* =========================================================
ICON
========================================================= */
.how-icon {
position: relative;
z-index: 5;
width: 48px;
height: 48px;
margin:
0
auto
12px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border:
1px solid
rgba(184, 95, 112, 0.27);
border-radius: 50%;
background: #fffbf8;
color: #b85f70;
box-shadow:
0
4px
14px
rgba(72, 48, 54, 0.04);
transition:
transform 400ms cubic-bezier(.16, 1, .3, 1),
border-color 300ms ease,
background-color 300ms ease,
box-shadow 350ms ease;
}
/* =========================================================
ICON SVG
========================================================= */
.how-icon svg {
display: block;
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
transition:
transform
350ms
cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
ICON JOURNEY ANIMATIONS
========================================================= */
.how-step:nth-child(1) .how-icon {
animation:
howIconFocus1
7.2s
linear
infinite;
}
.how-step:nth-child(2) .how-icon {
animation:
howIconFocus2
7.2s
linear
infinite;
}
.how-step:nth-child(3) .how-icon {
animation:
howIconFocus3
7.2s
linear
infinite;
}
/* =========================================================
STEP 1 ACTIVE
========================================================= */
@keyframes howIconFocus1 {
0%,
10% {
background: #f9eff1;
border-color:
rgba(184, 95, 112, 0.45);
transform:
scale(1.055);
box-shadow:
0
7px
19px
rgba(91, 50, 60, 0.08);
}
14%,
100% {
background: #fffbf8;
border-color:
rgba(184, 95, 112, 0.27);
transform:
scale(1);
box-shadow:
0
4px
14px
rgba(72, 48, 54, 0.04);
}
}
/* =========================================================
STEP 2 ACTIVE
========================================================= */
@keyframes howIconFocus2 {
0%,
43% {
background: #fffbf8;
border-color:
rgba(184, 95, 112, 0.27);
transform:
scale(1);
box-shadow:
0
4px
14px
rgba(72, 48, 54, 0.04);
}
46%,
56% {
background: #f9eff1;
border-color:
rgba(184, 95, 112, 0.45);
transform:
scale(1.055);
box-shadow:
0
7px
19px
rgba(91, 50, 60, 0.08);
}
60%,
100% {
background: #fffbf8;
border-color:
rgba(184, 95, 112, 0.27);
transform:
scale(1);
box-shadow:
0
4px
14px
rgba(72, 48, 54, 0.04);
}
}
/* =========================================================
STEP 3 ACTIVE
========================================================= */
@keyframes howIconFocus3 {
0%,
88% {
background: #fffbf8;
border-color:
rgba(184, 95, 112, 0.27);
transform:
scale(1);
box-shadow:
0
4px
14px
rgba(72, 48, 54, 0.04);
}
92%,
100% {
background: #f9eff1;
border-color:
rgba(184, 95, 112, 0.45);
transform:
scale(1.055);
box-shadow:
0
7px
19px
rgba(91, 50, 60, 0.08);
}
}
/* =========================================================
STEP TEXT
========================================================= */
.how-text {
width: 100%;
}
/* TITLE */
.how-text h3 {
margin:
0
0
5px;
color: #403638;
font-size: 15.5px;
line-height: 1.3;
font-weight: 600;
letter-spacing: -0.15px;
transition:
color
300ms
ease;
}
/* DESCRIPTION */
.how-text p {
max-width: 275px;
margin: 0 auto;
color: #817477;
font-size: 12.5px;
line-height: 1.55;
font-weight: 400;
}
.how-text p strong {
color: #65585b;
font-weight: 600;
}
/* =========================================================
STEP HOVER
========================================================= */
@media
(hover: hover)
and
(pointer: fine) {
.how-step:hover .how-icon {
animation-play-state: paused;
background: #f9eff1;
border-color:
rgba(184, 95, 112, 0.44);
transform:
translateY(-3px)
scale(1.055);
box-shadow:
0
9px
22px
rgba(91, 50, 60, 0.085);
}
.how-step:hover
.how-icon svg {
transform:
scale(1.07);
}
.how-step:hover
.how-number {
color: #b85f70;
}
.how-step:hover
.how-text h3 {
color: #b85f70;
}
}
/* =========================================================
FOOTER
========================================================= */
.how-footer {
width: 100%;
margin-top: 21px;
text-align: center;
}
/* =========================================================
CTA
========================================================= */
.how-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 44px;
padding:
0
21px;
border: 0;
border-radius: 7px;
background: #3c3033;
color:
#ffffff !important;
text-decoration:
none !important;
font-size: 11.5px;
line-height: 1;
font-weight: 500;
letter-spacing: 0;
box-shadow:
0
6px
16px
rgba(60, 48, 51, 0.09);
transition:
background-color 300ms ease,
transform 350ms cubic-bezier(.16, 1, .3, 1),
box-shadow 350ms ease;
}
.how-cta span {
display: inline-block;
font-size: 15px;
transition:
transform
300ms
cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
CTA HOVER
========================================================= */
@media
(hover: hover)
and
(pointer: fine) {
.how-cta:hover {
background: #b85f70;
transform:
translateY(-2px);
box-shadow:
0
9px
21px
rgba(155, 69, 86, 0.14);
}
.how-cta:hover span {
transform:
translateX(4px);
}
}
/* =========================================================
KEYBOARD FOCUS
========================================================= */
.how-cta:focus-visible {
outline:
2px solid
rgba(184, 95, 112, 0.75);
outline-offset: 4px;
}
/* =========================================================
TABLET
821px – 1024px
========================================================= */
@media
(min-width: 821px)
and
(max-width: 1024px) {
.how-balloonbox-section {
padding:
28px
20px
27px;
}
.how-heading {
margin-bottom: 20px;
}
.how-heading h2 {
font-size:
clamp(28px, 4vw, 34px);
}
.how-step {
padding:
0
16px;
}
.how-text h3 {
font-size: 14.5px;
}
.how-text p {
max-width: 245px;
font-size: 11.75px;
}
}
/* =========================================================
MOBILE / SMALL TABLET
<= 820px
Horizontal journey becomes vertical.
========================================================= */
@media (max-width: 820px) {
/* =======================================================
SECTION
======================================================= */
.how-balloonbox-section {
padding:
27px
18px
26px;
}
/* =======================================================
MOBILE HEADER
======================================================= */
.how-heading {
max-width: 540px;
margin:
0
0
20px;
text-align: left;
}
.how-label {
justify-content:
flex-start;
margin-bottom: 7px;
font-size: 8px;
}
.how-label::after {
display: none;
}
.how-heading h2 {
margin-bottom: 7px;
font-size:
clamp(25px, 6vw, 30px);
line-height: 1.07;
letter-spacing: -0.5px;
}
.how-subtitle {
max-width: 500px;
margin: 0;
font-size: 11.5px;
line-height: 1.5;
}
/* =======================================================
MOBILE VERTICAL JOURNEY
======================================================= */
.how-steps {
display: block;
max-width: 540px;
margin: 0;
padding: 0;
}
/* =======================================================
MOBILE CONNECTING LINE
======================================================= */
.how-steps::before {
top: 23px;
bottom: 25px;
left: 23px;
right: auto;
width: 1.5px;
height: auto;
background:
linear-gradient(
to bottom,
rgba(184, 95, 112, 0.16),
rgba(184, 95, 112, 0.32),
rgba(184, 95, 112, 0.16)
);
}
/* =======================================================
MOBILE MOVING DOT
======================================================= */
.how-steps::after {
z-index: 1;
top: 17.5px;
left: 17.5px;
width: 11px;
height: 11px;
animation:
howJourneyDotMobile
7.2s
linear
infinite;
}
/* =======================================================
MOBILE DOT ANIMATION
Step height = 98px
======================================================= */
@keyframes howJourneyDotMobile {
0%,
10% {
top: 17.5px;
}
14% {
top: 31px;
}
35% {
top: 91px;
}
43% {
top: 109px;
}
46%,
56% {
top: 115.5px;
}
60% {
top: 129px;
}
80% {
top: 188px;
}
88% {
top: 207px;
}
92%,
100% {
top: 213.5px;
}
}
/* =======================================================
MOBILE STEP
======================================================= */
.how-step {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
48px
minmax(0, 1fr);
column-gap: 15px;
align-items: start;
min-height: 98px;
margin: 0;
padding: 0;
text-align: left;
}
/* =======================================================
MOBILE NUMBER
======================================================= */
.how-number {
position: absolute;
top: 0;
left: 63px;
margin: 0;
color: #b85f70;
font-size: 8.5px;
letter-spacing: 1px;
}
/* =======================================================
MOBILE ICON
======================================================= */
.how-icon {
grid-column: 1;
z-index: 5;
width: 46px;
height: 46px;
margin: 0;
background: #fffbf8;
}
.how-icon svg {
width: 17px;
height: 17px;
}
/* =======================================================
MOBILE TEXT
======================================================= */
.how-text {
grid-column: 2;
padding-top: 15px;
}
.how-text h3 {
margin-bottom: 4px;
font-size: 14.5px;
line-height: 1.28;
}
.how-text p {
max-width: 410px;
margin: 0;
font-size: 11.5px;
line-height: 1.5;
}
/* =======================================================
MOBILE FOOTER
======================================================= */
.how-footer {
margin-top: 12px;
text-align: left;
}
.how-cta {
min-height: 42px;
padding:
0
19px;
font-size: 10.75px;
}
}
/* =========================================================
SMALL MOBILE
<= 430px
========================================================= */
@media (max-width: 430px) {
.how-balloonbox-section {
padding:
25px
16px
24px;
}
.how-heading {
margin-bottom: 18px;
}
.how-heading h2 {
font-size: 24px;
}
.how-subtitle {
font-size: 11px;
}
/* =======================================================
SMALL MOBILE JOURNEY
======================================================= */
.how-step {
grid-template-columns:
44px
minmax(0, 1fr);
column-gap: 13px;
min-height: 94px;
}
.how-icon {
width: 43px;
height: 43px;
}
.how-icon svg {
width: 16px;
height: 16px;
}
.how-number {
left: 57px;
}
.how-text {
padding-top: 14px;
}
.how-text h3 {
font-size: 14px;
}
.how-text p {
font-size: 11px;
line-height: 1.48;
}
/* =======================================================
SMALL MOBILE LINE
======================================================= */
.how-steps::before {
top: 21.5px;
left: 21.5px;
bottom: 23px;
}
.how-steps::after {
left: 16px;
top: 16px;
}
/* =======================================================
SMALL MOBILE DOT
94px step height
======================================================= */
@keyframes howJourneyDotMobile {
0%,
10% {
top: 16px;
}
14% {
top: 29px;
}
35% {
top: 86px;
}
43% {
top: 103px;
}
46%,
56% {
top: 110px;
}
60% {
top: 123px;
}
80% {
top: 180px;
}
88% {
top: 197px;
}
92%,
100% {
top: 204px;
}
}
}
/* =========================================================
VERY SMALL MOBILE
<= 360px
========================================================= */
@media (max-width: 360px) {
.how-balloonbox-section {
padding-left: 14px;
padding-right: 14px;
}
.how-heading h2 {
font-size: 23px;
}
.how-step {
grid-template-columns:
42px
minmax(0, 1fr);
column-gap: 12px;
}
.how-icon {
width: 41px;
height: 41px;
}
.how-number {
left: 54px;
font-size: 8px;
}
.how-text h3 {
font-size: 13.5px;
}
.how-text p {
font-size: 10.75px;
}
.how-steps::before {
left: 20.5px;
}
.how-steps::after {
left: 15px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.how-steps::after {
display: none;
}
.how-icon {
animation: none !important;
}
.how-icon,
.how-icon svg,
.how-number,
.how-text h3,
.how-cta,
.how-cta span {
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bc27714 *//* =========================================================
BALLONSWELT
UNSERE LIEBLINGSBOXEN
COMPLETE FINAL CSS
REPLACE THE ENTIRE OLD SECTION CSS WITH THIS
- CSS-only radio slider preserved
- Compact editorial desktop layout
- Large moving "Lieblingsbox" background text
- Strong active product / subtle previous product
- Better typography
- Less empty space
- Desktop / tablet / mobile
- Mobile keeps desktop editorial character
- Mobile thumbnail .elementor-2020301 .elementor-element.elementor-element-bc27714s preserved
========================================================= */
/* =========================================================
SECTION
========================================================= */
.bw-editorial-feature {
position: relative;
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 40px 28px 38px;
overflow: hidden;
box-sizing: border-box;
background: #f8f3ee;
color: #3c3033;
}
.bw-editorial-feature *,
.bw-editorial-feature *::before,
.bw-editorial-feature *::after {
box-sizing: border-box;
}
/* =========================================================
RADIO STATES
========================================================= */
.bw-slider-radio {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
clip: rect(0 0 0 0);
}
/* =========================================================
MAIN GRID
========================================================= */
.bw-editorial-inner {
position: relative;
z-index: 5;
width: 100%;
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns:
minmax(0, 1.02fr)
minmax(0, 0.98fr);
grid-template-areas:
"visual copy"
"visual actions";
grid-template-rows:
auto auto;
column-gap: clamp(52px, 6vw, 88px);
align-items: start;
}
/* =========================================================
MOVING BACKGROUND WORD
========================================================= */
.bw-editorial-marquee {
position: absolute;
z-index: 1;
top: 46%;
left: 0;
width: 100%;
overflow: hidden;
transform: translateY(-50%);
pointer-events: none;
border: 0 !important;
box-shadow: none !important;
}
.bw-editorial-marquee-track {
display: flex;
width: max-content;
margin: 0;
padding: 0;
white-space: nowrap;
animation:
bwEditorialMarquee
48s
linear
infinite;
will-change: transform;
}
.bw-editorial-marquee-track span {
display: block;
margin: 0;
padding-right: 0.27em;
color:
rgba(60, 48, 51, 0.052);
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(100px, 10.5vw, 158px);
line-height: 0.86;
font-weight: 400;
letter-spacing: -5px;
text-decoration: none !important;
text-decoration-line: none !important;
border: 0 !important;
border-bottom: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
outline: 0 !important;
}
.bw-editorial-marquee-track span::before,
.bw-editorial-marquee-track span::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
@keyframes bwEditorialMarquee {
from {
transform: translateX(-25%);
}
to {
transform: translateX(0);
}
}
/* =========================================================
LEFT PRODUCT AREA
========================================================= */
.bw-editorial-visual {
grid-area: visual;
position: relative;
z-index: 6;
width: 100%;
max-width: 505px;
justify-self: center;
align-self: center;
}
/* =========================================================
PRODUCT STAGE
========================================================= */
.bw-editorial-stage {
position: relative;
width: 100%;
height: 438px;
overflow: visible;
}
/* =========================================================
PRODUCT CARD BASE
========================================================= */
.bw-editorial-card {
position: absolute;
z-index: 1;
top: 0;
left: 50%;
width: 330px;
max-width: 72vw;
opacity: 0;
pointer-events: none;
filter:
saturate(0.84);
transform:
translateX(-50%)
translateX(250px)
translateY(20px)
scale(0.84);
transform-origin: center;
transition:
transform 700ms cubic-bezier(.16, 1, .3, 1),
opacity 500ms ease,
filter 500ms ease;
}
/* =========================================================
ACTIVE PRODUCT
========================================================= */
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-card-1,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-card-2,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-card-3,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-card-4 {
z-index: 10;
opacity: 1;
pointer-events: auto;
filter:
saturate(1);
transform:
translateX(-50%)
translateY(0)
scale(1);
}
/* =========================================================
PREVIOUS / FADED LEFT PRODUCT
========================================================= */
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-card-4,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-card-1,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-card-2,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-card-3 {
z-index: 3;
opacity: 0.24;
pointer-events: none;
filter:
saturate(0.68);
transform:
translateX(-50%)
translateX(-250px)
translateY(31px)
scale(0.72);
}
/* =========================================================
NEXT / HIDDEN RIGHT PRODUCT
========================================================= */
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-card-2,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-card-3,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-card-4,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-card-1 {
z-index: 1;
opacity: 0;
pointer-events: none;
transform:
translateX(-50%)
translateX(245px)
translateY(20px)
scale(0.84);
}
/* =========================================================
IMAGE LINK
========================================================= */
.bw-editorial-image-link {
display: block;
color: inherit !important;
text-decoration: none !important;
}
/* =========================================================
PRODUCT IMAGE
========================================================= */
.bw-editorial-image {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: 17px;
background: #eadfd6;
isolation: isolate;
box-shadow:
0
12px
30px
rgba(57, 42, 39, 0.065);
transition:
box-shadow 450ms ease;
}
/* ACTIVE IMAGE */
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-card-1
.bw-editorial-image,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-card-2
.bw-editorial-image,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-card-3
.bw-editorial-image,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-card-4
.bw-editorial-image {
box-shadow:
0
21px
48px
rgba(57, 42, 39, 0.115);
}
.bw-editorial-image img {
position: absolute;
inset: 0;
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
transform: scale(1.015);
transition:
transform
850ms
cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
PRODUCT BADGE
========================================================= */
.bw-editorial-badge {
position: absolute;
z-index: 4;
top: 12px;
left: 12px;
min-height: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border:
1px solid
rgba(255, 255, 255, 0.78);
border-radius: 999px;
background:
rgba(255, 251, 248, 0.95);
color: #594d50;
font-size: 7px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}
/* =========================================================
NAVIGATION STATE
========================================================= */
.bw-editorial-nav {
display: none;
}
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-nav-1,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-nav-2,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-nav-3,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-nav-4 {
display: block;
}
/* =========================================================
ARROWS
========================================================= */
.bw-editorial-arrow {
position: absolute;
z-index: 30;
top: 46%;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
border:
1px solid
rgba(60, 48, 51, 0.11);
border-radius: 50%;
background:
rgba(255, 252, 249, 0.97);
color: #3c3033;
cursor: pointer;
box-shadow:
0
7px
19px
rgba(60, 48, 51, 0.075);
transition:
background-color 300ms ease,
color 300ms ease,
transform 350ms cubic-bezier(.16, 1, .3, 1);
}
.bw-editorial-prev {
left: -5px;
}
.bw-editorial-next {
right: -5px;
}
.bw-editorial-arrow svg {
display: block;
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
PRODUCT META UNDER IMAGE
========================================================= */
.bw-editorial-meta-wrap {
position: relative;
width: 330px;
max-width: 72vw;
min-height: 47px;
margin: 12px auto 0;
}
.bw-editorial-product-meta {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(6px);
pointer-events: none;
transition:
opacity 350ms ease,
transform 400ms ease;
}
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-meta-1,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-meta-2,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-meta-3,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-meta-4 {
opacity: 1;
transform: translateY(0);
}
.bw-editorial-product-meta p {
margin: 0 0 4px;
color: #b85f70;
font-size: 7.5px;
line-height: 1;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.bw-editorial-product-meta h3 {
margin: 0;
color: #42383a;
font-size: 14px;
line-height: 1.3;
font-weight: 600;
}
/* =========================================================
DESKTOP THUMBNAILS
========================================================= */
.bw-editorial-thumbs {
display: none;
}
/* =========================================================
EDITORIAL COPY
========================================================= */
.bw-editorial-copy {
grid-area: copy;
position: relative;
z-index: 7;
width: 100%;
max-width: 475px;
padding-top: 68px;
align-self: end;
}
/* EYEBROW */
.bw-editorial-label {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0 0 11px;
color: #b85f70;
font-size: 8.5px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.bw-editorial-label::before {
content: "";
width: 24px;
height: 1px;
background:
rgba(184, 95, 112, 0.45);
}
/* =========================================================
EDITORIAL HEADING
========================================================= */
.bw-editorial-copy h2 {
max-width: 475px;
margin: 0 0 14px;
color: #382f31;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(34px, 3.45vw, 46px);
line-height: 1.015;
font-weight: 400;
letter-spacing: -0.95px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.bw-editorial-text {
max-width: 430px;
margin: 0;
color: #706467;
font-size: 13px;
line-height: 1.62;
}
/* =========================================================
ACTION PANEL
========================================================= */
.bw-editorial-actions-panel {
grid-area: actions;
position: relative;
z-index: 7;
width: 100%;
max-width: 475px;
padding-top: 22px;
align-self: start;
}
/* =========================================================
PRODUCT ACTION STATES
========================================================= */
.bw-product-action {
display: none;
align-items: center;
gap: 22px;
min-height: 47px;
margin-bottom: 16px;
}
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-action-1,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-action-2,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-action-3,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-action-4 {
display: flex;
}
/* =========================================================
PRICE
========================================================= */
.bw-editorial-price,
.bw-sale-price strong {
color: #382f31;
font-size: 22px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
}
.bw-sale-price {
display: flex;
flex-direction: column;
gap: 3px;
}
.bw-sale-price del {
color: #9c8f92;
font-size: 10px;
line-height: 1;
}
/* =========================================================
PRIMARY CTA
========================================================= */
.bw-editorial-main-button {
min-width: 177px;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 19px;
border-radius: 8px;
background: #3c3033;
color: #ffffff !important;
text-decoration: none !important;
font-size: 10.5px;
line-height: 1;
font-weight: 500;
box-shadow:
0
7px
18px
rgba(60, 48, 51, 0.085);
transition:
background-color 300ms ease,
transform 350ms cubic-bezier(.16, 1, .3, 1),
box-shadow 350ms ease;
}
.bw-editorial-main-button span {
display: inline-block;
font-size: 15px;
transition:
transform 350ms cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
SECONDARY CTA
========================================================= */
.bw-editorial-secondary {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding-bottom: 5px;
color: #5c5053 !important;
text-decoration: none !important;
font-size: 10.5px;
line-height: 1.3;
font-weight: 600;
}
.bw-editorial-secondary::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 1px;
background:
rgba(60, 48, 51, 0.25);
transition:
width 350ms cubic-bezier(.16, 1, .3, 1);
}
.bw-editorial-secondary span {
display: inline-block;
transition:
transform 350ms cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
DESKTOP HOVER
========================================================= */
@media
(hover: hover)
and
(pointer: fine) {
.bw-editorial-image-link:hover
.bw-editorial-image img {
transform:
scale(1.055);
}
.bw-editorial-arrow:hover {
background: #3c3033;
color: #ffffff;
transform:
translateY(-50%)
scale(1.06);
}
.bw-editorial-main-button:hover {
background: #b85f70;
transform:
translateY(-2px);
box-shadow:
0
10px
22px
rgba(184, 95, 112, 0.14);
}
.bw-editorial-main-button:hover span {
transform:
translateX(3px);
}
.bw-editorial-secondary:hover::after {
width: 100%;
}
.bw-editorial-secondary:hover span {
transform:
translateX(3px);
}
}
/* =========================================================
TABLET
768px – 1050px
========================================================= */
@media
(min-width: 768px)
and
(max-width: 1050px) {
.bw-editorial-feature {
padding:
34px
22px
33px;
}
.bw-editorial-inner {
max-width: 900px;
grid-template-columns:
minmax(0, 0.96fr)
minmax(0, 1.04fr);
column-gap: 42px;
}
.bw-editorial-visual {
max-width: 380px;
}
.bw-editorial-stage {
height: 382px;
}
.bw-editorial-card {
width: 280px;
}
.bw-editorial-meta-wrap {
width: 280px;
}
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-card-4,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-card-1,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-card-2,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-card-3 {
opacity: 0.21;
transform:
translateX(-50%)
translateX(-195px)
translateY(27px)
scale(0.73);
}
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-card-2,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-card-3,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-card-4,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-card-1 {
transform:
translateX(-50%)
translateX(195px)
translateY(18px)
scale(0.82);
}
.bw-editorial-copy {
padding-top: 46px;
}
.bw-editorial-copy h2 {
font-size:
clamp(29px, 4vw, 37px);
}
.bw-editorial-text {
font-size: 12px;
}
.bw-editorial-actions-panel {
padding-top: 19px;
}
.bw-editorial-marquee-track span {
font-size:
clamp(78px, 10vw, 112px);
}
.bw-editorial-arrow {
width: 38px;
height: 38px;
}
}
/* =========================================================
MOBILE
<= 767px
IMPORTANT:
Keeps the editorial desktop character:
image left + editorial copy right.
========================================================= */
@media screen and (max-width: 767px) {
/* =======================================================
SECTION
======================================================= */
.bw-editorial-feature {
position: relative !important;
padding:
27px
12px
28px !important;
overflow: hidden !important;
}
/* =======================================================
MOBILE MOVING BACKGROUND TEXT
======================================================= */
.bw-editorial-feature
.bw-editorial-marquee {
display: block !important;
position: absolute !important;
z-index: 1 !important;
top: 46% !important;
left: 0 !important;
width: 100% !important;
overflow: hidden !important;
transform:
translateY(-50%) !important;
pointer-events: none !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.bw-editorial-feature
.bw-editorial-marquee-track {
display: flex !important;
width: max-content !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
animation:
bwEditorialMarqueeMobile
40s
linear
infinite !important;
}
.bw-editorial-feature
.bw-editorial-marquee-track
span {
display: block !important;
margin: 0 !important;
padding:
0
0.23em
0
0 !important;
color:
rgba(60, 48, 51, 0.052) !important;
font-family:
Georgia,
"Times New Roman",
serif !important;
font-size:
clamp(60px, 18vw, 88px) !important;
line-height:
0.88 !important;
font-weight:
400 !important;
letter-spacing:
-3px !important;
text-decoration:
none !important;
text-decoration-line:
none !important;
border:
0 !important;
border-bottom:
0 !important;
background:
transparent !important;
background-image:
none !important;
box-shadow:
none !important;
outline:
0 !important;
}
.bw-editorial-feature
.bw-editorial-marquee-track
span::before,
.bw-editorial-feature
.bw-editorial-marquee-track
span::after {
content:
none !important;
display:
none !important;
width:
0 !important;
height:
0 !important;
border:
0 !important;
background:
none !important;
box-shadow:
none !important;
}
@keyframes bwEditorialMarqueeMobile {
from {
transform:
translateX(-28%);
}
to {
transform:
translateX(0);
}
}
/* =======================================================
MOBILE MAIN GRID
======================================================= */
.bw-editorial-feature
.bw-editorial-inner {
position:
relative !important;
z-index:
5 !important;
display:
grid !important;
grid-template-columns:
minmax(0, 0.94fr)
minmax(0, 1.06fr) !important;
grid-template-areas:
"visual copy"
"visual actions" !important;
grid-template-rows:
auto auto !important;
column-gap:
14px !important;
row-gap:
0 !important;
align-items:
center !important;
width:
100% !important;
max-width:
540px !important;
margin:
0 auto !important;
}
/* =======================================================
MOBILE VISUAL
======================================================= */
.bw-editorial-feature
.bw-editorial-visual {
grid-area:
visual !important;
position:
relative !important;
z-index:
6 !important;
width:
100% !important;
max-width:
188px !important;
margin:
0 !important;
justify-self:
end !important;
align-self:
center !important;
}
.bw-editorial-feature
.bw-editorial-stage {
position:
relative !important;
width:
100% !important;
height:
229px !important;
overflow:
visible !important;
}
/* =======================================================
MOBILE CARDS
======================================================= */
.bw-editorial-feature
.bw-editorial-card {
position:
absolute !important;
top:
0 !important;
left:
58% !important;
width:
145px !important;
max-width:
none !important;
opacity:
0 !important;
pointer-events:
none !important;
filter:
saturate(0.84) !important;
transform:
translateX(-50%)
translateX(100px)
translateY(9px)
scale(0.84) !important;
}
/* ACTIVE */
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-card-1,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-card-2,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-card-3,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-card-4 {
z-index:
10 !important;
opacity:
1 !important;
pointer-events:
auto !important;
filter:
saturate(1) !important;
transform:
translateX(-50%)
translateY(0)
scale(1) !important;
}
/* FADED LEFT */
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-card-4,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-card-1,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-card-2,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-card-3 {
z-index:
3 !important;
opacity:
0.16 !important;
pointer-events:
none !important;
filter:
saturate(0.66) !important;
transform:
translateX(-50%)
translateX(-85px)
translateY(17px)
scale(0.72) !important;
}
/* HIDDEN RIGHT */
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-card-2,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-card-3,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-card-4,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-card-1 {
z-index:
1 !important;
opacity:
0 !important;
pointer-events:
none !important;
transform:
translateX(-50%)
translateX(95px)
translateY(10px)
scale(0.83) !important;
}
/* =======================================================
MOBILE IMAGE
======================================================= */
.bw-editorial-feature
.bw-editorial-image {
width:
100% !important;
aspect-ratio:
3 / 4 !important;
border-radius:
12px !important;
background:
#eadfd6 !important;
box-shadow:
0
11px
25px
rgba(57, 42, 39, 0.095) !important;
}
.bw-editorial-feature
.bw-editorial-image img {
width:
100% !important;
height:
100% !important;
object-fit:
cover !important;
object-position:
center !important;
transform:
scale(1.01) !important;
}
/* =======================================================
MOBILE BADGE
======================================================= */
.bw-editorial-feature
.bw-editorial-badge {
top:
8px !important;
left:
8px !important;
min-height:
20px !important;
padding:
0
7px !important;
font-size:
5.8px !important;
letter-spacing:
0.5px !important;
}
/* =======================================================
MOBILE ARROWS
======================================================= */
.bw-editorial-feature
.bw-editorial-arrow {
display:
flex !important;
top:
44% !important;
width:
30px !important;
height:
30px !important;
background:
rgba(255, 252, 249, 0.97) !important;
box-shadow:
0
5px
13px
rgba(60, 48, 51, 0.085) !important;
}
.bw-editorial-feature
.bw-editorial-arrow svg {
width:
11px !important;
height:
11px !important;
}
.bw-editorial-feature
.bw-editorial-prev {
left:
-1px !important;
}
.bw-editorial-feature
.bw-editorial-next {
right:
-1px !important;
}
/* =======================================================
MOBILE PRODUCT META
======================================================= */
.bw-editorial-feature
.bw-editorial-meta-wrap {
width:
145px !important;
max-width:
none !important;
min-height:
39px !important;
margin:
8px
0
0
auto !important;
}
.bw-editorial-feature
.bw-editorial-product-meta p {
margin:
0
0
3px !important;
font-size:
6.5px !important;
letter-spacing:
0.7px !important;
}
.bw-editorial-feature
.bw-editorial-product-meta h3 {
margin:
0 !important;
font-size:
10px !important;
line-height:
1.25 !important;
}
/* =======================================================
MOBILE THUMBNAILS
======================================================= */
.bw-editorial-feature
.bw-editorial-thumbs {
display:
grid !important;
grid-template-columns:
repeat(4, 1fr) !important;
width:
145px !important;
gap:
4px !important;
margin:
7px
0
0
auto !important;
}
.bw-editorial-feature
.bw-editorial-thumb {
display:
block !important;
width:
100% !important;
aspect-ratio:
1 / 1 !important;
overflow:
hidden !important;
border:
1px solid
rgba(60, 48, 51, 0.10) !important;
border-radius:
5px !important;
background:
#ffffff !important;
opacity:
0.46 !important;
cursor:
pointer !important;
transition:
opacity 250ms ease,
border-color 250ms ease,
transform 250ms ease;
}
.bw-editorial-feature
.bw-editorial-thumb img {
display:
block !important;
width:
100% !important;
height:
100% !important;
object-fit:
cover !important;
}
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-thumb-1,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-thumb-2,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-thumb-3,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-thumb-4 {
opacity:
1 !important;
border-color:
rgba(184, 95, 112, 0.72) !important;
transform:
translateY(-1px);
}
/* =======================================================
MOBILE COPY
======================================================= */
.bw-editorial-feature
.bw-editorial-copy {
grid-area:
copy !important;
position:
relative !important;
z-index:
7 !important;
width:
100% !important;
max-width:
none !important;
margin:
0 !important;
padding:
0 !important;
align-self:
end !important;
}
.bw-editorial-feature
.bw-editorial-label {
gap:
6px !important;
margin:
0
0
7px !important;
font-size:
6.5px !important;
letter-spacing:
0.9px !important;
}
.bw-editorial-feature
.bw-editorial-label::before {
width:
14px !important;
}
.bw-editorial-feature
.bw-editorial-copy h2 {
max-width:
220px !important;
margin:
0
0
9px !important;
font-size:
clamp(19px, 5.2vw, 23px) !important;
line-height:
1.035 !important;
letter-spacing:
-0.4px !important;
}
.bw-editorial-feature
.bw-editorial-text {
display:
block !important;
max-width:
210px !important;
margin:
0 !important;
color:
#706467 !important;
font-size:
9.5px !important;
line-height:
1.5 !important;
}
/* =======================================================
MOBILE ACTION AREA
======================================================= */
.bw-editorial-feature
.bw-editorial-actions-panel {
grid-area:
actions !important;
position:
relative !important;
z-index:
7 !important;
width:
100% !important;
max-width:
none !important;
margin:
12px
0
0 !important;
padding:
10px
0
0 !important;
border-top:
1px solid
rgba(60, 48, 51, 0.09) !important;
align-self:
start !important;
}
.bw-editorial-feature
.bw-product-action {
width:
100% !important;
min-height:
0 !important;
display:
none;
flex-direction:
column !important;
align-items:
flex-start !important;
gap:
8px !important;
margin:
0 !important;
}
#bw-slide-1:checked
~ .bw-editorial-inner
.bw-action-1,
#bw-slide-2:checked
~ .bw-editorial-inner
.bw-action-2,
#bw-slide-3:checked
~ .bw-editorial-inner
.bw-action-3,
#bw-slide-4:checked
~ .bw-editorial-inner
.bw-action-4 {
display:
flex !important;
}
/* MOBILE PRICE */
.bw-editorial-feature
.bw-editorial-price,
.bw-editorial-feature
.bw-sale-price strong {
font-size:
17px !important;
line-height:
1 !important;
}
.bw-editorial-feature
.bw-sale-price del {
font-size:
8px !important;
}
/* MOBILE MAIN CTA */
.bw-editorial-feature
.bw-editorial-main-button {
width:
100% !important;
min-width:
0 !important;
min-height:
39px !important;
justify-content:
space-between !important;
padding:
0
11px !important;
gap:
8px !important;
border-radius:
7px !important;
font-size:
9px !important;
text-decoration:
none !important;
}
.bw-editorial-feature
.bw-editorial-main-button span {
font-size:
12px !important;
}
/* =======================================================
MOBILE SECONDARY LINK
======================================================= */
.bw-editorial-feature
.bw-editorial-secondary {
position:
relative !important;
display:
inline-flex !important;
align-items:
center !important;
gap:
6px !important;
margin:
11px
0
0 !important;
padding:
2px
0
5px !important;
color:
#5c5053 !important;
font-size:
8.5px !important;
line-height:
1.35 !important;
font-weight:
600 !important;
text-decoration:
none !important;
}
.bw-editorial-feature
.bw-editorial-secondary::after {
content:
"" !important;
display:
block !important;
position:
absolute !important;
left:
0 !important;
bottom:
0 !important;
width:
28px !important;
height:
1px !important;
background:
rgba(60, 48, 51, 0.25) !important;
}
}
/* =========================================================
SMALL MOBILE
<= 430px
========================================================= */
@media screen and (max-width: 430px) {
.bw-editorial-feature {
padding:
25px
10px
26px !important;
}
.bw-editorial-feature
.bw-editorial-inner {
grid-template-columns:
minmax(0, 0.93fr)
minmax(0, 1.07fr) !important;
column-gap:
11px !important;
}
.bw-editorial-feature
.bw-editorial-visual {
max-width:
175px !important;
}
.bw-editorial-feature
.bw-editorial-stage {
height:
217px !important;
}
.bw-editorial-feature
.bw-editorial-card {
width:
137px !important;
}
.bw-editorial-feature
.bw-editorial-meta-wrap,
.bw-editorial-feature
.bw-editorial-thumbs {
width:
137px !important;
}
.bw-editorial-feature
.bw-editorial-copy h2 {
max-width:
205px !important;
font-size:
clamp(18px, 5.1vw, 21px) !important;
}
.bw-editorial-feature
.bw-editorial-text {
max-width:
195px !important;
font-size:
9px !important;
}
.bw-editorial-feature
.bw-editorial-label {
font-size:
6px !important;
}
.bw-editorial-feature
.bw-editorial-product-meta h3 {
font-size:
9.5px !important;
}
.bw-editorial-feature
.bw-editorial-marquee-track
span {
font-size:
clamp(58px, 18vw, 78px) !important;
}
}
/* =========================================================
VERY SMALL MOBILE
<= 360px
========================================================= */
@media screen and (max-width: 360px) {
.bw-editorial-feature {
padding:
23px
8px
24px !important;
}
.bw-editorial-feature
.bw-editorial-inner {
grid-template-columns:
minmax(0, 0.94fr)
minmax(0, 1.06fr) !important;
column-gap:
9px !important;
}
.bw-editorial-feature
.bw-editorial-visual {
max-width:
160px !important;
}
.bw-editorial-feature
.bw-editorial-stage {
height:
198px !important;
}
.bw-editorial-feature
.bw-editorial-card {
width:
125px !important;
}
.bw-editorial-feature
.bw-editorial-meta-wrap,
.bw-editorial-feature
.bw-editorial-thumbs {
width:
125px !important;
}
.bw-editorial-feature
.bw-editorial-copy h2 {
max-width:
185px !important;
font-size:
17px !important;
}
.bw-editorial-feature
.bw-editorial-text {
max-width:
180px !important;
font-size:
8.5px !important;
line-height:
1.46 !important;
}
.bw-editorial-feature
.bw-editorial-product-meta h3 {
font-size:
9px !important;
}
.bw-editorial-feature
.bw-editorial-price,
.bw-editorial-feature
.bw-sale-price strong {
font-size:
16px !important;
}
.bw-editorial-feature
.bw-editorial-main-button {
min-height:
37px !important;
padding:
0
9px !important;
font-size:
8.5px !important;
}
.bw-editorial-feature
.bw-editorial-secondary {
font-size:
8px !important;
}
.bw-editorial-feature
.bw-editorial-marquee-track
span {
font-size:
55px !important;
}
}
/* =========================================================
ACCESSIBILITY / REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.bw-editorial-marquee-track {
animation: none !important;
transform: translateX(-8%) !important;
}
.bw-editorial-card,
.bw-editorial-image img,
.bw-editorial-arrow,
.bw-editorial-thumb,
.bw-editorial-product-meta,
.bw-editorial-main-button,
.bw-editorial-main-button span,
.bw-editorial-secondary::after,
.bw-editorial-secondary span {
transition: none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d04639d *//* =========================================================
BALLONSWELT
FINAL CLOSING CTA
Designed to match the existing Ballonswelt homepage.
Compact, warm, ecommerce-focused.
No decorative SaaS/editorial effects.
COMPLETE READY-TO-PASTE CSS
========================================================= */
/* =========================================================
SECTION
========================================================= */
.bw-closing-cta {
position: relative;
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding:
52px
30px;
overflow: hidden;
box-sizing: border-box;
background:
#f9f1f2;
color:
#3c3033;
}
.bw-closing-cta *,
.bw-closing-cta *::before,
.bw-closing-cta *::after {
box-sizing: border-box;
}
/* =========================================================
INNER
========================================================= */
.bw-closing-cta-inner {
width: 100%;
max-width: 1120px;
margin: 0 auto;
display: grid;
grid-template-columns:
minmax(0, 1.35fr)
minmax(260px, 0.65fr);
align-items: center;
gap:
clamp(45px, 7vw, 95px);
}
/* =========================================================
LEFT COPY
========================================================= */
.bw-closing-cta-copy {
max-width:
680px;
}
/* =========================================================
SMALL LABEL
========================================================= */
.bw-closing-cta-label {
margin:
0
0
10px;
color:
#b85f70;
font-family:
inherit;
font-size:
9px;
line-height:
1;
font-weight:
700;
letter-spacing:
1.35px;
text-transform:
uppercase;
}
/* =========================================================
HEADING
IMPORTANT:
inherit site typography instead of forcing Georgia.
========================================================= */
.bw-closing-cta h2 {
max-width:
650px;
margin:
0
0
14px;
padding: 0;
color:
#3c3033;
font-family:
inherit;
font-size:
clamp(31px, 3.25vw, 43px);
line-height:
1.08;
font-weight:
600;
letter-spacing:
-0.8px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.bw-closing-cta-text {
max-width:
590px;
margin: 0;
color:
#74676a;
font-family:
inherit;
font-size:
12.5px;
line-height:
1.6;
font-weight:
400;
}
/* =========================================================
RIGHT CTA AREA
========================================================= */
.bw-closing-cta-action {
display: flex;
flex-direction:
column;
align-items:
flex-start;
gap:
10px;
}
/* =========================================================
BUTTON
========================================================= */
.bw-closing-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap:
12px;
min-height:
47px;
padding:
0
23px;
border:
1px solid #b85f70;
border-radius:
7px;
background:
#b85f70;
color:
#ffffff !important;
text-decoration:
none !important;
font-family:
inherit;
font-size:
11px;
line-height:
1;
font-weight:
600;
white-space:
nowrap;
box-shadow:
0 7px 18px
rgba(184, 95, 112, 0.12);
transition:
background-color 250ms ease,
border-color 250ms ease,
transform 300ms ease,
box-shadow 300ms ease;
}
.bw-closing-cta-button span {
display:
inline-block;
font-size:
15px;
line-height:
1;
transition:
transform 300ms ease;
}
/* =========================================================
SMALL NOTE
========================================================= */
.bw-closing-cta-note {
margin: 0;
color:
#8a7a7d;
font-family:
inherit;
font-size:
9.5px;
line-height:
1.4;
font-weight:
400;
}
/* =========================================================
DESKTOP HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
.bw-closing-cta-button:hover {
background:
#a85062;
border-color:
#a85062;
transform:
translateY(-2px);
box-shadow:
0 10px 22px
rgba(184, 95, 112, 0.17);
}
.bw-closing-cta-button:hover span {
transform:
translateX(3px);
}
}
/* =========================================================
TABLET
========================================================= */
@media
(min-width: 768px)
and
(max-width: 1050px) {
.bw-closing-cta {
padding:
45px
25px;
}
.bw-closing-cta-inner {
grid-template-columns:
minmax(0, 1fr)
auto;
gap:
40px;
}
.bw-closing-cta h2 {
font-size:
clamp(29px, 4vw, 36px);
}
.bw-closing-cta-text {
font-size:
11.5px;
}
.bw-closing-cta-button {
padding:
0
19px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.bw-closing-cta {
padding:
36px
17px
37px;
}
.bw-closing-cta-inner {
display: block;
max-width:
500px;
}
.bw-closing-cta-copy {
max-width:
none;
}
.bw-closing-cta-label {
margin-bottom:
8px;
font-size:
8px;
letter-spacing:
1.15px;
}
.bw-closing-cta h2 {
max-width:
420px;
margin-bottom:
11px;
font-size:
clamp(26px, 7.5vw, 32px);
line-height:
1.08;
letter-spacing:
-0.55px;
}
.bw-closing-cta-text {
max-width:
430px;
font-size:
11.25px;
line-height:
1.55;
}
/* =======================================================
ACTION BELOW COPY
======================================================= */
.bw-closing-cta-action {
margin-top:
21px;
align-items:
flex-start;
}
.bw-closing-cta-button {
min-height:
44px;
padding:
0
19px;
font-size:
10.5px;
}
.bw-closing-cta-note {
font-size:
9px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.bw-closing-cta {
padding:
32px
15px
33px;
}
.bw-closing-cta h2 {
max-width:
350px;
font-size:
26px;
}
.bw-closing-cta-text {
font-size:
10.75px;
}
.bw-closing-cta-button {
min-height:
43px;
padding:
0
17px;
font-size:
10px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 350px) {
.bw-closing-cta {
padding-left:
13px;
padding-right:
13px;
}
.bw-closing-cta h2 {
font-size:
24px;
}
.bw-closing-cta-note {
font-size:
8.5px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.bw-closing-cta-button,
.bw-closing-cta-button span {
transition:
none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ad7d7ac *//* =========================================================
BALLONSWELT
PREMIUM SPLIT FAQ — FINAL POLISHED VERSION
KEEP CURRENT HTML EXACTLY AS IT IS.
REPLACE THE ENTIRE PREVIOUS FAQ CSS WITH THIS.
Improvements:
- stronger balloon visibility
- text group moved upward
- more compact desktop height
- cleaner FAQ spacing
- optimized tablet + mobile layouts
========================================================= */
/* =========================================================
ROOT SECTION
========================================================= */
.bw-faq-showcase {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns:
minmax(0, 46%)
minmax(0, 54%);
width: 100vw;
max-width: none;
min-height: 525px;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow: hidden;
background: #302321;
}
.bw-faq-showcase *,
.bw-faq-showcase *::before,
.bw-faq-showcase *::after {
box-sizing: border-box;
}
/* =========================================================
LEFT VISUAL AREA
========================================================= */
.bw-faq-visual {
position: relative;
min-width: 0;
min-height: 525px;
overflow: hidden;
background: #302321;
}
/* =========================================================
BACKGROUND PHOTO
========================================================= */
.bw-faq-photo {
position: absolute;
inset: -5px;
background-image:
url("/img/cms/ballonswelt-faq-dark-background.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: 67% center;
opacity: 0.97;
filter:
saturate(0.88)
brightness(0.89)
contrast(0.99);
transform: scale(1.025);
pointer-events: none;
will-change: transform;
animation:
bwFaqImageBreath
20s
ease-in-out
infinite
alternate;
}
@keyframes bwFaqImageBreath {
from {
transform: scale(1.025);
}
to {
transform: scale(1.055);
}
}
/* =========================================================
PHOTO OVERLAY
Keeps lower text readable but lets the balloons
stay noticeably brighter than before.
========================================================= */
.bw-faq-visual::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(35, 23, 23, 0.05) 0%,
rgba(37, 24, 24, 0.10) 33%,
rgba(39, 26, 26, 0.30) 59%,
rgba(39, 26, 26, 0.88) 100%
);
}
/* =========================================================
LEFT CONTENT
========================================================= */
.bw-faq-visual-content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
max-width: 630px;
min-height: 525px;
margin-left: auto;
/*
More bottom padding intentionally moves
the whole text composition upward.
*/
padding:
44px
clamp(38px, 4vw, 66px)
70px
clamp(36px, 5vw, 76px);
color: #fffaf6;
}
/* =========================================================
LEFT EYEBROW
========================================================= */
.bw-faq-eyebrow {
display: flex;
align-items: center;
gap: 11px;
margin:
0
0
13px;
color: #f1cbd2;
font-size: 9px;
line-height: 1;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.bw-faq-eyebrow::before {
content: "";
width: 27px;
height: 1px;
background: #e9c7ce;
}
/* =========================================================
LEFT MAIN HEADING
========================================================= */
.bw-faq-visual h2 {
max-width: 510px;
margin:
0
0
15px;
color: #fffaf6;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(42px, 3.55vw, 55px);
line-height: 0.98;
font-weight: 400;
letter-spacing: -1.25px;
text-wrap: balance;
}
.bw-faq-visual h2 span {
display: block;
margin-top: 4px;
color: #efc9d0;
font-style: italic;
font-weight: 400;
}
/* =========================================================
LEFT DESCRIPTION
========================================================= */
.bw-faq-lead {
max-width: 415px;
margin:
0
0
22px;
color:
rgba(255, 250, 246, 0.82);
font-size: 13px;
line-height: 1.6;
}
/* =========================================================
BENEFITS
========================================================= */
.bw-faq-benefits {
display: flex;
flex-wrap: wrap;
align-items: center;
gap:
9px
17px;
max-width: 500px;
}
.bw-faq-benefits > span {
display: inline-flex;
align-items: center;
gap: 7px;
color:
rgba(255, 250, 246, 0.90);
font-size: 10px;
line-height: 1.3;
}
.bw-faq-benefits i {
display: inline-flex;
align-items: center;
justify-content: center;
flex:
0
0
17px;
width: 17px;
height: 17px;
border:
1px solid
rgba(239, 201, 208, 0.72);
border-radius: 50%;
color: #efc9d0;
font-size: 8px;
line-height: 1;
font-style: normal;
}
/* =========================================================
RIGHT FAQ PANEL
========================================================= */
.bw-faq-panel {
position: relative;
min-width: 0;
background: #fffbf8;
color: #3c3033;
box-shadow:
-18px
0
42px
rgba(48, 34, 33, 0.055);
}
/* subtle divider */
.bw-faq-panel::before {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 1px;
height: 100%;
background:
rgba(184, 95, 112, 0.25);
}
/* decorative question mark */
.bw-faq-panel::after {
content: "?";
position: absolute;
z-index: 0;
top: -73px;
right: 38px;
color:
rgba(184, 95, 112, 0.034);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 285px;
line-height: 1;
pointer-events: none;
}
/* =========================================================
RIGHT INNER
========================================================= */
.bw-faq-panel-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 850px;
margin: 0 auto;
padding:
48px
clamp(42px, 5vw, 76px)
40px;
}
/* =========================================================
RIGHT HEADER
========================================================= */
.bw-faq-panel-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 25px;
margin-bottom: 21px;
}
/* =========================================================
RIGHT LABEL
========================================================= */
.bw-faq-panel-label {
margin: 0;
color: #b85f70;
font-size: 9px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
}
/* =========================================================
QUICK MESSAGE
========================================================= */
.bw-faq-panel-intro {
margin: 0;
color: #8a7a7d;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 17px;
line-height: 1;
font-style: italic;
}
/* =========================================================
FAQ LIST
========================================================= */
.bw-faq-list {
width: 100%;
border-top:
1px solid
rgba(60, 48, 51, 0.16);
}
/* =========================================================
FAQ ITEM
========================================================= */
.bw-faq-item {
width: 100%;
margin: 0;
border: 0;
border-bottom:
1px solid
rgba(60, 48, 51, 0.14);
background: transparent;
}
/* =========================================================
QUESTION ROW
========================================================= */
.bw-faq-item summary {
display: grid;
grid-template-columns:
38px
minmax(0, 1fr)
36px;
align-items: center;
gap: 17px;
min-height: 68px;
margin: 0;
padding: 0;
cursor: pointer;
list-style: none;
color: #3c3033;
transition:
color 250ms ease,
transform 300ms cubic-bezier(.16, 1, .3, 1);
}
.bw-faq-item summary::-webkit-details-marker {
display: none;
}
.bw-faq-item summary::marker {
content: "";
}
/* =========================================================
NUMBERS
========================================================= */
.bw-faq-number {
color: #b85f70;
font-size: 9px;
line-height: 1;
font-weight: 700;
letter-spacing: 1px;
opacity: 0.78;
}
/* =========================================================
QUESTION TEXT
========================================================= */
.bw-faq-question {
max-width: 550px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(17px, 1.3vw, 19px);
line-height: 1.25;
font-weight: 400;
}
/* =========================================================
PLUS BUTTON
========================================================= */
.bw-faq-plus {
position: relative;
justify-self: end;
width: 34px;
height: 34px;
border:
1px solid
rgba(184, 95, 112, 0.33);
border-radius: 50%;
background:
rgba(249, 241, 242, 0.60);
transition:
border-color 250ms ease,
background 250ms ease,
transform 300ms cubic-bezier(.16, 1, .3, 1);
}
.bw-faq-plus::before,
.bw-faq-plus::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #b85f70;
transform:
translate(-50%, -50%);
transition:
opacity 220ms ease,
transform 260ms ease;
}
.bw-faq-plus::before {
width: 10px;
height: 1px;
}
.bw-faq-plus::after {
width: 1px;
height: 10px;
}
/* =========================================================
OPEN STATE
========================================================= */
.bw-faq-item[open] summary {
color: #b85f70;
}
.bw-faq-item[open]
.bw-faq-plus {
border-color:
rgba(184, 95, 112, 0.52);
background: #f9f1f2;
transform: rotate(180deg);
}
.bw-faq-item[open]
.bw-faq-plus::after {
opacity: 0;
}
/* =========================================================
ANSWER
========================================================= */
.bw-faq-answer {
max-width: 635px;
padding:
0
48px
21px
55px;
}
.bw-faq-answer p {
margin: 0;
color: #75676a;
font-size: 12.5px;
line-height: 1.68;
}
/* =========================================================
FOOTER
========================================================= */
.bw-faq-footer {
display: flex;
justify-content: flex-start;
margin-top: 23px;
padding-left: 55px;
}
.bw-faq-footer a {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding-bottom: 8px;
color: #3c3033 !important;
font-size: 10.5px;
line-height: 1;
font-weight: 600;
text-decoration: none !important;
}
.bw-faq-footer a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 42px;
height: 1px;
background: #b85f70;
transition:
width
320ms
cubic-bezier(.16, 1, .3, 1);
}
.bw-faq-footer a span {
color: #b85f70;
font-size: 15px;
transition:
transform
320ms
cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
DESKTOP HOVER
========================================================= */
@media
(hover: hover)
and
(pointer: fine) {
.bw-faq-item summary:hover {
color: #b85f70;
transform:
translateX(3px);
}
.bw-faq-item summary:hover
.bw-faq-plus {
border-color: #b85f70;
background: #f9f1f2;
transform:
scale(1.06);
}
.bw-faq-footer a:hover::after {
width: 100%;
}
.bw-faq-footer a:hover span {
transform:
translateX(4px);
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
.bw-faq-item summary:focus-visible,
.bw-faq-footer a:focus-visible {
outline:
2px solid
rgba(184, 95, 112, 0.65);
outline-offset: 5px;
}
/* =========================================================
MEDIUM DESKTOP
1180px – 1400px
========================================================= */
@media
(min-width: 1180px)
and
(max-width: 1400px) {
.bw-faq-showcase {
grid-template-columns:
45%
55%;
min-height: 510px;
}
.bw-faq-visual {
min-height: 510px;
}
.bw-faq-visual-content {
min-height: 510px;
padding:
40px
45px
64px
48px;
}
.bw-faq-photo {
brightness: 0.9;
}
.bw-faq-visual h2 {
font-size:
clamp(39px, 4vw, 49px);
}
.bw-faq-panel-inner {
padding:
44px
48px
38px;
}
.bw-faq-item summary {
min-height: 66px;
}
.bw-faq-question {
font-size: 17px;
}
}
/* =========================================================
LANDSCAPE TABLET / SMALL DESKTOP
901px – 1179px
========================================================= */
@media
(min-width: 901px)
and
(max-width: 1179px) {
.bw-faq-showcase {
grid-template-columns:
43%
57%;
min-height: 495px;
}
.bw-faq-visual {
min-height: 495px;
}
.bw-faq-photo {
background-position: 68% center;
opacity: 0.96;
filter:
saturate(0.86)
brightness(0.87)
contrast(0.99);
}
.bw-faq-visual-content {
min-height: 495px;
padding:
36px
33px
55px;
}
.bw-faq-visual h2 {
font-size:
clamp(34px, 4vw, 42px);
}
.bw-faq-lead {
margin-bottom: 18px;
font-size: 11.5px;
}
.bw-faq-benefits {
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.bw-faq-panel-inner {
padding:
40px
34px
34px;
}
.bw-faq-panel-header {
margin-bottom: 18px;
}
.bw-faq-panel-intro {
font-size: 14px;
}
.bw-faq-item summary {
grid-template-columns:
30px
minmax(0, 1fr)
31px;
gap: 12px;
min-height: 63px;
}
.bw-faq-question {
font-size: 15px;
}
.bw-faq-plus {
width: 29px;
height: 29px;
}
.bw-faq-answer {
padding:
0
38px
19px
42px;
}
.bw-faq-footer {
margin-top: 20px;
padding-left: 42px;
}
}
/* =========================================================
PORTRAIT TABLET
768px – 900px
STACKED VERSION
========================================================= */
@media
(min-width: 768px)
and
(max-width: 900px) {
.bw-faq-showcase {
display: block;
min-height: 0;
background: #fffbf8;
}
/* PHOTO */
.bw-faq-visual {
min-height: 345px;
}
.bw-faq-photo {
background-position: 68% 45%;
opacity: 0.97;
filter:
saturate(0.88)
brightness(0.88)
contrast(0.99);
}
.bw-faq-visual::after {
background:
linear-gradient(
180deg,
rgba(38, 25, 25, 0.05) 0%,
rgba(39, 26, 26, 0.18) 44%,
rgba(39, 26, 26, 0.88) 100%
);
}
.bw-faq-visual-content {
justify-content: flex-end;
min-height: 345px;
max-width: 700px;
margin: 0 auto;
padding:
35px
42px
40px;
}
.bw-faq-visual h2 {
max-width: 480px;
font-size: 42px;
}
.bw-faq-lead {
margin-bottom: 19px;
}
/* FAQ */
.bw-faq-panel {
box-shadow: none;
}
.bw-faq-panel::before {
width: 100%;
height: 2px;
}
.bw-faq-panel-inner {
max-width: 720px;
padding:
38px
42px
39px;
}
.bw-faq-question {
font-size: 17px;
}
.bw-faq-item summary {
min-height: 67px;
}
}
/* =========================================================
MOBILE
<= 767px
========================================================= */
@media (max-width: 767px) {
.bw-faq-showcase {
display: block;
min-height: 0;
background: #fffbf8;
}
/* =======================================================
MOBILE PHOTO HEADER
======================================================= */
.bw-faq-visual {
min-height: 292px;
}
.bw-faq-photo {
background-position: 68% center;
opacity: 0.97;
filter:
saturate(0.87)
brightness(0.87)
contrast(0.98);
}
.bw-faq-visual::after {
background:
linear-gradient(
180deg,
rgba(39, 26, 26, 0.04) 0%,
rgba(40, 27, 27, 0.18) 43%,
rgba(40, 27, 27, 0.91) 100%
);
}
.bw-faq-visual-content {
justify-content: flex-end;
min-height: 292px;
max-width: 570px;
margin: 0 auto;
padding:
27px
20px
29px;
}
.bw-faq-eyebrow {
margin-bottom: 9px;
font-size: 8px;
}
.bw-faq-visual h2 {
max-width: 410px;
margin-bottom: 11px;
font-size:
clamp(31px, 8.8vw, 39px);
line-height: 1;
letter-spacing: -0.7px;
}
.bw-faq-visual h2 span {
margin-top: 2px;
}
.bw-faq-lead {
max-width: 390px;
margin-bottom: 16px;
font-size: 11.5px;
line-height: 1.55;
}
.bw-faq-benefits {
flex-direction: row;
flex-wrap: wrap;
gap:
7px
13px;
}
.bw-faq-benefits > span {
font-size: 9px;
}
/* =======================================================
MOBILE FAQ PANEL
======================================================= */
.bw-faq-panel {
box-shadow: none;
}
.bw-faq-panel::before {
width: 100%;
height: 2px;
}
.bw-faq-panel::after {
top: -27px;
right: -15px;
font-size: 175px;
}
.bw-faq-panel-inner {
max-width: 570px;
margin: 0 auto;
padding:
31px
18px
33px;
}
.bw-faq-panel-header {
margin-bottom: 18px;
}
.bw-faq-panel-label {
font-size: 8px;
}
.bw-faq-panel-intro {
font-size: 13px;
}
/* =======================================================
MOBILE FAQ QUESTIONS
======================================================= */
.bw-faq-item summary {
grid-template-columns:
25px
minmax(0, 1fr)
31px;
gap: 10px;
min-height: 64px;
}
.bw-faq-number {
font-size: 8px;
}
.bw-faq-question {
max-width: none;
font-size: 14.5px;
line-height: 1.3;
}
.bw-faq-plus {
width: 29px;
height: 29px;
}
.bw-faq-answer {
max-width: none;
padding:
0
36px
19px
35px;
}
.bw-faq-answer p {
font-size: 11.5px;
line-height: 1.65;
}
.bw-faq-footer {
justify-content: flex-start;
margin-top: 21px;
padding-left: 35px;
}
}
/* =========================================================
SMALL MOBILE
<= 430px
========================================================= */
@media (max-width: 430px) {
.bw-faq-visual {
min-height: 276px;
}
.bw-faq-photo {
background-position: 69% center;
opacity: 0.97;
}
.bw-faq-visual-content {
min-height: 276px;
padding:
25px
16px
26px;
}
.bw-faq-eyebrow {
margin-bottom: 8px;
}
.bw-faq-visual h2 {
max-width: 340px;
margin-bottom: 10px;
font-size: 32px;
}
.bw-faq-lead {
max-width: 320px;
margin-bottom: 14px;
font-size: 11px;
}
.bw-faq-benefits {
gap:
6px
10px;
}
.bw-faq-benefits > span {
font-size: 8.5px;
}
/* FAQ */
.bw-faq-panel-inner {
padding:
28px
16px
30px;
}
.bw-faq-panel-header {
margin-bottom: 16px;
}
.bw-faq-panel-intro {
font-size: 12px;
}
.bw-faq-item summary {
grid-template-columns:
23px
minmax(0, 1fr)
29px;
gap: 9px;
min-height: 62px;
}
.bw-faq-question {
font-size: 13.8px;
}
.bw-faq-plus {
width: 27px;
height: 27px;
}
.bw-faq-answer {
padding:
0
31px
18px
32px;
}
.bw-faq-answer p {
font-size: 11px;
}
.bw-faq-footer {
margin-top: 20px;
padding-left: 32px;
}
}
/* =========================================================
VERY SMALL MOBILE
<= 360px
========================================================= */
@media (max-width: 360px) {
.bw-faq-visual {
min-height: 263px;
}
.bw-faq-visual-content {
min-height: 263px;
padding:
23px
14px
23px;
}
.bw-faq-visual h2 {
font-size: 29px;
}
.bw-faq-lead {
font-size: 10.5px;
}
.bw-faq-benefits > span {
font-size: 8px;
}
.bw-faq-panel-inner {
padding:
26px
14px
28px;
}
.bw-faq-item summary {
grid-template-columns:
21px
minmax(0, 1fr)
27px;
gap: 8px;
min-height: 60px;
}
.bw-faq-question {
font-size: 13.2px;
}
.bw-faq-plus {
width: 26px;
height: 26px;
}
.bw-faq-answer {
padding:
0
28px
17px
29px;
}
.bw-faq-answer p {
font-size: 10.75px;
}
.bw-faq-footer {
padding-left: 29px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.bw-faq-photo {
animation: none !important;
}
.bw-faq-item summary,
.bw-faq-plus,
.bw-faq-plus::before,
.bw-faq-plus::after,
.bw-faq-footer a::after,
.bw-faq-footer a span {
transition: none !important;
}
}/* End custom CSS */