/* ========================================================================= ILBakery — Brand Pink design system (v2.0 2026-06-19, Claude Code) Goal: ONE brand colour (pink) + ink, ONE button style, ONE font — applied everywhere INCLUDING the Elementor homepage (by re-pointing Elementor's global variables, which were on factory defaults: blue/green + Roboto). Revert: comment out ilbakery_design_polish() enqueue in functions.php. ========================================================================= */ :root { --ilb-pink: #E1308E; /* brand pink (logo) — primary */ --ilb-pink-dk: #C31270; /* darker pink (already used on homepage) */ --ilb-pink-soft: #FFF4FA; /* soft pink tint (already used) */ --ilb-ink: #212121; /* charcoal — the only other colour */ --ilb-muted: #6E6E73; --ilb-card: #FFFFFF; --ilb-border: #F0E3EA; --ilb-radius: 14px; --ilb-radius-sm: 10px; --ilb-shadow: 0 6px 22px rgba(33,33,33,.07); --ilb-shadow-hov:0 14px 34px rgba(225,48,142,.16); } /* ========================================================================= 1) ELEMENTOR GLOBALS — re-point the homepage's brand variables. The kit class sits on , so body.elementor-kit-386 wins the cascade. This flips the homepage from default blue/green + Roboto to pink + Inter. ========================================================================= */ body.elementor-kit-386 { /* fonts → one family everywhere */ --e-global-typography-primary-font-family: "Inter"; --e-global-typography-secondary-font-family: "Inter"; --e-global-typography-text-font-family: "Inter"; --e-global-typography-accent-font-family: "Inter"; /* colours → brand pink + ink (were #6EC1E4 blue / #61CE70 green) */ --e-global-color-primary: #E1308E; --e-global-color-secondary: #212121; --e-global-color-text: #4A4A4F; --e-global-color-accent: #C31270; } /* ========================================================================= 2) TYPOGRAPHY — unify to Inter, force over Elementor/widget per-fonts (icon elements deliberately untouched). ========================================================================= */ body, .site, button, input, select, textarea, h1, h2, h3, h4, h5, h6, .entry-title, .page-title, .product_title, .widget-title, .elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-text-editor *, .elementor-button, .elementor-tab-title, .woocommerce-loop-product__title { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; color: inherit; } body { color: var(--ilb-ink); line-height: 1.65; } /* Hierarchy through weight + size, not different fonts */ h1, .entry-title, .product_title { font-size: clamp(1.7rem, 4.4vw, 2.5rem); font-weight: 800; letter-spacing:-.02em; } h2, .elementor-heading-title { font-weight: 700; letter-spacing:-.01em; } h3 { font-weight: 700; } p, li { color: #4A4A4F; } /* ========================================================================= 3) BUTTONS — ONE style across Elementor + WooCommerce + Botiga. ========================================================================= */ .elementor-button, .elementor-button-link, .button, button.button, input[type="submit"], .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce .button.alt, .woocommerce #respond input#submit, .single_add_to_cart_button, .add_to_cart_button, .botiga-quick-view, .checkout-button { background-color: var(--ilb-pink) !important; border: 1px solid var(--ilb-pink) !important; color: #fff !important; border-radius: 999px !important; font-weight: 600 !important; letter-spacing: .01em; padding: .72em 1.6em !important; box-shadow: none !important; text-shadow: none !important; transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease; } .elementor-button:hover, .button:hover, button.button:hover, input[type="submit"]:hover, .wp-element-button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button.alt:hover, .single_add_to_cart_button:hover, .add_to_cart_button:hover, .botiga-quick-view:hover, .checkout-button:hover { background-color: var(--ilb-pink-dk) !important; border-color: var(--ilb-pink-dk) !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(195,18,112,.28) !important; } .woocommerce a.added_to_cart { color: var(--ilb-pink) !important; font-weight: 600; text-decoration: none; } /* ========================================================================= 4) LINKS / ACCENTS ========================================================================= */ a { color: var(--ilb-ink); } a:hover, .main-navigation a:hover, .botiga-menu a:hover { color: var(--ilb-pink) !important; } /* ========================================================================= 5) PRICES + SALE BADGE → pink ========================================================================= */ .woocommerce .price, .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ilb-pink) !important; font-weight: 700; } .woocommerce .price del { color: var(--ilb-muted) !important; font-weight: 400; } .woocommerce .price ins { text-decoration: none; } .woocommerce span.onsale { background: var(--ilb-pink) !important; color: #fff !important; border-radius: 999px !important; font-weight: 600; min-height: auto; min-width: auto; padding: 4px 12px; line-height: 1.4; } /* ========================================================================= 6) PRODUCT CARDS ========================================================================= */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: var(--ilb-card); border: 1px solid var(--ilb-border); border-radius: var(--ilb-radius); padding: 12px 12px 18px; box-shadow: var(--ilb-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--ilb-shadow-hov); border-color: var(--ilb-pink); } .woocommerce ul.products li.product img { border-radius: var(--ilb-radius-sm); margin-bottom: 14px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.02rem; font-weight: 700; margin: 4px 0 8px; min-height: 2.6em; } /* ========================================================================= 7) SINGLE PRODUCT ========================================================================= */ .single-product div.product .product_title { margin-bottom: 10px; } .single-product div.product .woocommerce-product-gallery img { border-radius: var(--ilb-radius); } .single-product div.product p.price, .single-product div.product span.price { font-size: 1.6rem; } .single-product .quantity .qty { border: 1px solid var(--ilb-border); border-radius: var(--ilb-radius-sm); padding: .55em; } .single-product .woocommerce-tabs ul.tabs li { border-radius: 999px 999px 0 0; } .single-product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--ilb-pink); } /* shop areas get the soft-pink tint (homepage Elementor stays as designed) */ .woocommerce-shop:not(.elementor-page) .site-content, .tax-product_cat .site-content, .single-product .site-content { background: var(--ilb-pink-soft); } /* inputs */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, select, .select2-container--default .select2-selection--single { border-radius: var(--ilb-radius-sm) !important; border-color: var(--ilb-border) !important; } /* ========================================================================= 8) MOBILE ========================================================================= */ @media (max-width: 767px) { .woocommerce ul.products li.product { padding: 10px 10px 14px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 0; font-size: .98rem; } .woocommerce ul.products li.product .button, .single_add_to_cart_button { width: 100%; text-align: center; } .single-product div.product p.price, .single-product div.product span.price { font-size: 1.35rem; } } /* ========================================================================= 9) Homepage Bestsellers — two CTA buttons side by side (v3, aligned) width:auto !important beats Elementor's .elementor-widget-wrap>.elementor- element{width:100%}. align-items:center + white-space:nowrap keep the two pills the same height and vertically aligned. Stack full-width <575px. ========================================================================= */ .elementor-element-e654a9e > .elementor-widget-wrap { justify-content: center; align-items: center; } .elementor-element-e654a9e > .elementor-widget-wrap > .elementor-element.elementor-element-f64fc2d, .elementor-element-e654a9e > .elementor-widget-wrap > .elementor-element.elementor-element-231fde5 { width: auto !important; margin: 16px 6px 0 !important; } .elementor-element-f64fc2d .elementor-button, .elementor-element-231fde5 .elementor-button { white-space: nowrap; /* one line each -> equal height */ } @media (max-width: 575px) { .elementor-element-e654a9e > .elementor-widget-wrap > .elementor-element.elementor-element-f64fc2d, .elementor-element-e654a9e > .elementor-widget-wrap > .elementor-element.elementor-element-231fde5 { width: 100% !important; } .elementor-element-f64fc2d .elementor-button, .elementor-element-231fde5 .elementor-button { white-space: normal; } } /* The cloned button carried a 12px top margin on its INNER .elementor-widget- container (Elementor applies _margin there, not on .elementor-element). Zero both so the two pills line up exactly. */ .elementor-element-f64fc2d > .elementor-widget-container, .elementor-element-231fde5 > .elementor-widget-container { margin-top: 0 !important; }