/* ========================================================================== KOLOROWY MOTYLEK — Design System (paczka 1: tokeny + komponenty) Wyciągnięte 1:1 z dema (frontend/tailwind.config.js, src/index.css, design_guidelines.json). Framework-agnostyczne — działa w motywie WooCommerce (enqueue) albo jako Custom CSS w Elementorze. Zawiera: 1. Fonty (Fredoka + Outfit) 2. Tokeny (:root) — kolory, cienie, promienie 3. Baza — body, nagłówki, zaznaczenie, focus, linki 4. Layout — .km-section, .km-dotted 5. Przyciski — .km-btn (candy / grape / plain) + mapowanie na przyciski Woo 6. Chipy i plakietki 7. Karty produktów — .km-card + mapowanie na siatkę produktów Woo 8. Cena i plakietka promocji (onsale) Kolejne paczki (na życzenie): szuflada koszyka, hero, kafle kategorii, pasek darmowej dostawy, nagłówek/stopka. ========================================================================== */ /* 1. FONTY --------------------------------------------------------------- */ /* W motywie lepiej wpiąć przez wp_enqueue_style / w . @import zostawiony, żeby plik działał też wklejony w Custom CSS. */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap'); /* 2. TOKENY -------------------------------------------------------------- */ :root { /* Marka */ --km-cream: #FCFAF4; /* tło strony */ --km-paper: #FFFFFF; /* tło kart */ --km-ink: #211B4E; /* tekst, obramowania */ --km-butter: #FFCC00; /* primary / żółty */ --km-grape: #7C5CFC; /* secondary / fiolet */ --km-grape-deep:#4C1D95; --km-bubble: #FF5D8F; /* róż / promocje */ --km-mint: #22CBA6; --km-sky: #48BEEF; --km-coral: #FF7A45; --km-lilac: #F1E9FF; --km-blush: #FFE6EE; --km-lemon: #FFF3C9; --km-aqua: #D8F6EE; /* Typografia */ --km-font-display: 'Fredoka', system-ui, sans-serif; --km-font-body: 'Outfit', system-ui, sans-serif; /* Promienie */ --km-radius: 1rem; --km-radius-lg: 2rem; --km-radius-xl: 2.75rem; --km-radius-card: 1.75rem; --km-radius-pill: 9999px; /* Cienie twarde (neo-brutalizm) */ --km-shadow-hard: 4px 4px 0 0 var(--km-ink); --km-shadow-hard-sm: 3px 3px 0 0 var(--km-ink); --km-shadow-hard-lg: 7px 7px 0 0 var(--km-ink); --km-shadow-hard-grape: 5px 5px 0 0 var(--km-grape); /* Cienie miękkie (premium, karty produktów) */ --km-shadow-soft: 0 24px 50px -24px rgba(33, 27, 78, 0.28); --km-shadow-soft-sm: 0 12px 28px -14px rgba(33, 27, 78, 0.25); /* Layout */ --km-container: 1920px; } /* 3. BAZA ---------------------------------------------------------------- */ /* Bez tego .km-section (width:100% + padding) jest szersza niż ekran i cała strona dostaje poziomy pasek przewijania. */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: hidden; } body { font-family: var(--km-font-body); background-color: var(--km-cream); color: var(--km-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, .km-display { font-family: var(--km-font-display); color: var(--km-ink); letter-spacing: -0.02em; } ::selection { background: var(--km-butter); color: var(--km-ink); } /* Focus dostępny (wg design_guidelines: ring fioletowy) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .km-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--km-cream), 0 0 0 6px rgba(124, 92, 252, 0.55); } a { color: var(--km-grape); } a:hover { color: var(--km-grape-deep); } /* 4. LAYOUT -------------------------------------------------------------- */ .km-section { margin-inline: auto; width: 100%; max-width: var(--km-container); padding-inline: 1.5rem; } @media (min-width: 640px) { .km-section { padding-inline: 2.5rem; } } /* Kropkowane tło (sekcje dekoracyjne) */ .km-dotted { background-image: radial-gradient(rgba(124, 92, 252, 0.16) 1.5px, transparent 1.5px); background-size: 22px 22px; } /* 5. PRZYCISKI ----------------------------------------------------------- */ .km-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 2px solid var(--km-ink); border-radius: var(--km-radius-pill); padding: 0.875rem 1.75rem; font-family: var(--km-font-display); font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; box-shadow: var(--km-shadow-hard); transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out; } .km-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--km-shadow-hard-lg); } .km-btn:active { transform: translate(0, 0); box-shadow: var(--km-shadow-hard-sm); } .km-btn--candy { background: var(--km-butter); color: var(--km-ink); } /* główny CTA */ .km-btn--grape { background: var(--km-grape); color: #fff; } /* akcja kasowa */ .km-btn--plain { background: var(--km-paper); color: var(--km-ink); } /* drugorzędny */ /* --- Mapowanie na natywne przyciski WooCommerce --- Dzięki temu domyślny markup Woo (Dodaj do koszyka, Przejdź do kasy, Złóż zamówienie) od razu przejmuje wygląd — bez zmian w szablonach. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .button, .wc-block-components-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 2px solid var(--km-ink); border-radius: var(--km-radius-pill); padding: 0.75rem 1.5rem; background: var(--km-butter); color: var(--km-ink); font-family: var(--km-font-display); font-weight: 600; box-shadow: var(--km-shadow-hard); transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce .button:hover, .wc-block-components-button:hover { transform: translate(-2px, -2px); box-shadow: var(--km-shadow-hard-lg); } /* Akcje główne Woo (.alt: Przejdź do kasy / Złóż zamówienie) na fiolecie */ .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .wc-block-components-button.contained { background: var(--km-grape); color: #fff; } /* 6. CHIPY I PLAKIETKI --------------------------------------------------- */ .km-chip { display: inline-flex; align-items: center; gap: 0.375rem; border: 2px solid var(--km-ink); border-radius: var(--km-radius-pill); background: var(--km-paper); padding: 0.375rem 0.875rem; font-family: var(--km-font-display); font-size: 0.875rem; font-weight: 500; color: var(--km-ink); } .km-badge { display: inline-flex; align-items: center; border: 2px solid var(--km-ink); border-radius: var(--km-radius-pill); background: var(--km-butter); padding: 0.25rem 0.75rem; font-family: var(--km-font-display); font-size: 0.75rem; font-weight: 600; box-shadow: var(--km-shadow-hard-sm); transform: rotate(-3deg); } .km-badge--new { background: var(--km-mint); color: var(--km-ink); } .km-badge--promo { background: var(--km-bubble); color: #fff; } .km-badge--best { background: var(--km-butter); color: var(--km-ink); } /* 7. KARTY PRODUKTÓW ----------------------------------------------------- */ .km-card { display: flex; flex-direction: column; background: var(--km-paper); border: 2px solid rgba(33, 27, 78, 0.05); border-radius: var(--km-radius-card); padding: 0.875rem; box-shadow: var(--km-shadow-soft-sm); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .km-card:hover { transform: translateY(-6px); border-color: rgba(124, 92, 252, 0.4); box-shadow: var(--km-shadow-soft); } .km-card__media { border-radius: 1.35rem; overflow: hidden; aspect-ratio: 1 / 1; background: var(--km-lilac); } .km-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; transition: transform 0.5s ease-out; } .km-card:hover .km-card__media img { transform: scale(1.06) rotate(-2deg); } /* --- Mapowanie na siatkę produktów WooCommerce --- */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: var(--km-paper); border: 2px solid rgba(33, 27, 78, 0.05); border-radius: var(--km-radius-card); padding: 0.875rem; box-shadow: var(--km-shadow-soft-sm); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .woocommerce ul.products li.product:hover { transform: translateY(-6px); border-color: rgba(124, 92, 252, 0.4); box-shadow: var(--km-shadow-soft); } .woocommerce ul.products li.product img { border-radius: 1.35rem; background: var(--km-lilac); } /* 8. CENA I PLAKIETKA PROMOCJI ------------------------------------------ */ .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price, .km-price { font-family: var(--km-font-display); font-weight: 700; color: var(--km-ink); } .woocommerce ul.products li.product .price del, .woocommerce div.product p.price del { color: rgba(33, 27, 78, 0.4); font-weight: 500; } /* Plakietka „Promocja" (onsale) w stylu marki */ .woocommerce span.onsale { min-height: auto; min-width: auto; line-height: 1; padding: 0.3rem 0.75rem; border: 2px solid var(--km-ink); border-radius: var(--km-radius-pill); background: var(--km-bubble); color: #fff; font-family: var(--km-font-display); font-weight: 600; box-shadow: var(--km-shadow-hard-sm); transform: rotate(-3deg); }