/* ============================================================ EXTREME CNC TOOLS — Global Styles Where to add this: WP Admin → Elementor → Custom Code → Add New Title: "XCT Global Styles" Location: Add as This makes everything cohesive and overrides any theme CSS that conflicts with the brand. ============================================================ */ :root { /* Brand colors — these match the Elementor Global Colors */ --xct-bone: #f5f1ea; --xct-paper: #faf7f0; --xct-ink: #1a1a1a; --xct-graphite: #4a4a4a; --xct-steel: #8a8580; --xct-rule: #d4cec2; --xct-signal: #c63623; --xct-signal-deep: #a32815; --xct-moss: #3d5a3c; --xct-copper: #b8762d; } /* Load Saira + IBM Plex Mono if not already loaded */ @import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap'); /* Site-wide background */ body { background: var(--xct-bone) !important; font-family: 'Saira', sans-serif; } /* Body text defaults */ p, li { font-family: 'Saira', sans-serif; line-height: 1.6; } /* All heading defaults if not overridden by widget settings */ h1, h2, h3, h4, h5, h6 { font-family: 'Saira', sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -0.025em; line-height: 0.95; } /* ============================================================ WOOCOMMERCE PRODUCT CARDS — match site aesthetic ============================================================ */ .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 32px !important; margin: 0 !important; padding: 0 !important; } .woocommerce ul.products li.product { width: 100% !important; margin: 0 !important; background: var(--xct-bone); padding: 24px; border: 1px solid transparent; transition: border-color 0.3s ease, transform 0.3s ease; list-style: none; float: none !important; display: flex; flex-direction: column; } .woocommerce ul.products li.product:hover { border-color: var(--xct-rule); transform: translateY(-4px); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Saira', sans-serif !important; font-weight: 800 !important; font-style: italic !important; text-transform: uppercase !important; font-size: 17px !important; letter-spacing: -0.01em !important; line-height: 1.15 !important; color: var(--xct-ink) !important; padding: 8px 0 4px !important; } .woocommerce ul.products li.product .price { font-family: 'Saira', sans-serif !important; font-weight: 800 !important; font-style: italic !important; font-size: 22px !important; color: var(--xct-ink) !important; letter-spacing: -0.02em !important; } .woocommerce ul.products li.product .price ins { color: var(--xct-signal) !important; text-decoration: none !important; } .woocommerce ul.products li.product .price del { font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important; color: var(--xct-steel) !important; font-weight: 500 !important; font-style: normal !important; opacity: 1 !important; } .woocommerce ul.products li.product img { margin-bottom: 16px !important; background: var(--xct-paper); padding: 20px; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.button { background: var(--xct-ink) !important; color: var(--xct-bone) !important; font-family: 'Saira', sans-serif !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 12px 20px !important; border-radius: 0 !important; margin-top: auto !important; transition: background 0.2s ease !important; } .woocommerce ul.products li.product .button:hover { background: var(--xct-signal) !important; } /* Onsale badge */ .woocommerce span.onsale { background: var(--xct-signal) !important; color: var(--xct-bone) !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; padding: 6px 10px !important; border-radius: 0 !important; font-weight: 600 !important; min-height: auto !important; min-width: auto !important; line-height: 1 !important; } /* ============================================================ SINGLE PRODUCT PAGE ============================================================ */ .single-product .product .product_title { font-family: 'Saira', sans-serif !important; font-weight: 900 !important; font-style: italic !important; text-transform: uppercase !important; font-size: 44px !important; letter-spacing: -0.025em !important; line-height: 1 !important; } .single-product .product .price { font-family: 'Saira', sans-serif !important; font-weight: 800 !important; font-style: italic !important; font-size: 32px !important; color: var(--xct-ink) !important; } .single-product .product .single_add_to_cart_button { background: var(--xct-ink) !important; color: var(--xct-bone) !important; font-family: 'Saira', sans-serif !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 18px 32px !important; border-radius: 0 !important; } .single-product .product .single_add_to_cart_button:hover { background: var(--xct-signal) !important; } /* ============================================================ CART & CHECKOUT ============================================================ */ .woocommerce .cart_totals .checkout-button, .woocommerce-checkout #payment #place_order { background: var(--xct-signal) !important; color: var(--xct-bone) !important; font-family: 'Saira', sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; border-radius: 0 !important; padding: 16px 32px !important; } /* ============================================================ ELEMENTOR BUTTON OVERRIDES — Forces brand button style ============================================================ */ .elementor-button { border-radius: 0 !important; font-family: 'Saira', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } .woocommerce ul.products li.product { padding: 16px; } .single-product .product .product_title { font-size: 28px !important; } } @media (max-width: 480px) { .woocommerce ul.products { grid-template-columns: 1fr !important; } } /* ============================================================ FIX: prevent horizontal scroll on mobile from marquee ============================================================ */ body, html { overflow-x: hidden; } /* ============================================================ ACCESSIBILITY — visible focus states ============================================================ */ a:focus-visible, button:focus-visible, .elementor-button:focus-visible { outline: 2px solid var(--xct-signal); outline-offset: 3px; }