/** Shopify CDN: Minification failed Line 733:2 Unexpected "=" Line 840:1 Unexpected "{" Line 881:0 All "@import" rules must come first **/ /* ONEPERCENTELITES — Shopify Global CSS ====================================== Einfügen in: Shopify Admin → Online Store → Themes → Edit Code → assets/ → neue Datei: "ope-custom.css" → Speichern Dann in layout/theme.liquid im vor einfügen: {{ 'ope-custom.css' | asset_url | stylesheet_tag }} */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap'); /* ─── Variables ────────────────────────────────────────────── */ :root { --ope-bg: #050505; --ope-bg2: #0a0a0a; --ope-pink: #FF00CC; --ope-purple: #8B00FF; --ope-purple-lt: #CC66FF; --ope-border: rgba(139,0,255,0.25); --ope-gradient: linear-gradient(135deg, #FF00CC, #8B00FF); --ope-radius: 12px; } /* ─── Global ───────────────────────────────────────────────── */ html, body { background-color: var(--ope-bg) !important; color: #fff !important; font-family: 'Inter', sans-serif; } /* Hide default Shopify header — we use ope-header section instead */ /* Uncomment if you replaced the header section: */ /* #shopify-section-header { display: none !important; } */ /* ─── Page backgrounds ─────────────────────────────────────── */ .shopify-section, .page-width, main, .main-content, [class*="template-"] { background-color: var(--ope-bg) !important; } /* ─── Typography ───────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: 'Bebas Neue', sans-serif !important; color: #fff !important; letter-spacing: 0.05em !important; } p, span, li, td, th, label, div { font-family: 'Inter', sans-serif !important; color: inherit; } /* ─── Links ────────────────────────────────────────────────── */ a { color: var(--ope-purple-lt) !important; text-decoration: none !important; transition: color 0.2s !important; } a:hover { color: #fff !important; } /* ─── Buttons ──────────────────────────────────────────────── */ .button, .btn, button[type="submit"], input[type="submit"], .shopify-payment-button__button, .product-form__submit { background: var(--ope-gradient) !important; color: #fff !important; border: none !important; border-radius: var(--ope-radius) !important; font-family: 'Inter', sans-serif !important; font-size: 0.72rem !important; font-weight: 800 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; padding: 14px 28px !important; cursor: pointer !important; box-shadow: 0 0 28px rgba(139,0,255,0.35), 0 0 56px rgba(255,0,204,0.12) !important; transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s !important; } .button:hover, .btn:hover, button[type="submit"]:hover, input[type="submit"]:hover { opacity: 0.9 !important; transform: translateY(-1px) !important; box-shadow: 0 0 45px rgba(139,0,255,0.5), 0 0 80px rgba(255,0,204,0.2) !important; } /* Secondary buttons */ .button--secondary, .btn--secondary { background: transparent !important; border: 1px solid var(--ope-border) !important; color: var(--ope-purple-lt) !important; box-shadow: none !important; } .button--secondary:hover { background: rgba(139,0,255,0.08) !important; border-color: rgba(139,0,255,0.5) !important; transform: none !important; } /* ─── Inputs / Forms ───────────────────────────────────────── */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], textarea, select, .field__input { background: rgba(255,255,255,0.04) !important; border: 1px solid var(--ope-border) !important; border-radius: var(--ope-radius) !important; color: #fff !important; font-family: 'Inter', sans-serif !important; font-size: 0.9rem !important; padding: 13px 17px !important; transition: border-color 0.2s, box-shadow 0.2s !important; width: 100% !important; } input:focus, textarea:focus, select:focus, .field__input:focus { border-color: rgba(139,0,255,0.65) !important; background: rgba(139,0,255,0.06) !important; box-shadow: 0 0 0 3px rgba(139,0,255,0.12) !important; outline: none !important; } input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.25) !important; } label, .field__label { color: rgba(255,255,255,0.5) !important; font-size: 0.68rem ; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } /* ─── Account / Login / Register pages ─────────────────────── */ .customer, .account, .template-customers-login, .template-customers-register, .template-customers-account, .template-customers-orders { background: var(--ope-bg) !important; } .customer .title, .account .title, .customer h1, .account h1 { font-family: 'Bebas Neue', sans-serif !important; font-size: 3.5rem !important; letter-spacing: 0.08em !important; color: #fff !important; } /* Login/register card */ /* Account-Seite */ .template-customers-account .customer > div { background: linear-gradient(135deg, rgba(139,0,255,0.09), rgba(255,0,204,0.05), rgba(0,0,0,0.6)) !important; border: 1px solid var(--ope-border) !important; border-radius: 24px !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; padding: 2.5rem !important; box-shadow: 0 0 60px rgba(139,0,255,0.18), 0 0 120px rgba(255,0,204,0.07) !important; /* Wichtig: NICHT auf 480px begrenzen */ max-width: 100% !important; width: 100% !important; margin: 0 !important; } /* Account order table */ .order-history table, .account table { background: rgba(139,0,255,0.04) !important; border: 1px solid var(--ope-border) !important; border-radius: 14px !important; overflow: hidden !important; border-collapse: separate !important; border-spacing: 0 !important; } .order-history th, .account th { background: rgba(139,0,255,0.1) !important; color: rgba(255,255,255,0.4) !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; padding: 12px 16px !important; border-bottom: 1px solid var(--ope-border) !important; } .order-history td, .account td { color: rgba(255,255,255,0.8) !important; padding: 14px 16px !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; } /* ─── Product Cards ─────────────────────────────────────────── */ .card, .card-wrapper, .product-card { background: linear-gradient(135deg, rgba(139,0,255,0.07), rgba(0,0,0,0.55)) !important; border: 1px solid rgba(139,0,255,0.18) !important; border-radius: 20px !important; overflow: hidden !important; transition: border-color 0.3s, box-shadow 0.3s !important; } .card:hover, .card-wrapper:hover { border-color: rgba(139,0,255,0.45) !important; box-shadow: 0 0 40px rgba(139,0,255,0.18) !important; } .card__heading, .card__heading a { color: #fff !important; font-family: 'Bebas Neue', sans-serif !important; } .price__regular, .price-item { background: var(--ope-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-weight: 800 !important; font-size: 1.2rem !important; } /* ─── Footer ────────────────────────────────────────────────── */ footer, .footer, #shopify-section-footer { background: var(--ope-bg) !important; border-top: 1px solid rgba(255,255,255,0.05) !important; } .footer a, .footer__heading, .footer p, .footer li { color: rgba(255,255,255,0.4) !important; font-size: 0.75rem !important; letter-spacing: 0.08em !important; } .footer a:hover { color: #fff !important; } .footer__heading { background: var(--ope-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-weight: 800 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; } /* ─── Breadcrumbs ───────────────────────────────────────────── */ .breadcrumbs, nav[aria-label="Breadcrumbs"] { color: rgba(255,255,255,0.35) !important; font-size: 0.7rem !important; } .breadcrumbs a { color: rgba(255,255,255,0.35) !important; } .breadcrumbs a:hover { color: #fff !important; } /* ─── Pagination ────────────────────────────────────────────── */ .pagination__item { color: rgba(255,255,255,0.5) !important; background: transparent !important; border-color: var(--ope-border) !important; border-radius: 8px !important; } .pagination__item--current { background: var(--ope-gradient) !important; color: #fff !important; border-color: transparent !important; } /* ─── Scrollbar ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--ope-bg); } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #FF00CC, #8B00FF); border-radius: 3px; } /* ─── Selection ─────────────────────────────────────────────── */ ::selection { background: rgba(139,0,255,0.35); color: #fff; } /* OPE Header Typography Override */ .ope-header__nav > li > a, .ope-header__dropdown-btn { font-family: "Inter", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: rgba(255,255,255,.75) !important; line-height: 1 !important; } .ope-header__nav > li > a:hover, .ope-header__dropdown-btn:hover { color: #ffffff !important; } .ope-header__dropdown-menu a { font-family: "Inter", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.15em !important; color: rgba(255,255,255,.75) !important; } .ope-header__dropdown-menu a:hover { color: #ffffff !important; } /* ONEPERCENTELITES — Alle Seiten CSS (Membership, Education, Account, etc.) ========================================================================== Einfügen in: Shopify Admin → Online Store → Themes → Edit Code → assets/ope-custom.css → ans ENDE anfügen (nicht ersetzen!) */ /* ─── Ripple Keyframe ──────────────────────────────────────── */ @keyframes opeRipple { to { transform: scale(2.5); opacity: 0; } } @keyframes opeFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes opeGlowPulse { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.14; } } @keyframes opeScan { 0% { transform: translateY(-100%); } 100% { transform: translateY(500%); } } /* ─── Global Background Grid + Blobs ──────────────────────── */ body::before { content: ''; position: fixed; inset: 0; opacity: 0.025; background-image: linear-gradient(rgba(139,0,255,0.8) 1px, transparent 1px), linear-gradient(90deg, rgba(139,0,255,0.8) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } .ope-bg-blob-1, .ope-bg-blob-2 { position: fixed; width: 700px; height: 700px; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(100px); transition: transform 0.8s ease; } .ope-bg-blob-1 { top: -200px; left: -100px; background: radial-gradient(circle, rgba(255,0,204,0.12), transparent 70%); animation: opeGlowPulse 6s ease-in-out infinite; } .ope-bg-blob-2 { top: -200px; right: -100px; background: radial-gradient(circle, rgba(139,0,255,0.15), transparent 70%); animation: opeGlowPulse 6s ease-in-out infinite 3s; } /* ─── ACCOUNT PAGE ─────────────────────────────────────────── */ .template-customers-account main, .template-customers-account .main-content, .template-customers-account #MainContent { background: #050505 !important; position: relative; z-index: 1; } /* Account header */ .account .title, [class*="account"] h1, .template-customers-account h1 { font-family: 'Bebas Neue', sans-serif !important; font-size: clamp(2.5rem, 6vw, 5rem) !important; letter-spacing: 0.08em !important; color: #fff !important; background: linear-gradient(90deg, #fff 60%, rgba(255,255,255,0.6)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 4px !important; } /* Abmelden link */ .account a[href*="logout"], .account a[href*="abmelden"] { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: rgba(255,255,255,0.35) !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; border: 1px solid rgba(255,255,255,0.1) !important; padding: 6px 14px !important; border-radius: 8px !important; transition: all 0.2s !important; text-decoration: none !important; } .account a[href*="logout"]:hover, .account a[href*="abmelden"]:hover { color: #fff !important; border-color: rgba(255,0,204,0.4) !important; background: rgba(255,0,204,0.06) !important; } /* Section headings (Bestellhistorie / Kontodetails) */ .account h2, .order-history h2, [class*="account"] h2, .template-customers-account h2 { font-family: 'Bebas Neue', sans-serif !important; font-size: 1.8rem !important; letter-spacing: 0.1em !important; color: #fff !important; margin-bottom: 16px !important; background: linear-gradient(90deg, #FF00CC, #8B00FF) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Order table */ .order-history table, .account table { width: 100% !important; background: rgba(139,0,255,0.04) !important; border: 1px solid rgba(139,0,255,0.2) !important; border-radius: 16px !important; overflow: hidden !important; border-collapse: separate !important; border-spacing: 0 !important; box-shadow: 0 0 30px rgba(139,0,255,0.08) !important; } .order-history table thead tr, .account table thead tr { background: linear-gradient(90deg, rgba(139,0,255,0.12), rgba(255,0,204,0.06)) !important; } .order-history table th, .account table th { color: rgba(255,255,255,0.4) !important; font-family: 'Inter', sans-serif !important; font-size: 0.62rem !important; font-weight: 800 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; padding: 14px 18px !important; border-bottom: 1px solid rgba(139,0,255,0.2) !important; } .order-history table td, .account table td { color: rgba(255,255,255,0.85) !important; font-family: 'Inter', sans-serif !important; font-size: 0.85rem !important; padding: 16px 18px !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; transition: background 0.2s !important; } .order-history table a, .account table a { color: #CC66FF !important; font-weight: 700 !important; text-decoration: none !important; border: 1px solid rgba(139,0,255,0.3) !important; padding: 4px 12px !important; border-radius: 6px !important; background: rgba(139,0,255,0.08) !important; transition: all 0.2s !important; } .order-history table a:hover, .account table a:hover { color: #fff !important; background: rgba(139,0,255,0.15) !important; border-color: rgba(139,0,255,0.5) !important; box-shadow: 0 0 12px rgba(139,0,255,0.3) !important; } /* Account sidebar / Kontodetails */ .account address { color: rgba(255,255,255,0.7) !important; font-style: normal !important; line-height: 1.8 !important; font-size: 0.9rem !important; } .account .customer-details a, .account .kontodetails a { color: #CC66FF !important; font-weight: 600 !important; font-size: 0.8rem !important; } /* ─── MEMBERSHIP / PRODUCT PAGES ───────────────────────────── */ .template-collection main, .template-product main, .template-page main { background: #050505 !important; position: relative; z-index: 1; } /* Product grid */ .product-grid, .collection__grid { gap: 20px !important; } /* Product card */ .card-wrapper { border-radius: 20px !important; overflow: hidden !important; background: linear-gradient(135deg, rgba(139,0,255,0.08), rgba(0,0,0,0.6)) !important; border: 1px solid rgba(139,0,255,0.18) !important; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s !important; position: relative !important; } .card-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(139,0,255,0.6), rgba(255,0,204,0.6), transparent); opacity: 0; transition: opacity 0.3s; } .card-wrapper:hover::before { opacity: 1; } .card-wrapper:hover { border-color: rgba(139,0,255,0.45) !important; box-shadow: 0 0 40px rgba(139,0,255,0.2), 0 0 80px rgba(255,0,204,0.08) !important; transform: translateY(-4px) !important; } /* Product title */ .card__heading, .card__heading a { font-family: 'Bebas Neue', sans-serif !important; color: #fff !important; font-size: 1.4rem !important; letter-spacing: 0.06em !important; } /* Price */ .price__regular .price-item, .price .price-item--regular { background: linear-gradient(90deg, #FF00CC, #8B00FF) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-weight: 800 !important; font-size: 1.3rem !important; } /* Product description */ .product__description, .product__description * { color: rgba(255,255,255,0.6) !important; font-size: 0.9rem !important; line-height: 1.75 !important; } /* Badges / Tags */ .card__badge, .badge { background: linear-gradient(135deg, rgba(255,0,204,0.2), rgba(139,0,255,0.2)) !important; border: 1px solid rgba(139,0,255,0.4) !important; color: #CC66FF !important; border-radius: 6px !important; font-size: 0.62rem !important; font-weight: 800 !important; letter-spacing: 0.15em !important; } /* ─── EDUCATION / CUSTOM PAGES ──────────────────────────────── */ .template-page #MainContent, .template-page main { background: #050505 !important; } /* Page content */ .page-width .rte, .page-width .rte * { color: rgba(255,255,255,0.75) !important; line-height: 1.8 !important; } .rte h2, .rte h3 { font-family: 'Bebas Neue', sans-serif !important; background: linear-gradient(90deg, #FF00CC, #8B00FF) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; margin-top: 32px !important; } .rte a { color: #CC66FF !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .rte a:hover { color: #fff !important; } .rte blockquote { border-left: 3px solid #8B00FF !important; padding-left: 20px !important; color: rgba(255,255,255,0.5) !important; font-style: italic !important; } .rte ul li::marker, .rte ol li::marker { color: #FF00CC !important; } /* ─── COLLECTION / PAGE HERO ────────────────────────────────── */ .collection__hero, .page-hero { background: linear-gradient(135deg, rgba(255,0,204,0.06), rgba(139,0,255,0.08)) !important; border-bottom: 1px solid rgba(139,0,255,0.15) !important; } .collection__title, .page__heading { font-family: 'Bebas Neue', sans-serif !important; font-size: clamp(2.5rem, 7vw, 6rem) !important; letter-spacing: 0.08em !important; color: #fff !important; } /* ─── BREADCRUMBS ──────────────────────────────────────────── */ .breadcrumbs, .breadcrumb { color: rgba(255,255,255,0.3) !important; font-size: 0.7rem !important; letter-spacing: 0.08em !important; } .breadcrumbs a, .breadcrumb a { color: rgba(255,255,255,0.35) !important; transition: color 0.2s !important; } .breadcrumbs a:hover, .breadcrumb a:hover { color: #CC66FF !important; } /* ─── SEARCH PAGE ───────────────────────────────────────────── */ .template-search #MainContent { background: #050505 !important; } .search__results-count { color: rgba(255,255,255,0.4) !important; font-size: 0.75rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } .search-result__item { border-bottom: 1px solid rgba(139,0,255,0.12) !important; padding: 16px 0 !important; transition: background 0.2s !important; } /* ─── PAGINATION ────────────────────────────────────────────── */ .pagination__item { background: rgba(139,0,255,0.06) !important; border: 1px solid rgba(139,0,255,0.2) !important; border-radius: 8px !important; color: rgba(255,255,255,0.6) !important; transition: all 0.2s !important; } .pagination__item:hover { background: rgba(139,0,255,0.14) !important; border-color: rgba(139,0,255,0.45) !important; color: #fff !important; } .pagination__item--current { background: linear-gradient(135deg, #FF00CC, #8B00FF) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 0 20px rgba(139,0,255,0.4) !important; } /* ─── CART PAGE ─────────────────────────────────────────────── */ .template-cart main { background: #050505 !important; } .cart__items, .cart-item { border-bottom: 1px solid rgba(139,0,255,0.12) !important; } .cart__subtotal { color: #fff !important; font-weight: 700 !important; } .totals__total-value { background: linear-gradient(90deg, #FF00CC, #8B00FF) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-weight: 800 !important; font-size: 1.5rem !important; } /* ─── HEADER IMPROVEMENTS ───────────────────────────────────── */ /* Nav dropdown */ .header__submenu, .mega-menu, .disclosure__list-wrapper { background: rgba(10,10,10,0.98) !important; border: 1px solid rgba(139,0,255,0.2) !important; border-radius: 12px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important; backdrop-filter: blur(20px) !important; } .header__submenu a, .mega-menu a, .disclosure__item a { color: rgba(255,255,255,0.55) !important; transition: color 0.2s, background 0.2s !important; border-radius: 8px !important; } .header__submenu a:hover, .mega-menu a:hover, .disclosure__item a:hover { color: #fff !important; background: rgba(139,0,255,0.08) !important; } /* ─── FOCUS STYLES ──────────────────────────────────────────── */ *:focus-visible { outline: 2px solid rgba(139,0,255,0.7) !important; outline-offset: 3px !important; border-radius: 4px !important; } /* ─── SCROLLBAR ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: #050505; } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #FF00CC, #8B00FF); border-radius: 3px; } ::selection { background: rgba(139,0,255,0.35); color: #fff; } * ONEPERCENTELITES — PageFly Pages Fix ===================================== An das ENDE von assets/ope-custom.css anfügen */ /* ─── PageFly Elemente dunkel ───────────────────────────────── */ [data-pftype], [data-pftype="section"], [data-pftype="row"], [data-pftype="column"], [data-pftype="widget"], .pf-content, .pf-section, .pf-row, .pf-col, [class*="pf-"], [id*="pf-"], [class*="pagefly"], [id*="pagefly"] { background-color: transparent !important; color: #fff !important; } /* PageFly Seiten Hintergrund */ body[class*="template-page"] #MainContent, body[class*="template-page"] main, body[class*="template-page"] .shopify-section { background: transparent !important; } /* ─── Alle Text-Elemente in PageFly ────────────────────────── */ [data-pftype] h1, [data-pftype] h2, [data-pftype] h3, [data-pftype] h4, [data-pftype] p, [data-pftype] span, [data-pftype] li, [data-pftype] a { color: #fff !important; } [data-pftype] h1, [data-pftype] h2, [data-pftype] h3 { font-family: 'Bebas Neue', sans-serif !important; letter-spacing: 0.08em !important; } /* ─── PageFly Buttons ───────────────────────────────────────── */ [data-pftype] .button, [data-pftype] button, [data-pftype] [class*="btn"], [data-pftype] [class*="button"] { background: linear-gradient(135deg, #FF00CC, #8B00FF) !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-weight: 800 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; box-shadow: 0 0 28px rgba(139,0,255,0.35) !important; transition: opacity 0.2s, transform 0.15s !important; } [data-pftype] .button:hover, [data-pftype] button:hover { opacity: 0.9 !important; transform: translateY(-1px) !important; } /* ─── PageFly Cards / Boxen ─────────────────────────────────── */ [data-pftype="widget"][data-pfwidget="box"], [data-pftype] [class*="card"], [data-pftype] [class*="product"] { background: linear-gradient(135deg, rgba(139,0,255,0.08), rgba(0,0,0,0.5)) !important; border: 1px solid rgba(139,0,255,0.2) !important; border-radius: 16px !important; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s !important; } [data-pftype="widget"][data-pfwidget="box"]:hover, [data-pftype] [class*="card"]:hover { border-color: rgba(139,0,255,0.45) !important; box-shadow: 0 0 40px rgba(139,0,255,0.2) !important; transform: translateY(-4px) !important; } /* ─── PageFly Divider / Trennlinien ─────────────────────────── */ [data-pftype] hr, [data-pftype] [class*="divider"] { border-color: rgba(139,0,255,0.2) !important; } /* ─── PageFly Bilder ────────────────────────────────────────── */ [data-pftype] img { border-radius: 12px !important; } /* ─── PageFly Tabs / Accordions ─────────────────────────────── */ [data-pftype] [class*="tab"], [data-pftype] [class*="accordion"] { background: rgba(139,0,255,0.05) !important; border: 1px solid rgba(139,0,255,0.15) !important; border-radius: 10px !important; color: #fff !important; } /* ─── Globale Hintergrundfarbe für ALLE Templates ───────────── */ body, { background: radial-gradient(ellipse 90% 60% at 10% -5%, rgba(255,0,204,0.13) 0%, transparent 55%), radial-gradient(ellipse 90% 60% at 90% -5%, rgba(139,0,255,0.16) 0%, transparent 55%), #050505 !important; background-attachment: fixed !important; } /* Alles andere transparent damit der Verlauf durchscheint */ body, main, #MainContent, .shopify-section, [data-pftype], [data-pftype="section"], [data-pftype="row"], .template-page main, .template-collection main, .template-product main, .template-customers-account main { background: transparent !important; background-color: transparent !important; } body.gradient { background: #050505 !important; background-image: none !important; } body.gradient::before { display: none !important; } /* ============================================================ ONEPERCENTELITES — Shopify Footer Sintra Style Einfügen in: assets/ope-custom.css (ans Ende anfügen) ODER als neue Datei assets/ope-footer.css hochladen und in layout/theme.liquid vor einbinden: {{ 'ope-footer.css' | asset_url | stylesheet_tag }} ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap'); /* ── Hauptcontainer ─────────────────────────────────────── */ .footer, footer.footer { background: transparent !important; background-color: transparent !important; border-top: 1px solid rgba(139,0,255,0.25) !important; position: relative !important; overflow: visible !important; } /* Gradient-Linie oben */ .footer::before { content: '' !important; position: absolute !important; top: -1px !important; left: 0 !important; right: 0 !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(255,0,204,0.7), rgba(139,0,255,0.7), transparent) !important; pointer-events: none !important; z-index: 1 !important; } /* Glow hinter dem Footer */ .footer::after { content: '' !important; position: absolute !important; top: -60px !important; left: 50% !important; transform: translateX(-50%) !important; width: 600px !important; height: 120px !important; background: radial-gradient(ellipse, rgba(139,0,255,0.08), transparent 70%) !important; pointer-events: none !important; z-index: 0 !important; } .footer__content-top, .footer__content-bottom { position: relative !important; z-index: 1 !important; background: transparent !important; } /* ── Block-Überschriften (NAVIGATION, LEGAL etc.) ────────── */ .footer-block__heading, .footer__heading { font-family: 'Bebas Neue', sans-serif !important; font-size: 0.75rem !important; letter-spacing: 0.25em !important; font-weight: 400 !important; background: linear-gradient(90deg, #FF00CC, #8B00FF) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; margin-bottom: 16px !important; text-transform: uppercase !important; border: none !important; } /* Dekorative Chevrons entfernen / neutralisieren */ .footer-block__heading::before, .footer-block__heading::after { display: none !important; } /* ── Links ──────────────────────────────────────────────── */ .footer-block__list li a, .footer__list li a, .footer a:not(.footer__localization a):not(.footer__follow-on-shop a) { font-family: 'Inter', sans-serif !important; font-size: 0.82rem !important; font-weight: 400 !important; color: rgba(255,255,255,0.45) !important; text-decoration: none !important; transition: color 0.2s !important; -webkit-text-fill-color: rgba(255,255,255,0.45) !important; } .footer-block__list li a:hover, .footer__list li a:hover { color: rgba(204,102,255,0.9) !important; -webkit-text-fill-color: rgba(204,102,255,0.9) !important; } /* ── "Vertrag widerrufen" Button ────────────────────────── */ .footer__policies-list a[href*="widerrufen"], .footer__policies-list a[href*="refund"], .footer-block a[href*="widerrufen"], a.button--tertiary[href*="widerrufen"], .footer .footer__policy:last-child a, a[href*="widerrufen"] { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 10px 20px !important; background: linear-gradient(135deg, #FF00CC, #8B00FF) !important; border: none !important; border-radius: 100px !important; font-family: 'Inter', sans-serif !important; font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration: none !important; box-shadow: 0 0 20px rgba(139,0,255,0.35), 0 0 40px rgba(255,0,204,0.12) !important; transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s !important; } a[href*="widerrufen"]:hover { opacity: 0.88 !important; transform: translateY(-1px) !important; box-shadow: 0 0 35px rgba(139,0,255,0.5), 0 0 60px rgba(255,0,204,0.2) !important; } /* ── "In shop folgen" Button ────────────────────────────── */ .footer__follow-on-shop, .shopify-section--follow-on-shop, .footer__follow-on-shop-button { background: transparent !important; } .footer__follow-on-shop a, .follow-on-shop__link, shop-follow-button a, shop-follow-button button { background: linear-gradient(135deg, rgba(139,0,255,0.15), rgba(255,0,204,0.1)) !important; border: 1px solid rgba(139,0,255,0.4) !important; border-radius: 100px !important; color: rgba(255,255,255,0.75) !important; -webkit-text-fill-color: rgba(255,255,255,0.75) !important; font-family: 'Inter', sans-serif !important; font-size: 0.8rem !important; font-weight: 600 !important; padding: 10px 24px !important; transition: border-color 0.2s, background 0.2s !important; } shop-follow-button a:hover, shop-follow-button button:hover { border-color: rgba(255,0,204,0.5) !important; background: linear-gradient(135deg, rgba(139,0,255,0.25), rgba(255,0,204,0.15)) !important; } /* ── Trennlinie zwischen Top + Bottom ───────────────────── */ .footer__content-bottom { border-top: 1px solid rgba(139,0,255,0.15) !important; background: transparent !important; } /* ── Copyright-Text ─────────────────────────────────────── */ .footer__copyright, .footer__copyright small, .footer__content-bottom-sameline { font-family: 'Inter', sans-serif !important; font-size: 0.75rem !important; color: rgba(255,255,255,0.25) !important; -webkit-text-fill-color: rgba(255,255,255,0.25) !important; } /* ── Country/Language Selector ──────────────────────────── */ .localization-form__select, .localization-selector, .disclosure__button, .disclosure__list-item button { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(139,0,255,0.25) !important; border-radius: 10px !important; color: rgba(255,255,255,0.6) !important; -webkit-text-fill-color: rgba(255,255,255,0.6) !important; font-family: 'Inter', sans-serif !important; font-size: 0.8rem !important; transition: border-color 0.2s !important; } .localization-form__select:hover, .disclosure__button:hover { border-color: rgba(139,0,255,0.5) !important; color: rgba(255,255,255,0.85) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; } /* Dropdown */ .disclosure__list { background: rgba(10,5,20,0.95) !important; border: 1px solid rgba(139,0,255,0.3) !important; border-radius: 12px !important; backdrop-filter: blur(20px) !important; } .disclosure__item a, .disclosure__item button { color: rgba(255,255,255,0.6) !important; -webkit-text-fill-color: rgba(255,255,255,0.6) !important; font-family: 'Inter', sans-serif !important; font-size: 0.82rem !important; } .disclosure__item a:hover, .disclosure__item button:hover { background: rgba(139,0,255,0.1) !important; color: rgba(255,255,255,0.9) !important; -webkit-text-fill-color: rgba(255,255,255,0.9) !important; } /* Localization labels (LAND/REGION, SPRACHE) */ .footer__localization .caption, .localization-form label, .footer__localization label { font-family: 'Inter', sans-serif !important; font-size: 0.6rem !important; font-weight: 700 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.3) !important; -webkit-text-fill-color: rgba(255,255,255,0.3) !important; } /* ── Payment Icons ──────────────────────────────────────── */ .footer__payment { opacity: 0.55 !important; transition: opacity 0.2s !important; filter: grayscale(20%) !important; } .footer__payment:hover { opacity: 0.8 !important; } /* ── SVG Icons in Footer (Chevrons, Arrows) ─────────────── */ .footer .icon-caret, .footer .icon svg { color: rgba(255,255,255,0.4) !important; fill: rgba(255,255,255,0.4) !important; } /* ── Mobile Accordion (Footer blocks collapsible) ────────── */ @media (max-width: 749px) { .footer-block__heading, .footer__heading { border-bottom: 1px solid rgba(139,0,255,0.15) !important; padding-bottom: 12px !important; } .footer-block details[open] .footer-block__heading { background: rgba(139,0,255,0.05) !important; border-radius: 6px 6px 0 0 !important; } } /* Widerruf Button – CSS Variables Override */ .widerruf-popup-source, [data-widerruf-popup-source-root="true"] { --widerruf-trigger-bg: #8B00CC !important; --revoq-trigger-bg: #8B00CC !important; --widerruf-trigger-bg-hover: #CC00FF !important; --revoq-trigger-bg-hover: #CC00FF !important; --widerruf-trigger-border-width: 0px !important; --widerruf-trigger-border-color: transparent !important; --revoq-trigger-border-color: transparent !important; --widerruf-trigger-text: #fff !important; --revoq-trigger-text: #fff !important; --widerruf-trigger-font-size: 14px !important; --widerruf-trigger-radius: 100px !important; --widerruf-trigger-padding-x: 22px !important; --widerruf-trigger-padding-y: 11px !important; --widerruf-trigger-min-height: 42px !important; }