/* * HHC Astra Configurator — Main Stylesheet * Healing Health & Compassion | Neon Botanical Design System * ============================================================ * Scoped with .hhc-configured (added to by plugin). * WooCommerce styles live in hhc-woocommerce.css. */ /* ── CSS Variables ─────────────────────────────────────────────────────────── */ :root { --hhc-bg: #021740; --hhc-surface: #06224f; --hhc-soft: #08355c; --hhc-teal: #0596A6; --hhc-purple: #9430BF; --hhc-cyan: #05F2F2; --hhc-gold: #F2A007; --hhc-text: #ffffff; --hhc-muted: #B8DCE3; --hhc-subtle: #D8F7FA; --hhc-border: rgba(255,255,255,0.18); --hhc-border-cyan: rgba(5,242,242,0.35); --hhc-grad-neon: linear-gradient(135deg,#9430BF 0%,#0596A6 45%,#05F2F2 100%); --hhc-grad-gold: linear-gradient(135deg,#F2A007 0%,#05F2F2 100%); --hhc-grad-dark: linear-gradient(180deg,#021740 0%,#06224f 50%,#021740 100%); } /* ── Global resets (scoped) ─────────────────────────────────────────────────── */ .hhc-configured { background: var(--hhc-bg); color: var(--hhc-text); overflow-x: hidden; } .hhc-configured *, .hhc-configured *::before, .hhc-configured *::after { box-sizing: border-box; } .hhc-configured a { color: var(--hhc-cyan); } /* ── Prevent horizontal scroll globally ─────────────────────────────────────── */ .hhc-configured body, .hhc-configured html { overflow-x: hidden; max-width: 100vw; } /* ── Full-width layout overrides ────────────────────────────────────────────── */ /* * Override Astra boxed container on custom pages. * We do NOT apply this to cart / checkout / my-account * (those keep Astra's defaults for WooCommerce compatibility). */ .hhc-configured:not(.hhc-woo-cart):not(.hhc-woo-checkout):not(.hhc-woo-account) .site-content, .hhc-configured:not(.hhc-woo-cart):not(.hhc-woo-checkout):not(.hhc-woo-account) .ast-container, .hhc-configured:not(.hhc-woo-cart):not(.hhc-woo-checkout):not(.hhc-woo-account) .content-area, .hhc-configured:not(.hhc-woo-cart):not(.hhc-woo-checkout):not(.hhc-woo-account) .site-main { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Inner content max-width — centred */ .hhc-configured .entry-content, .hhc-configured .page-content, .hhc-configured .ast-article-post { max-width: 880px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } /* Sidebar: force hidden on custom pages */ .hhc-configured:not(.hhc-woo-cart):not(.hhc-woo-checkout):not(.hhc-woo-account) .secondary, .hhc-configured:not(.hhc-woo-cart):not(.hhc-woo-checkout):not(.hhc-woo-account) #secondary, .hhc-configured:not(.hhc-woo-cart):not(.hhc-woo-checkout):not(.hhc-woo-account) .widget-area { display: none !important; } /* ── Announcement Bar ───────────────────────────────────────────────────────── */ .hhc-announcement-bar { background: var(--hhc-grad-neon); color: #fff; text-align: center; padding: 7px 20px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; width: 100%; display: block; /* Absolutely NO animation, marquee, or movement */ animation: none !important; transform: none !important; transition: none !important; overflow: hidden; } .hhc-announcement-text { display: inline; white-space: normal; } /* ── Astra Header Override ─────────────────────────────────────────────────── */ .hhc-configured #masthead, .hhc-configured .site-header, .hhc-configured .ast-header-wrap, .hhc-configured header.site-header { background: var(--hhc-bg) !important; border-bottom: 1px solid var(--hhc-border-cyan) !important; position: sticky !important; top: 0; z-index: 999; box-shadow: none !important; } /* Header inner layout */ .hhc-configured .ast-header-wrap .ast-container, .hhc-configured #masthead .ast-container { max-width: 100% !important; padding: 10px 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px; } /* Site branding / logo area */ .hhc-configured .site-branding, .hhc-configured .ast-site-identity { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .hhc-configured .site-logo img, .hhc-configured .custom-logo-link img, .hhc-configured .ast-logo-svg, .hhc-configured .hhc-nav-logo-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hhc-border-cyan); display: block; } /* Ensure the logo link itself doesn't add extra spacing */ .hhc-configured .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; } .hhc-configured .site-title, .hhc-configured .ast-site-title { font-size: 11px !important; font-weight: 600 !important; color: #fff !important; line-height: 1.25 !important; text-decoration: none !important; } .hhc-configured .site-title a, .hhc-configured .ast-site-title a { color: #fff !important; text-decoration: none !important; } .hhc-configured .site-description, .hhc-configured .ast-site-tagline { font-size: 8px !important; color: var(--hhc-cyan) !important; font-weight: 400 !important; display: block; } /* ── Navigation ─────────────────────────────────────────────────────────────── */ .hhc-configured .main-navigation, .hhc-configured #site-navigation, .hhc-configured .ast-nav-menu, .hhc-configured .ast-main-header-bar nav { display: flex !important; align-items: center; } /* Desktop nav links */ .hhc-configured .ast-nav-menu > li > a, .hhc-configured .nav-menu > li > a, .hhc-configured #primary-menu > li > a, .hhc-configured .main-navigation ul li a { color: rgba(255,255,255,0.55) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 2px 0 !important; margin: 0 7px !important; border-bottom: 1.5px solid transparent !important; background: transparent !important; transition: color 0.15s, border-color 0.15s !important; text-decoration: none !important; } .hhc-configured .ast-nav-menu > li > a:hover, .hhc-configured .nav-menu > li > a:hover, .hhc-configured #primary-menu > li > a:hover, .hhc-configured .main-navigation ul li a:hover, .hhc-configured .ast-nav-menu > .current-menu-item > a, .hhc-configured .nav-menu > .current-menu-item > a, .hhc-configured #primary-menu > .current-menu-item > a { color: var(--hhc-cyan) !important; border-bottom-color: var(--hhc-cyan) !important; } /* Ensure nav never goes white or disappears */ .hhc-configured .ast-nav-menu, .hhc-configured ul.nav-menu, .hhc-configured ul#primary-menu { background: transparent !important; list-style: none !important; display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 0; margin: 0; padding: 0; } /* Dropdown (sub-menu) */ .hhc-configured .ast-nav-menu .sub-menu, .hhc-configured .nav-menu .sub-menu { background: var(--hhc-surface) !important; border: 1px solid var(--hhc-border-cyan) !important; border-radius: 6px; min-width: 160px; padding: 6px 0; z-index: 9999; } .hhc-configured .ast-nav-menu .sub-menu li a, .hhc-configured .nav-menu .sub-menu li a { color: rgba(255,255,255,0.65) !important; font-size: 9px !important; padding: 7px 14px !important; margin: 0 !important; border-bottom: none !important; display: block; } .hhc-configured .ast-nav-menu .sub-menu li a:hover { color: var(--hhc-cyan) !important; background: rgba(5,242,242,0.07) !important; } /* Nav never hidden by z-index issues */ .hhc-configured .ast-nav-menu-container { z-index: 999 !important; position: relative; } /* Fix: Nav not blending into hero */ .hhc-configured #masthead { z-index: 9999 !important; } /* ── Fallback nav (plugin-generated) ───────────────────────────────────────── */ .hhc-fallback-menu { list-style: none; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; background: transparent; } .hhc-fallback-menu li a { color: rgba(255,255,255,0.55); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 0; margin: 0 7px; border-bottom: 1.5px solid transparent; text-decoration: none; transition: color 0.15s, border-color 0.15s; } .hhc-fallback-menu li a:hover { color: var(--hhc-cyan); border-bottom-color: var(--hhc-cyan); } /* ── Mobile navigation ──────────────────────────────────────────────────────── */ @media (max-width: 920px) { /* Mobile toggle visible */ .hhc-configured .ast-menu-toggle, .hhc-configured button.ast-mobile-nav-icon, .hhc-configured .hhc-mobile-toggle { display: flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 7px; background: rgba(5,242,242,0.08); border: 1px solid var(--hhc-border-cyan); cursor: pointer; color: #fff; } /* Mobile menu panel */ .hhc-configured .ast-nav-menu, .hhc-configured ul#primary-menu, .hhc-configured .main-navigation ul { flex-direction: column !important; align-items: flex-start !important; background: var(--hhc-surface) !important; border-top: 1px solid var(--hhc-border-cyan); padding: 12px 0 !important; width: 100% !important; } .hhc-configured .ast-nav-menu > li > a, .hhc-configured .nav-menu > li > a, .hhc-configured #primary-menu > li > a, .hhc-configured .main-navigation ul li a { padding: 13px 20px !important; margin: 0 !important; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.06) !important; font-size: 12px !important; display: block; } /* Prevent horizontal scroll on mobile */ .hhc-configured .ast-header-wrap .ast-container { flex-wrap: wrap; } } /* ── Custom mobile menu (plugin JS target) ─────────────────────────────────── */ .hhc-mob-menu { display: none; background: var(--hhc-surface); border-top: 1px solid var(--hhc-border-cyan); padding: 12px 0; } .hhc-mob-menu.hhc-open { display: block; } .hhc-mob-menu a { display: flex; align-items: center; padding: 13px 20px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.65); letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.06); text-decoration: none; } .hhc-mob-menu a:hover { color: var(--hhc-cyan); } /* ── Footer ─────────────────────────────────────────────────────────────────── */ /* Hide Astra's default footer when ours is active */ .hhc-configured .ast-footer-area, .hhc-configured #colophon, .hhc-configured .site-footer:not(.hhc-footer), .hhc-configured footer.site-footer:not(.hhc-footer) { display: none !important; } .hhc-footer { background: var(--hhc-bg); border-top: 1px solid var(--hhc-border-cyan); padding: 28px 20px 12px; width: 100%; display: block; } .hhc-footer-inner { max-width: 860px; margin: 0 auto; } .hhc-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; } .hhc-footer-brand-name { font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 4px; } .hhc-footer-brand-sub { font-size: 9px; color: var(--hhc-muted); line-height: 1.65; margin-bottom: 7px; } .hhc-footer-phone { font-size: 9px; color: var(--hhc-cyan); font-weight: 500; text-decoration: none; } .hhc-footer-logo img { max-width: 80px; height: auto; margin-bottom: 8px; border-radius: 50%; border: 1px solid var(--hhc-border-cyan); } .hhc-footer-logo-mark { font-size: 32px; margin-bottom: 8px; } .hhc-footer-col-heading { font-size: 8px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hhc-cyan); margin-bottom: 8px; } .hhc-footer-links { display: flex; flex-direction: column; gap: 4px; } .hhc-footer-links a, .hhc-footer-nav-list a { font-size: 9px; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.15s; display: block; } .hhc-footer-links a:hover, .hhc-footer-nav-list a:hover { color: var(--hhc-cyan); } .hhc-footer-link-muted { font-size: 9px; color: rgba(255,255,255,0.25); } .hhc-footer-bottom { border-top: 1px solid var(--hhc-border-cyan); margin-top: 16px; padding-top: 10px; } .hhc-footer-legal { font-size: 8px; color: var(--hhc-muted); margin-bottom: 8px; line-height: 1.6; } .hhc-footer-bottom-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .hhc-footer-copyright { font-size: 8px; color: var(--hhc-muted); } .hhc-footer-age-badge { background: var(--hhc-grad-neon); color: var(--hhc-bg); font-size: 7px; font-weight: 700; padding: 2px 8px; border-radius: 99px; } @media (max-width: 680px) { .hhc-footer-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .hhc-footer-brand { grid-column: 1 / -1; } } @media (max-width: 420px) { .hhc-footer-grid { grid-template-columns: 1fr; } } /* ── Shop category shortcode grid ───────────────────────────────────────────── */ .hhc-cat-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; } .hhc-cat-tile { border-radius: 8px; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 6px; position: relative; overflow: hidden; cursor: pointer; border: 1px solid var(--hhc-border-cyan); background: var(--hhc-surface); text-decoration: none; transition: border-color 0.2s; } .hhc-cat-tile:hover { border-color: var(--hhc-cyan); } .hhc-cat-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,23,64,0.9) 0%, transparent 55%); } .hhc-cat-emoji { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); font-size: 20px; } .hhc-cat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hhc-cat-name { font-size: 7px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; position: relative; z-index: 1; text-align: center; } @media (max-width: 680px) { .hhc-cat-grid { grid-template-columns: repeat(3, 1fr); } } /* ── Product grid shortcode ─────────────────────────────────────────────────── */ .hhc-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .hhc-pc { background: var(--hhc-surface); border-radius: 10px; overflow: hidden; border: 1px solid var(--hhc-border-cyan); cursor: pointer; transition: transform 0.2s, border-color 0.2s; display: flex; flex-direction: column; } .hhc-pc:hover { transform: translateY(-4px); border-color: var(--hhc-cyan); } .hhc-pc-img-wrap { display: flex; align-items: center; justify-content: center; height: 110px; background: var(--hhc-soft); position: relative; overflow: hidden; text-decoration: none; } .hhc-pc-img { width: 100%; height: 100%; object-fit: cover; } .hhc-pc-img-placeholder { font-size: 36px; } .hhc-sale-badge { position: absolute; top: 6px; left: 6px; background: var(--hhc-purple); color: #fff; font-size: 6px; font-weight: 700; padding: 2px 5px; border-radius: 3px; letter-spacing: 0.07em; text-transform: uppercase; z-index: 2; } .hhc-pc-body { padding: 6px 9px 3px; flex: 1; } .hhc-pc-cat { font-size: 7px; color: var(--hhc-cyan); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 2px; } .hhc-pc-cat a { color: var(--hhc-cyan); text-decoration: none; } .hhc-pc-name { font-size: 10px; font-weight: 600; color: #fff; text-decoration: none; display: block; margin-bottom: 3px; line-height: 1.3; } .hhc-pc-price { font-size: 11px; font-weight: 700; color: var(--hhc-gold); } .hhc-pc-price .woocommerce-Price-amount, .hhc-pc-price bdi { color: var(--hhc-gold) !important; } .hhc-pc-footer { padding: 0; } .hhc-atc-btn { display: block; width: 100%; padding: 8px; background: var(--hhc-cyan); color: var(--hhc-bg); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border: none; cursor: pointer; font-family: inherit; transition: background 0.2s; text-align: center; text-decoration: none; margin-top: 4px; } .hhc-atc-btn:hover { background: var(--hhc-gold); color: var(--hhc-bg); } .hhc-view-btn { background: rgba(5,242,242,0.12); color: var(--hhc-cyan); } @media (max-width: 680px) { .hhc-prod-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Shortcode notice ──────────────────────────────────────────────────────── */ .hhc-sc-notice { color: var(--hhc-muted); font-size: 10px; padding: 12px; text-align: center; border: 1px dashed var(--hhc-border-cyan); border-radius: 6px; } /* ── General HHC buttons ───────────────────────────────────────────────────── */ .hhc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: 1.5px solid transparent; text-decoration: none; transition: all 0.2s; white-space: nowrap; } .hhc-btn-primary { background: var(--hhc-cyan); color: var(--hhc-bg); border-color: var(--hhc-cyan); } .hhc-btn-primary:hover { background: var(--hhc-gold); border-color: var(--hhc-gold); color: var(--hhc-bg); } .hhc-btn-outline { background: transparent; color: var(--hhc-cyan); border-color: var(--hhc-border-cyan); } .hhc-btn-outline:hover { border-color: var(--hhc-cyan); background: rgba(5,242,242,0.08); } /* ── Utility: ensure Astra .ast-container doesn't fight full-width hero sections ─ */ .hhc-full-bleed, .hhc-full-bleed > .ast-container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }