/* Theme Name: Flatsome Child Description: This is a child theme for Flatsome Theme Author: UX Themes Template: flatsome Version: 3.0 */ /*************** ADD CUSTOM CSS HERE. ***************/ /* Theme Name: Flatsome Child — Xotics Shop Theme URI: https://xotics.shop Description: Xotics Shop child theme for Flatsome. Author: Xotics Template: flatsome Version: 2.0.0 Text Domain: flatsome-child */ /* ═══════════════════════════════════════════════════════════════ FONT REFERENCE — BACKPACKBOYZ INSPIRED ═══════════════════════════════════════════════════════════════ LOGO / DISPLAY FONT: ───────────────────── Google Font: Bebas Neue Weight: 400 (only weight available) Style: Normal (bold condensed by nature) Usage: Logo wordmark, hero headings, section titles Google URL: https://fonts.googleapis.com/css2?family=Bebas+Neue Original font used by Backpackboyz: → "Druk Wide Bold Italic" by Commercial Type → This is a paid/licensed font (~$200–$600) → Purchase at: https://commercialtype.com/catalog/druk/druk_wide → If you buy it, replace "Bebas Neue" with "Druk Wide" everywhere → font-weight: 700; font-style: italic; NAV / UI FONT: ────────────── Google Font: Space Mono Weights: 400 (regular), 700 (bold) Style: Normal Usage: Navigation items, buttons, labels, price tags, any UI element that needs a technical/mono feel Google URL: https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700 BODY FONT: ────────── Google Font: Outfit Weights: 300, 400, 500, 600 Usage: Body copy, product descriptions, paragraphs, form fields, any extended reading text Google URL: https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600 COMBINED GOOGLE FONTS URL (paste in or functions.php): ────────────────────────────────────────────────────────────── https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&family=Outfit:wght@300;400;500;600&display=swap ═══════════════════════════════════════════════════════════════ COLOUR PALETTE ═══════════════════════════════════════════════════════════════ --xs-black: #080808 Page background, header bar background --xs-white: #F0F0F0 Primary text on dark backgrounds --xs-green: #39FF14 Primary accent — CTAs, highlights, prices --xs-purple: #8B00FF Secondary accent — borders, badges --xs-hot: #C724F5 Tertiary — cart badge, hover glow --xs-teal: #00E5CC Quaternary — glow line, portal effects --xs-muted: #888888 Secondary text, placeholders --xs-surface: #111111 Card backgrounds, input backgrounds HEADER BAR (BPBZ style): --xs-bar-bg: #ffffff White header bar (same as BPBZ) --xs-border: #e8e8e8 Subtle borders, dividers --xs-drawer-w: 320px Drawer panel width (full-width on mobile) ═══════════════════════════════════════════════════════════════ CSS VARIABLE QUICK REFERENCE ═══════════════════════════════════════════════════════════════ --xs-logo: "Bebas Neue", cursive ← display/heading font --xs-nav: "Space Mono", monospace ← nav/UI font --xs-body: "Outfit", sans-serif ← body copy font ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ BASE CHILD THEME OVERRIDES (The heavy lifting is done in functions.php via wp_head. Use this file for page-level / WooCommerce layout overrides that need to live in a stylesheet rather than inline.) ═══════════════════════════════════════════════════════════════ */ /* Ensure Flatsome's wrapper doesn't add unwanted top margin */ #wrapper { margin-top: 0 !important; padding-top: 0 !important; } /* Page background */ body { background-color: #080808 !important; } /* Flatsome content row fix */ .page-wrapper, #main, .main { background: #080808 !important; padding-top: 0 !important; } /* ── FLATSOME UX BUILDER OVERRIDES ──────────────────────────── */ /* Section backgrounds default to dark */ .ux-builder-section { background-color: #080808; } /* Text defaults inside UX blocks */ .ux-builder-section p, .ux-builder-section li, .ux-builder-section span { font-family: "Outfit", sans-serif; color: #F0F0F0; } .ux-builder-section h1, .ux-builder-section h2, .ux-builder-section h3, .ux-builder-section h4, .ux-builder-section h5, .ux-builder-section h6 { font-family: "Bebas Neue", cursive; color: #F0F0F0; letter-spacing: 0.04em; } /* ── WOOCOMMERCE SHOP PAGE ───────────────────────────────────── */ /* Shop grid background */ .woocommerce-page #main, .post-type-archive-product #main { background: #080808 !important; } /* Product title */ .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: "Outfit", sans-serif !important; font-size: 14px; font-weight: 500; color: #F0F0F0 !important; letter-spacing: 0.02em; } /* Product price */ .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price .woocommerce-Price-amount { font-family: "Space Mono", monospace !important; color: #39FF14 !important; font-size: 13px; } /* Add to cart button */ .woocommerce ul.products li.product .button { font-family: "Space Mono", monospace !important; font-size: 11px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; background: #39FF14 !important; color: #080808 !important; border-radius: 0 !important; padding: 10px 18px !important; border: none !important; transition: background 0.2s !important; } .woocommerce ul.products li.product .button:hover { background: #5fff40 !important; color: #080808 !important; } /* Single product page */ .woocommerce div.product .product_title { font-family: "Bebas Neue", cursive !important; font-size: clamp(32px, 6vw, 56px) !important; letter-spacing: 0.04em !important; color: #F0F0F0 !important; } .woocommerce div.product p.price, .woocommerce div.product span.price { font-family: "Space Mono", monospace !important; color: #39FF14 !important; font-size: 18px !important; } .woocommerce div.product .woocommerce-product-details__short-description { font-family: "Outfit", sans-serif !important; color: #9B9B9B !important; line-height: 1.7; } /* ── TYPOGRAPHY UTILITIES ────────────────────────────────────── */ .xs-display { font-family: "Bebas Neue", cursive !important; letter-spacing: 0.04em; } .xs-mono { font-family: "Space Mono", monospace !important; } .xs-body { font-family: "Outfit", sans-serif !important; } .xs-text-green { color: #39FF14 !important; } .xs-text-purple { color: #8B00FF !important; } .xs-text-muted { color: #888 !important; } .xs-text-white { color: #F0F0F0 !important; } /* ── SCROLLBAR ───────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: #080808; } ::-webkit-scrollbar-thumb { background: #8B00FF; border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: #C724F5; } ::selection { background: rgba(57,255,20,0.22); color: #F0F0F0; } @media only screen and (max-width: 48em) { /*************** ADD MOBILE ONLY CSS HERE ***************/ }