/* ========================================================================== Mystic Aura — base styles Colours are driven by CSS custom properties set inline in from functions.php::mystic_generate_palette_css() so the seasonal palette switch in the Customizer needs no extra stylesheet requests. ========================================================================== */ :root{ --mystic-bg: #171022; --mystic-bg-alt: #1f1730; --mystic-panel: #241a38; --mystic-accent: #8a5fd6; --mystic-accent-2: #c9a94d; --mystic-text: #f2ecf9; --mystic-text-dim: #c6bcd8; --mystic-radius: 6px; --mystic-maxw: 1200px; --font-head: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body{ margin:0; background: var(--mystic-bg); color: var(--mystic-text); font-family: var(--font-body); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; } img{ max-width:100%; height:auto; display:block; } a{ color: inherit; text-decoration:none; } h1,h2,h3,h4{ font-family: var(--font-head); font-weight:600; margin:0 0 .5em; letter-spacing:.02em; } ul{ list-style:none; margin:0; padding:0; } button{ font-family: var(--font-body); cursor:pointer; } .mystic-container{ max-width: var(--mystic-maxw); margin:0 auto; padding:0 24px; } .mystic-narrow{ max-width: 780px; } .mystic-section{ padding: 64px 0; } .mystic-section-alt{ background: var(--mystic-bg-alt); } .section-heading{ text-align:center; font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin-bottom: 40px; } .mystic-divider{ padding: 40px 0; text-align:center; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); } .mystic-divider p{ margin:0; font-family: var(--font-head); font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--mystic-accent-2); max-width: 760px; margin:0 auto; } .btn{ display:inline-block; padding: 14px 32px; border-radius: var(--mystic-radius); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--mystic-accent); transition: all .2s ease; } .btn-primary{ background: var(--mystic-accent); color:#0d0813; border-color: var(--mystic-accent); } .btn-primary:hover{ opacity:.88; transform: translateY(-1px); } /* ---------------- Top bar & header ---------------- */ .mystic-topbar{ background: var(--mystic-accent-2); color:#1a1420; font-size:.75rem; } .mystic-topbar-inner{ display:flex; justify-content:space-between; gap:12px; padding:8px 24px; overflow-x:auto; white-space:nowrap; } .site-header{ position:sticky; top:0; z-index:50; background: var(--mystic-bg); backdrop-filter: blur(6px); border-bottom:1px solid rgba(255,255,255,.08); } .mystic-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:20px; } .site-title{ font-family: var(--font-head); font-size:1.5rem; color: var(--mystic-text); } .main-navigation ul{ display:flex; gap:28px; } .main-navigation a{ font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; } .main-navigation{ display:none; } .header-actions{ display:flex; align-items:center; gap:14px; } .icon-btn{ background:none; border:none; color: var(--mystic-text); position:relative; display:inline-flex; } .cart-count{ position:absolute; top:-8px; right:-10px; background: var(--mystic-accent); color:#0d0813; font-size:.65rem; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .mobile-menu-toggle{ display:inline-flex; } .mystic-search-panel{ display:none; padding:16px 0; border-top:1px solid rgba(255,255,255,.08); } .mystic-search-panel.is-open{ display:block; } .search-form{ display:flex; gap:8px; } .search-form input[type="search"]{ flex:1; padding:10px 14px; background: var(--mystic-panel); border:1px solid rgba(255,255,255,.1); color:var(--mystic-text); border-radius: var(--mystic-radius); } @media (min-width: 900px){ .main-navigation{ display:block; } .mobile-menu-toggle{ display:none; } } /* ---------------- Hero ---------------- */ .mystic-hero{ position:relative; min-height: 480px; display:flex; align-items:center; background-size:cover; background-position:center; } .mystic-hero-overlay{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(10,6,16,.88) 0%, rgba(10,6,16,.35) 70%); } .mystic-hero-inner{ position:relative; max-width:560px; padding:80px 24px; } .mystic-hero h1{ font-size: clamp(2.2rem, 5vw, 3.2rem); } .mystic-hero p{ color: var(--mystic-text-dim); margin-bottom: 24px; } /* ---------------- Category grid ---------------- */ .category-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:20px; } .category-tile{ position:relative; display:block; border-radius: var(--mystic-radius); overflow:hidden; aspect-ratio:1/1; background: var(--mystic-panel); } .category-tile img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; } .category-tile:hover img{ transform: scale(1.05); } .category-tile-label{ position:absolute; left:0; right:0; bottom:0; padding:16px; text-align:center; background: linear-gradient(180deg, transparent, rgba(10,6,16,.85)); font-family: var(--font-head); font-size:1.1rem; } @media (min-width: 640px){ .category-grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } /* ---------------- Product grid ---------------- */ .product-grid, ul.products{ display:grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:24px; list-style:none; margin:0; padding:0; } @media (min-width: 640px){ .product-grid, ul.products{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } .product-grid li.product, ul.products li.product{ background: var(--mystic-panel); border-radius: var(--mystic-radius); padding:16px; text-align:center; transition: transform .2s ease; } .product-grid li.product:hover, ul.products li.product:hover{ transform: translateY(-3px); } .product-grid .woocommerce-loop-product__title, ul.products .woocommerce-loop-product__title{ font-family: var(--font-body); font-size:.95rem; font-weight:400; color: var(--mystic-text); margin: 8px 0 4px; } .product-grid .price, ul.products .price{ color: var(--mystic-accent-2); font-weight:500; } .product-grid .star-rating, ul.products .star-rating{ margin: 6px auto; color: var(--mystic-accent-2); } .product-grid .button, ul.products .button, .single_add_to_cart_button, .checkout-button{ display:block; width:100%; margin-top:10px; padding:12px; background:transparent; border:1px solid var(--mystic-accent); color: var(--mystic-text); text-transform:uppercase; font-size:.75rem; letter-spacing:.1em; border-radius: var(--mystic-radius); } .product-grid .button:hover, ul.products .button:hover, .single_add_to_cart_button:hover{ background: var(--mystic-accent); color:#0d0813; } .product-grid img, ul.products img{ border-radius: var(--mystic-radius); aspect-ratio:1/1; object-fit:cover; } /* ---------------- Trust bar ---------------- */ .mystic-trust-bar{ background: var(--mystic-panel); padding: 48px 0; } .trust-grid{ display:grid; grid-template-columns: 1fr; gap: 28px; text-align:center; } .trust-item h4{ color: var(--mystic-accent-2); font-size:1rem; } .trust-item p{ color: var(--mystic-text-dim); font-size:.85rem; margin:0; } @media (min-width: 720px){ .trust-grid{ grid-template-columns: repeat(4,1fr); } } /* ---------------- Blog ---------------- */ .blog-grid{ display:grid; grid-template-columns: 1fr; gap: 32px; margin: 32px 0; } @media (min-width: 640px){ .blog-grid{ grid-template-columns: repeat(3,1fr); } } .blog-tile{ display:block; } .blog-tile-image{ aspect-ratio: 4/3; border-radius: var(--mystic-radius); overflow:hidden; background: var(--mystic-panel); margin-bottom:12px; } .blog-tile-image img{ width:100%; height:100%; object-fit:cover; transition: transform .3s; } .blog-tile:hover .blog-tile-image img{ transform: scale(1.04); } .blog-tile-title{ font-size:1.1rem; margin:0; } .single-post-thumb{ margin-bottom:24px; border-radius: var(--mystic-radius); overflow:hidden; } .single-post-meta{ color: var(--mystic-text-dim); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; } /* ---------------- Footer ---------------- */ .site-footer{ background: var(--mystic-bg-alt); border-top:1px solid rgba(255,255,255,.08); margin-top:60px; } .footer-grid{ display:grid; grid-template-columns:1fr; gap:36px; padding: 56px 0 32px; } @media (min-width: 800px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } } .footer-col h4{ color: var(--mystic-accent-2); font-size:.95rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; } .footer-col ul li{ margin-bottom:8px; } .footer-col a{ color: var(--mystic-text-dim); font-size:.9rem; } .footer-col a:hover{ color: var(--mystic-text); } .social-icons{ display:flex; gap:12px; margin-top:14px; } .newsletter-form{ display:flex; margin-top:14px; } .newsletter-form input{ flex:1; padding:12px 14px; border:1px solid rgba(255,255,255,.15); background: var(--mystic-panel); color: var(--mystic-text); border-radius: var(--mystic-radius) 0 0 var(--mystic-radius); } .newsletter-form button{ padding:0 18px; background: var(--mystic-accent); border:none; color:#0d0813; border-radius: 0 var(--mystic-radius) var(--mystic-radius) 0; } .newsletter-message{ margin: 10px 0 0; font-size:.8rem; min-height:1.2em; } .newsletter-message.is-success{ color: var(--mystic-accent-2); } .newsletter-message.is-error{ color: #e28a8a; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.06); } .footer-bottom-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:18px 24px; font-size:.78rem; color: var(--mystic-text-dim); } /* ---------------- WooCommerce: shared layout ---------------- */ .woocommerce-page .site-main{ padding: 48px 0 80px; } .woocommerce-breadcrumb{ color: var(--mystic-text-dim); font-size:.8rem; margin-bottom:24px; } .woocommerce-breadcrumb a{ color: var(--mystic-text-dim); } /* Single product */ .single-product .summary{ padding-top: 12px; } .single-product .price{ color: var(--mystic-accent-2); font-size:1.4rem; } .woocommerce-product-gallery{ border-radius: var(--mystic-radius); overflow:hidden; } /* Forms: cart qty, coupon, checkout fields all match dark theme */ .quantity .qty, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea{ background: var(--mystic-panel); border:1px solid rgba(255,255,255,.15); color: var(--mystic-text); padding:10px 12px; border-radius: var(--mystic-radius); width:100%; } .form-row label{ font-size:.8rem; color: var(--mystic-text-dim); } /* Single-page checkout: editable order table */ .mystic-checkout-cart{ background: var(--mystic-panel); border-radius: var(--mystic-radius); padding:20px; margin-bottom:32px; } .mystic-mini-cart-table{ width:100%; border-collapse:collapse; } .mystic-mini-cart-table td{ padding:10px 6px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:middle; } .mini-cart-thumb img{ width:56px; height:56px; object-fit:cover; border-radius:4px; } .mystic-cart-qty-input{ width:64px; text-align:center; } .mystic-cart-remove{ background:none; border:none; color: var(--mystic-text-dim); font-size:1.1rem; } .mystic-cart-remove:hover{ color: var(--mystic-accent-2); } .woocommerce-checkout #order_review, .woocommerce-checkout .col-2{ background: var(--mystic-panel); border-radius: var(--mystic-radius); padding:20px; } /* My account */ .woocommerce-MyAccount-navigation ul{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; } .woocommerce-MyAccount-navigation li a{ display:block; padding:8px 16px; background: var(--mystic-panel); border-radius: var(--mystic-radius); font-size:.85rem; } .woocommerce-MyAccount-navigation li.is-active a{ background: var(--mystic-accent); color:#0d0813; } /* Tables (cart totals fallback, order tables) */ table.shop_table{ width:100%; border-collapse:collapse; } table.shop_table th, table.shop_table td{ padding:10px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; } /* Notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice{ background: var(--mystic-panel); border-left:3px solid var(--mystic-accent); padding:14px 18px; border-radius: var(--mystic-radius); list-style:none; } /* Star rating colour */ .star-rating span::before{ color: var(--mystic-accent-2); } /* Utility / performance */ img{ loading:lazy; }