#fw-section-custom-html-cf8007fd-d8a2-4b6b-b1fe-a8612f1fc90d {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #e0e0e0;
background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 50%, #4a148c 100%);
background-attachment: fixed;
overflow-x: hidden;
}
/* Animated gradient overlay */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 50%, rgba(157, 78, 221, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(123, 44, 191, 0.1) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
/* Header Section */
.hero {
background: linear-gradient(135deg, #2d1b4e 0%, #5a189a 50%, #7b2cbf 100%);
color: white;
padding: 80px 20px;
text-align: center;
box-shadow: 0 10px 40px rgba(123, 44, 191, 0.3);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(199, 125, 255, 0.1) 0%, transparent 70%);
animation: pulse 15s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(5%, 5%) scale(1.1); }
}
.hero .container {
position: relative;
z-index: 2;
}
.hero h1 {
font-size: 2.8em;
margin-bottom: 20px;
font-weight: 700;
letter-spacing: -0.5px;
animation: fadeInUp 0.8s ease-out;
}
.hero p {
font-size: 1.2em;
margin-bottom: 35px;
opacity: 0.95;
animation: fadeInUp 0.8s ease-out 0.2s backwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cta-button {
display: inline-block;
background: linear-gradient(135deg, #9d4edd 0%, #c77dff 100%);
color: white;
padding: 16px 45px;
text-decoration: none;
border-radius: 10px;
font-size: 1.1em;
font-weight: 600;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(157, 78, 221, 0.4),
0 0 40px rgba(157, 78, 221, 0.2);
position: relative;
overflow: hidden;
animation: fadeInUp 0.8s ease-out 0.4s backwards;
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
.cta-button:hover::before {
left: 100%;
}
.cta-button:hover {
background: linear-gradient(135deg, #7b2cbf 0%, #9d4edd 100%);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(157, 78, 221, 0.6),
0 0 60px rgba(157, 78, 221, 0.3);
}
.cta-button:active {
transform: translateY(-1px);
}
/* Trust Badges */
.trust-section {
background: rgba(26, 26, 46, 0.8);
backdrop-filter: blur(10px);
padding: 50px 20px;
text-align: center;
border-top: 1px solid rgba(157, 78, 221, 0.2);
border-bottom: 1px solid rgba(157, 78, 221, 0.2);
}
.trust-section h2 {
color: #ffffff;
font-size: 2em;
margin-bottom: 40px;
font-weight: 600;
}
.trust-badges {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-top: 30px;
}
.badge {
background: rgba(45, 27, 78, 0.5);
backdrop-filter: blur(20px);
border: 1px solid rgba(157, 78, 221, 0.25);
border-radius: 16px;
padding: 35px 25px;
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.badge::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #9d4edd, transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.badge:hover::before {
transform: translateX(100%);
}
.badge:hover {
transform: translateY(-8px);
border-color: rgba(157, 78, 221, 0.6);
box-shadow: 0 12px 48px rgba(157, 78, 221, 0.4);
background: rgba(45, 27, 78, 0.7);
}
.badge-icon {
font-size: 3.5em;
margin-bottom: 20px;
filter: drop-shadow(0 0 15px rgba(157, 78, 221, 0.6));
transition: transform 0.3s ease;
}
.badge:hover .badge-icon {
transform: scale(1.15) rotate(5deg);
}
.badge h3 {
font-size: 1.3em;
color: #ffffff;
margin-bottom: 10px;
font-weight: 700;
letter-spacing: -0.3px;
}
.badge p {
color: #b8b8b8;
font-size: 0.95em;
line-height: 1.5;
}
/* Key Features */
.features {
padding: 70px 20px;
background: transparent;
}
.features h2 {
text-align: center;
font-size: 2.5em;
margin-bottom: 60px;
color: #ffffff;
font-weight: 700;
letter-spacing: -0.5px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.feature-card {
background: rgba(45, 27, 78, 0.5);
backdrop-filter: blur(20px);
border: 1px solid rgba(157, 78, 221, 0.25);
padding: 35px;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #9d4edd, transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.feature-card:hover::before {
transform: translateX(100%);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 48px rgba(157, 78, 221, 0.5);
border-color: rgba(157, 78, 221, 0.6);
background: rgba(45, 27, 78, 0.7);
}
.feature-icon {
font-size: 3em;
margin-bottom: 20px;
filter: drop-shadow(0 0 15px rgba(157, 78, 221, 0.6));
transition: transform 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: scale(1.1);
}
.feature-card h3 {
color: #ffffff;
margin-bottom: 15px;
font-size: 1.4em;
font-weight: 600;
}
.feature-card p {
color: #d8d8d8;
line-height: 1.8;
font-size: 0.98em;
}
.feature-card ul {
margin-top: 18px;
padding-left: 20px;
color: #d0d0d0;
}
.feature-card li {
margin-bottom: 10px;
line-height: 1.6;
}
/* Account Types */
.accounts {
padding: 70px 20px;
background: rgba(26, 26, 46, 0.5);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(157, 78, 221, 0.15);
border-bottom: 1px solid rgba(157, 78, 221, 0.15);
}
.accounts h2 {
text-align: center;
font-size: 2.5em;
margin-bottom: 60px;
color: #ffffff;
font-weight: 700;
letter-spacing: -0.5px;
}
.account-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
.account-card {
background: rgba(45, 27, 78, 0.5);
border: 2px solid rgba(157, 78, 221, 0.3);
border-radius: 16px;
padding: 40px 30px;
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
}
.account-card::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(157, 78, 221, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
.account-card:hover::after {
opacity: 1;
}
.account-card:hover {
border-color: rgba(157, 78, 221, 0.7);
box-shadow: 0 12px 48px rgba(157, 78, 221, 0.4);
transform: translateY(-8px);
background: rgba(45, 27, 78, 0.7);
}
.account-card.featured {
border-color: #9d4edd;
background: linear-gradient(135deg, rgba(90, 24, 154, 0.4) 0%, rgba(123, 44, 191, 0.4) 100%);
position: relative;
box-shadow: 0 8px 32px rgba(157, 78, 221, 0.5);
}
.account-card.featured::before {
content: "RECOMMENDED";
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #9d4edd 0%, #c77dff 100%);
color: white;
padding: 6px 24px;
border-radius: 20px;
font-size: 0.75em;
font-weight: 700;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(157, 78, 221, 0.5);
}
.account-card h3 {
font-size: 1.6em;
color: #ffffff;
margin-bottom: 20px;
font-weight: 600;
}
.account-price {
font-size: 2.4em;
color: #c77dff;
font-weight: 700;
margin-bottom: 10px;
text-shadow: 0 0 20px rgba(199, 125, 255, 0.5);
}
.account-features {
text-align: left;
margin: 25px 0;
color: #d8d8d8;
}
.account-features li {
padding: 10px 0;
border-bottom: 1px solid rgba(157, 78, 221, 0.15);
font-size: 0.95em;
}
.account-features li:last-child {
border-bottom: none;
}
/* Regulation & Safety */
.regulation {
padding: 60px 20px;
background: transparent;
}
.regulation h2 {
text-align: center;
font-size: 2.2em;
margin-bottom: 30px;
color: #ffffff;
}
.regulation-content {
max-width: 800px;
margin: 0 auto;
background: rgba(45, 27, 78, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(157, 78, 221, 0.2);
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.regulator-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 30px;
}
.regulator {
text-align: center;
padding: 20px;
background: rgba(26, 26, 46, 0.8);
border: 1px solid rgba(157, 78, 221, 0.2);
border-radius: 8px;
}
.regulator strong {
display: block;
color: #ffffff;
margin-bottom: 5px;
font-size: 1.1em;
}
.regulator span {
color: #b0b0b0;
font-size: 0.9em;
}
/* Why Choose Section */
.why-choose {
padding: 60px 20px;
background: rgba(26, 26, 46, 0.6);
backdrop-filter: blur(10px);
}
.why-choose h2 {
text-align: center;
font-size: 2.2em;
margin-bottom: 50px;
color: #ffffff;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.benefit {
text-align: center;
}
.benefit-icon {
font-size: 3em;
margin-bottom: 15px;
}
.benefit h3 {
color: #ffffff;
margin-bottom: 10px;
}
.benefit p {
color: #d0d0d0;
}
/* Final CTA */
.final-cta {
background: linear-gradient(135deg, #2d1b4e 0%, #5a189a 50%, #7b2cbf 100%);
color: white;
padding: 80px 20px;
text-align: center;
box-shadow: 0 -10px 40px rgba(123, 44, 191, 0.3);
}
.final-cta h2 {
font-size: 2.5em;
margin-bottom: 20px;
}
.final-cta p {
font-size: 1.2em;
margin-bottom: 30px;
opacity: 0.9;
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 1.8em;
}
.hero p {
font-size: 1em;
}
.features h2,
.accounts h2,
.regulation h2,
.why-choose h2 {
font-size: 1.8em;
}
.trust-badges {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 15px;
}
.badge {
padding: 25px 15px;
}
.badge-icon {
font-size: 2.5em;
margin-bottom: 15px;
}
.badge h3 {
font-size: 1.1em;
}
.badge p {
font-size: 0.85em;
}
.regulation-content {
padding: 25px;
}
.final-cta h2 {
font-size: 1.8em;
}
}
/* Disclaimer */
.disclaimer {
background: rgba(26, 26, 46, 0.95);
color: #999;
padding: 30px 20px;
text-align: center;
font-size: 0.85em;
border-top: 1px solid rgba(157, 78, 221, 0.2);
}
.highlight {
background: rgba(157, 78, 221, 0.15);
border-left: 4px solid #9d4edd;
padding: 15px;
margin: 20px 0;
border-radius: 4px;
color: #ffffff;
}
}
#fw-section-featured-collection-9a68f4f2-bf7e-4c9e-9397-f6b33c504818 {
/* ===== FOURTHWALL HOMEPAGE DESIGN - KOMPLETT NEU ===== */
/* Featured Collection Section Background */
.featured-collection {
background: linear-gradient(180deg, rgba(26, 26, 46, 0.8) 0%, rgba(15, 52, 96, 0.6) 100%) !important;
color: white !important;
/* Kein extra Padding - nutzt Standard Fourthwall Spacing */
}
/* Featured Products Title - ORIGINAL STYLING BEIBEHALTEN */
.featured-collection .section-header__heading {
font-size: 2rem;
font-weight: 900;
background: linear-gradient(45deg, #ffffff, #e0c3fc, #7209b7);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: titleShimmer 3s ease-in-out infinite;
margin-bottom: 20px;
/* Keine Γnderungen am Design - bleibt wie andere Titel */
}
/* Grid Layout fΓΌr verschiedene BildschirmgrΓΆΓen */
.featured-collection .collection__grid .grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 20px !important;
justify-content: center !important;
}
/* Grid Columns - Standard Mobile (eine Spalte) */
.featured-collection .grid__column {
flex: 0 0 calc(100% - 20px) !important;
max-width: calc(100% - 20px) !important;
width: calc(100% - 20px) !important;
margin: 0 !important;
}
/* Desktop: 3 columns */
@media (min-width: 1024px) {
.featured-collection .grid__column {
flex: 0 0 calc(33.333% - 20px) !important;
max-width: calc(33.333% - 20px) !important;
width: calc(33.333% - 20px) !important;
}
}
/* Tablet: 2 columns */
@media (min-width: 640px) and (max-width: 1023px) {
.featured-collection .grid__column {
flex: 0 0 calc(50% - 15px) !important;
max-width: calc(50% - 15px) !important;
width: calc(50% - 15px) !important;
}
.featured-collection .collection__grid .grid {
gap: 15px !important;
}
}
/* Product Tile - Hauptcontainer */
.featured-collection .product-tile {
background: linear-gradient(145deg, rgba(26, 26, 46, 0.9), rgba(15, 52, 96, 0.7)) !important;
border: 1px solid rgba(114, 9, 183, 0.3) !important;
border-radius: 20px !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1) !important;
backdrop-filter: blur(10px) !important;
position: relative !important;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(114, 9, 183, 0.1) inset !important;
width: 100% !important;
height: 100% !important;
}
/* Product Tile Hover Effect */
.featured-collection .product-tile:hover {
transform: translateY(-15px) scale(1.02) !important;
border-color: rgba(114, 9, 183, 0.8) !important;
box-shadow:
0 25px 50px rgba(114, 9, 183, 0.4),
0 0 0 1px rgba(114, 9, 183, 0.3) inset,
0 0 30px rgba(114, 9, 183, 0.2) !important;
}
/* High Performance Badge - Only on Hover */
.featured-collection .product-tile:hover::before {
opacity: 1;
transform: translateY(0);
}
/* Tile Image Container - Oben abgerundet */
.featured-collection .tile__image {
position: relative !important;
overflow: hidden !important;
border-radius: 20px 20px 0 0 !important;
background: rgba(15, 52, 96, 0.3) !important;
}
.featured-collection .tile__image .image {
border-radius: 20px 20px 0 0 !important;
overflow: hidden !important;
}
.featured-collection .tile__image .image--background-color {
border-radius: 20px 20px 0 0 !important;
}
.featured-collection .tile__image .image__object {
border-radius: 20px 20px 0 0 !important;
}
/* Product Images - mit Purple Glow */
.featured-collection .tile__image img {
border-radius: 20px 20px 0 0 !important;
filter: drop-shadow(0 0 20px rgba(114, 9, 183, 0.6)) !important;
transition: all 0.3s ease !important;
width: 100% !important;
height: auto !important;
}
/* Product Image Hover Effect */
.featured-collection .product-tile:hover .tile__image img {
filter: drop-shadow(0 0 30px rgba(114, 9, 183, 1)) !important;
animation: iconPulse 2s infinite !important;
transform: scale(1.05) !important;
}
/* Tile Description Container */
.featured-collection .tile__description {
padding: 20px !important;
background: rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(5px) !important;
position: relative !important;
}
/* Product Heading - mit Gradient Text */
.featured-collection .tile__heading {
background: linear-gradient(45deg, #ffffff, #e0c3fc, #7209b7) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
animation: textShimmer 3s ease-in-out infinite !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin-bottom: 10px !important;
font-size: 1.1rem !important;
}
/* Prices Container */
.featured-collection .tile__prices {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-top: 10px !important;
}
/* Original Price - Purple Gradient Button */
.featured-collection .tile__price--original {
background: linear-gradient(45deg, #7209b7, #a663cc) !important;
color: white !important;
padding: 8px 16px !important;
border-radius: 25px !important;
font-weight: bold !important;
font-size: 1.1rem !important;
box-shadow: 0 5px 15px rgba(114, 9, 183, 0.4) !important;
transition: all 0.3s ease !important;
border: none !important;
display: inline-block !important;
}
.featured-collection .product-tile:hover .tile__price--original {
transform: scale(1.05) !important;
box-shadow: 0 8px 25px rgba(114, 9, 183, 0.6) !important;
}
/* Live Trading Indicator */
.featured-collection .tile__description::after {
content: 'π΄ LIVE TRADING';
position: absolute;
bottom: 5px;
right: 5px;
background: rgba(0, 255, 136, 0.9);
color: white;
padding: 3px 6px;
border-radius: 8px;
font-size: 9px;
font-weight: bold;
animation: pulse 2s infinite;
z-index: 10;
}
/* Tile Link Styling */
.featured-collection .tile {
display: block !important;
text-decoration: none !important;
color: inherit !important;
}
/* View All Button Styling */
.featured-collection .section-header__cta .button,
.featured-collection .collection__cta .button {
background: linear-gradient(45deg, #7209b7, #a663cc) !important;
border: 2px solid rgba(114, 9, 183, 0.5) !important;
color: white !important;
padding: 10px 20px !important;
border-radius: 25px !important;
transition: all 0.3s ease !important;
text-transform: uppercase !important;
font-weight: bold !important;
}
.featured-collection .section-header__cta .button:hover,
.featured-collection .collection__cta .button:hover {
transform: scale(1.05) !important;
box-shadow: 0 8px 25px rgba(114, 9, 183, 0.6) !important;
border-color: rgba(114, 9, 183, 0.8) !important;
}
/* MOBILE OPTIMIERUNGEN */
@media (max-width: 480px) {
/* NUR Produktkarten grΓΆΓer machen - TITEL NICHT ANFASSEN */
/* Container mehr Platz nutzen */
.featured-collection .container.wrapper {
padding-left: 8px !important;
padding-right: 8px !important;
max-width: 100% !important;
}
/* Grid Columns - 96% Breite auf Mobile */
.featured-collection .grid__column {
flex: 0 0 96% !important;
max-width: 96% !important;
width: 96% !important;
}
/* Product Tiles grΓΆΓer auf Mobile */
.featured-collection .product-tile {
min-height: 450px !important;
}
/* GrΓΆΓere Bilder auf Mobile */
.featured-collection .tile__image {
min-height: 280px !important;
}
.featured-collection .tile__image .image {
height: 280px !important;
}
.featured-collection .tile__image img {
height: 100% !important;
object-fit: cover !important;
}
/* Text grΓΆΓer und zentriert */
.featured-collection .tile__description {
padding: 25px 20px !important;
text-align: center !important;
}
.featured-collection .tile__heading {
font-size: 1.5rem !important;
text-align: center !important;
margin-bottom: 15px !important;
}
.featured-collection .tile__prices {
justify-content: center !important;
}
.featured-collection .tile__price--original {
font-size: 1.3rem !important;
padding: 12px 20px !important;
}
/* TITEL BLEIBT ORIGINAL - KEINE ΓNDERUNGEN */
/* Hover Effekte reduziert auf Mobile */
.featured-collection .product-tile:hover {
transform: translateY(-8px) scale(1.01) !important;
}
/* Live Trading Indicator kleiner */
.featured-collection .tile__description::after {
font-size: 8px !important;
padding: 2px 4px !important;
}
}
/* Animationen */
@keyframes titleShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes textShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes iconPulse {
0%, 100% { transform: scale(1.05); }
50% { transform: scale(1.1); }
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); }
}
}
#fw-section-custom-html-c0e545a4-b7e8-479d-82ea-1e620a1a58d9 {
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Space Grotesk', sans-serif;
background: transparent;
color: #fff;
}
/* ββ LIVE BADGE βββββββββββββββββββββββββββββββ */
.live-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 0 18px;
font-size: 0.78rem;
color: rgba(255,255,255,0.4);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.live-dot {
width: 7px; height: 7px;
background: #10b981;
border-radius: 50%;
animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
/* ββ CONTAINER ββββββββββββββββββββββββββββββββ */
.container { max-width: 1400px; margin: 0 auto; padding: 0 20px 30px; }
/* ββ LOADING ββββββββββββββββββββββββββββββββββ */
.loading { text-align: center; padding: 60px 20px; }
.spinner {
width: 44px; height: 44px;
border: 3px solid rgba(114,9,183,0.2);
border-top-color: #7209b7;
border-radius: 50%;
animation: spin 0.9s linear infinite;
margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading p { color: #a0a0b8; font-size: 0.9rem; }
/* ββ EA GRID βββββββββββββββββββββββββββββββββββ */
.ea-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 28px;
}
@media (min-width: 768px) { .ea-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ea-grid { grid-template-columns: repeat(3, 1fr); } }
/* ββ EA CARD βββββββββββββββββββββββββββββββββββ */
.ea-card {
background: linear-gradient(160deg, rgba(18,18,32,0.97) 0%, rgba(28,28,48,0.97) 100%);
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.07);
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1),
box-shadow 0.35s cubic-bezier(0.4,0,0.2,1),
border-color 0.35s;
box-shadow: 0 8px 40px rgba(0,0,0,0.35);
position: relative;
}
.ea-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 22px;
background: linear-gradient(135deg, transparent 40%, rgba(114,9,183,0.04) 100%);
pointer-events: none;
}
.ea-card:hover {
transform: translateY(-6px);
border-color: rgba(114,9,183,0.4);
box-shadow: 0 20px 60px rgba(114,9,183,0.25);
}
.ea-card.active {
border-color: rgba(114,9,183,0.6);
box-shadow: 0 20px 60px rgba(114,9,183,0.35);
}
/* ββ EA HEADER βββββββββββββββββββββββββββββββββ */
.ea-header {
padding: 22px 22px 18px;
position: relative;
overflow: hidden;
}
.ea-header::after {
content: '';
position: absolute;
top: -40%;
right: -15%;
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 65%);
border-radius: 50%;
}
.ea-header-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
z-index: 2;
}
.ea-name {
font-size: 1.15rem;
font-weight: 800;
letter-spacing: 0.3px;
line-height: 1.2;
}
.ea-live-pill {
display: flex;
align-items: center;
gap: 5px;
background: rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 20px;
padding: 3px 9px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.ea-live-dot {
width: 6px; height: 6px;
background: #10b981;
border-radius: 50%;
animation: livePulse 1.8s ease-in-out infinite;
}
.show-trades-btn {
margin-top: 14px;
background: rgba(0,0,0,0.18);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
padding: 7px 14px;
border-radius: 8px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s;
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Space Grotesk', sans-serif;
}
.show-trades-btn:hover { background: rgba(0,0,0,0.32); border-color: rgba(255,255,255,0.38); }
.show-trades-btn.active { background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.5); }
/* ββ EA BODY βββββββββββββββββββββββββββββββββββ */
.ea-body { padding: 20px 22px 22px; }
/* ββ PROFIT DISPLAY ββββββββββββββββββββββββββββ */
.profit-display {
background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(16,185,129,0.04) 100%);
border: 1px solid rgba(16,185,129,0.2);
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 18px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.profit-display.negative {
background: linear-gradient(135deg, rgba(239,68,68,0.1) 0%, rgba(239,68,68,0.04) 100%);
border-color: rgba(239,68,68,0.2);
}
.profit-left {}
.profit-label {
font-size: 0.7rem;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 4px;
}
.profit-amount {
font-size: 2rem;
font-weight: 800;
color: #10b981;
line-height: 1;
}
.profit-amount.negative { color: #ef4444; }
/* ββ OPEN BADGE ββββββββββββββββββββββββββββββββ */
.open-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(16,185,129,0.12);
border: 1px solid rgba(16,185,129,0.28);
border-radius: 20px;
padding: 4px 10px;
font-size: 0.72rem;
font-weight: 600;
color: #10b981;
animation: floatPulse 2.5s ease-in-out infinite;
}
.open-badge.loss {
background: rgba(239,68,68,0.12);
border-color: rgba(239,68,68,0.28);
color: #ef4444;
animation: none;
}
@keyframes floatPulse {
0%,100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* ββ WIN RATE CIRCLE βββββββββββββββββββββββββββ */
.winrate-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
gap: 12px;
}
.circle-container { width: 90px; height: 90px; flex-shrink: 0; }
.circle-bg {
width: 100%; height: 100%;
border-radius: 50%;
background: conic-gradient(
#7209b7 0deg,
#7209b7 calc(var(--progress) * 3.6deg),
rgba(114,9,183,0.12) calc(var(--progress) * 3.6deg),
rgba(114,9,183,0.12) 360deg
);
display: flex; align-items: center; justify-content: center;
position: relative;
}
.circle-bg::before {
content: '';
position: absolute;
inset: 7px;
border-radius: 50%;
background: rgba(18,18,32,0.97);
}
.circle-inner {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
position: relative; z-index: 2;
}
.winrate-number {
font-size: 1.4rem; font-weight: 800;
color: #7209b7; line-height: 1;
}
.winrate-percent { font-size: 0.6rem; color: rgba(255,255,255,0.4); font-weight: 600; }
/* Mini stats next to circle */
.mini-stats { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mini-stat {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 10px;
background: rgba(255,255,255,0.03);
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.05);
}
.mini-label { font-size: 0.72rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.05em; }
.mini-value { font-size: 0.88rem; font-weight: 700; }
/* ββ STAT ROWS βββββββββββββββββββββββββββββββββ */
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.stat-tile {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
padding: 10px 12px;
}
.stat-tile-label {
font-size: 0.68rem;
color: rgba(255,255,255,0.38);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 4px;
}
.stat-tile-value { font-size: 1.05rem; font-weight: 700; }
.positive { color: #10b981; }
.negative { color: #ef4444; }
.neutral { color: #7209b7; }
/* ββ NO DATA βββββββββββββββββββββββββββββββββββ */
.no-data-card {
border: 2px dashed rgba(114,9,183,0.25);
border-radius: 16px;
padding: 36px 20px;
text-align: center;
}
.no-data-card .icon { font-size: 2.5rem; opacity: 0.25; margin-bottom: 12px; }
.no-data-card p { color: rgba(255,255,255,0.4); font-size: 0.9rem; }
/* ββ TRADES SECTION ββββββββββββββββββββββββββββ */
.trades-section {
background: linear-gradient(160deg, rgba(18,18,32,0.97) 0%, rgba(28,28,48,0.97) 100%);
border-radius: 22px;
padding: 26px;
margin-top: 24px;
border: 1px solid rgba(114,9,183,0.25);
display: none;
animation: slideDown 0.35s ease;
}
.trades-section.visible { display: block; }
@keyframes slideDown {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
.trades-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(114,9,183,0.2);
}
.trades-title { font-size: 1.2rem; font-weight: 800; color: #7209b7; }
.trades-count { color: rgba(255,255,255,0.35); font-size: 0.85rem; }
/* ββ TABS ββββββββββββββββββββββββββββββββββββββ */
.trades-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.trades-tab {
padding: 7px 16px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.1);
background: transparent;
color: rgba(255,255,255,0.4);
cursor: pointer;
font-size: 0.82rem;
font-weight: 600;
transition: all 0.2s;
font-family: 'Space Grotesk', sans-serif;
}
.trades-tab.active {
background: rgba(114,9,183,0.2);
color: #fff;
border-color: rgba(114,9,183,0.45);
}
.trades-tab:hover:not(.active) { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.65); }
/* ββ TRADE ITEM ββββββββββββββββββββββββββββββββ */
.trade-item {
background: rgba(255,255,255,0.02);
padding: 14px 16px;
margin-bottom: 8px;
border-radius: 12px;
border-left: 3px solid rgba(114,9,183,0.5);
transition: all 0.2s;
border: 1px solid rgba(255,255,255,0.04);
border-left: 3px solid rgba(114,9,183,0.5);
}
.trade-item:hover { background: rgba(255,255,255,0.04); transform: translateX(3px); }
.trade-item.is-open {
border-left-color: #10b981;
background: rgba(16,185,129,0.03);
}
.trade-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
flex-wrap: wrap;
gap: 6px;
}
.trade-symbol { font-size: 1rem; font-weight: 700; }
.trade-type {
font-size: 0.75rem; padding: 3px 10px;
border-radius: 6px; font-weight: 700;
}
.trade-type.buy { background: rgba(16,185,129,0.15); color: #10b981; }
.trade-type.sell { background: rgba(239,68,68,0.15); color: #ef4444; }
.trade-profit { font-size: 1.1rem; font-weight: 700; }
.trade-details { color: rgba(255,255,255,0.35); font-size: 0.78rem; }
/* ββ PAGINATION ββββββββββββββββββββββββββββββββ */
.pagination {
display: flex; justify-content: center;
align-items: center; gap: 8px;
margin-top: 20px; flex-wrap: wrap;
}
.page-btn {
background: rgba(114,9,183,0.15);
border: 1px solid rgba(114,9,183,0.25);
color: #fff; padding: 8px 14px;
border-radius: 8px; font-size: 0.85rem;
font-weight: 600; cursor: pointer;
transition: all 0.2s;
font-family: 'Space Grotesk', sans-serif;
}
.page-btn:hover { background: rgba(114,9,183,0.3); }
.page-btn.active { background: #7209b7; border-color: #7209b7; }
.page-btn:disabled { opacity: 0.25; cursor: not-allowed; }
/* ββ MISC ββββββββββββββββββββββββββββββββββββββ */
.error-message {
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.25);
border-radius: 12px; padding: 20px;
text-align: center; color: #ef4444;
}
.empty-state { text-align: center; padding: 50px 20px; }
.empty-state .icon { font-size: 3.5rem; opacity: 0.2; margin-bottom: 16px; }
.empty-state h2 { font-size: 1.3rem; margin-bottom: 8px; }
.empty-state p { color: rgba(255,255,255,0.4); }
/* ββ ANIMATIONS ββββββββββββββββββββββββββββββββ */
.fade-in { animation: fadeIn 0.5s ease both; }
.fade-in:nth-child(1) { animation-delay: 0.05s; }
.fade-in:nth-child(2) { animation-delay: 0.15s; }
.fade-in:nth-child(3) { animation-delay: 0.25s; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
/* Counter animation */
.count-up { transition: all 0.6s ease; }
@media (max-width: 480px) {
.profit-amount { font-size: 1.6rem; }
.ea-name { font-size: 1rem; }
.trades-section { padding: 18px; }
}
}
#fw-section-custom-html-5bd7cad4-5f19-4f24-90fa-c6c652a5fa00 {
--color-primary: #9A47FF;
--color-primary-rgb: 154, 71, 255;
--color-background: #16162d;
--color-background-rgb: 22, 22, 45;
--color-on-background: #FFFFFF;
--color-on-background-rgb: 255, 255, 255;
--color-on-primary: #FFFFFF;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #16213e;
--color-background-brightness: 25;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #9A47FF;
--primary-btn-text: #FFFFFF;
--primary-btn-border-color: #FFFFFF;
--secondary-btn-bg: transparent;
--secondary-btn-text: #FFFFFF;
--secondary-btn-border-color: #FFFFFF;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
width: 100%;
max-width: 100vw;
position: relative;
}
.hero-banner {
position: relative;
width: 100%;
max-width: 100vw;
height: 650px;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #7209b7 100%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: white;
padding: 40px 0;
}
.geometric-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
background-image:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.15) 0%, transparent 50%);
}
.content-wrapper {
position: relative;
z-index: 10;
display: flex;
align-items: center;
max-width: 1200px;
width: 100%;
padding: 0 20px;
gap: 4rem;
overflow: hidden;
}
.text-content {
flex: 1;
text-align: center;
}
.main-title {
font-size: 4rem;
font-weight: 900;
background: linear-gradient(45deg, #ffffff, #e0c3fc, #9bb5ff, #ffffff);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 3s ease-in-out infinite;
margin-bottom: 1rem;
text-align: center;
}
.subtitle {
font-size: 1.5rem;
color: #e0c3fc;
margin-bottom: 2rem;
font-weight: 300;
text-align: center;
}
.cta-button {
display: inline-flex;
flex-direction: column;
align-items: center;
padding: 15px 40px;
background: linear-gradient(45deg, #7209b7, #a663cc);
color: white;
text-decoration: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(114, 9, 183, 0.4);
border: 2px solid transparent;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.cta-button:hover::before {
left: 100%;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(114, 9, 183, 0.6);
background: linear-gradient(45deg, #8f2cc8, #b574d3);
}
.cta-subtext {
font-size: 0.75rem;
font-weight: 400;
opacity: 0.9;
margin-top: 4px;
}
.trust-badges {
display: flex;
gap: 2rem;
margin-top: 2rem;
justify-content: center;
flex-wrap: wrap;
align-items: center;
width: 100%;
}
.trust-item {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.trust-icon {
font-size: 1.2rem;
color: #00ff88;
}
/* METATRADER CHART STYLING */
.trading-chart {
flex: 0 0 450px;
width: 450px;
height: 430px;
opacity: 0.95;
}
.chart-container {
position: relative;
width: 100%;
height: 100%;
background: #1a1a2e;
border-radius: 8px;
border: 1px solid rgba(114, 9, 183, 0.3);
backdrop-filter: blur(10px);
padding: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
transition: box-shadow 0.6s ease;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(114, 9, 183, 0.2);
}
.chart-symbol {
font-size: 14px;
font-weight: bold;
color: #e0c3fc;
font-family: 'Courier New', monospace;
}
.chart-price {
font-size: 16px;
font-weight: bold;
color: #00ff88;
font-family: 'Courier New', monospace;
}
.chart-timeframe {
font-size: 11px;
color: rgba(224, 195, 252, 0.6);
font-family: 'Courier New', monospace;
}
.mt-chart {
position: relative;
width: 100%;
height: 260px;
background: #0a0a15;
border: 1px solid rgba(114, 9, 183, 0.2);
border-radius: 4px 4px 0 0;
margin-bottom: 0;
padding-bottom: 0px;
}
.chart-canvas {
width: 100%;
height: 100%;
}
.trade-info {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.7);
padding: 6px 10px;
border-radius: 4px;
font-size: 11px;
font-family: 'Courier New', monospace;
color: #00ff88;
border: 1px solid #00ff88;
z-index: 10;
transition: opacity 0.3s ease;
}
.stats-overlay {
position: relative;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
gap: 10px;
padding: 12px 10px;
background: #0a0a15;
border: 1px solid rgba(114, 9, 183, 0.2);
border-top: none;
border-radius: 0 0 4px 4px;
font-size: 11px;
color: #e0c3fc;
font-family: 'Courier New', monospace;
margin-top: 2px;
}
.stat-item {
flex: 1;
text-align: center;
background: rgba(26, 26, 46, 0.9);
padding: 8px 10px;
border-radius: 6px;
border: 1px solid rgba(114, 9, 183, 0.4);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.stat-value {
display: block;
font-size: 14px;
font-weight: bold;
color: #a663cc;
margin-bottom: 3px;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.floating-icons {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.floating-icon {
position: absolute;
font-size: 24px;
opacity: 0;
animation: float 6s infinite linear;
}
@keyframes float {
0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
10% { opacity: 0.1; }
90% { opacity: 0.1; }
100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}
@media (max-width: 768px) {
.hero-banner {
height: auto;
min-height: 700px;
padding: 40px 15px;
max-width: 100vw;
overflow-x: hidden;
}
.content-wrapper {
flex-direction: column;
text-align: center;
gap: 2rem;
padding: 0 15px;
max-width: 100%;
overflow-x: hidden;
}
.text-content {
order: 2;
padding-top: 20px;
width: 100%;
max-width: 100%;
}
.trading-chart {
order: 1;
flex: none;
width: calc(100% - 20px);
max-width: 380px;
height: 425px;
margin: 20px auto 0;
}
.chart-container {
height: 100%;
width: 100%;
padding: 12px;
}
.mt-chart {
height: 295px;
width: 100%;
}
.main-title {
font-size: 2rem;
margin-bottom: 1.5rem;
word-wrap: break-word;
}
.subtitle {
font-size: 1rem;
margin-bottom: 1.5rem;
padding: 0 10px;
}
.trust-badges {
justify-content: center;
margin-top: 1.5rem;
gap: 1rem;
max-width: 100%;
width: 100%;
}
.trust-item {
flex: 0 0 calc(50% - 0.5rem);
max-width: calc(50% - 0.5rem);
font-size: 0.85rem;
justify-content: center;
}
.trust-item:last-child {
flex: 0 0 100%;
max-width: 300px;
margin: 0 auto;
}
.stats-overlay {
gap: 8px;
padding: 8px 5px;
}
.stat-item {
padding: 6px 5px;
flex: 1;
}
.stat-value {
font-size: 11px;
}
.stat-item span:not(.stat-value) {
font-size: 9px;
}
}
@media (max-width: 480px) {
.hero-banner {
padding: 30px 10px;
min-height: 680px;
}
.content-wrapper {
padding: 0 10px;
}
.trading-chart {
width: calc(100% - 10px);
max-width: 350px;
height: 410px;
}
.chart-container {
padding: 10px;
}
.mt-chart {
height: 275px;
}
.main-title {
font-size: 1.7rem;
padding: 0 5px;
}
.subtitle {
font-size: 0.95rem;
padding: 0 10px;
}
.cta-button {
padding: 12px 25px;
font-size: 0.95rem;
}
.trust-badges {
gap: 0.8rem;
padding: 0 10px;
width: 100%;
justify-content: center;
}
.trust-item {
font-size: 0.8rem;
justify-content: center;
}
.trust-icon {
font-size: 1rem;
}
.stats-overlay {
gap: 6px;
padding: 8px 4px;
}
.stat-item {
padding: 5px 3px;
}
.stat-value {
font-size: 10px;
}
.stat-item span:not(.stat-value) {
font-size: 8px;
}
.chart-price {
font-size: 14px;
}
.chart-symbol {
font-size: 12px;
}
.chart-header {
padding: 0 5px;
}
}
}
#fw-section-featured-collection-ea2b934b-c19d-45b3-ac91-8c2889108c25 {
/* ===== FOURTHWALL HOMEPAGE DESIGN - KOMPLETT NEU ===== */
/* Featured Collection Section Background */
.featured-collection {
background: linear-gradient(180deg, rgba(26, 26, 46, 0.8) 0%, rgba(15, 52, 96, 0.6) 100%) !important;
color: white !important;
/* Kein extra Padding - nutzt Standard Fourthwall Spacing */
}
/* Featured Products Title - ORIGINAL STYLING BEIBEHALTEN */
.featured-collection .section-header__heading {
font-size: 2rem;
font-weight: 900;
background: linear-gradient(45deg, #ffffff, #e0c3fc, #7209b7);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: titleShimmer 3s ease-in-out infinite;
margin-bottom: 20px;
/* Keine Γnderungen am Design - bleibt wie andere Titel */
}
/* Grid Layout fΓΌr verschiedene BildschirmgrΓΆΓen */
.featured-collection .collection__grid .grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 20px !important;
justify-content: center !important;
}
/* Grid Columns - Standard Mobile (eine Spalte) */
.featured-collection .grid__column {
flex: 0 0 calc(100% - 20px) !important;
max-width: calc(100% - 20px) !important;
width: calc(100% - 20px) !important;
margin: 0 !important;
}
/* Desktop: 3 columns */
@media (min-width: 1024px) {
.featured-collection .grid__column {
flex: 0 0 calc(33.333% - 20px) !important;
max-width: calc(33.333% - 20px) !important;
width: calc(33.333% - 20px) !important;
}
}
/* Tablet: 2 columns */
@media (min-width: 640px) and (max-width: 1023px) {
.featured-collection .grid__column {
flex: 0 0 calc(50% - 15px) !important;
max-width: calc(50% - 15px) !important;
width: calc(50% - 15px) !important;
}
.featured-collection .collection__grid .grid {
gap: 15px !important;
}
}
/* Product Tile - Hauptcontainer */
.featured-collection .product-tile {
background: linear-gradient(145deg, rgba(26, 26, 46, 0.9), rgba(15, 52, 96, 0.7)) !important;
border: 1px solid rgba(114, 9, 183, 0.3) !important;
border-radius: 20px !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1) !important;
backdrop-filter: blur(10px) !important;
position: relative !important;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(114, 9, 183, 0.1) inset !important;
width: 100% !important;
height: 100% !important;
}
/* Product Tile Hover Effect */
.featured-collection .product-tile:hover {
transform: translateY(-15px) scale(1.02) !important;
border-color: rgba(114, 9, 183, 0.8) !important;
box-shadow:
0 25px 50px rgba(114, 9, 183, 0.4),
0 0 0 1px rgba(114, 9, 183, 0.3) inset,
0 0 30px rgba(114, 9, 183, 0.2) !important;
}
/* High Performance Badge - Only on Hover *
.featured-collection .product-tile:hover::before {
opacity: 1;
transform: translateY(0);
}
/* Tile Image Container - Oben abgerundet */
.featured-collection .tile__image {
position: relative !important;
overflow: hidden !important;
border-radius: 20px 20px 0 0 !important;
background: rgba(15, 52, 96, 0.3) !important;
}
.featured-collection .tile__image .image {
border-radius: 20px 20px 0 0 !important;
overflow: hidden !important;
}
.featured-collection .tile__image .image--background-color {
border-radius: 20px 20px 0 0 !important;
}
.featured-collection .tile__image .image__object {
border-radius: 20px 20px 0 0 !important;
}
/* Product Images - mit Purple Glow */
.featured-collection .tile__image img {
border-radius: 20px 20px 0 0 !important;
filter: drop-shadow(0 0 20px rgba(114, 9, 183, 0.6)) !important;
transition: all 0.3s ease !important;
width: 100% !important;
height: auto !important;
}
/* Product Image Hover Effect */
.featured-collection .product-tile:hover .tile__image img {
filter: drop-shadow(0 0 30px rgba(114, 9, 183, 1)) !important;
animation: iconPulse 2s infinite !important;
transform: scale(1.05) !important;
}
/* Tile Description Container */
.featured-collection .tile__description {
padding: 20px !important;
background: rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(5px) !important;
position: relative !important;
}
/* Product Heading - mit Gradient Text */
.featured-collection .tile__heading {
background: linear-gradient(45deg, #ffffff, #e0c3fc, #7209b7) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
animation: textShimmer 3s ease-in-out infinite !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin-bottom: 10px !important;
font-size: 1.1rem !important;
}
/* Prices Container */
.featured-collection .tile__prices {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-top: 10px !important;
}
/* Original Price - Purple Gradient Button */
.featured-collection .tile__price--original {
background: linear-gradient(45deg, #7209b7, #a663cc) !important;
color: white !important;
padding: 8px 16px !important;
border-radius: 25px !important;
font-weight: bold !important;
font-size: 1.1rem !important;
box-shadow: 0 5px 15px rgba(114, 9, 183, 0.4) !important;
transition: all 0.3s ease !important;
border: none !important;
display: inline-block !important;
}
.featured-collection .product-tile:hover .tile__price--original {
transform: scale(1.05) !important;
box-shadow: 0 8px 25px rgba(114, 9, 183, 0.6) !important;
}
/* Live Trading Indicator */
.featured-collection .tile__description::after {
content: 'π΄ LIVE TRADING';
position: absolute;
bottom: 5px;
right: 5px;
background: rgba(0, 255, 136, 0.9);
color: white;
padding: 3px 6px;
border-radius: 8px;
font-size: 9px;
font-weight: bold;
animation: pulse 2s infinite;
z-index: 10;
}
/* Tile Link Styling */
.featured-collection .tile {
display: block !important;
text-decoration: none !important;
color: inherit !important;
}
/* View All Button Styling */
.featured-collection .section-header__cta .button,
.featured-collection .collection__cta .button {
background: linear-gradient(45deg, #7209b7, #a663cc) !important;
border: 2px solid rgba(114, 9, 183, 0.5) !important;
color: white !important;
padding: 10px 20px !important;
border-radius: 25px !important;
transition: all 0.3s ease !important;
text-transform: uppercase !important;
font-weight: bold !important;
}
.featured-collection .section-header__cta .button:hover,
.featured-collection .collection__cta .button:hover {
transform: scale(1.05) !important;
box-shadow: 0 8px 25px rgba(114, 9, 183, 0.6) !important;
border-color: rgba(114, 9, 183, 0.8) !important;
}
/* MOBILE OPTIMIERUNGEN */
@media (max-width: 480px) {
/* NUR Produktkarten grΓΆΓer machen - TITEL NICHT ANFASSEN */
/* Container mehr Platz nutzen */
.featured-collection .container.wrapper {
padding-left: 8px !important;
padding-right: 8px !important;
max-width: 100% !important;
}
/* Grid Columns - 96% Breite auf Mobile */
.featured-collection .grid__column {
flex: 0 0 96% !important;
max-width: 96% !important;
width: 96% !important;
}
/* Product Tiles grΓΆΓer auf Mobile */
.featured-collection .product-tile {
min-height: 450px !important;
}
/* GrΓΆΓere Bilder auf Mobile */
.featured-collection .tile__image {
min-height: 280px !important;
}
.featured-collection .tile__image .image {
height: 280px !important;
}
.featured-collection .tile__image img {
height: 100% !important;
object-fit: cover !important;
}
/* Text grΓΆΓer und zentriert */
.featured-collection .tile__description {
padding: 25px 20px !important;
text-align: center !important;
}
.featured-collection .tile__heading {
font-size: 1.5rem !important;
text-align: center !important;
margin-bottom: 15px !important;
}
.featured-collection .tile__prices {
justify-content: center !important;
}
.featured-collection .tile__price--original {
font-size: 1.3rem !important;
padding: 12px 20px !important;
}
/* TITEL BLEIBT ORIGINAL - KEINE ΓNDERUNGEN */
/* Hover Effekte reduziert auf Mobile */
.featured-collection .product-tile:hover {
transform: translateY(-8px) scale(1.01) !important;
}
/* Live Trading Indicator kleiner */
.featured-collection .tile__description::after {
font-size: 8px !important;
padding: 2px 4px !important;
}
}
/* Animationen */
@keyframes titleShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes textShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes iconPulse {
0%, 100% { transform: scale(1.05); }
50% { transform: scale(1.1); }
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); }
}
}
#fw-section-custom-html-a8d0dace-ca07-49f4-8aff-190970a6c864 {
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Arial', sans-serif; background: #0a0a0a; color: white; }
/* ββ PERFORMANCE BANNER βββββββββββββββββββββββββββββββββββββββ */
.performance-banner {
background: linear-gradient(135deg, #0f0f23 0%, #1a0033 50%, #2d0052 100%);
padding: 100px 20px;
position: relative;
overflow: hidden;
}
.performance-banner::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(114,9,183,0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(138,43,226,0.2) 0%, transparent 50%);
animation: gradientShift 8s ease infinite;
}
.performance-container {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 10;
text-align: center;
}
.performance-content { padding: 20px; }
.performance-badge {
display: inline-block;
background: linear-gradient(45deg, #00ff88, #00cc6a);
color: #0a0a0a;
padding: 8px 20px;
border-radius: 30px;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 20px;
animation: badgePulse 2s infinite;
box-shadow: 0 0 20px rgba(0,255,136,0.4);
}
.performance-title {
font-size: 3.5rem;
font-weight: 900;
line-height: 1.1;
margin-bottom: 25px;
background: linear-gradient(135deg, #ffffff 0%, #e0c3fc 50%, #8a2be2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: titleGlow 3s ease-in-out infinite;
}
.performance-subtitle {
font-size: 1.3rem;
color: #e0c3fc;
margin-bottom: 30px;
line-height: 1.6;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.perf-stats-grid {
display: flex;
gap: 20px;
justify-content: center;
margin-bottom: 40px;
}
.perf-stat-box {
background: rgba(114,9,183,0.15);
border: 1px solid rgba(114,9,183,0.4);
border-radius: 15px;
padding: 20px 40px;
text-align: center;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.perf-stat-box:hover {
transform: translateY(-5px);
border-color: rgba(114,9,183,0.8);
box-shadow: 0 10px 30px rgba(114,9,183,0.3);
}
.perf-stat-value {
font-size: 1.8rem;
font-weight: 900;
color: #00ff88;
margin-bottom: 5px;
text-shadow: 0 0 20px rgba(0,255,136,0.5);
}
.perf-stat-label { font-size: 0.9rem; color: #e0c3fc; opacity: 0.8; }
.cta-buttons { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.primary-cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 18px 40px;
background: linear-gradient(45deg, #7209b7, #a663cc);
color: white; text-decoration: none; border-radius: 50px;
font-size: 1.15rem; font-weight: 700;
transition: all 0.3s ease;
box-shadow: 0 10px 40px rgba(114,9,183,0.5);
position: relative; overflow: hidden;
}
.primary-cta::before {
content: '';
position: absolute; top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.primary-cta:hover::before { left: 100%; }
.primary-cta:hover { transform: translateY(-3px); box-shadow: 0 15px 50px rgba(114,9,183,0.7); }
.secondary-cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 18px 40px; background: transparent; color: white;
text-decoration: none; border: 2px solid rgba(114,9,183,0.8);
border-radius: 50px; font-size: 1.15rem; font-weight: 700;
transition: all 0.3s ease;
}
.secondary-cta:hover { background: rgba(114,9,183,0.2); border-color: #7209b7; transform: translateY(-3px); }
.perf-floating-icons { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
.perf-floating-icon { position: absolute; font-size: 30px; opacity: 0.2; animation: floatIcon 6s ease-in-out infinite; }
.perf-floating-icon:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
.perf-floating-icon:nth-child(2) { top: 60%; left: 10%; animation-delay: 1s; }
.perf-floating-icon:nth-child(3) { top: 30%; right: 5%; animation-delay: 2s; }
.perf-floating-icon:nth-child(4) { bottom: 20%; right: 10%; animation-delay: 3s; }
/* ββ HOW IT WORKS βββββββββββββββββββββββββββββββββββββββββββββ */
.how-it-works-section {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #533483 100%);
padding: 80px 20px;
position: relative;
overflow: hidden;
}
.how-it-works-container { max-width: 1400px; margin: 0 auto; position: relative; z-index: 10; }
.section-header { text-align: center; margin-bottom: 60px; }
.section-title {
font-size: 3rem; font-weight: 900;
background: linear-gradient(45deg, #ffffff, #e0c3fc, #7209b7);
background-size: 200% 200%;
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
animation: titleShimmer 3s ease-in-out infinite;
margin-bottom: 15px;
}
.section-subtitle { font-size: 1.2rem; color: #e0c3fc; opacity: 0.9; max-width: 800px; margin: 0 auto; line-height: 1.6; }
.main-steps-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 80px; }
.main-step-card {
background: linear-gradient(145deg, rgba(26,26,46,0.9), rgba(15,52,96,0.7));
border: 1px solid rgba(114,9,183,0.3);
border-radius: 20px; padding: 40px 30px; text-align: center;
position: relative; backdrop-filter: blur(10px);
transition: all 0.4s ease; overflow: hidden;
}
.main-step-card:hover { transform: translateY(-10px); border-color: rgba(114,9,183,0.8); box-shadow: 0 20px 40px rgba(114,9,183,0.4); }
.step-number {
position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
width: 50px; height: 50px;
background: linear-gradient(45deg, #7209b7, #a663cc);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-weight: bold; font-size: 1.2rem; color: white;
box-shadow: 0 5px 15px rgba(114,9,183,0.4);
}
.step-icon { font-size: 4rem; margin: 20px 0; display: block; filter: drop-shadow(0 0 20px rgba(114,9,183,0.6)); animation: iconFloat 3s ease-in-out infinite; }
.step-title {
font-size: 1.5rem; font-weight: bold; color: #ffffff; margin-bottom: 15px;
background: linear-gradient(45deg, #ffffff, #e0c3fc);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.step-description { color: #e0c3fc; line-height: 1.6; font-size: 1rem; }
.features-divider { text-align: center; margin: 60px 0 50px; position: relative; }
.features-divider::before, .features-divider::after {
content: ''; position: absolute; top: 50%; width: 30%; height: 2px;
background: linear-gradient(90deg, transparent, rgba(114,9,183,0.5), transparent);
}
.features-divider::before { left: 0; }
.features-divider::after { right: 0; }
.features-title {
font-size: 2.2rem; font-weight: 900;
background: linear-gradient(45deg, #00ff88, #7209b7, #e0c3fc);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
display: inline-block; padding: 0 30px; position: relative;
}
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 60px; }
.feature-card {
background: linear-gradient(135deg, rgba(114,9,183,0.1), rgba(15,52,96,0.2));
border: 2px solid rgba(114,9,183,0.3);
border-radius: 20px; padding: 35px 30px;
transition: all 0.3s ease; position: relative; overflow: hidden;
}
.feature-card::before {
content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(114,9,183,0.1), transparent);
transition: left 0.5s ease;
}
.feature-card:hover::before { left: 100%; }
.feature-card:hover { border-color: rgba(114,9,183,0.8); box-shadow: 0 10px 30px rgba(114,9,183,0.3); transform: translateY(-5px); }
.feature-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.feature-icon-box {
width: 60px; height: 60px;
background: linear-gradient(45deg, #7209b7, #a663cc);
border-radius: 15px; display: flex; align-items: center; justify-content: center;
font-size: 1.8rem; box-shadow: 0 5px 15px rgba(114,9,183,0.4); flex-shrink: 0;
}
.feature-title-text { font-size: 1.4rem; font-weight: 800; color: #ffffff; line-height: 1.2; }
.feature-title-text .highlight { color: #00ff88; text-shadow: 0 0 10px rgba(0,255,136,0.5); }
.feature-description { color: #e0c3fc; line-height: 1.7; font-size: 1rem; margin-bottom: 15px; }
.feature-bullets { list-style: none; padding: 0; margin: 0; }
.feature-bullets li { color: #ffffff; padding: 8px 0 8px 30px; position: relative; font-size: 0.95rem; }
.feature-bullets li::before { content: 'β'; position: absolute; left: 0; color: #00ff88; font-weight: bold; font-size: 1.1rem; }
.lifetime-value-box {
background: linear-gradient(135deg, rgba(0,255,136,0.1), rgba(114,9,183,0.1));
border: 2px solid rgba(0,255,136,0.4);
border-radius: 20px; padding: 40px; text-align: center; margin-bottom: 50px;
position: relative; overflow: hidden;
}
.lifetime-badge {
display: inline-block;
background: linear-gradient(45deg, #00ff88, #00cc6a);
color: #0a0a0a; padding: 8px 20px; border-radius: 30px;
font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 20px;
box-shadow: 0 0 20px rgba(0,255,136,0.4);
}
.lifetime-title { font-size: 2rem; font-weight: 900; color: #ffffff; margin-bottom: 15px; }
.lifetime-description { font-size: 1.1rem; color: #e0c3fc; line-height: 1.6; max-width: 800px; margin: 0 auto; }
.cta-section { text-align: center; margin-top: 60px; }
.hiw-cta-button {
display: inline-block; padding: 18px 50px;
background: linear-gradient(45deg, #7209b7, #a663cc);
color: white; text-decoration: none; border-radius: 50px;
font-size: 1.2rem; font-weight: 700;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(114,9,183,0.5);
}
.hiw-cta-button:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(114,9,183,0.7); }
/* ββ ANIMATIONS βββββββββββββββββββββββββββββββββββββββββββββββ */
@keyframes gradientShift { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes titleGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } }
@keyframes floatIcon { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(10deg); } }
@keyframes titleShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes iconFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
/* ββ GAP FIXES ββββββββββββββββββββββββββββββββββββββββββββββββ */
.featured-collection { margin-bottom: 0 !important; padding-bottom: 0 !important; }
#fw-section-custom-html-a8d0dace-ca07-49f4-8aff-190970a6c864 { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
#fw-section-newsletter-1751311311 { margin-top: 0 !important; padding-top: 0 !important; }
/* ββ RESPONSIVE βββββββββββββββββββββββββββββββββββββββββββββββ */
@media (max-width: 1024px) {
.main-steps-container { grid-template-columns: 1fr; gap: 30px; }
.features-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.performance-banner { padding: 60px 20px; }
.performance-title { font-size: 2.2rem; }
.performance-subtitle { font-size: 1.1rem; }
.perf-stats-grid { flex-direction: column; align-items: center; }
.cta-buttons { flex-direction: column; }
.primary-cta, .secondary-cta { width: 100%; justify-content: center; }
.how-it-works-section { padding: 60px 20px; }
.section-title { font-size: 2rem; }
.section-subtitle { font-size: 1rem; }
.main-step-card { padding: 35px 25px; }
.feature-card { padding: 30px 20px; }
.features-title { font-size: 1.8rem; }
.lifetime-value-box { padding: 30px 20px; }
}
}
#fw-section-newsletter-1751311311 {
--color-primary: #9A47FF;
--color-primary-rgb: 154, 71, 255;
--color-background: #16162D;
--color-background-rgb: 22, 22, 45;
--color-on-background: #FFFFFF;
--color-on-background-rgb: 255, 255, 255;
--color-on-primary: #FFFFFF;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #16213e;
--color-background-brightness: 25;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #9A47FF;
--primary-btn-text: #FFFFFF;
--primary-btn-border-color: #FFFFFF;
--secondary-btn-bg: transparent;
--secondary-btn-text: #FFFFFF;
--secondary-btn-border-color: #FFFFFF;
/* ===== NEWSLETTER SECTION ENHANCEMENT ===== */
/* Newsletter Container */
.newsletter {
background: linear-gradient(135deg, #0f3460 0%, #533483 50%, #7209b7 100%) !important;
position: relative !important;
overflow: hidden !important;
border: none !important;
padding: 80px 20px !important;
}
/* Floating Background Effects */
.newsletter::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(114, 9, 183, 0.2) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
/* Newsletter Content */
.newsletter__content {
position: relative !important;
z-index: 10 !important;
text-align: center !important;
}
/* Newsletter Heading */
.newsletter__heading {
font-size: 3rem !important;
font-weight: 900 !important;
background: linear-gradient(45deg, #ffffff, #e0c3fc, #9bb5ff, #ffffff) !important;
background-size: 400% 400% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
animation: newsletterGlow 3s ease-in-out infinite !important;
margin-bottom: 20px !important;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.3) !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
}
/* Add subtitle */
.newsletter__heading::after {
content: 'Get exclusive trading insights and EA updates';
display: block;
font-size: 1.2rem;
font-weight: 400;
color: #e0c3fc;
margin-top: 15px;
opacity: 0.9;
background: none;
-webkit-text-fill-color: #e0c3fc;
text-transform: none;
letter-spacing: normal;
text-shadow: none;
animation: none;
}
/* Form Container */
.newsletter-form {
max-width: 500px !important;
margin: 0 auto !important;
position: relative !important;
}
/* Input and Button Container */
.newsletter-form__input-button-container {
display: flex !important;
gap: 15px !important;
align-items: flex-start !important;
background: rgba(0, 0, 0, 0.3) !important;
border: 2px solid rgba(114, 9, 183, 0.4) !important;
border-radius: 50px !important;
padding: 5px !important;
backdrop-filter: blur(10px) !important;
transition: all 0.3s ease !important;
}
.newsletter-form__input-button-container:hover {
border-color: rgba(114, 9, 183, 0.8) !important;
box-shadow: 0 10px 30px rgba(114, 9, 183, 0.3) !important;
}
/* Input Field */
.newsletter-form__input {
flex: 1 !important;
}
.input-field__input {
background: transparent !important;
border: none !important;
color: #ffffff !important;
font-size: 1rem !important;
padding: 15px 20px !important;
outline: none !important;
width: 100% !important;
}
.input-field__input::placeholder {
color: #e0c3fc !important;
opacity: 0.7 !important;
}
.input-field__input:focus {
background: rgba(114, 9, 183, 0.1) !important;
border-radius: 25px !important;
}
/* Subscribe Button */
.newsletter-form__button .button {
background: linear-gradient(45deg, #7209b7, #a663cc) !important;
border: none !important;
border-radius: 25px !important;
padding: 15px 30px !important;
color: white !important;
font-weight: 600 !important;
font-size: 1rem !important;
transition: all 0.3s ease !important;
box-shadow: 0 5px 15px rgba(114, 9, 183, 0.4) !important;
}
.newsletter-form__button .button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(114, 9, 183, 0.6) !important;
background: linear-gradient(45deg, #8f2cc8, #b574d3) !important;
}
/* Success/Error Messages */
.alert--success {
background: linear-gradient(45deg, #00ff88, #00cc6a) !important;
color: white !important;
border: none !important;
border-radius: 15px !important;
padding: 15px 20px !important;
margin-top: 20px !important;
font-weight: 600 !important;
box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3) !important;
}
.alert--error {
background: linear-gradient(45deg, #ff4444, #ff6b6b) !important;
color: white !important;
border: none !important;
border-radius: 15px !important;
padding: 15px 20px !important;
margin-top: 20px !important;
font-weight: 600 !important;
box-shadow: 0 5px 15px rgba(255, 68, 68, 0.3) !important;
}
/* Newsletter Animation */
@keyframes newsletterGlow {
0%, 100% {
background-position: 0% 50%;
filter: drop-shadow(0 0 10px rgba(114, 9, 183, 0.3));
}
50% {
background-position: 100% 50%;
filter: drop-shadow(0 0 20px rgba(114, 9, 183, 0.6));
}
}
/* Gap Fix fΓΌr Newsletter */
.newsletter {
margin-top: 0 !important;
}
/* How It Works/Features zu Newsletter Γbergang */
.features-section + .fw-section .newsletter,
[id*="fw-section-custom-html"] + .fw-section .newsletter {
margin-top: -20px !important;
padding-top: 100px !important;
}
/* Newsletter Section selbst */
.fw-section:has(.newsletter) {
margin-top: -15px !important;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.newsletter__heading {
font-size: 2.5rem !important;
}
.newsletter__heading::after {
font-size: 1rem !important;
}
.newsletter-form__input-button-container {
flex-direction: column !important;
border-radius: 20px !important;
padding: 10px !important;
gap: 10px !important;
}
.newsletter-form__button .button {
width: 100% !important;
border-radius: 15px !important;
}
.newsletter {
padding: 60px 20px !important;
}
}
}
#fw-section-footer {
/* ===== ENHANCED FOOTER STYLING ===== */
/* Footer Container */
.page__footer {
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%) !important;
border-top: 2px solid rgba(114, 9, 183, 0.3) !important;
position: relative !important;
overflow: hidden !important;
}
/* Footer Background Effect */
.page__footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(114, 9, 183, 0.6) 25%,
rgba(114, 9, 183, 1) 50%,
rgba(114, 9, 183, 0.6) 75%,
transparent 100%
);
animation: footerShimmer 3s ease-in-out infinite;
}
/* Footer Content */
.page__footer .footer {
position: relative !important;
z-index: 10 !important;
}
/* Footer Wrapper */
.page__footer .wrapper {
position: relative !important;
z-index: 10 !important;
}
/* Footer Inner Container */
.footer__inner {
position: relative !important;
}
/* Footer Top Section */
.footer__top {
padding-bottom: 20px !important;
border-bottom: 1px solid rgba(114, 9, 183, 0.2) !important;
}
/* Footer Navigation */
.footer__nav {
position: relative !important;
}
/* Footer Menu Links */
.footer__list--menu .footer__menu-link {
color: #e0c3fc !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
padding: 8px 15px !important;
border-radius: 8px !important;
display: inline-block !important;
font-weight: 500 !important;
}
.footer__list--menu .footer__menu-link:hover {
color: #ffffff !important;
background: rgba(114, 9, 183, 0.3) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(114, 9, 183, 0.25) !important;
}
/* Currency Selector */
.footer__menu-link--icon {
background: rgba(114, 9, 183, 0.2) !important;
border: 1px solid rgba(114, 9, 183, 0.4) !important;
border-radius: 12px !important;
padding: 10px 16px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
position: relative !important;
}
.footer__menu-link--icon:hover {
background: rgba(114, 9, 183, 0.4) !important;
border-color: #7209b7 !important;
transform: translateY(-1px) !important;
}
/* Currency Dropdown */
.footer__dropdown {
background: rgba(15, 52, 96, 0.95) !important;
border: 1px solid rgba(114, 9, 183, 0.5) !important;
border-radius: 12px !important;
backdrop-filter: blur(10px) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
margin-top: 8px !important;
}
.footer__dropdown-inner {
padding: 8px !important;
}
.footer__dropdown-link {
color: #e0c3fc !important;
text-decoration: none !important;
padding: 8px 12px !important;
border-radius: 8px !important;
display: block !important;
transition: all 0.3s ease !important;
}
.footer__dropdown-link:hover {
background: rgba(114, 9, 183, 0.3) !important;
color: #ffffff !important;
transform: translateX(4px) !important;
}
/* Footer List Items */
.footer__list-item {
margin: 0 8px !important;
}
/* Footer Bottom Section */
.footer__bottom {
padding-top: 20px !important;
padding-bottom: 10px !important;
border-top: 1px solid rgba(114, 9, 183, 0.2) !important;
margin-top: 20px !important;
}
/* Copyright Text */
.footer__copy {
color: #e0c3fc !important;
opacity: 0.8 !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
}
/* Powered by Link */
.footer__powered-by {
color: #e0c3fc !important;
opacity: 0.7 !important;
font-size: 0.85rem !important;
}
.footer__powered-by a {
color: #e0c3fc !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
padding: 2px 6px !important;
border-radius: 4px !important;
}
.footer__powered-by a:hover {
color: #ffffff !important;
background: rgba(114, 9, 183, 0.2) !important;
transform: translateY(-1px) !important;
}
/* Social Media Icons (if present) */
.footer__list--socials a {
background: rgba(114, 9, 183, 0.2) !important;
border: 1px solid rgba(114, 9, 183, 0.3) !important;
border-radius: 10px !important;
padding: 10px !important;
display: inline-block !important;
margin: 0 5px !important;
transition: all 0.3s ease !important;
color: #e0c3fc !important;
}
.footer__list--socials a:hover {
background: rgba(114, 9, 183, 0.5) !important;
border-color: #7209b7 !important;
transform: translateY(-3px) scale(1.1) !important;
box-shadow: 0 5px 15px rgba(114, 9, 183, 0.4) !important;
color: #ffffff !important;
}
/* Footer Icons */
.footer__link-icon svg {
transition: all 0.3s ease !important;
}
.footer__menu-link--icon:hover .footer__link-icon svg {
transform: rotate(180deg) !important;
}
/* Grid Layout Enhancements */
.footer__inner .grid {
align-items: center !important;
}
.footer__inner .grid__column {
position: relative !important;
}
/* Footer Lists */
.footer__list {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 5px !important;
}
.footer__list--bottom {
justify-content: space-between !important;
align-items: center !important;
}
/* Animations */
@keyframes footerShimmer {
0%, 100% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
}
/* Mobile Responsive */
@media (max-width: 768px) {
.footer__list--menu {
flex-direction: column !important;
gap: 10px !important;
align-items: flex-start !important;
}
.footer__list--bottom {
flex-direction: column !important;
gap: 10px !important;
text-align: center !important;
}
.footer__menu-link {
width: 100% !important;
text-align: center !important;
}
.footer__top {
text-align: center !important;
}
}
@media (max-width: 480px) {
.footer__menu-link--icon {
width: 100% !important;
justify-content: center !important;
}
.footer__list--menu .footer__menu-link {
padding: 12px 20px !important;
margin: 2px 0 !important;
}
}
.footer__powered-by {
display: none !important;
}
}
#fw-section-announcement-bar-cafce7c2-1fa8-41ea-89dd-921194237c42 {
--color-primary: #9A47FF;
--color-primary-rgb: 154, 71, 255;
--color-background: #16162D;
--color-background-rgb: 22, 22, 45;
--color-on-background: #FFFFFF;
--color-on-background-rgb: 255, 255, 255;
--color-on-primary: #FFFFFF;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #16213e;
--color-background-brightness: 25;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #9A47FF;
--primary-btn-text: #FFFFFF;
--primary-btn-border-color: #FFFFFF;
--secondary-btn-bg: transparent;
--secondary-btn-text: #FFFFFF;
--secondary-btn-border-color: #FFFFFF;
}
#fw-section-header {
body {
zoom: 0.5; /* Macht alles 10% kleiner */
}
/* Hauptheader Styling */
.header,
header {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(114, 9, 183, 0.3) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
/* Geometrischer Hintergrund fΓΌr Header */
.header::before,
header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 50%, rgba(114, 9, 183, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(255, 119, 198, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
/* Logo Verbesserungen */
.header .logo,
header .logo,
.header h1,
header h1 {
background: linear-gradient(45deg, #ffffff, #e0c3fc, #7209b7) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
animation: logoGlow 3s ease-in-out infinite !important;
font-weight: 900 !important;
font-size: 1.8rem !important;
text-shadow: 0 0 20px rgba(114, 9, 183, 0.5);
position: relative;
z-index: 10;
}
/* Navigation Links */
.header nav a,
header nav a,
.header .nav-item,
header .nav-item {
color: #e0c3fc !important;
text-decoration: none !important;
padding: 8px 16px !important;
border-radius: 20px !important;
transition: all 0.3s ease !important;
font-weight: 500 !important;
position: relative;
z-index: 10;
}
.header nav a:hover,
header nav a:hover,
.header .nav-item:hover,
header .nav-item:hover {
background: rgba(114, 9, 183, 0.2) !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(114, 9, 183, 0.3) !important;
}
/* WΓ€hrungsauswahl Styling */
.header select,
header select,
.currency-selector {
background: rgba(114, 9, 183, 0.2) !important;
border: 1px solid rgba(114, 9, 183, 0.5) !important;
color: #e0c3fc !important;
padding: 6px 12px !important;
border-radius: 15px !important;
outline: none !important;
transition: all 0.3s ease !important;
position: relative;
z-index: 10;
}
.header select:hover,
header select:hover {
background: rgba(114, 9, 183, 0.4) !important;
border-color: #7209b7 !important;
}
/* Warenkorb Icon */
.header .cart,
header .cart,
.cart-icon {
background: rgba(114, 9, 183, 0.2) !important;
border: 1px solid rgba(114, 9, 183, 0.5) !important;
border-radius: 50% !important;
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #e0c3fc !important;
transition: all 0.3s ease !important;
position: relative;
z-index: 10;
}
.header .cart:hover,
header .cart:hover {
background: rgba(114, 9, 183, 0.4) !important;
transform: scale(1.1) !important;
box-shadow: 0 5px 15px rgba(114, 9, 183, 0.4) !important;
}
/* Badge fΓΌr Warenkorb */
.cart-badge {
position: absolute !important;
top: -5px !important;
right: -5px !important;
background: linear-gradient(45deg, #7209b7, #a663cc) !important;
color: white !important;
border-radius: 50% !important;
width: 18px !important;
height: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 10px !important;
font-weight: bold !important;
animation: pulse 2s infinite !important;
}
/* Mobile Navigation */
.mobile-menu-toggle {
background: rgba(114, 9, 183, 0.2) !important;
border: 1px solid rgba(114, 9, 183, 0.5) !important;
color: #e0c3fc !important;
border-radius: 8px !important;
padding: 8px !important;
position: relative;
z-index: 10;
}
/* Animationen */
@keyframes logoGlow {
0%, 100% {
background-position: 0% 50%;
filter: drop-shadow(0 0 5px rgba(114, 9, 183, 0.3));
}
50% {
background-position: 100% 50%;
filter: drop-shadow(0 0 10px rgba(114, 9, 183, 0.6));
}
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
/* Premium Akzente */
.header::after,
header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent 0%, #7209b7 50%, transparent 100%);
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
/* Verbesserte Transparenz fΓΌr Sticky Header */
.header.sticky,
header.sticky {
background: rgba(26, 26, 46, 0.95) !important;
backdrop-filter: blur(15px) !important;
}
/* Floating Trading Indicator im Header */
.trading-status {
display: inline-flex;
align-items: center;
background: rgba(0, 255, 136, 0.1);
border: 1px solid rgba(0, 255, 136, 0.3);
border-radius: 20px;
padding: 4px 12px;
margin-left: 20px;
font-size: 12px;
color: #00ff88;
animation: pulse 2s infinite;
}
.trading-status::before {
content: 'π’';
margin-right: 6px;
animation: blink 1.5s infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0.3; }
}
/* ===== TRADIWAVE MOBILE MENU - LEBENDIGE VERSION ===== */
/* ===== TRADIWAVE MOBILE MENU - LEBENDIGE VERSION ===== */
/* Hamburger Button - Futuristisch */
.header__icon {
background: linear-gradient(135deg,
rgba(114, 9, 183, 0.2) 0%,
rgba(255, 119, 198, 0.15) 50%,
rgba(120, 219, 255, 0.1) 100%) !important;
border: 2px solid transparent !important;
background-clip: padding-box !important;
border-radius: 16px !important;
padding: 14px !important;
color: #ffffff !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
position: relative !important;
overflow: hidden !important;
box-shadow:
0 8px 25px rgba(114, 9, 183, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
cursor: pointer !important;
}
/* Animated Border fΓΌr Hamburger */
.header__icon::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
#7209b7 0%,
#ff77c6 25%,
#78dbff 50%,
#7209b7 75%,
#ff77c6 100%);
background-size: 300% 300%;
border-radius: 18px;
z-index: -1;
animation: borderRotate 4s linear infinite;
opacity: 0;
transition: opacity 0.3s ease;
}
.header__icon:hover::before {
opacity: 1;
}
.header__icon:hover {
transform: scale(1.1) translateY(-2px) !important;
box-shadow:
0 12px 40px rgba(114, 9, 183, 0.5),
0 0 30px rgba(255, 119, 198, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
background: linear-gradient(135deg,
rgba(114, 9, 183, 0.4) 0%,
rgba(255, 119, 198, 0.3) 50%,
rgba(120, 219, 255, 0.2) 100%) !important;
}
.header__icon svg {
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) !important;
}
.header__icon:hover svg {
transform: rotate(180deg) scale(1.2) !important;
filter: drop-shadow(0 0 15px rgba(255, 119, 198, 0.8)) !important;
}
/* Drawer Background - TRANSPARENTER/DUNKLER fΓΌr rechte Seite */
.drawer__background {
background: rgba(0, 0, 0, 0.75) !important;
backdrop-filter: blur(8px) !important;
transition: all 0.5s ease !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 999 !important;
}
/* DRAWER CONTENT - MIT ABGERUNDETEN ECKEN NUR RECHTS */
.drawer__content {
background: linear-gradient(145deg,
#0a0a1a 0%,
#1a1a2e 20%,
#16213e 40%,
#0f3460 60%,
#533483 80%,
#7209b7 100%) !important;
border-left: 4px solid transparent !important;
border-right: none !important;
background-clip: padding-box !important;
box-shadow:
-20px 0 60px rgba(0, 0, 0, 0.8),
inset 0 0 50px rgba(114, 9, 183, 0.15) !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
right: auto !important;
width: 300px !important;
max-width: 85vw !important;
height: 100vh !important;
overflow-y: auto !important;
transform: translateX(-100%) !important;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
z-index: 1000 !important;
border-top-right-radius: 20px !important;
border-bottom-right-radius: 20px !important;
}
/* Wenn Menu sichtbar */
.drawer.visible .drawer__content {
transform: translateX(0) !important;
}
/* Animated Left Border - ZURΓCK ZU LINKS */
.drawer__content::before {
content: '';
position: absolute;
top: -4px;
left: -8px;
bottom: -4px;
width: 8px;
background: linear-gradient(to bottom,
#ff77c6 0%,
#7209b7 25%,
#78dbff 50%,
#7209b7 75%,
#ff77c6 100%);
background-size: 100% 200%;
animation: borderFlow 4s ease-in-out infinite;
z-index: 5;
}
/* Floating Particles - Das macht den Unterschied! */
.drawer__content::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 20%, rgba(114, 9, 183, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 40%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.12) 0%, transparent 50%),
radial-gradient(circle at 90% 10%, rgba(114, 9, 183, 0.08) 0%, transparent 50%);
animation: particleFloat 10s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
/* Header Section */
.mobile-menu__section--header {
background: transparent !important;
border-bottom: none !important;
padding: 20px 20px 15px 20px !important;
position: relative !important;
z-index: 10 !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
overflow: hidden;
margin: 0 !important;
}
/* X-Button - PERFEKT ZENTRIERT */
.mobile-menu__close {
background: linear-gradient(135deg,
rgba(255, 119, 198, 0.25),
rgba(114, 9, 183, 0.3)) !important;
border: 2px solid rgba(255, 119, 198, 0.6) !important;
border-radius: 50% !important;
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #ffffff !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
position: relative !important;
cursor: pointer !important;
z-index: 100 !important;
margin-left: auto !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* X-Button SVG - PERFEKT ZENTRIERT */
.mobile-menu__close svg {
width: 18px !important;
height: 18px !important;
stroke: #ffffff !important;
stroke-width: 2.5 !important;
fill: none !important;
pointer-events: none !important;
display: block !important;
margin: auto !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* FALLBACK: CSS X wenn kein SVG */
.mobile-menu__close:empty::before,
.mobile-menu__close:not(:has(svg))::before {
content: "β" !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
font-size: 16px !important;
font-weight: bold !important;
color: #ffffff !important;
line-height: 1 !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
.mobile-menu__close:hover {
background: linear-gradient(135deg,
rgba(255, 119, 198, 0.5),
rgba(114, 9, 183, 0.6)) !important;
transform: rotate(90deg) scale(1.1) !important;
box-shadow: 0 5px 20px rgba(255, 119, 198, 0.5) !important;
}
.mobile-menu__close:active {
transform: rotate(90deg) scale(0.95) !important;
}
/* Body Section */
.mobile-menu__section--body {
padding: 20px 15px !important;
position: relative !important;
z-index: 10 !important;
flex: 1 !important;
}
/* Floating Trading Particles im Body */
.mobile-menu__section--body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(2px 2px at 30px 40px, rgba(114, 9, 183, 0.3), transparent),
radial-gradient(1px 1px at 100px 80px, rgba(255, 119, 198, 0.2), transparent),
radial-gradient(1px 1px at 160px 30px, rgba(120, 219, 255, 0.3), transparent),
radial-gradient(1px 1px at 60px 120px, rgba(114, 9, 183, 0.2), transparent);
background-repeat: repeat;
background-size: 200px 140px;
animation: floatingParticles 20s linear infinite;
opacity: 0.4;
pointer-events: none;
z-index: 1;
}
/* MENU LINKS */
.mobile-menu__link,
.mobile-menulink,
aside[data-drawer="mobile-menu"] a {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
padding: 16px 20px !important;
margin-bottom: 12px !important;
color: #e0c3fc !important;
background: linear-gradient(135deg,
rgba(114, 9, 183, 0.18) 0%,
rgba(255, 119, 198, 0.12) 50%,
rgba(120, 219, 255, 0.1) 100%) !important;
border: 2px solid rgba(114, 9, 183, 0.3) !important;
border-radius: 16px !important;
text-decoration: none !important;
font-size: 16px !important;
font-weight: 600 !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
position: relative !important;
overflow: hidden !important;
box-shadow:
0 6px 20px rgba(114, 9, 183, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
z-index: 10 !important;
}
/* Animated Border fΓΌr Links */
.mobile-menu__link::before,
.mobile-menulink::before,
aside[data-drawer="mobile-menu"] a::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #7209b7, #ff77c6, #78dbff, #7209b7);
background-size: 300% 300%;
border-radius: 18px;
z-index: -1;
opacity: 0;
animation: borderRotate 3s linear infinite;
transition: opacity 0.3s ease;
}
.mobile-menu__link:hover::before,
.mobile-menulink:hover::before,
aside[data-drawer="mobile-menu"] a:hover::before {
opacity: 1;
}
/* BUTTON HOVER - WIE "EXPLORE THE COLLECTION" */
.mobile-menu__link:hover,
.mobile-menulink:hover,
aside[data-drawer="mobile-menu"] a:hover {
background: linear-gradient(135deg,
#8B5A87 0%,
#A855C6 25%,
#9333EA 50%,
#7C3AED 75%,
#6D28D9 100%) !important;
border-color: rgba(168, 85, 198, 0.8) !important;
color: #ffffff !important;
transform: translateX(8px) scale(1.02) !important;
box-shadow:
0 10px 30px rgba(168, 85, 198, 0.4),
0 0 20px rgba(147, 51, 234, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.5) !important;
}
/* Footer Section */
.mobile-menu__section--socials {
background: transparent !important;
border-top: none !important;
padding: 15px 20px 20px 20px !important;
position: relative !important;
z-index: 10 !important;
margin-top: auto !important;
}
/* Entrance Animation */
.drawer.visible .drawer__content {
animation: drawerSlideInFromLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes drawerSlideInFromLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Alternative Drawer selektoren */
aside[data-drawer="mobile-menu"] {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 999 !important;
pointer-events: none !important;
}
aside[data-drawer="mobile-menu"].visible {
pointer-events: auto !important;
}
aside[data-drawer="mobile-menu"] .drawer__background,
aside[data-drawer="mobile-menu"] .drawerbackground {
background: rgba(0, 0, 0, 0.75) !important;
backdrop-filter: blur(8px) !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
aside[data-drawer="mobile-menu"] .drawer__content,
aside[data-drawer="mobile-menu"] .drawercontent {
background: linear-gradient(145deg,
#0a0a1a 0%,
#1a1a2e 20%,
#16213e 40%,
#0f3460 60%,
#533483 80%,
#7209b7 100%) !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 300px !important;
max-width: 85vw !important;
height: 100% !important;
transform: translateX(-100%) !important;
transition: transform 0.4s ease !important;
overflow-y: auto !important;
z-index: 1000 !important;
border-top-right-radius: 20px !important;
border-bottom-right-radius: 20px !important;
}
aside[data-drawer="mobile-menu"].visible .drawer__content,
aside[data-drawer="mobile-menu"].visible .drawercontent {
transform: translateX(0) !important;
}
/* Shimmer Effect */
.mobile-menu__link::after,
.mobile-menulink::after,
aside[data-drawer="mobile-menu"] a::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.15),
transparent);
transition: left 0.5s ease;
z-index: 1;
opacity: 0;
}
.mobile-menu__link:hover::after,
.mobile-menulink:hover::after,
aside[data-drawer="mobile-menu"] a:hover::after {
left: 100%;
opacity: 1;
}
/* ALLE WICHTIGEN ANIMATIONEN */
@keyframes borderRotate {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes borderFlow {
0%, 100% {
background-position: 0% 0%;
opacity: 0.8;
}
50% {
background-position: 0% 100%;
opacity: 1;
}
}
@keyframes particleFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.8;
}
25% {
transform: translateY(-15px) rotate(90deg);
opacity: 1;
}
50% {
transform: translateY(-5px) rotate(180deg);
opacity: 0.9;
}
75% {
transform: translateY(-20px) rotate(270deg);
opacity: 1;
}
}
@keyframes floatingParticles {
0% {
transform: translateY(0px) translateX(0px) rotate(0deg);
opacity: 0.4;
}
25% {
transform: translateY(-40px) translateX(15px) rotate(90deg);
opacity: 0.6;
}
50% {
transform: translateY(-80px) translateX(-10px) rotate(180deg);
opacity: 0.8;
}
75% {
transform: translateY(-120px) translateX(20px) rotate(270deg);
opacity: 0.5;
}
100% {
transform: translateY(-160px) translateX(0px) rotate(360deg);
opacity: 0.3;
}
}
/* RESPONSIVE */
@media (max-width: 480px) {
.drawer__content {
width: 260px !important;
max-width: 90vw !important;
}
.mobile-menu__link,
.mobile-menulink,
aside[data-drawer="mobile-menu"] a {
font-size: 15px !important;
padding: 14px 18px !important;
margin-bottom: 10px !important;
}
.mobile-menu__close {
width: 35px !important;
height: 35px !important;
}
.mobile-menu__close svg {
width: 16px !important;
height: 16px !important;
}
}
/* Sicherstellen dass Links sichtbar sind */
.mobile-menu__list-item,
.mobile-menulist-item {
opacity: 1 !important;
transform: translateX(0) !important;
display: block !important;
visibility: visible !important;
}
/* Alternative Selektoren */
.mobile-menulist-item,
.drawer .mobile-menu__list-item,
aside[data-drawer="mobile-menu"] li {
opacity: 1 !important;
transform: translateX(0) !important;
display: block !important;
visibility: visible !important;
}
}
#fw-section-product-product-default {
/* ===== FOURTHWALL PRODUKTSEITE - ECHTE STRUKTUR ===== */
/* Page Background */
.page__main {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #7209b7 100%) !important;
min-height: 100vh !important;
}
/* Product Section */
.product {
background: transparent !important;
color: white !important;
}
/* Hauptgrid anpassen - grΓΆΓeres Bild links, maximaler Platz rechts */
.product__main .grid {
display: grid !important;
grid-template-columns: 600px 1fr !important;
gap: 40px !important;
align-items: start !important;
max-width: 100% !important;
width: 100% !important;
}
/* Linke Spalte - Produktgalerie noch grΓΆΓer */
.product__main .grid__column--7\@sm {
grid-column: 1 !important;
width: 600px !important;
max-width: 600px !important;
padding: 15px !important;
overflow: visible !important;
}
/* Rechte Spalte - Produktinfos maximale Breite */
.product__main .grid__column--5\@sm {
grid-column: 2 !important;
width: 100% !important;
max-width: none !important;
}
/* Container wrapper fΓΌr volle Breite */
.product .container.wrapper {
max-width: 100% !important;
padding-left: 30px !important;
padding-right: 30px !important;
}
/* Produktgalerie Container - overflow fΓΌr Hover-Effekt */
.product__gallery {
overflow: visible !important;
padding: 10px !important;
}
/* Gallery Main Container - overflow sichtbar */
.gallery,
.gallery__main,
.gallery__main-inner {
overflow: visible !important;
}
/* Gallery Container - mit Platz fΓΌr Hover-Effekt */
.gallery__image-container {
background: rgba(15, 52, 96, 0.3) !important;
border: 2px solid rgba(114, 9, 183, 0.3) !important;
border-radius: 25px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
backdrop-filter: blur(15px) !important;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(114, 9, 183, 0.2) inset !important;
min-height: 500px !important;
width: 100% !important;
position: relative !important;
z-index: 1 !important;
}
.gallery__image-container:hover {
border-color: rgba(114, 9, 183, 0.8) !important;
box-shadow:
0 30px 60px rgba(114, 9, 183, 0.4),
0 0 0 1px rgba(114, 9, 183, 0.4) inset !important;
transform: translateY(-8px) scale(1.02) !important;
z-index: 10 !important;
}
.gallery__image-object {
border-radius: 23px !important;
transition: all 0.3s ease !important;
width: 100% !important;
height: auto !important;
}
/* Gallery Navigation */
.gallery__nav-item {
background: rgba(114, 9, 183, 0.2) !important;
border: 1px solid rgba(114, 9, 183, 0.5) !important;
border-radius: 50% !important;
color: #e0c3fc !important;
backdrop-filter: blur(10px) !important;
transition: all 0.3s ease !important;
}
.gallery__nav-item:hover {
background: rgba(114, 9, 183, 0.5) !important;
border-color: #7209b7 !important;
transform: scale(1.1) !important;
}
/* Thumbnails - auch grΓΆΓer machen */
.gallery-thumbs__image-container {
background: rgba(15, 52, 96, 0.2) !important;
border: 2px solid rgba(114, 9, 183, 0.3) !important;
border-radius: 15px !important;
transition: all 0.3s ease !important;
min-width: 80px !important;
min-height: 80px !important;
}
.gallery-thumbs__image-container:hover {
border-color: rgba(114, 9, 183, 0.8) !important;
transform: scale(1.1) !important;
box-shadow: 0 5px 15px rgba(114, 9, 183, 0.3) !important;
}
/* Product Info Container - ohne Γ€uΓeren Rahmen */
.product__info,
.product-info {
background: linear-gradient(145deg, rgba(26, 26, 46, 0.9), rgba(15, 52, 96, 0.7)) !important;
backdrop-filter: blur(15px) !important;
border: none !important;
border-radius: 20px !important;
padding: 30px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
width: 100% !important;
}
/* Product Title */
.product-info__title {
font-size: 2.5rem !important;
font-weight: 900 !important;
background: linear-gradient(45deg, #ffffff, #e0c3fc, #7209b7) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
animation: titleShimmer 3s ease-in-out infinite !important;
margin-bottom: 20px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
/* Product Price */
.product-info__price--original {
background: linear-gradient(45deg, #7209b7, #a663cc) !important;
color: white !important;
padding: 12px 24px !important;
border-radius: 25px !important;
font-weight: bold !important;
font-size: 1.5rem !important;
box-shadow: 0 5px 15px rgba(114, 9, 183, 0.4) !important;
border: none !important;
display: inline-block !important;
transition: all 0.3s ease !important;
}
.product-info__price--original:hover {
transform: scale(1.05) !important;
box-shadow: 0 8px 25px rgba(114, 9, 183, 0.6) !important;
}
/* Product Description - mit Scroll */
.product-info__description {
background: rgba(114, 9, 183, 0.1) !important;
border: 1px solid rgba(114, 9, 183, 0.3) !important;
border-radius: 15px !important;
padding: 25px !important;
margin: 20px 0 !important;
color: #e0c3fc !important;
backdrop-filter: blur(5px) !important;
max-height: 400px !important;
overflow-y: auto !important;
line-height: 1.7 !important;
}
/* Custom Scrollbar */
.product-info__description::-webkit-scrollbar {
width: 8px !important;
}
.product-info__description::-webkit-scrollbar-track {
background: rgba(114, 9, 183, 0.1) !important;
border-radius: 10px !important;
}
.product-info__description::-webkit-scrollbar-thumb {
background: rgba(114, 9, 183, 0.5) !important;
border-radius: 10px !important;
}
.product-info__description::-webkit-scrollbar-thumb:hover {
background: rgba(114, 9, 183, 0.8) !important;
}
/* Beschreibung Typography */
.product-info__description h1,
.product-info__description h2,
.product-info__description h3 {
color: #ffffff !important;
margin-top: 25px !important;
margin-bottom: 15px !important;
font-weight: 700 !important;
}
.product-info__description h1 {
font-size: 1.8rem !important;
background: linear-gradient(45deg, #ffffff, #e0c3fc) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.product-info__description h2 {
font-size: 1.5rem !important;
color: #e0c3fc !important;
}
.product-info__description h3 {
font-size: 1.3rem !important;
color: #b8c5d6 !important;
}
.product-info__description ul,
.product-info__description ol {
margin: 15px 0 !important;
padding-left: 25px !important;
}
.product-info__description li {
margin: 8px 0 !important;
color: #b8c5d6 !important;
}
.product-info__description strong {
color: #ffffff !important;
font-weight: 600 !important;
}
/* Quantity Selector */
.select-field {
background: rgba(15, 52, 96, 0.3) !important;
border: 2px solid rgba(114, 9, 183, 0.5) !important;
border-radius: 15px !important;
backdrop-filter: blur(10px) !important;
transition: all 0.3s ease !important;
}
.select-field:hover,
.select-field:focus-within {
border-color: #7209b7 !important;
box-shadow: 0 5px 15px rgba(114, 9, 183, 0.3) !important;
}
.select-field__select {
background: transparent !important;
color: #e0c3fc !important;
font-weight: 600 !important;
padding: 12px 15px !important;
}
.select-field__dropdown-icon {
color: #e0c3fc !important;
}
/* Add to Cart Button */
.button--primary {
background: linear-gradient(45deg, #7209b7, #a663cc) !important;
border: none !important;
border-radius: 25px !important;
padding: 15px 30px !important;
color: white !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
transition: all 0.3s ease !important;
box-shadow: 0 8px 25px rgba(114, 9, 183, 0.4) !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
.button--primary:hover {
transform: translateY(-3px) scale(1.02) !important;
box-shadow: 0 12px 35px rgba(114, 9, 183, 0.6) !important;
background: linear-gradient(45deg, #8f2cc8, #b574d3) !important;
}
/* Sticky Add to Cart */
.sticky-add-to-cart {
background: rgba(15, 52, 96, 0.95) !important;
backdrop-filter: blur(15px) !important;
border-top: 2px solid rgba(114, 9, 183, 0.5) !important;
padding: 15px !important;
}
/* Product Recommendations */
.product-recommendations {
background: linear-gradient(180deg, rgba(26, 26, 46, 0.8) 0%, rgba(15, 52, 96, 0.6) 100%) !important;
color: white !important;
}
/* "You may also like" Title */
.collection__heading {
font-size: 3rem !important;
font-weight: 900 !important;
background: linear-gradient(45deg, #ffffff, #e0c3fc, #7209b7) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
animation: titleShimmer 3s ease-in-out infinite !important;
text-align: center !important;
margin-bottom: 40px !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
}
/* Product Tiles in Recommendations */
.product-tile {
background: linear-gradient(145deg, rgba(26, 26, 46, 0.9), rgba(15, 52, 96, 0.7)) !important;
border: 1px solid rgba(114, 9, 183, 0.3) !important;
border-radius: 20px !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1) !important;
backdrop-filter: blur(10px) !important;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(114, 9, 183, 0.1) inset !important;
}
.product-tile:hover {
transform: translateY(-15px) scale(1.02) !important;
border-color: rgba(114, 9, 183, 0.8) !important;
box-shadow:
0 25px 50px rgba(114, 9, 183, 0.4),
0 0 0 1px rgba(114, 9, 183, 0.3) inset,
0 0 30px rgba(114, 9, 183, 0.2) !important;
}
/* Product Tile Images */
.tile__image .image {
border-radius: 20px 20px 0 0 !important;
overflow: hidden !important;
}
.tile__image img {
border-radius: 20px 20px 0 0 !important;
transition: all 0.3s ease !important;
}
.product-tile:hover .tile__image img {
transform: scale(1.05) !important;
}
/* Product Tile Content */
.tile__description {
padding: 20px !important;
background: rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(5px) !important;
}
.tile__heading {
background: linear-gradient(45deg, #ffffff, #e0c3fc, #7209b7) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
animation: textShimmer 3s ease-in-out infinite !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin-bottom: 10px !important;
}
.tile__price--original {
background: linear-gradient(45deg, #7209b7, #a663cc) !important;
color: white !important;
padding: 8px 16px !important;
border-radius: 25px !important;
font-weight: bold !important;
font-size: 1.1rem !important;
box-shadow: 0 5px 15px rgba(114, 9, 183, 0.4) !important;
transition: all 0.3s ease !important;
display: inline-block !important;
}
.product-tile:hover .tile__price--original {
transform: scale(1.05) !important;
box-shadow: 0 8px 25px rgba(114, 9, 183, 0.6) !important;
}
/* Sale Price */
.tile__price--offer {
color: #ff6b6b !important;
text-decoration: line-through !important;
opacity: 0.7 !important;
font-size: 0.9rem !important;
margin-right: 10px !important;
}
/* Animations */
@keyframes titleShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes textShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Mobile Responsive */
@media (max-width: 1024px) {
.product__main .grid {
grid-template-columns: 450px 1fr !important;
gap: 30px !important;
}
.product__main .grid__column--7\@sm {
width: 450px !important;
max-width: 450px !important;
border: 2px solid rgba(114, 9, 183, 0.3) !important;
border-radius: 25px !important;
padding: 10px !important;
}
.product__main .grid__column--5\@sm {
border: 2px solid rgba(114, 9, 183, 0.3) !important;
border-radius: 25px !important;
}
.gallery__image-container {
min-height: 400px !important;
}
.product__gallery {
padding: 8px !important;
}
}
@media (max-width: 768px) {
/* Mobile Grid - zurΓΌck zu Grid fΓΌr bessere Kontrolle */
.product__main .grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
gap: 20px !important;
max-width: 100vw !important;
padding: 0 5% !important;
margin: 0 auto !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Mobile Container - volle Breite */
.product .container.wrapper {
padding-left: 0px !important;
padding-right: 0px !important;
max-width: 100% !important;
margin: 0 auto !important;
width: 100% !important;
}
/* Mobile Product Main - volle Breite */
.product__main {
width: 100% !important;
margin: 0 auto !important;
}
/* Linke Spalte (Bild) - ZWEITE Reihe auf Mobile */
.product__main .grid__column--7\@sm {
grid-row: 2 !important;
grid-column: 1 !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
padding: 20px !important;
background: linear-gradient(145deg, rgba(26, 26, 46, 0.9), rgba(15, 52, 96, 0.7)) !important;
backdrop-filter: blur(15px) !important;
border: 2px solid rgba(114, 9, 183, 0.3) !important;
border-radius: 25px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
/* Rechte Spalte (Text) - ERSTE Reihe auf Mobile */
.product__main .grid__column--5\@sm {
grid-row: 1 !important;
grid-column: 1 !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
padding: 20px !important;
background: linear-gradient(145deg, rgba(26, 26, 46, 0.9), rgba(15, 52, 96, 0.7)) !important;
backdrop-filter: blur(15px) !important;
border: 2px solid rgba(114, 9, 183, 0.3) !important;
border-radius: 25px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
/* Mobile Galerie - kein eigener Rahmen mehr */
.gallery__image-container {
min-height: 300px !important;
width: 100% !important;
margin: 0 auto !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* Mobile Produktinfo - kein eigener Rahmen mehr */
.product-info {
padding: 0 !important;
width: 100% !important;
margin: 0 auto !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Mobile Beschreibung - grΓΆΓer */
.product-info__description {
max-height: 500px !important;
font-size: 1rem !important;
padding: 20px !important;
line-height: 1.6 !important;
}
/* Mobile Titel */
.product-info__title {
font-size: 1.8rem !important;
text-align: center !important;
}
/* Mobile Collection Heading */
.collection__heading {
font-size: 2rem !important;
text-align: center !important;
}
/* Mobile Product Tiles */
.product-tile:hover {
transform: translateY(-8px) scale(1.01) !important;
}
/* Mobile Gallery Padding */
.product__gallery {
padding: 0px !important;
width: 100% !important;
margin: 0 auto !important;
}
/* Mobile Button - volle Breite */
.button--primary {
width: 100% !important;
margin: 0 auto !important;
display: block !important;
}
/* Mobile Quantity Selector */
.select-field {
width: 100% !important;
margin: 15px auto !important;
}
}
}
#fw-section-product-recommendations-product-default {
/* ===== YOU MAY ALSO LIKE SECTION CSS ===== */
/* Product Recommendations Section Background */
.product-recommendations {
background: linear-gradient(180deg, rgba(26, 26, 46, 0.8) 0%, rgba(15, 52, 96, 0.6) 100%) !important;
color: white !important;
padding: 60px 0 !important;
}
/* "You may also like" Title */
.collection__heading,
.product-recommendations .collection__heading {
font-size: 3rem !important;
font-weight: 900 !important;
background: linear-gradient(45deg, #ffffff, #e0c3fc, #7209b7) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
animation: titleShimmer 3s ease-in-out infinite !important;
text-align: center !important;
margin-bottom: 40px !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
text-shadow: 0 0 30px rgba(114, 9, 183, 0.5) !important;
}
/* GRID FIX - Override Fourthwall Classes */
.product-recommendations .collection__grid .grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 20px !important;
justify-content: center !important;
}
.product-recommendations .grid__column {
flex: 0 0 calc(100% - 20px) !important;
max-width: calc(100% - 20px) !important;
width: calc(100% - 20px) !important;
margin: 0 !important;
}
/* Desktop: 3 columns */
@media (min-width: 1024px) {
.product-recommendations .grid__column {
flex: 0 0 calc(33.333% - 20px) !important;
max-width: calc(33.333% - 20px) !important;
width: calc(33.333% - 20px) !important;
}
}
/* Tablet: 2 columns */
@media (min-width: 640px) and (max-width: 1023px) {
.product-recommendations .grid__column {
flex: 0 0 calc(50% - 15px) !important;
max-width: calc(50% - 15px) !important;
width: calc(50% - 15px) !important;
}
.product-recommendations .collection__grid .grid {
gap: 15px !important;
}
}
/* Individual Product Tiles */
.product-recommendations .product-tile {
background: linear-gradient(145deg, rgba(26, 26, 46, 0.9), rgba(15, 52, 96, 0.7)) !important;
border: 1px solid rgba(114, 9, 183, 0.3) !important;
border-radius: 20px !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1) !important;
backdrop-filter: blur(10px) !important;
position: relative !important;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(114, 9, 183, 0.1) inset !important;
width: 100% !important;
height: 100% !important;
}
/* Product Tile Hover Effect */
.product-recommendations .product-tile:hover {
transform: translateY(-15px) scale(1.02) !important;
border-color: rgba(114, 9, 183, 0.8) !important;
box-shadow:
0 25px 50px rgba(114, 9, 183, 0.4),
0 0 0 1px rgba(114, 9, 183, 0.3) inset,
0 0 30px rgba(114, 9, 183, 0.2) !important;
}
/* Performance Badge - Only on Hover */
.product-recommendations .product-tile::before {
content: 'π HIGH PERFORMANCE';
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(45deg, #00ff88, #00cc6a);
color: white;
padding: 3px 8px;
border-radius: 8px;
font-size: 9px;
font-weight: bold;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 15;
}
.product-recommendations .product-tile:hover::before {
opacity: 1;
transform: translateY(0);
}
/* Product Image Container - Rounded Top */
.product-recommendations .tile__image {
position: relative !important;
overflow: hidden !important;
border-radius: 20px 20px 0 0 !important;
background: rgba(15, 52, 96, 0.3) !important;
}
.product-recommendations .tile__image .image {
border-radius: 20px 20px 0 0 !important;
overflow: hidden !important;
}
.product-recommendations .tile__image .image__object {
border-radius: 20px 20px 0 0 !important;
}
.product-recommendations .tile__image img {
border-radius: 20px 20px 0 0 !important;
filter: drop-shadow(0 0 20px rgba(114, 9, 183, 0.6)) !important;
transition: all 0.3s ease !important;
width: 100% !important;
height: auto !important;
}
/* Product Image Hover Effect */
.product-recommendations .product-tile:hover .tile__image img {
filter: drop-shadow(0 0 30px rgba(114, 9, 183, 1)) !important;
animation: iconPulse 2s infinite !important;
transform: scale(1.05) !important;
}
/* Product Description Container */
.product-recommendations .tile__description {
padding: 20px !important;
background: rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(5px) !important;
position: relative !important;
}
/* Product Title */
.product-recommendations .tile__heading {
background: linear-gradient(45deg, #ffffff, #e0c3fc, #7209b7) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
animation: textShimmer 3s ease-in-out infinite !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin-bottom: 10px !important;
font-size: 1.1rem !important;
}
/* Product Prices Container */
.product-recommendations .tile__prices {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-top: 10px !important;
}
/* Original Price */
.product-recommendations .tile__price--original {
background: linear-gradient(45deg, #7209b7, #a663cc) !important;
color: white !important;
padding: 8px 16px !important;
border-radius: 25px !important;
font-weight: bold !important;
font-size: 1.1rem !important;
box-shadow: 0 5px 15px rgba(114, 9, 183, 0.4) !important;
transition: all 0.3s ease !important;
border: none !important;
display: inline-block !important;
}
.product-recommendations .product-tile:hover .tile__price--original {
transform: scale(1.05) !important;
box-shadow: 0 8px 25px rgba(114, 9, 183, 0.6) !important;
}
/* Sale Price (Strikethrough) */
.product-recommendations .tile__price--offer {
color: #ff6b6b !important;
text-decoration: line-through !important;
opacity: 0.7 !important;
font-size: 0.9rem !important;
margin-right: 5px !important;
}
/* Sale Badge for Discounted Items */
.product-recommendations .tile__price--offer:not(:empty) + .tile__price--original {
position: relative;
}
.product-recommendations .tile__price--offer:not(:empty) + .tile__price--original::before {
content: 'SALE';
position: absolute;
top: -25px;
left: 0;
background: linear-gradient(45deg, #ff4444, #ff6b6b);
color: white;
padding: 3px 8px;
border-radius: 8px;
font-size: 10px;
font-weight: bold;
animation: bounce 2s infinite;
z-index: 10;
}
/* Live Trading Indicator */
.product-recommendations .tile__description::after {
content: 'π’ LIVE TRADING';
position: absolute;
bottom: 5px;
right: 5px;
background: rgba(0, 255, 136, 0.9);
color: white;
padding: 3px 6px;
border-radius: 8px;
font-size: 9px;
font-weight: bold;
animation: pulse 2s infinite;
z-index: 10;
}
/* Link Styling */
.product-recommendations .tile {
display: block !important;
text-decoration: none !important;
color: inherit !important;
}
/* Animations */
@keyframes titleShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes textShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes iconPulse {
0%, 100% { transform: scale(1.05); }
50% { transform: scale(1.1); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-5px); }
60% { transform: translateY(-3px); }
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); }
}
/* Mobile Responsive */
@media (max-width: 768px) {
.collection__heading,
.product-recommendations .collection__heading {
font-size: 2.5rem !important;
}
.product-recommendations .product-tile:hover {
transform: translateY(-8px) scale(1.01) !important;
}
}
@media (max-width: 480px) {
.collection__heading,
.product-recommendations .collection__heading {
font-size: 2rem !important;
}
.product-recommendations .tile__description::after {
font-size: 8px !important;
padding: 2px 4px !important;
}
}
}