/** Shopify CDN: Minification failed Line 39:0 All "@import" rules must come first **/ /* ========================================================================== CARDHAMSTER — Theme-Grundlagen Datei einbinden: Assets-Ordner -> diese Datei hochladen, dann in theme.liquid im einfuegen: {{ 'cardhamster-theme.css' | asset_url | stylesheet_tag }} ========================================================================== */ :root { /* Farben, abgeleitet aus dem Cardhamster-Logo */ --ch-pink: #FF4081; /* Hauptakzent, aus dem Logo-Hintergrund */ --ch-pink-light: #FFE3EE; /* helles Pink fuer Flaechen/Badges */ --ch-purple: #6B3FA0; /* zweiter Akzent, aus den Karten im Logo */ --ch-purple-light: #EFE6FA; --ch-caramel: #9C6B3E; /* Hamster-Fellton, fuer Icons/Illustration */ --ch-caramel-light: #F3E4D2; --ch-cream: #FFF6EC; /* warme Seiten-Hintergrundfarbe */ --ch-surface: #FFFFFF; /* Karten/Flaechen-Weiss */ --ch-plum: #2E1934; /* Haupttextfarbe statt Schwarz */ --ch-plum-soft: #5C4A63; /* gedaempfter Text/Sekundaertext */ --ch-line: #2E1934; /* Outline-Farbe, passend zum Logo-Strich */ /* Radien - fuer den "abgerundet & freundlich" Look */ --ch-radius-sm: 10px; --ch-radius-md: 16px; --ch-radius-lg: 28px; --ch-radius-pill: 999px; /* Fonts */ --ch-font-display: 'Baloo 2', sans-serif; --ch-font-body: 'Inter', sans-serif; } /* Fonts einbinden (falls nicht schon ueber Theme-Einstellungen geladen) */ @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Inter:wght@400;500;600&display=swap'); body { background: var(--ch-cream); color: var(--ch-plum); font-family: var(--ch-font-body); } h1, h2, h3, h4, .ch-display { font-family: var(--ch-font-display); font-weight: 700; color: var(--ch-plum); letter-spacing: -0.01em; } /* ---------- Buttons ---------- */ .ch-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border-radius: var(--ch-radius-pill); font-family: var(--ch-font-body); font-weight: 600; font-size: 15px; text-decoration: none; border: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .ch-btn:hover { transform: translateY(-2px); } .ch-btn--primary { background: var(--ch-pink); color: #FFFFFF; border: 2px solid var(--ch-plum); } .ch-btn--primary:hover { box-shadow: 0 6px 0 0 var(--ch-purple); transform: translate(0, -6px); } .ch-btn--secondary { background: var(--ch-surface); color: var(--ch-plum); border: 2px solid var(--ch-plum); } /* ---------- Badges (Sale / Neu) ---------- */ .ch-badge { display: inline-block; padding: 4px 12px; border-radius: var(--ch-radius-pill); font-family: var(--ch-font-body); font-weight: 600; font-size: 12px; } .ch-badge--sale { background: var(--ch-pink); color: #FFFFFF; } .ch-badge--new { background: var(--ch-purple); color: #FFFFFF; } /* ---------- Kategorie-Buttons ("Baueingaenge") ---------- */ .ch-category-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; padding: 12px 0; } .ch-category { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; width: 96px; } .ch-category__circle { width: 84px; height: 84px; border-radius: 50%; background: var(--ch-surface); border: 3px solid var(--ch-plum); display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, border-color 0.15s ease; } .ch-category:hover .ch-category__circle { transform: translateY(-4px); border-color: var(--ch-pink); } .ch-category__circle svg { width: 42px; height: 42px; } .ch-category__label { font-family: var(--ch-font-body); font-weight: 600; font-size: 13px; color: var(--ch-plum); text-align: center; } /* ---------- Produktkarten: "Trading Card"-Optik ---------- */ .ch-product-card { background: var(--ch-surface); border-radius: var(--ch-radius-md); border: 2px solid var(--ch-plum); overflow: hidden; position: relative; } .ch-product-card__stripe { height: 6px; width: 100%; background: var(--ch-purple); } .ch-product-card__stripe--pokemon { background: var(--ch-pink); } .ch-product-card__stripe--magic { background: var(--ch-purple); } .ch-product-card__stripe--riftbound { background: var(--ch-caramel); } /* ========================================================================== HEADER & NAVIGATION ========================================================================== */ .header-wrapper { background: var(--ch-pink) !important; border-bottom: 3px solid var(--ch-plum) !important; } .header { background: transparent; } .header__heading-logo-wrapper { padding: 2px 0; } /* ---------- Desktop-Navigation: Pillen statt Textlinks ---------- */ .header__inline-menu { margin-left: 8px; } .header__inline-menu .list-menu--inline { gap: 6px; } .header__inline-menu .header__menu-item { font-family: var(--ch-font-body); font-weight: 600; font-size: 14px; color: var(--ch-plum) !important; background: var(--ch-surface); border: 2px solid transparent; border-radius: var(--ch-radius-pill); padding: 8px 18px !important; transition: border-color 0.15s ease, transform 0.15s ease; } .header__inline-menu .header__menu-item:hover { border-color: var(--ch-pink); transform: translateY(-2px); } .header__active-menu-item { color: var(--ch-pink) !important; } /* Dropdown- / Mega-Menu-Flaechen */ .header__submenu, .mega-menu__content { background: var(--ch-surface) !important; border: 2px solid var(--ch-plum); border-radius: var(--ch-radius-md); box-shadow: none !important; padding: 10px !important; } .header__submenu .header__menu-item, .mega-menu__link { color: var(--ch-plum) !important; border-radius: var(--ch-radius-sm); } .header__submenu .header__menu-item:hover, .mega-menu__link:hover { background: var(--ch-pink-light); color: var(--ch-purple) !important; } /* ---------- Icons: Suche, Konto, Warenkorb ---------- */ .header__icon { color: var(--ch-plum); } .header__icon:hover { color: #FFFFFF; } #cart-icon-bubble .cart-count-bubble { background: var(--ch-pink); color: #FFFFFF; border: 2px solid var(--ch-cream); } .ch-cart-bump { animation: chCartBump 0.32s ease; } @keyframes chCartBump { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } } /* ---------- Haeufig zusammen gekauft ---------- */ .ch-fbt { max-width: 720px; margin: 48px auto; padding: 24px; background: var(--ch-surface); border: 2px solid var(--ch-plum); border-radius: var(--ch-radius-lg); } .ch-fbt__heading { font-size: 22px; margin: 0 0 20px; } .ch-fbt__items { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ch-fbt__loading { font-family: var(--ch-font-body); color: var(--ch-plum-soft); font-size: 14px; } .ch-fbt__plus { font-family: var(--ch-font-display); font-size: 22px; color: var(--ch-purple); flex-shrink: 0; } .ch-fbt__item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 2px solid var(--ch-plum); border-radius: var(--ch-radius-md); background: var(--ch-cream); flex: 1 1 200px; min-width: 200px; } .ch-fbt__checkbox { width: 18px; height: 18px; accent-color: var(--ch-pink); flex-shrink: 0; cursor: pointer; } .ch-fbt__image { width: 56px; height: 56px; object-fit: contain; background: var(--ch-surface); border-radius: var(--ch-radius-sm); border: 1px solid var(--ch-plum); flex-shrink: 0; } .ch-fbt__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ch-fbt__title { font-family: var(--ch-font-body); font-weight: 600; font-size: 13px; color: var(--ch-plum); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; } .ch-fbt__title--link { text-decoration: none; } .ch-fbt__title--link:hover { color: var(--ch-pink); } .ch-fbt__price { font-family: var(--ch-font-body); font-weight: 600; font-size: 13px; color: var(--ch-purple); } .ch-fbt__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 2px dashed var(--ch-plum); } .ch-fbt__total-wrap { font-family: var(--ch-font-body); } .ch-fbt__total-label { color: var(--ch-plum-soft); font-size: 14px; margin-right: 8px; } .ch-fbt__total { color: var(--ch-plum); font-weight: 700; font-size: 20px; } /* ---------- Suchfeld (Modal) ---------- */ .search-modal { background: rgba(46, 25, 52, 0.35) !important; } .search-modal__content { background: var(--ch-cream) !important; border-radius: var(--ch-radius-lg) var(--ch-radius-lg) 0 0; } .search-modal__form .search__input { border-radius: var(--ch-radius-pill) !important; border: 2px solid var(--ch-plum) !important; background: var(--ch-surface) !important; font-family: var(--ch-font-body); } .search-modal__form .search__button, .search-modal__form .reset__button { color: var(--ch-pink); } /* ---------- Mobiles Menue (Drawer) ---------- */ #menu-drawer, .menu-drawer { background: var(--ch-cream) !important; } .menu-drawer__menu-item { font-family: var(--ch-font-body); font-weight: 600; color: var(--ch-plum) !important; border-radius: var(--ch-radius-sm); } .menu-drawer__menu-item:hover { background: var(--ch-pink-light); } .menu-drawer__navigation-container { position: relative; padding-top: 8px; } /* ========================================================================== BUTTONS & FORMULARE ========================================================================== */ :root { --buttons-radius: 999px; --buttons-radius-outset: 999px; --buttons-shadow-opacity: 0; --inputs-radius: 14px; --inputs-radius-outset: 14px; } /* Primary-Buttons (In den Warenkorb, etc.) -> Pink, gefuellt, mit Plum-Umrandung */ .button--primary, .button--primary.shopify-payment-button__button--unbranded, #cart-notification .button--primary { --color-button: 255 64 129; --color-button-text: 255 255 255; --alpha-button-background: 1; background-color: rgb(255 64 129) !important; color: #FFFFFF !important; border: 2px solid var(--ch-plum) !important; box-sizing: border-box; } .button--primary::before, .button--primary::after, #cart-notification .button--primary::before, #cart-notification .button--primary::after { box-shadow: none !important; } /* Secondary- & Tertiary-Buttons -> Plum-Outline, deutlich sichtbar */ .button--secondary, .button--tertiary, #cart-notification .button--secondary { --color-button: 46 25 52; --color-button-text: 46 25 52; --alpha-button-background: 0; background-color: transparent !important; color: var(--ch-plum) !important; border: 2px solid var(--ch-plum) !important; box-sizing: border-box; } .button--secondary::before, .button--secondary::after, .button--tertiary::before, .button--tertiary::after { box-shadow: none !important; } /* Checkout-Button auf der Warenkorbseite (falls kein --primary/--secondary Modifier gesetzt ist) */ #checkout, .cart__checkout-button, .cart__ctas .button { --color-button: 255 64 129; --color-button-text: 255 255 255; --alpha-button-background: 1; background-color: rgb(255 64 129) !important; color: #FFFFFF !important; border: 2px solid var(--ch-plum) !important; box-sizing: border-box; } #checkout::before, #checkout::after { box-shadow: none !important; } .button, .shopify-challenge__button, .customer button { font-family: var(--ch-font-body); font-weight: 600; letter-spacing: 0; transition: transform 0.15s ease, box-shadow 0.15s ease; } .button:not([disabled]):hover { transform: translateY(-2px); } /* ---------- Formularfelder ---------- */ .field__input, .select__select, .text-area { font-family: var(--ch-font-body); } .field:after, .select:after, .quantity:after { border-color: var(--ch-plum); } .field__input:focus-visible, .field__input:focus, .select__select:focus-visible, .select__select:focus { box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) var(--ch-pink) !important; } /* ---------- Mengen-Auswahl (Warenkorb) ---------- */ .quantity { border-radius: var(--ch-radius-pill); } .quantity__button, .quantity__input { color: var(--ch-plum); } /* ---------- Warenkorb: Produktname ---------- */ .cart-item__name { color: var(--ch-plum); font-family: var(--ch-font-display); } /* ---------- Warenkorb-Benachrichtigung (Popup) ---------- */ .cart-notification { background: var(--ch-surface) !important; border: 3px solid var(--ch-pink) !important; border-radius: var(--ch-radius-lg); box-shadow: none !important; padding: 20px !important; } .cart-notification__header { border-bottom: none; } .cart-notification__heading { display: flex; align-items: center; gap: 8px; color: var(--ch-plum) !important; font-family: var(--ch-font-body); font-weight: 600; } .cart-notification__heading svg { color: var(--ch-pink); width: 20px; height: 20px; } .cart-notification__close { color: var(--ch-plum); } .cart-notification-product, .cart-notification-product__name, .cart-notification-product__price { color: var(--ch-plum) !important; font-family: var(--ch-font-body); } .cart-notification__links { display: flex; flex-direction: column; gap: 10px; } .cart-notification__links .button-label { color: var(--ch-purple); font-family: var(--ch-font-body); font-weight: 600; text-align: center; } /* ---------- Versandkosten-Fortschrittsanzeige ---------- */ .ch-shipping-bar { margin: 12px 0 18px; } .ch-shipping-bar__text { font-family: var(--ch-font-body); font-size: 13px; color: var(--ch-plum); margin: 0 0 12px; text-align: center; } .ch-shipping-bar__text strong { color: var(--ch-pink); } .ch-shipping-bar__text--success { color: var(--ch-purple); font-weight: 600; } .ch-shipping-bar__track { position: relative; height: 10px; background: var(--ch-pink-light); border: 2px solid var(--ch-plum); border-radius: var(--ch-radius-pill); overflow: visible; } .ch-shipping-bar__fill { height: 100%; background: var(--ch-pink); border-radius: var(--ch-radius-pill); transition: width 0.4s ease; } .ch-shipping-bar__hamster { position: absolute; top: 50%; transform: translate(-50%, -50%); transition: left 0.4s ease; } .ch-shipping-bar__hamster svg { display: block; } /* ---------- Peek + Blinzel-Animation (Hero) ---------- */ .ch-blink-wrap { position: relative; width: 100%; height: 100%; } .ch-blink-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } /* Peek: Bild startet nach unten verschoben (nur unteres Drittel des Kreises zeigt einen Streifen), schiebt sich dann komplett nach oben ins Bild */ .ch-blink-wrap--peek { animation: chPeek 12s infinite; } @keyframes chPeek { 0% { transform: translateY(67%); } 16% { transform: translateY(67%); } 26% { transform: translateY(0%); animation-timing-function: ease-out; } 90% { transform: translateY(0%); } 96% { transform: translateY(67%); animation-timing-function: ease-in; } 100% { transform: translateY(67%); } } /* Normales Blinzeln (kein Peek): gleichmaessige, kurze Abstaende */ .ch-blink-closed { opacity: 0; animation: chBlinkSimple 4s ease-in-out infinite; } @keyframes chBlinkSimple { 0%, 92%, 100% { opacity: 0; } 94%, 97% { opacity: 1; } } /* Blinzeln kombiniert mit Peek: Doppel-Blinzeln waehrend des Peeks, danach normales Blinzeln in kuerzeren Abstaenden waehrend der Hamster sichtbar ist */ .ch-blink-closed--peek { animation: chBlinkPeek 12s infinite; } @keyframes chBlinkPeek { 0%, 4% { opacity: 0; } 5% { opacity: 1; } 6%, 9% { opacity: 0; } 10% { opacity: 1; } 11%, 39% { opacity: 0; } 40% { opacity: 1; } 41%, 59% { opacity: 0; } 60% { opacity: 1; } 61%, 79% { opacity: 0; } 80% { opacity: 1; } 81%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ch-blink-wrap--peek { animation: none; transform: translateY(0%); } .ch-blink-closed, .ch-blink-closed--peek { animation: none; opacity: 0; } }