/* ============================================================ ARENA — Premium Dark Gaming Theme for WooCommerce Paste this entire file into: WordPress Admin → Appearance → Customize → Additional CSS (or Appearance → Editor → your child theme's style.css) ============================================================ */ /* Fonts (Rajdhani / Inter / JetBrains Mono) are enqueued separately by the plugin. */ :root{ --arn-void:#0B0B12; --arn-surface:#15151F; --arn-raised:#1C1C2A; --arn-border:#28283A; --arn-primary:#8B5CF6; --arn-primary-light:#A78BFA; --arn-primary-dark:#6D28D9; --arn-accent:#22D3EE; --arn-danger:#FB4570; --arn-success:#34D399; --arn-ink:#F4F4F8; --arn-muted:#8E8EA3; } /* ---------- Global page background & type ---------- */ /* html + common theme/page-builder wrapper classes, so the dark background shows through Astra/Elementor page containers too, not just the raw tag. */ html, body, #page, .site, .ast-container, .elementor, .hfe-nav-menu-wrapper{ background-color:var(--arn-void) !important; } body{ background-image: radial-gradient(circle at 20% 0%, rgba(139,92,246,0.12), transparent 40%), radial-gradient(circle at 85% 10%, rgba(34,211,238,0.09), transparent 35%); color:var(--arn-ink) !important; font-family:'Inter', sans-serif; } /* Elementor sections/containers that don't have their own explicit background colour set inherit the dark background instead of defaulting to white. Sections you've intentionally colored in Elementor keep their own background since inline styles with an explicit color still take precedence for that specific rule. */ .elementor-section, .elementor-container, .elementor-widget-wrap, .e-con, .e-con-inner{ background-color:transparent; } h1,h2,h3,h4,h5,.site-title,.entry-title,.woocommerce-loop-product__title, .product_title, .woocommerce-Tabs-panel h2{ font-family:'Rajdhani', sans-serif !important; font-weight:700 !important; letter-spacing:.02em; color:var(--arn-ink) !important; } a{ color:var(--arn-ink); } a:hover{ color:var(--arn-primary-light); } /* ---------- Site header ---------- */ .site-header, header.ast-header, #masthead, .site-header-focus-item{ background-color:var(--arn-surface) !important; border-bottom:1px solid var(--arn-border) !important; } .main-header-menu a, .ast-header-navigation a, .site-title a{ color:var(--arn-ink) !important; font-family:'Rajdhani', sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.05em; } .main-header-menu a:hover{ color:var(--arn-accent) !important; } /* ---------- Breadcrumbs ---------- */ .woocommerce-breadcrumb, .ast-breadcrumbs, .elementor-widget-breadcrumbs{ color:var(--arn-muted) !important; font-family:'JetBrains Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:.05em; } .woocommerce-breadcrumb a{ color:var(--arn-muted) !important; } .woocommerce-breadcrumb a:hover{ color:var(--arn-accent) !important; } /* ---------- Buttons (shop, cart, checkout, Elementor, everywhere) ---------- */ .button, button, input[type="submit"], .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit, .woocommerce-Button, .single_add_to_cart_button, .checkout-button, .wc-proceed-to-checkout a, .elementor-button, .elementor-button-link, a.elementor-button{ background-color:var(--arn-primary) !important; color:#fff !important; border:none !important; border-radius:0 !important; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); font-family:'Rajdhani', sans-serif !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.08em; padding:14px 28px !important; transition:all .2s ease; } .button:hover, button:hover, input[type="submit"]:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .single_add_to_cart_button:hover{ background-color:var(--arn-primary-light) !important; box-shadow:0 0 24px rgba(139,92,246,.45); } .button.alt, .checkout-button{ background-color:var(--arn-accent) !important; color:var(--arn-void) !important; } .button.alt:hover{ background-color:#67e8f9 !important; } /* ---------- Product grid (shop / category pages) ---------- */ ul.products{ gap:24px; } ul.products li.product{ background:var(--arn-surface) !important; border:1px solid var(--arn-border) !important; padding:14px !important; border-radius:0 !important; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); transition:all .3s ease; } ul.products li.product:hover{ border-color:var(--arn-primary) !important; box-shadow:0 0 24px rgba(139,92,246,.30); transform:translateY(-2px); } ul.products li.product img{ border-radius:0 !important; aspect-ratio:1/1; object-fit:cover; } ul.products li.product .woocommerce-loop-product__title{ font-size:16px !important; margin:10px 0 4px !important; } ul.products li.product .price{ color:var(--arn-ink) !important; font-family:'JetBrains Mono', monospace !important; font-weight:600; } ul.products li.product .price ins{ text-decoration:none; color:var(--arn-ink) !important; } ul.products li.product .price del{ color:var(--arn-muted) !important; opacity:.8; } ul.products li.product .onsale{ background:var(--arn-danger) !important; color:#fff !important; font-family:'Rajdhani', sans-serif; font-weight:700; text-transform:uppercase; border-radius:0 !important; left:14px; top:14px; } ul.products li.product .star-rating{ color:var(--arn-accent) !important; } ul.products li.product .star-rating::before{ color:var(--arn-border) !important; } /* ---------- Single product page ---------- */ .single-product div.product .product_title{ font-size:32px !important; } .single-product div.product p.price, .single-product div.product span.price{ color:var(--arn-ink) !important; font-family:'JetBrains Mono', monospace !important; font-size:28px !important; font-weight:700; } .single-product div.product .woocommerce-product-details__short-description{ color:var(--arn-muted) !important; } .woocommerce-tabs, .woocommerce-Tabs-panel{ background:var(--arn-surface) !important; border:1px solid var(--arn-border) !important; color:var(--arn-muted) !important; padding:24px !important; } .woocommerce-tabs ul.tabs li a{ font-family:'Rajdhani', sans-serif; text-transform:uppercase; font-weight:700; color:var(--arn-muted) !important; } .woocommerce-tabs ul.tabs li.active a{ color:var(--arn-primary-light) !important; } .quantity input.qty{ background:var(--arn-raised) !important; border:1px solid var(--arn-border) !important; color:var(--arn-ink) !important; } /* ---------- Cart & Checkout ---------- */ table.shop_table, .woocommerce-checkout table.shop_table{ background:var(--arn-surface) !important; border:1px solid var(--arn-border) !important; color:var(--arn-ink) !important; } table.shop_table th{ color:var(--arn-muted) !important; font-family:'Rajdhani', sans-serif; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--arn-border) !important; } table.shop_table td{ border-top:1px solid var(--arn-border) !important; } .woocommerce-checkout input.input-text, .woocommerce-checkout select, textarea{ background:var(--arn-raised) !important; border:1px solid var(--arn-border) !important; color:var(--arn-ink) !important; border-radius:0 !important; } .woocommerce-checkout input.input-text:focus{ border-color:var(--arn-accent) !important; outline:none; } #payment{ background:var(--arn-raised) !important; border:1px solid var(--arn-border) !important; } .woocommerce-message, .woocommerce-info{ background:var(--arn-raised) !important; border-top-color:var(--arn-primary) !important; color:var(--arn-ink) !important; } /* ---------- Sidebar widgets / price filter ---------- */ .widget_price_filter .price_slider_amount .button{ padding:8px 16px !important; } .widget_layered_nav ul li, .widget_product_categories ul li{ border-bottom:1px solid var(--arn-border) !important; } .widget-title{ font-family:'Rajdhani', sans-serif !important; text-transform:uppercase; letter-spacing:.08em; color:var(--arn-muted) !important; font-size:13px !important; } /* ---------- Featured product badge (adds a "FEATURED" ribbon look) ---------- */ ul.products li.product.featured::after{ content:"FEATURED"; position:absolute; top:14px; right:14px; background:var(--arn-accent); color:var(--arn-void); font-family:'Rajdhani', sans-serif; font-weight:700; font-size:10px; letter-spacing:.08em; padding:4px 10px; } ul.products li.product{ position:relative; } /* ---------- Header cart icon / mini-cart / search ---------- */ .ast-site-header-cart .count, .cart-contents .count{ color:var(--arn-accent) !important; } .widget_shopping_cart, .woocommerce-mini-cart{ background:var(--arn-surface) !important; border:1px solid var(--arn-border) !important; color:var(--arn-ink) !important; } .search-field, input[type="search"]{ background:var(--arn-raised) !important; border:1px solid var(--arn-border) !important; color:var(--arn-ink) !important; } /* ---------- Mobile menu ---------- */ .ast-mobile-popup-drawer, .ast-mobile-header-wrap{ background:var(--arn-surface) !important; } /* ---------- Wishlist button ---------- */ .arena-wishlist-btn{ background:var(--arn-raised) !important; border:1px solid var(--arn-border) !important; color:var(--arn-muted) !important; width:38px; height:38px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; clip-path:none !important; border-radius:50% !important; cursor:pointer; transition:all .2s ease; } .arena-wishlist-btn:hover{ color:var(--arn-danger) !important; border-color:var(--arn-danger) !important; } .arena-wishlist-btn.active{ color:var(--arn-danger) !important; border-color:var(--arn-danger) !important; background:rgba(251,69,112,.1) !important; } .arena-single-wishlist{ display:flex; align-items:center; gap:10px; margin-top:16px; } .arena-wishlist-label{ color:var(--arn-muted); font-size:13px; } .arena-wishlist-grid{ margin-top:20px; } .arena-empty-wishlist{ color:var(--arn-muted); padding:40px 0; text-align:center; } /* ---------- Badges (NEW / low stock / featured) ---------- */ .arena-badges{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; } .arena-badge{ font-family:'Rajdhani', sans-serif; font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:2px; } .arena-badge-new{ background:var(--arn-accent); color:var(--arn-void); } .arena-badge-low{ background:var(--arn-danger); color:#fff; } .arena-badge-featured{ background:var(--arn-primary); color:#fff; } /* ---------- Free shipping progress bar ---------- */ .arena-shipping-bar{ background:var(--arn-surface); border:1px solid var(--arn-border); padding:16px 20px; margin-bottom:20px; } .arena-shipping-bar p{ margin:10px 0 0; font-size:13px; color:var(--arn-muted); } .arena-shipping-bar strong{ color:var(--arn-ink); } .arena-shipping-bar__track{ height:6px; background:var(--arn-raised); border-radius:99px; overflow:hidden; } .arena-shipping-bar__fill{ height:100%; background:linear-gradient(90deg, var(--arn-primary), var(--arn-accent)); transition:width .4s ease; } .arena-shipping-bar--done p{ color:var(--arn-success); } /* ---------- Trust badges ---------- */ .arena-trust-badges{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin:32px 0; } .arena-trust-badge{ background:var(--arn-surface); border:1px solid var(--arn-border); padding:18px; display:flex; align-items:flex-start; gap:14px; } .arena-trust-icon{ font-size:24px; } .arena-trust-badge strong{ display:block; color:var(--arn-ink); font-family:'Rajdhani',sans-serif; } .arena-trust-badge span{ color:var(--arn-muted); font-size:13px; } /* ---------- Recently viewed ---------- */ .arena-recently-viewed{ margin-top:48px; } .arena-recently-viewed h2{ font-size:20px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; } /* ---------- Footer ---------- */ .site-footer, footer.site-footer, #colophon{ background:var(--arn-surface) !important; border-top:1px solid var(--arn-border) !important; color:var(--arn-muted) !important; } /* ---------- Scrollbar (Chrome/Edge) ---------- */ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:var(--arn-void); } ::-webkit-scrollbar-thumb{ background:var(--arn-border); border-radius:8px; }