/* ============================================================ Dorfleben Shop — „LOS SANTOS NEON" Verschmelzung aus 4 Fable-5-Konzepten: dunkles Glas + Neon (Pink/Cyan/Violett) + Gold-Preise, animierte Aurora, 3D-Tilt-Karten, Sheen-Sweep, Partikel-Burst, Fly-to-Cart. Scope: . GTA-Nacht-Produktbilder. ============================================================ */ body.shop-dark { --sh-bg: #08140a; --sh-bg-deep: #040a05; --sh-surface: rgba(16, 34, 18, 0.72); --sh-surface-2: #14281a; --sh-border: rgba(120, 200, 130, 0.16); --sh-border-hi: rgba(150, 230, 150, 0.5); --sh-text: #f2f7ef; --sh-dim: #aac2a5; --sh-faint: #6d8468; --sh-pink: #4caf50; /* Marken-Gruen (CTA/Akzent) */ --sh-cyan: #fbd9a1; /* Sand/Creme (Trust/Tabs/Pfeil) */ --sh-violet: #40741d; /* Wald-Gruen (Atmosphaere) */ --sh-gold: #f2ca7a; /* Creme-Gold (Preise) */ --sh-grad-sign: linear-gradient(105deg, #4caf50 0%, #7ed957 48%, #fbd9a1 100%); --sh-grad-cta: linear-gradient(135deg, #4caf50, #40741d 58%, #6fd36f); --sh-grad-gold: linear-gradient(120deg, #ffe9c2, #fbd9a1 50%, #e0b060); --sh-grad-card: linear-gradient(180deg, #10240f 0%, #081206 100%); --sh-glow-pink: 0 0 24px rgba(76,175,80,.45), 0 0 64px rgba(76,175,80,.16); --sh-glow-cyan: 0 0 22px rgba(251,217,161,.4), 0 0 56px rgba(251,217,161,.14); --sh-glow-gold: 0 0 24px rgba(242,202,122,.42), 0 0 64px rgba(242,202,122,.14); --sh-shadow: 0 20px 52px -18px rgba(0,0,0,.8); --sh-pop: cubic-bezier(.22,1.35,.36,1); background: var(--sh-bg) !important; background-attachment: initial !important; color: var(--sh-text); } /* Vice-Overlays der Hauptseite auf dem Shop ausblenden (wir bringen eigene FX) */ .shop-dark .grain, .shop-dark .scanlines, .shop-dark .cursor-glow { display: none !important; } .shop-dark .nav { background: rgba(8,20,10,.85); border-bottom: 1px solid var(--sh-border); } /* Geteilte Section-Header (styles.css) fürs dunkle Theme */ .shop-dark .section-title { color: var(--sh-text); } .shop-dark .section-lead { color: var(--sh-dim); } .shop-dark .eyebrow { color: var(--sh-faint); } .shop-dark .gradient-text { background: var(--sh-grad-sign); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sh-flow 6s linear infinite; filter: drop-shadow(0 0 22px rgba(76,175,80,.4)); } @keyframes sh-flow { to { background-position: 220% 0; } } /* ---------- FX-EBENEN (per JS injiziert) ---------- */ .fx-orb { position: fixed; z-index: -3; pointer-events: none; width: 58vmax; height: 58vmax; border-radius: 50%; filter: blur(95px); will-change: transform; } .fx-orb--1 { top: -24vmax; left: -14vmax; background: radial-gradient(circle, rgba(64,116,29,.30), rgba(76,175,80,.12) 45%, transparent 70%); animation: orb-a 27s ease-in-out infinite alternate; } .fx-orb--2 { bottom: -26vmax; right: -16vmax; background: radial-gradient(circle, rgba(251,217,161,.22), rgba(64,116,29,.10) 50%, transparent 70%); animation: orb-b 34s ease-in-out infinite alternate; } .fx-orb--3 { top: 34vh; left: 40vw; width: 40vmax; height: 40vmax; background: radial-gradient(circle, rgba(76,175,80,.14), transparent 65%); animation: orb-a 42s ease-in-out infinite alternate-reverse; } @keyframes orb-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(9vw,6vh,0) scale(1.16); } } @keyframes orb-b { from { transform: translate3d(0,0,0) scale(1.08); } to { transform: translate3d(-8vw,-5vh,0) scale(.94); } } .fx-grain { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .fx-vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(125% 95% at 50% 35%, transparent 55%, rgba(2,2,10,.9) 100%); } .shop-main { padding-top: 84px; position: relative; z-index: 1; } /* ---------- HERO ---------- */ .shop-hero { position: relative; padding: 70px 0 34px; text-align: center; } .shop-hero .container { position: relative; z-index: 2; } .shop-hero-glow { position: absolute; top: -20px; left: 50%; z-index: 0; width: 720px; max-width: 110vw; height: 420px; transform: translateX(-50%); background: radial-gradient(50% 55% at 40% 45%, rgba(76,175,80,.22), transparent 70%), radial-gradient(50% 55% at 62% 40%, rgba(64,116,29,.20), transparent 70%); filter: blur(46px); pointer-events: none; animation: hero-breathe 7s ease-in-out infinite; } @keyframes hero-breathe { 0%,100% { opacity: .82; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.1); } } .shop-hero h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 7.5vw, 5.6rem); line-height: .94; letter-spacing: .03em; margin: 12px 0 10px; text-shadow: 0 0 40px rgba(251,217,161,.18); } .shop-hero-lead { color: var(--sh-dim); max-width: 620px; margin: 0 auto 22px; font-size: clamp(1rem, 2.3vw, 1.16rem); } .shop-hero-lead strong { color: var(--sh-text); } .shop-fair-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px; border-radius: 999px; margin-bottom: 6px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--sh-cyan); border: 1px solid rgba(251,217,161,.4); background: rgba(251,217,161,.07); box-shadow: inset 0 0 20px rgba(251,217,161,.08), var(--sh-glow-cyan); } .shop-hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .5px; color: var(--sh-faint); text-transform: uppercase; } .shop-hero-trust span { display: inline-flex; align-items: center; gap: 7px; } .shop-hero-trust .tk { color: var(--sh-cyan); } .shop-sale { display: none; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 0 auto 10px; max-width: 720px; padding: 12px 20px; border-radius: 14px; background: linear-gradient(135deg, rgba(76,175,80,.14), rgba(64,116,29,.12)); border: 1px solid var(--sh-border); } .shop-sale.is-live { display: flex; } .shop-sale-tag { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 1px; background: var(--sh-grad-sign); -webkit-background-clip: text; background-clip: text; color: transparent; } .shop-sale-timer { font-family: var(--font-mono); font-size: .92rem; color: var(--sh-text); } .shop-sale-timer b { color: var(--sh-pink); } .shop-config-note { display: none; margin: 0 auto 18px; max-width: 820px; padding: 11px 16px; border-radius: 12px; background: rgba(255,201,77,.08); border: 1px solid rgba(255,201,77,.34); color: var(--sh-gold); font-family: var(--font-mono); font-size: .76rem; text-align: center; } .shop-config-note.show { display: block; } /* ---------- TABS (sticky glass) ---------- */ .shop-tabs { position: sticky; top: 60px; z-index: 30; display: flex; gap: 7px; overflow-x: auto; padding: 12px; margin: 0 auto 12px; width: max-content; max-width: 100%; border-radius: 999px; background: rgba(12,12,34,.7); border: 1px solid var(--sh-border); backdrop-filter: blur(16px); box-shadow: var(--sh-shadow); scrollbar-width: none; } .shop-tabs::-webkit-scrollbar { display: none; } .shop-tab { flex: 0 0 auto; cursor: pointer; white-space: nowrap; padding: 10px 18px; border-radius: 999px; background: transparent; border: 1px solid transparent; color: var(--sh-dim); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .8px; text-transform: uppercase; transition: all .2s ease; } .shop-tab:hover { color: var(--sh-text); background: var(--sh-surface-2); text-shadow: 0 0 12px rgba(251,217,161,.5); } .shop-tab.active { color: #06121a; background: var(--sh-grad-sign); border-color: transparent; box-shadow: var(--sh-glow-cyan); font-weight: 700; } /* ---------- GRID / REIHEN ---------- */ .shop-grid { display: flex; flex-direction: column; margin-bottom: 52px; } .shop-row { padding: 30px 0; border-bottom: 1px solid var(--sh-border); } .shop-row:last-child { border-bottom: none; } .shop-row-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: 2.4px; text-transform: uppercase; color: var(--sh-cyan); margin-bottom: 20px; display: flex; align-items: center; gap: 14px; } .shop-row-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--sh-border-hi), transparent); } .shop-row-cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); perspective: 1200px; } .shop-card { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; position: relative; isolation: isolate; cursor: pointer; border-radius: 18px; overflow: hidden; background: var(--sh-grad-card); border: 1px solid var(--sh-border); box-shadow: var(--sh-shadow); transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .2s ease-out, border-color .3s, box-shadow .35s; will-change: transform; } /* Maus-Spotlight-Rand */ .shop-card::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(251,217,161,.24), rgba(76,175,80,.12) 45%, transparent 70%); opacity: 0; transition: opacity .3s; } /* Sheen-Sweep */ .shop-card::after { content: ""; position: absolute; z-index: 4; top: -40%; left: -80%; width: 48%; height: 180%; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.14) 50%, rgba(251,217,161,.14) 54%, transparent 64%); transform: skewX(-16deg); } .shop-card:hover::after { animation: sh-sheen .95s cubic-bezier(.4,0,.2,1); } @keyframes sh-sheen { to { transform: skewX(-16deg) translateX(460%); } } .shop-card:hover { border-color: var(--sh-border-hi); box-shadow: var(--sh-shadow), var(--sh-glow-cyan); } .shop-card:hover::before { opacity: 1; } .shop-card-media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #0a1508; } .shop-card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.04); transform: scale(1.02); transition: transform .6s cubic-bezier(.22,1,.36,1), filter .4s; } .shop-card:hover .shop-card-media img { transform: scale(1.09); filter: saturate(1.28) brightness(1.06); } .shop-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 56%, rgba(10,9,32,.92) 100%); } .shop-badge { position: absolute; z-index: 5; top: 12px; left: 12px; padding: 6px 12px; border-radius: 999px; color: #06121a; background: var(--sh-grad-sign); font-family: var(--font-mono); font-size: .58rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; box-shadow: var(--sh-glow-cyan); backdrop-filter: blur(4px); } .shop-badge.badge-best { background: var(--sh-grad-gold); color: #1a1200; box-shadow: var(--sh-glow-gold); animation: sh-badge 2.2s ease-in-out infinite; } .shop-badge.badge-premium { background: rgba(64,116,29,.3); border: 1px solid var(--sh-violet); color: #fff; box-shadow: 0 0 16px rgba(64,116,29,.4); } .shop-badge.badge-sale { background: linear-gradient(120deg,#e0a040,#c07a2a); color: #fff; box-shadow: var(--sh-glow-pink); animation: sh-badge 1.6s ease-in-out infinite; } .shop-badge.badge-new { background: linear-gradient(120deg,#7ed957,#4caf50); color: #052; } .shop-badge.badge-custom { background: linear-gradient(120deg,#fbd9a1,#f2ca7a); color: #3a2a06; box-shadow: 0 0 16px rgba(251,217,161,.55); font-weight: 800; } @keyframes sh-badge { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } } /* "Eigenes System"-Hinweis im Detail-Modal (Xenon = custom, kein GTA-Xenon) */ .shop-modal-custom { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(120deg, rgba(251,217,161,.10), rgba(76,175,80,.08)); border: 1px solid rgba(251,217,161,.32); } .shop-modal-custom .scc-ico { color: var(--sh-cyan); font-size: 1.1rem; line-height: 1.3; text-shadow: 0 0 10px rgba(251,217,161,.85); } .shop-modal-custom strong { display: block; color: #fbe6bf; font-size: .9rem; margin-bottom: 3px; letter-spacing: .2px; } .shop-modal-custom span { display: block; color: var(--sh-dim); font-size: .86rem; line-height: 1.45; } .shop-card-name { font-family: var(--font-display); font-size: 1.42rem; letter-spacing: .4px; line-height: 1.05; padding: 12px 16px 2px; position: relative; z-index: 2; color: var(--sh-text); } .shop-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 16px 16px; position: relative; z-index: 2; } .shop-price { display: flex; align-items: baseline; gap: 8px; } .shop-price b { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .5px; background: var(--sh-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255,201,77,.35)); } .shop-price .was { font-family: var(--font-mono); font-size: .76rem; color: var(--sh-faint); text-decoration: line-through; } .shop-card-arrow { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--sh-cyan); border: 1px solid var(--sh-border-hi); background: rgba(251,217,161,.06); transition: all .28s var(--sh-pop); } .shop-card:hover .shop-card-arrow { background: var(--sh-grad-cta); color: #fff; border-color: transparent; box-shadow: var(--sh-glow-pink); transform: translateX(3px) scale(1.08); } /* FEATURED: rotierender Neon-Conic-Rahmen */ @property --sh-ang { syntax: ''; inherits: false; initial-value: 0deg; } .shop-card.is-featured { border-color: transparent; background: linear-gradient(var(--sh-bg-deep), var(--sh-bg-deep)) padding-box, conic-gradient(from var(--sh-ang,0deg), #7ed957, #40741d, #4caf50, #fbd9a1, #7ed957) border-box; border: 1.5px solid transparent; box-shadow: var(--sh-shadow), var(--sh-glow-pink); animation: sh-spin 6s linear infinite; } @keyframes sh-spin { to { --sh-ang: 360deg; } } /* ---------- MODAL ---------- */ .shop-modal-scrim { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(3,3,12,.72); backdrop-filter: blur(9px); opacity: 0; visibility: hidden; transition: opacity .25s; } .shop-modal-scrim.open { opacity: 1; visibility: visible; } .shop-modal { width: min(900px, 100%); max-height: 90vh; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; border-radius: 22px; background: var(--sh-surface); border: 1px solid var(--sh-border-hi); backdrop-filter: blur(20px); box-shadow: 0 40px 110px rgba(0,0,0,.85), var(--sh-glow-cyan); transform: translateY(22px) scale(.95); transition: transform .38s var(--sh-pop); } .shop-modal-scrim.open .shop-modal { transform: none; } .shop-modal-media { position: relative; min-height: 300px; background: #0a1508; } .shop-modal-media .em { position: absolute; inset: 0; display: grid; place-items: center; font-size: 6rem; } .shop-modal-media img { width: 100%; height: 100%; object-fit: cover; } .shop-modal-media::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--sh-cyan), var(--sh-pink)); opacity: .5; } .shop-modal-body { padding: 30px; overflow-y: auto; } .shop-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--sh-dim); font-size: 1.7rem; line-height: 1; cursor: pointer; z-index: 6; } .shop-modal-close:hover { color: var(--sh-text); } .shop-modal-body h3 { font-family: var(--font-display); font-size: 2.1rem; letter-spacing: .4px; margin-bottom: 4px; } .shop-modal-price { font-family: var(--font-display); font-size: 2.1rem; margin-bottom: 8px; background: var(--sh-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(255,201,77,.35)); } .shop-modal-price .was { font-family: var(--font-mono); font-size: .9rem; color: var(--sh-faint); text-decoration: line-through; margin-left: 8px; -webkit-text-fill-color: var(--sh-faint); } .shop-modal-desc { color: var(--sh-dim); font-size: .94rem; margin-bottom: 14px; } .shop-modal-feats { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; } .shop-modal-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: .92rem; color: var(--sh-dim); } .shop-modal-feats li::before { content: "✦"; color: var(--sh-cyan); text-shadow: 0 0 8px rgba(251,217,161,.8); } .shop-modal-varlabel { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--sh-faint); margin: 0 0 6px; } .shop-modal-select { width: 100%; padding: 12px 14px; margin-bottom: 18px; border-radius: 11px; background: rgba(6,14,7,.7); border: 1px solid var(--sh-border); color: var(--sh-text); font-family: var(--font-body); font-size: .95rem; cursor: pointer; } .shop-modal-select:focus { outline: none; border-color: var(--sh-cyan); box-shadow: var(--sh-glow-cyan); } .shop-modal-qtyrow { margin-bottom: 18px; } .shop-modal-qty { display: inline-flex; align-items: center; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(6,14,7,.7); border: 1px solid var(--sh-border); } .shop-modal-qty button { width: 36px; height: 36px; border-radius: 9px; border: none; background: transparent; color: var(--sh-cyan); cursor: pointer; font-size: 1.25rem; line-height: 1; transition: background .15s; } .shop-modal-qty button:hover { background: rgba(251,217,161,.12); } .shop-modal-qty button:active { transform: scale(.9); } .shop-modal-qty span { min-width: 34px; text-align: center; font-family: var(--font-display); font-size: 1.35rem; color: var(--sh-text); } .shop-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; } .shop-modal-add, .shop-modal-buy { flex: 1; min-width: 140px; cursor: pointer; border: none; padding: 15px 16px; border-radius: 13px; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; transition: all .18s var(--sh-pop); } .shop-modal-add { background: rgba(251,217,161,.07); border: 1px solid rgba(251,217,161,.45); color: var(--sh-cyan); } .shop-modal-add:hover { background: rgba(251,217,161,.14); box-shadow: var(--sh-glow-cyan); transform: translateY(-1px); } .shop-modal-buy { position: relative; overflow: hidden; background: var(--sh-grad-cta); background-size: 180% 100%; color: #fff; box-shadow: var(--sh-glow-pink); } .shop-modal-buy:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 0 34px rgba(76,175,80,.6), 0 0 90px rgba(64,116,29,.28); } .shop-modal-buy::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 35%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent); transform: rotate(10deg); animation: buy-sheen 3.2s ease-in-out infinite; } @keyframes buy-sheen { 0%,55% { left: -60%; } 85%,100% { left: 160%; } } @media (max-width: 640px) { .shop-modal { grid-template-columns: 1fr; } .shop-modal-media { min-height: 220px; } } /* ---------- TRUST / FAQ ---------- */ .shop-trust-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); margin: 12px 0 52px; } .shop-trust-item { border-radius: 16px; padding: 22px; text-align: center; background: var(--sh-surface); border: 1px solid var(--sh-border); transition: border-color .3s, transform .3s, box-shadow .3s; } .shop-trust-item:hover { border-color: rgba(251,217,161,.35); transform: translateY(-4px); box-shadow: var(--sh-glow-cyan); } .shop-trust-item .ic { font-size: 1.9rem; margin-bottom: 8px; } .shop-trust-item h4 { font-family: var(--font-display); font-size: 1.16rem; letter-spacing: .3px; margin-bottom: 4px; color: var(--sh-text); } .shop-trust-item p { color: var(--sh-dim); font-size: .86rem; } .shop-faq { max-width: 780px; margin: 0 auto 60px; } .shop-faq details { border: 1px solid var(--sh-border); border-radius: 14px; background: var(--sh-surface); margin-bottom: 10px; padding: 0 20px; transition: border-color .3s, box-shadow .3s; } .shop-faq details[open] { border-color: rgba(64,116,29,.5); box-shadow: 0 0 24px rgba(64,116,29,.15); } .shop-faq summary { padding: 16px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.16rem; letter-spacing: .2px; color: var(--sh-text); display: flex; justify-content: space-between; align-items: center; } .shop-faq summary::-webkit-details-marker { display: none; } .shop-faq summary::after { content: "+"; color: var(--sh-pink); font-size: 1.5rem; transition: transform .3s; } .shop-faq details[open] summary::after { transform: rotate(45deg); } .shop-faq p { color: var(--sh-dim); margin: 0 0 16px; font-size: .92rem; line-height: 1.6; } /* ---------- SOZIALER BEWEIS ---------- */ .shop-recent { display: none; margin: 0 0 52px; } .shop-recent.has-data { display: block; } .shop-recent h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 16px; text-align: center; color: var(--sh-text); } .shop-recent-track { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .shop-recent-track::-webkit-scrollbar { display: none; } .shop-recent-item { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 12px; background: var(--sh-surface); border: 1px solid var(--sh-border); font-size: .84rem; color: var(--sh-dim); } .shop-recent-item .r-av { width: 28px; height: 28px; border-radius: 50%; background: var(--sh-grad-sign); display: grid; place-items: center; font-size: .8rem; color: #fff; } .shop-recent-item b { color: var(--sh-text); } /* ---------- FAB + DRAWER ---------- */ .shop-cart-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: none; color: #fff; font-size: 1.1rem; background: var(--sh-grad-sign); background-size: 200% 200%; box-shadow: var(--sh-glow-pink); animation: sh-flow 6s ease-in-out infinite; transition: transform .2s var(--sh-pop); } .shop-cart-fab:hover { transform: scale(1.1); } .shop-cart-fab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(251,217,161,.7); animation: fab-radar 2.4s ease-out infinite; } @keyframes fab-radar { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } } .shop-cart-fab .cart-count { position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--sh-cyan); color: #06121a; font-family: var(--font-mono); font-weight: 700; font-size: .72rem; box-shadow: var(--sh-glow-cyan); } .cart-count.bump { animation: count-bump .5s var(--sh-pop); } @keyframes count-bump { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } } .shop-drawer-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(3,3,12,.6); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .25s; } .shop-drawer-scrim.open { opacity: 1; visibility: visible; } .shop-drawer { position: fixed; top: 0; right: 0; z-index: 71; height: 100%; width: min(420px, 100%); transform: translateX(100%); background: #0a1508; border-left: 1px solid var(--sh-border-hi); display: flex; flex-direction: column; transition: transform .4s cubic-bezier(.22,1,.36,1); box-shadow: -30px 0 80px rgba(0,0,0,.7); } .shop-drawer.open { transform: translateX(0); } .shop-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--sh-border); } .shop-drawer-head h3 { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .4px; color: var(--sh-text); } .shop-drawer-close { background: none; border: none; color: var(--sh-dim); font-size: 1.6rem; cursor: pointer; line-height: 1; } .shop-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; } .shop-drawer-empty { color: var(--sh-faint); text-align: center; padding: 40px 0; } .shop-line { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--sh-border); } .shop-line-ic { width: 48px; height: 48px; border-radius: 11px; background: #0a1508; display: grid; place-items: center; font-size: 1.4rem; flex: 0 0 auto; overflow: hidden; } .shop-line-main { flex: 1; min-width: 0; } .shop-line-name { font-family: var(--font-display); font-size: 1.08rem; letter-spacing: .2px; color: var(--sh-text); } .shop-line-variant { font-family: var(--font-mono); font-size: .72rem; color: var(--sh-cyan); margin-top: 2px; } .shop-line-price { color: var(--sh-gold); font-family: var(--font-mono); font-size: .84rem; font-weight: 600; } .shop-qty { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; } .shop-qty button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--sh-border); background: var(--sh-surface-2); color: var(--sh-text); cursor: pointer; font-size: 1rem; line-height: 1; } .shop-qty button:hover { border-color: var(--sh-cyan); color: var(--sh-cyan); } .shop-qty span { min-width: 22px; text-align: center; font-family: var(--font-mono); color: var(--sh-text); } .shop-line-rm { background: none; border: none; color: var(--sh-faint); cursor: pointer; font-size: .78rem; align-self: flex-start; } .shop-line-rm:hover { color: var(--sh-pink); } .shop-gift { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; padding: 13px 15px; border-radius: 12px; background: var(--sh-surface-2); border: 1px solid var(--sh-border); font-size: .88rem; color: var(--sh-text); cursor: pointer; } .shop-gift input { accent-color: var(--sh-pink); width: 18px; height: 18px; } .shop-gift-field { display: none; margin-top: 8px; } .shop-gift-field.show { display: block; } .shop-gift-field input { width: 100%; padding: 12px 13px; border-radius: 10px; background: #0a1508; border: 1px solid var(--sh-border); color: var(--sh-text); font-family: var(--font-body); font-size: .9rem; } .shop-drawer-foot { padding: 18px 20px 24px; border-top: 1px solid var(--sh-border); background: #0a1508; } .shop-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .shop-total span { color: var(--sh-faint); font-family: var(--font-mono); font-size: .82rem; text-transform: uppercase; letter-spacing: 1px; } .shop-total b { font-family: var(--font-display); font-size: 2rem; color: var(--sh-text); } .shop-checkout { position: relative; overflow: hidden; width: 100%; cursor: pointer; border: none; padding: 17px; border-radius: 14px; background: var(--sh-grad-gold); color: #1a1206; font-family: var(--font-mono); font-size: .92rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 800; box-shadow: var(--sh-glow-gold); transition: transform .15s var(--sh-pop), box-shadow .3s; } .shop-checkout:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(255,201,77,.55); } .shop-checkout::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 35%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform: rotate(10deg); animation: buy-sheen 2.8s ease-in-out infinite; } .shop-checkout:disabled { opacity: .5; cursor: not-allowed; } .shop-secure-note { margin-top: 12px; text-align: center; color: var(--sh-faint); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .4px; } .shop-secure-note .tk { color: var(--sh-cyan); } /* ---------- TOAST ---------- */ .shop-toast-wrap { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; } .shop-toast { padding: 14px 22px; border-radius: 13px; background: #10240f; border: 1px solid var(--sh-pink); color: #fff; font-size: .88rem; box-shadow: 0 14px 34px rgba(0,0,0,.5); animation: shopToast .3s ease; } @keyframes shopToast { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ---------- DOPAMIN: Reveal + Partikel ---------- */ /* Selbst-abschliessende Einblende-Animation: endet IMMER bei opacity:1 (fill: both), auch wenn kein JS jemals .sh-in setzt -> Inhalt kann nie unsichtbar haengenbleiben. */ .shop-card.sh-reveal, .shop-trust-item.sh-reveal { animation: sh-rise .6s cubic-bezier(.22,1,.36,1) var(--sh-d,0s) both; } @keyframes sh-rise { from { opacity: 0; transform: translateY(26px) scale(.975); } to { opacity: 1; transform: none; } } .shop-card.sh-in, .shop-trust-item.sh-in { opacity: 1; transform: none; } .sh-particle { position: fixed; z-index: 200; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; background: var(--sh-c, #7ed957); box-shadow: 0 0 10px var(--sh-c, #7ed957); animation: sh-burst .72s cubic-bezier(.15,.8,.3,1) forwards; } @keyframes sh-burst { to { transform: translate(var(--sh-dx), var(--sh-dy)) scale(.15); opacity: 0; } } .sh-flydot { position: fixed; z-index: 200; width: 16px; height: 16px; border-radius: 50%; pointer-events: none; background: var(--sh-grad-sign); box-shadow: var(--sh-glow-cyan); transition: transform .6s cubic-bezier(.4,-.1,.6,1), opacity .6s; } /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion: reduce) { .fx-orb, .shop-cart-fab, .shop-cart-fab::before, .shop-modal-buy::after, .shop-checkout::after, .shop-badge, .shop-card.is-featured, .shop-dark .gradient-text { animation: none !important; } .shop-card { transform: none !important; } .shop-card.sh-reveal, .shop-trust-item.sh-reveal { animation: none !important; opacity: 1 !important; transform: none !important; } .sh-particle, .sh-flydot { display: none; } } @media (max-width: 600px) { .shop-tabs { top: 56px; } }