/* ============================================================ Galactic Tavern Co. - Base Theme (unchanged intro comments omitted for brevity) ============================================================ */ /* -------------------- CSS RESET & BASE -------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } html { scroll-behavior: smooth; } body { background-color: var(--surface-page); color: var(--color-text-main); line-height: 1.6; } ul { margin: 0; padding: 0; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } :root { /*===================================================================== Text --color-text-main → normal body text (currently #f6f6f6) --color-text-muted → meta, helper text --color-text-inverse → dark text on bright buttons (#061227) Surfaces --surface-page → background --surface-main → big panels / header-ish areas --surface-panel → standard cards (your “panel” look) --surface-deep → very dark shells (generators/stat blocks) --surface-dropdown → nav dropdown menus --surface-highlight → about highlight card --surface-hero-top → that deeper blue at the top of hero gradients Accents --accent-primary → your peach brand accent --accent-secondary → teal accent --accent-mint → mint accent --accent-warm / --accent-hot → the shop orange + pink gradient combo Borders --border-subtle → soft white-ish border you already use everywhere --border-bright / --border-bright-strong → blue borders on shop/product panels, tabs, etc. --border-accent-* → peach/mint/blue “glowy” borders on chips, hero bars, etc. Overlays / glass --overlay-* → black overlays/shadows at different strengths --nav-glass-* → the stacked rgba values in your sticky header background Shop surfaces --surface-shop-panel-* / --surface-shop-sidebar → those deep blue product/shop panels ===============================================================================*/ /* -------- Base brand palette -------- */ --color-bg: #1f212f; --color-bg-alt: #181d2e; --color-panel: #24263b; --color-teal: #1f566a; --color-peach: #f59255; --color-mint: #afd69d; --color-light: #f6f6f6; --color-muted: #b7bdd5; --color-border-soft: rgba(255, 255, 255, 0.08); /* -------- Semantic text colors -------- */ --color-text-main: var(--color-light); /* default body text */ --color-text-muted: var(--color-muted); /* secondary / meta text */ --color-text-inverse: #061227; /* dark text on bright buttons */ /* -------- Surface layers / backgrounds -------- */ --surface-page: var(--color-bg-alt); /* body background */ --surface-main: var(--color-bg); /* primary large surfaces */ --surface-panel: var(--color-panel); /* standard cards / panels */ --surface-deep: #111322; /* generator shells, deep panels */ --surface-dropdown: #1b1f32; /* nav dropdown menus */ --surface-highlight: #202338; /* about highlight cards */ --surface-hero-top: #2b304a; /* hero gradient top */ /* -------- Accent families -------- */ --accent-primary: var(--color-peach); /* warm peach brand accent */ --accent-secondary: var(--color-teal); /* teal accent */ --accent-mint: var(--color-mint); /* mint accent */ --accent-warm: #ffb347; /* base shop orange (prices, CTAs) */ --accent-hot: #ff5f6d; /* base shop red-pink (gradient partner) */ /* -------- Borders & outlines -------- */ --border-subtle: var(--color-border-soft); /* soft panel borders */ --border-bright: rgba(120, 190, 255, 0.3); /* bright blue border */ --border-bright-strong: rgba(120, 190, 255, 0.35); /* stronger variant */ --border-accent-peach: rgba(245, 146, 85, 0.45); /* peach accent border */ --border-accent-mint: rgba(140, 255, 200, 0.45); /* mint accent border */ --border-accent-chip: rgba(140, 200, 255, 0.45); /* chip/pill borders */ /* -------- Overlays & glassmorphism -------- */ --overlay-soft: rgba(0, 0, 0, 0.45); /* soft overlay / shadow */ --overlay-strong: rgba(0, 0, 0, 0.6); /* strong overlay / modal bg */ --overlay-harsh: rgba(0, 0, 0, 0.8); /* extra strong overlay */ --nav-glass-strong: rgba(24, 29, 46, 0.98); /* solid header background */ --nav-glass-mid: rgba(24, 29, 46, 0.9); --nav-glass-soft: rgba(24, 29, 46, 0.65); /* -------- Shop / product panels (dark blues) -------- */ --surface-shop-panel-1: rgba(18, 28, 59, 0.96); --surface-shop-panel-2: rgba(10, 18, 40, 0.98); --surface-shop-sidebar: var(--surface-shop-panel-2); /* reuse deep shop blue */ /* -------- Radii, shadows, layout -------- */ --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.6); --max-width: 1100px; /* -------- About / Generator / NPC -------- */ --surface-about-highlight: var(--surface-highlight); /* reuse highlight */ --surface-generator-shell: var(--surface-deep); /* reuse deep */ --border-generator-shell: var(--border-accent-peach); /* reuse peach border */ --npc-divider-border: rgba(245, 146, 85, 0.65); --npc-block-bg: rgba(255, 255, 255, 0.05); --npc-block-border: rgba(245, 146, 85, 0.25); /* -------- Article / One-shot hero & panels -------- */ --article-hero-bg: radial-gradient( circle at top left, rgba(200, 255, 163, 0.14), transparent 60% ), radial-gradient( circle at bottom right, rgba(116, 198, 255, 0.12), transparent 55% ), rgba(7, 17, 48, 0.95); --article-hero-border: rgba(125, 190, 255, 0.45); --one-shot-hero-bg: radial-gradient( circle at top left, rgba(255, 195, 160, 0.16), transparent 60% ), radial-gradient( circle at bottom right, rgba(118, 255, 210, 0.16), transparent 55% ), rgba(7, 17, 48, 0.96); --one-shot-hero-border: rgba(255, 191, 150, 0.5); --article-panel-bg: linear-gradient( 135deg, rgba(15, 28, 62, 0.95), rgba(8, 18, 44, 0.97) ); --article-panel-border: var(--border-bright); /* unified blue border */ --article-panel-shadow: 0 22px 45px rgba(0, 0, 0, 0.55); --article-hero-chip-bg: linear-gradient( 135deg, rgba(140, 255, 190, 0.18), rgba(116, 198, 255, 0.12) ); --article-hero-chip-border: rgba(140, 255, 220, 0.4); --article-hero-chip-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); --meta-pill-bg-soft: rgba(8, 20, 56, 0.7); --meta-pill-bg-strong: rgba(25, 40, 78, 0.8); --meta-pill-border-strong: rgba(160, 200, 255, 0.45); --meta-pill-text-strong: rgba(210, 230, 255, 0.85); --meta-pill-accent-bg: radial-gradient( circle at top left, rgba(140, 255, 190, 0.18), rgba(8, 20, 56, 0.9) ); --section-divider-gradient: linear-gradient( to right, rgba(140, 255, 200, 0), rgba(140, 255, 200, 0.45), rgba(140, 255, 200, 0) ); --footer-border-top: var(--border-bright); /* unified footer border */ /* -------- Shop / Product -------- */ --shop-accent-warm: var(--accent-warm); /* reuse base warm accent */ --shop-accent-hot: var(--accent-hot); /* reuse base hot accent */ --shop-price-color: var(--shop-accent-warm); /* prices use warm accent */ --product-panel-bg: linear-gradient( 135deg, rgba(18, 28, 59, 0.96), rgba(10, 18, 40, 0.98) ); --product-panel-border: var(--border-bright-strong); /* unified strong border */ --product-panel-shadow: 0 22px 45px rgba(0, 0, 0, 0.6); --product-chip-bg: rgba(22, 36, 70, 0.9); --product-chip-border: var(--border-accent-chip); /* reuse chip border */ --product-chip-text: rgba(215, 235, 255, 0.9); --product-input-bg: rgba(20, 30, 55, 0.95); --product-input-border: var(--border-accent-chip); /* reuse chip border */ --product-thumb-border: var(--border-bright); /* unified thumb border */ --product-thumb-bg: rgba(6, 12, 32, 0.9); --product-main-image-shadow: 0 14px 30px rgba(0, 0, 0, 0.4); /* -------- Shop layout / sidebar -------- */ --shop-hero-gradient: linear-gradient( 135deg, rgba(6, 12, 32, 0.6), rgba(15, 28, 66, 0.95) ); --shop-panel-bg: var(--product-panel-bg); /* reuse product panel gradient */ --shop-panel-border: var(--border-bright-strong); /* unified strong border */ --shop-panel-shadow: 0 22px 45px rgba(0, 0, 0, 0.6); --shop-sidebar-bg: var(--surface-shop-panel-2); /* reuse deep shop blue */ --shop-sidebar-border: var(--border-bright-strong); /* unified strong border */ --shop-sidebar-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); --shop-sidebar-link-hover-bg: rgba(22, 36, 70, 0.95); --shop-sidebar-link-active-bg: rgba(30, 44, 80, 0.98); --shop-sidebar-toggle-border: var(--border-bright); /* unified bright border */ --shop-sidebar-toggle-bg: rgba(10, 18, 40, 0.95); /* -------- Woo tabs / overlays -------- */ --tabs-border-bottom: var(--border-bright); /* unified */ --tabs-link-bg: rgba(22, 32, 65, 0.92); --tabs-link-border: var(--border-bright); /* unified */ --tabs-link-active-bg: rgba(30, 44, 80, 0.98); --tabs-panel-bg: var(--surface-shop-panel-2); /* reuse deep shop blue */ --tabs-panel-border: var(--border-bright); /* unified */ --sidebar-overlay-bg: var(--overlay-strong); /* reuse overlay-strong */ } /* -------------------- GLOBAL LAYOUT HELPERS -------------------- */ .page { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient( circle at top, var(--color-panel) 0%, var(--surface-page) 55% ); } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; } .section { padding: 3rem 0; } .section-alt { background-color: var(--surface-section-alt); } .section-header { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.75rem; } .section-title { font-family: "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.6rem; color: var(--color-mint); } .section-subtitle { max-width: 36rem; font-size: 0.95rem; color: var(--color-muted); } @media (max-width: 768px) { .section { padding: 2.25rem 0; } } /* -------------------- HEADER / NAVBAR -------------------- */ .site-header { position: sticky; top: 0; z-index: 10; background: linear-gradient( to bottom, var(--nav-glass-strong), var(--nav-glass-mid), var(--nav-glass-soft), transparent ); border-bottom: 1px solid var(--color-border-soft); backdrop-filter: blur(12px); transition: transform 0.2s ease; /* for hide-on-scroll */ } /* Hidden state when scrolling down */ .site-header.is-hidden { transform: translateY(-100%); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.2rem; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.75rem; } .brand-logo { width: 160px; height: auto; } .brand-text { display: flex; flex-direction: column; } .brand-name { font-family: "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-mint); } .brand-tagline { font-size: 0.8rem; color: var(--color-peach); } /* Base nav styles – only the TOP-LEVEL ul should be flex */ .main-nav > ul { list-style: none; display: flex; align-items: center; gap: 0.85rem; font-size: 0.9rem; } /* Each list item is a dropdown anchor point */ .main-nav li { position: relative; /* Needed for absolutely-positioned dropdowns */ } /* Base link style */ .main-nav a { color: var(--color-muted); padding: 0.3rem 0.6rem; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; } .main-nav a:hover, .main-nav a:focus-visible { color: var(--color-light); background: var(--nav-link-hover-bg); transform: translateY(-1px); } /* ---------- DROPDOWN MENU FOR GENERATORS ---------- */ /* .has-dropdown wraps the parent menu item (Generators) and its nested .dropdown

a flex row of cards */ .shop-card-grid ul.products { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.8rem; justify-content: flex-start; } /* Each product = a card */ .shop-card-grid ul.products li.product { flex: 1 1 260px; max-width: 320px; background: var(--color-panel); border-radius: var(--radius-xl); border: 1px solid var(--color-border-soft); box-shadow: var(--shadow-soft); padding: 1.1rem 1.2rem 1.3rem; text-align: left; } /* Product link + image */ .shop-card-grid ul.products li.product a.woocommerce-LoopProduct-link { display: block; text-decoration: none; } .shop-card-grid ul.products li.product a.woocommerce-LoopProduct-link img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); margin-bottom: 0.8rem; } /* Product title */ .shop-card-grid ul.products li.product .woocommerce-loop-product__title { font-size: 1.05rem; margin: 0 0 0.3rem; color: var(--color-light); } /* Add to cart button */ .shop-card-grid ul.products li.product .button { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 1.1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; border: none; background: linear-gradient( 135deg, var(--shop-accent-warm), var(--shop-accent-hot) ); color: var(--color-text-inverse); text-decoration: none; } .shop-card-grid ul.products li.product .button:hover { filter: brightness(1.04); } /* Small screens: full-width cards */ @media (max-width: 640px) { .shop-card-grid ul.products li.product { flex: 1 1 100%; max-width: 100%; } } /* GTC SHOP: product card price color */ .shop-card-grid ul.products li.product .price, .shop-card-grid ul.products li.product .price span, .shop-card-grid ul.products li.product .woocommerce-Price-amount { color: var(--shop-price-color) !important; /* GTC warm orange */ } /* ============================================================ GTC — SINGLE PRODUCT PAGE (HIGH-CONVERTING LAYOUT) ============================================================ */ /* Main panel wrapper (article.gtc-product-panel) */ .gtc-product-panel { background: var(--product-panel-bg); border-radius: var(--radius-xl); border: 1px solid var(--product-panel-border); box-shadow: var(--product-panel-shadow); padding: 2.2rem 2.3rem 2.4rem; } /* Inner product wrapper (div.gtc-product) */ .gtc-product { display: flex; flex-direction: column; gap: 2.4rem; } /* Hero layout: gallery + main info */ .gtc-product-hero { display: grid; gap: 2.4rem; } /* Two columns on desktop — gallery gets more space */ @media (min-width: 900px) { .gtc-product-hero { grid-template-columns: 1.7fr 1fr; align-items: flex-start; } } /* FORCE gallery wrapper to be larger on desktop */ .single-product .woocommerce-product-gallery, .single-product .woocommerce-product-gallery__wrapper { max-width: 800px !important; width: 100% !important; } /* Main large image */ .single-product div.product .woocommerce-product-gallery__image img { width: 95% !important; height: auto !important; max-height: none !important; object-fit: contain !important; border-radius: var(--radius-lg); box-shadow: var(--product-main-image-shadow); } /* Main info column */ .gtc-product-main { color: var(--color-light); } /* Category chips */ .gtc-product-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; } .gtc-product-chip { padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--product-chip-bg); border: 1px solid var(--product-chip-border); color: var(--product-chip-text); } .gtc-product-chip-accent { border-color: var(--color-mint); color: var(--color-mint); } /* Title + rating + price */ .gtc-product-main .product_title { font-size: 2rem; margin: 0 0 0.35rem; } .gtc-product-rating-price { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin-bottom: 0.9rem; } .gtc-product-rating-price .woocommerce-product-rating { font-size: 0.86rem; } /* Price — GTC orange */ .gtc-product-rating-price .price { font-size: 1.35rem; } /* Force single product price color to GTC orange everywhere */ .single-product .gtc-product-rating-price .price, .single-product div.product p.price, .single-product div.product span.price { color: var(--shop-price-color) !important; /* warm orange */ } /* Short description under price */ .gtc-product-short { margin-top: 0.4rem; margin-bottom: 1.1rem; font-size: 0.95rem; color: var(--color-light); max-width: 36rem; } /* CTA block: variations + add to cart + trust bullets */ .gtc-product-cta { margin-top: 0.8rem; } /* Variation dropdowns (with white arrow) */ .single-product .gtc-product-main .variations select { width: 100% !important; background: var(--product-input-bg) !important; color: var(--color-light) !important; border: 1px solid var(--product-input-border) !important; border-radius: var(--radius-md) !important; padding: 0.45rem 2.1rem 0.45rem 0.6rem !important; font-size: 0.9rem !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='white' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 14px 14px !important; } /* Quantity box */ .gtc-product-cta .quantity input { background: var(--product-input-bg); color: var(--color-light); border: 1px solid var(--product-input-border); } /* Add to cart button */ .gtc-product-cta .single_add_to_cart_button { background: linear-gradient( 135deg, var(--shop-accent-warm), var(--shop-accent-hot) ); border: none; color: var(--color-text-inverse); font-weight: 600; padding: 0.6rem 1.5rem; border-radius: 999px; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; } .gtc-product-cta .single_add_to_cart_button:hover { filter: brightness(1.08); transform: translateY(-1px); } /* Trust bullets */ .gtc-product-trust { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.8rem; color: var(--color-muted); } /* Meta (SKU, category, tags) */ .gtc-product-meta { margin-top: 1.2rem; font-size: 0.8rem; color: var(--color-muted); } .gtc-product-meta a { color: var(--color-mint); } /* Lower section (tabs + related) */ .gtc-product-lower { margin-top: 2.4rem; } /* ============================================================ GTC — PRODUCT GALLERY THUMBNAILS (WRAPPER-BASED ONLY) ============================================================ */ .gtc-product-thumbs-wrapper { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.6rem; } .gtc-product-thumbs-wrapper > * { flex: 0 0 auto; } /* Normalize UL / OL if Woo uses them */ .gtc-product-thumbs-wrapper ul, .gtc-product-thumbs-wrapper ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; } /* ============================================================ Tabs styling ============================================================ */ .woocommerce-tabs { margin-top: 0; } /* Tabs row: padded & dark, no white */ .woocommerce-tabs ul.tabs { padding: 0 1.5rem; border-bottom: 1px solid var(--tabs-border-bottom) !important; background: transparent; } .woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs::after { border-bottom: none !important; } /* Individual tab container */ .woocommerce-tabs ul.tabs li { border: none !important; background: transparent !important; margin: 0 0.2rem !important; box-shadow: none !important; } /* Kill Woo's default white corner pseudo-elements */ .woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { content: none !important; } /* Tab links */ .woocommerce-tabs ul.tabs li a { background: var(--tabs-link-bg) !important; color: var(--color-light) !important; border-radius: var(--radius-md) var(--radius-md) 0 0; border: 1px solid var(--tabs-link-border) !important; padding: 0.5rem 1.1rem !important; } /* Active tab */ .woocommerce-tabs ul.tabs li.active a { background: var(--tabs-link-active-bg) !important; color: var(--color-mint) !important; border-bottom: none !important; } /* Description / Additional info / Reviews content box */ .woocommerce-Tabs-panel { background: var(--tabs-panel-bg); padding: 1.7rem 2rem; border-radius: 0 0 var(--radius-md) var(--radius-md); border: 1px solid var(--tabs-panel-border); color: var(--color-light); margin-top: 0; } .woocommerce-Tabs-panel > * { margin-left: 0.5rem; margin-right: 0.5rem; } /* Mobile tweaks for product page */ @media (max-width: 768px) { .gtc-product-panel { padding: 1.5rem 1.2rem 1.7rem; } .gtc-product-main .product_title { font-size: 1.6rem; } .gtc-product-rating-price { flex-direction: column; align-items: flex-start; } .gtc-product-cta .single_add_to_cart_button { margin-left: 0.4rem; margin-top: 0.4rem; } } /* ============================================================ Woo gallery thumbnails (flex-control-thumbs) ============================================================ */ /* Make WooCommerce gallery thumbnails small squares */ .single-product .gtc-product-thumbs-wrapper .flex-control-thumbs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; } .single-product .gtc-product-thumbs-wrapper .flex-control-thumbs li { flex: 0 0 30px; width: 30px !important; height: 30px !important; overflow: hidden; box-sizing: border-box; } .single-product .gtc-product-thumbs-wrapper .flex-control-thumbs li img { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; padding: 4px; border-radius: var(--radius-md); border: 1px solid var(--product-thumb-border); background: var(--product-thumb-bg); box-sizing: border-box; transition: 0.2s ease; } .single-product .gtc-product-thumbs-wrapper .flex-control-thumbs li img:hover { border-color: var(--color-mint); transform: scale(1.05); } /* GTC: shrink all product thumbnails (everything after the main image) */ .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img { width: 25px !important; height: 25px !important; object-fit: cover !important; padding: 2px; border-radius: var(--radius-md); border: 1px solid rgba(120, 190, 255, 0.3); background: rgba(6, 12, 32, 0.9); box-sizing: border-box; transition: 0.2s ease; } .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img:hover { transform: scale(1.025); } /* GTC: thumbnails inside our custom wrapper */ .single-product .gtc-product-thumbs-wrapper > .woocommerce-product-gallery__image { flex: 0 0 75px; width: 75px !important; height: 75px !important; overflow: hidden; box-sizing: border-box; } .single-product .gtc-product-thumbs-wrapper > .woocommerce-product-gallery__image img { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; padding: 2px; border-radius: var(--radius-md); border: 1px solid rgba(120, 190, 255, 0.3); background: rgba(6, 12, 32, 0.9); box-sizing: border-box; transition: 0.2s ease; } /* ============================================================ GTC ARCHIVE LAYOUT – SHOP / ARTICLES / ONE-SHOTS ============================================================ */ /* Shared wide layout for archive sections */ #store-archive .container, #articles-archive .container, #one-shots-archive .container { max-width: 85%; /* tweak this number to taste */ padding: 0 0 3rem 0; /* bottom padding only */ } /* Flex row spacing (sidebar + main) */ #store-archive .gtc-shop-layout, #articles-archive .gtc-shop-layout, #one-shots-archive .gtc-shop-layout { margin-top: 2rem; padding-right: 2rem; /* space on the right edge */ } /* Inner padding for main content area */ #store-archive .gtc-shop-main, #articles-archive .gtc-shop-main, #one-shots-archive .gtc-shop-main { padding-left: 1.5rem; } /* Hero banner */ .gtc-shop-hero { margin: 1.5rem 2rem 1.8rem 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--shop-hero-gradient), url("/assets/images/shop-hero-placeholder.jpg") center/cover no-repeat; box-shadow: var(--shadow-soft); color: var(--color-light); } .gtc-shop-hero-inner { padding: 2.4rem 3rem; } .gtc-shop-hero-title { margin: 0 0 0.4rem; } .gtc-shop-hero-subtitle { margin: 0; max-width: 32rem; color: var(--color-muted); } /* Panel wrapper */ .gtc-shop-panel { margin-right: 2rem; border-radius: var(--radius-xl); background: var(--shop-panel-bg); border: 1px solid var(--shop-panel-border); box-shadow: var(--shop-panel-shadow); padding: 1.8rem 2rem 2.2rem; } /* Main flex layout */ .gtc-shop-layout { display: flex; gap: 2rem; margin-top: 2rem; } /* Sidebar (desktop) */ .gtc-shop-sidebar { width: 230px; flex: 0 0 230px; background: var(--shop-sidebar-bg); border-radius: var(--radius-xl); border: 1px solid var(--shop-sidebar-border); box-shadow: var(--shop-sidebar-shadow); padding: 1.2rem 1.2rem 1.4rem; color: var(--color-light); position: relative; } .gtc-shop-sidebar-title { font-size: 1rem; margin: 0 0 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); } /* Sidebar category list */ .gtc-shop-sidebar ul { margin: 0; padding: 1rem 1rem 1rem 2rem; /* left padding for breathing room */ list-style: none !important; } .gtc-shop-sidebar li { margin-bottom: 0.3rem; list-style: none !important; } .gtc-shop-sidebar li::marker, .gtc-shop-sidebar li::before { content: none !important; } .gtc-shop-sidebar li a { display: block; padding: 0.25rem 0.3rem 0.25rem 0.75rem; border-radius: var(--radius-md); text-decoration: none; font-size: 0.9rem; color: var(--color-light); } .gtc-shop-sidebar li a:hover { background: var(--shop-sidebar-link-hover-bg); color: var(--color-mint); } /* Highlight current category */ .gtc-shop-sidebar li.current-cat > a { background: var(--shop-sidebar-link-active-bg); color: var(--color-mint); font-weight: 600; } /* Close button (only mobile) */ .gtc-shop-sidebar-close { position: absolute; top: 0.5rem; right: 0.7rem; border: none; background: transparent; color: var(--color-muted); font-size: 1.1rem; cursor: pointer; display: none; } /* Main area */ .gtc-shop-main { flex: 1; } /* Header row: section header + mobile toggle */ .gtc-shop-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; } .gtc-shop-header-text { max-width: 40rem; } /* Toolbar (result count + sorting + mobile toggle) */ .gtc-shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; } .gtc-shop-toolbar-left { font-size: 0.9rem; } .gtc-shop-toolbar-right { margin-left: auto; } /* Woo bits inside toolbar */ .gtc-shop-toolbar .woocommerce-result-count { margin: 0; } .gtc-shop-toolbar .woocommerce-ordering { margin: 0; } /* Mobile toggle button */ .gtc-shop-sidebar-toggle { display: none; align-items: center; justify-content: center; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--shop-sidebar-toggle-border); background: var(--shop-sidebar-toggle-bg); color: var(--color-light); font-size: 0.85rem; cursor: pointer; } /* ================================ RESPONSIVE – SHOP (MOBILE) ================================ */ @media (max-width: 900px) { .gtc-shop-hero { margin: 1.2rem 1rem 1.4rem; } .gtc-shop-hero-inner { padding: 1.8rem 2rem; } .gtc-shop-panel { margin: 0 1rem; padding: 1.4rem 1.4rem 1.8rem; } .gtc-shop-layout { position: relative; flex-direction: column; } .gtc-shop-sidebar { position: fixed; top: 70px; /* adjust to your header height */ left: 0; bottom: 0; width: 260px; max-width: 80%; transform: translateX(-100%); transition: transform 0.2s ease; z-index: 2000; } .gtc-shop-sidebar.is-open { transform: translateX(0); } .gtc-shop-sidebar-close { display: block; } .gtc-shop-sidebar-toggle { display: inline-flex; } /* Dark overlay behind sidebar */ body.gtc-sidebar-open::before { content: ""; position: fixed; inset: 0; background: var(--sidebar-overlay-bg); z-index: 1500; } .gtc-shop-main { flex: 1 1 100%; } .gtc-shop-toolbar { flex-wrap: wrap; } } /* ========================== AJAX archive loading state ========================== */ #gtc-card-container.is-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.2s ease; } /* Static page layout (privacy, terms, etc.) */ #static-page .gtc-page { margin-top: 2rem; } .gtc-page-header { margin-bottom: 1.5rem; } .gtc-page-title { margin: 0.4rem 0 0; } .gtc-page-content { line-height: 1.7; } .gtc-page-content h2, .gtc-page-content h3 { margin-top: 1.8rem; } @media (max-width: 900px) { /* Let archive containers breathe edge-to-edge a bit more */ #articles-archive .container, #one-shots-archive .container { max-width: 100%; padding: 0 0 3rem 0; } /* So the panel isn’t squeezed too much */ .gtc-shop-panel { margin: 0 0.75rem; padding: 1.4rem 1rem 1.8rem; } /* Center cards and keep them from going too wide */ .card-grid { justify-items: left; } .card-grid .card { width: 100%; max-width: 250px; /* tweak: 340–400px depending on how narrow you want */ } }