/* Theme Name: Gemini Labs Theme URI: https://geminilabs.ca Author: Gemini Labs Description: Custom WooCommerce child theme for Gemini Labs — Canadian research compound supplier. Clinical-pharma white + Gemini blue (#0027AC) + maple red (#B70003). Europa Grotesk. Version: 2.4.43 Template: hello-elementor Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: Proprietary Text Domain: gemini-labs */ /* ============================================================ DESIGN TOKENS — Gemini Labs v2.0 (clinical Canadian pharma) Brand: #0027AC (Gemini blue) / #B70003 (maple red) / #FFFFFF ============================================================ */ @font-face { font-family: 'Europa Grotesk'; src: url('assets/fonts/EuropaGroNr2SHOP-LigCon.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Europa Grotesk'; src: url('assets/fonts/EuropaGroNr2SHOP-MedCon.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Europa Grotesk'; src: url('assets/fonts/EuropaGroNr2SHOP-Bol.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Europa Grotesk'; src: url('assets/fonts/EuropaGroNr2SHOP-BolCon.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Europa Grotesk'; src: url('assets/fonts/EuropaGroNr2SHOP-BolIta.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; } :root { /* Brand colors */ --color-primary: #0027AC; /* Gemini Blue */ --color-primary-dk: #001E84; /* darker (hover/active) */ --color-primary-lt: #DEE5F8; /* light tint backgrounds */ --color-accent: #B70003; /* Maple Red */ --color-accent-dk: #8E0002; /* Surfaces */ --color-bg: #FFFFFF; --color-bg-2: #F6F8FC; /* light section panel */ --color-bg-3: #EEF2FA; --color-surface: #FFFFFF; --color-surface-alt: #F6F8FC; /* Borders */ --color-border: #E2E7F0; --color-border-bright: rgba(0,39,172,0.18); /* Type */ --color-text: #0F1428; /* near-black ink */ --color-text-muted: #4A5066; --color-text-dim: #8189A0; /* Fonts */ --font-heading: 'Europa Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Europa Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Europa Grotesk', system-ui, sans-serif; --radius: 6px; --radius-sm: 4px; --radius-md: 10px; --radius-pill: 999px; --container: 1320px; --container-narrow: 960px; --shadow-dramatic: 0 24px 60px -20px rgba(0,39,172,0.25); --shadow-soft: 0 8px 24px -8px rgba(15,20,40,0.10); --shadow-card: 0 1px 0 rgba(15,20,40,0.04), 0 12px 32px -16px rgba(15,20,40,0.12); } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.7; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (max-width: 768px) { body { font-size: 16px; } } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-text); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--color-primary-lt); } /* ============================================================ TYPOGRAPHY — Space Grotesk headings Modular scale: 12/14/16/18/20/24/32/40/56/64 ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.15; margin: 0 0 .6em; letter-spacing: -0.015em; color: var(--color-text); } h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; } /* 40 → 64 */ h2 { font-size: clamp(2rem, 3.5vw, 2.5rem); font-weight: 600; } /* 32 → 40 */ h3 { font-size: 1.5rem; font-weight: 600; } /* 24 */ h4 { font-size: 1.25rem; font-weight: 600; } /* 20 */ h5 { font-size: 1.125rem; font-weight: 600; } /* 18 */ p { margin: 0 0 1em; } .eyebrow { font-family: var(--font-heading); font-size: .75rem; /* 12 */ font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--color-primary-lt); margin-bottom: 1rem; display: inline-block; } .accent { color: var(--color-primary-lt); } .accent-underline { background: linear-gradient(180deg, transparent 60%, rgba(100,80,218,0.32) 60%, rgba(100,80,218,0.32) 92%, transparent 92%); padding: 0 .08em; } /* ============================================================ LAYOUT ============================================================ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; } /* Defeat Hello Elementor's parent theme.css cap (max-width: 1140px on .site-header/.site-footer) */ .site-header:not(.dynamic-header), .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-footer .footer-inner { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* Header + footer = full-bleed edge-to-edge (override base .container max-width) */ .site-header, .site-footer, .trust-bar { width: 100%; } .site-header > .container { /* Bar = full-bleed; content clusters toward center with breathing room from nav */ max-width: 1440px !important; width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; margin: 0 auto !important; } .site-footer > .container { max-width: none !important; width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; margin: 0 !important; } .trust-bar { padding-left: 20px; padding-right: 20px; } @media (max-width: 768px) { .site-header > .container, .site-footer > .container { padding-left: 14px !important; padding-right: 14px !important; } .trust-bar { padding-left: 14px; padding-right: 14px; } } section { padding: 96px 0; } @media (max-width: 768px) { section { padding: 64px 0; } } /* ============================================================ BUTTONS — Axom-inspired ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 13px 22px; font-family: var(--font-heading); font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: all .2s ease; text-decoration: none; line-height: 1; } .btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-dk); border-color: var(--color-primary-dk); color: #fff; } .btn-secondary { background: transparent; color: var(--color-text); border-color: rgba(224,221,231,0.22); } .btn-secondary:hover { border-color: var(--color-primary-lt); color: var(--color-primary-lt); } .btn-light { background: #fff; color: var(--color-bg-2); border-color: #fff; } .btn-light:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .btn-sm { padding: 10px 16px; font-size: .75rem; min-height: 40px; } /* ============================================================ TRUST STRIP (above header) ============================================================ */ .trust-bar { background: #F5F1EA; color: #5E5867; font-family: var(--font-heading); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 8px 16px; border-bottom: 1px solid #E8E1D4; } .trust-bar .sep { margin: 0 12px; opacity: .4; } @media (max-width: 600px) { .trust-bar { font-size: .65rem; letter-spacing: .1em; } .trust-bar .sep { margin: 0 6px; } } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: #F5F1EA; border-bottom: 1px solid #E8E1D4; } .site-header .primary-nav a, .site-header .header-cart, .site-header .header-account, .site-header .nav-toggle, .site-header .site-logo .logo-text { color: #0E0B1A; } .site-header .primary-nav a:hover, .site-header .header-cart:hover, .site-header .header-account:hover { color: var(--color-primary); } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; position: relative; } .site-logo { display: flex; align-items: center; flex-shrink: 0; height: 56px; gap: 10px; } .site-logo img { max-height: 56px; width: auto; display: block; } .site-logo .logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; letter-spacing: .03em; color: var(--color-text); } .primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; align-items: center; } .primary-nav a { font-family: var(--font-heading); font-size: .82rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--color-text); } .primary-nav a:hover { color: var(--color-primary-lt); } .header-actions { display: flex; align-items: center; gap: 14px; } .header-cart, .header-account { position: relative; color: var(--color-text); font-family: var(--font-heading); font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; min-height: 44px; min-width: 44px; justify-content: center; border: 1px solid transparent; transition: border-color .2s ease, color .2s ease; } .header-cart:hover, .header-account:hover { color: var(--color-primary-lt); border-color: var(--color-border); } .header-cart .count { background: var(--color-primary); color: #fff; font-size: .65rem; font-weight: 700; padding: 2px 7px; min-width: 18px; text-align: center; border-radius: 2px; } .nav-toggle { display: none; background: transparent; border: 0; color: var(--color-text); font-size: 1.5rem; cursor: pointer; width: 44px; height: 44px; align-items: center; justify-content: center; } /* MOBILE HEADER — single 64px row [hamburger][logo centered][cart] */ @media (max-width: 900px) { .primary-nav { display: none; } .primary-nav.open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg-2); border-bottom: 1px solid var(--color-border); padding: 20px 24px; z-index: 99; } .primary-nav.open ul { flex-direction: column; align-items: flex-start; gap: 18px; } .nav-toggle { display: inline-flex; } .site-header .container { height: 64px; padding-top: 0; padding-bottom: 0; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; } .site-logo { justify-content: center; height: 44px; } .site-logo img { max-height: 44px; } .site-logo .logo-text { font-size: 1.05rem; } .header-account { display: none; } .header-actions { justify-content: flex-end; gap: 0; } .header-cart { padding: 10px 8px; } .header-cart span:not(.count) { display: none; } } /* ============================================================ HERO ============================================================ */ .hero { background: radial-gradient(ellipse at 85% 25%, rgba(100,80,218,0.22), transparent 55%), radial-gradient(ellipse at 15% 80%, rgba(100,80,218,0.10), transparent 50%), linear-gradient(180deg, var(--color-bg-2) 0%, var(--color-bg) 100%); padding: 120px 0 100px; border-bottom: 1px solid var(--color-border); } .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; } .hero h1 { font-size: clamp(2.5rem, 5.4vw, 4rem); line-height: 1.05; margin-bottom: 1.2rem; } .hero p.lead { font-size: 1.18rem; color: var(--color-text-muted); max-width: 540px; margin-bottom: 2.2rem; font-family: var(--font-body); line-height: 1.65; } .hero .tagline { font-family: var(--font-heading); font-size: 1rem; font-weight: 500; letter-spacing: .04em; color: var(--color-primary-lt); margin-bottom: 1.4rem; font-style: italic; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } .hero-art { aspect-ratio: 1/1; background: radial-gradient(circle at 30% 30%, rgba(100,80,218,0.30), transparent 60%), linear-gradient(135deg, var(--color-surface), var(--color-bg-2)); border: 1px solid var(--color-border-bright); position: relative; overflow: hidden; box-shadow: var(--shadow-dramatic); } .hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 56px; } @media (max-width: 900px) { .hero { padding: 64px 0 56px; } .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-art { max-width: 420px; margin: 0 auto; } } /* ===== Full-bleed hero (vial baked into the image on the right) ===== */ .hero-fullbleed { padding: 0; background-color: var(--color-bg); background-size: cover; background-position: center right; background-repeat: no-repeat; min-height: 78vh; display: flex; align-items: center; position: relative; } .hero-fullbleed::before { /* Left-side scrim so text stays legible on every screen width */ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,8,16,0.92) 0%, rgba(10,8,16,0.78) 30%, rgba(10,8,16,0.30) 55%, rgba(10,8,16,0) 75%); pointer-events: none; } .hero-fullbleed-inner { position: relative; z-index: 1; width: 100%; padding: 96px 80px; display: flex; } .hero-copy { max-width: 620px; } .hero-copy .lead { max-width: 540px; } @media (max-width: 1100px) { .hero-fullbleed-inner { padding: 80px 48px; } } @media (max-width: 768px) { .hero-fullbleed { min-height: 70vh; background-position: 80% center; } .hero-fullbleed::before { background: linear-gradient(180deg, rgba(10,8,16,0.55) 0%, rgba(10,8,16,0.92) 60%); } .hero-fullbleed-inner { padding: 56px 24px; } } /* ============================================================ TRUST SIGNALS ROW ============================================================ */ .trust-strip { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 32px 0; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .trust-item .label { font-family: var(--font-heading); font-size: .7rem; text-transform: uppercase; letter-spacing: .2em; color: var(--color-text-muted); margin-bottom: 8px; } .trust-item .value { font-family: var(--font-heading); font-weight: 600; color: var(--color-text); font-size: 1.05rem; } @media (max-width: 700px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ FEATURE GRID ============================================================ */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feature-card { background: rgba(10,10,10,0.7); border: 1px solid var(--color-border); padding: 36px 32px; transition: border-color .25s ease, transform .25s ease; } .feature-card:hover { border-color: var(--color-border-bright); transform: translateY(-2px); } .feature-card h3 { margin-bottom: .6rem; } .feature-card p { color: var(--color-text-muted); margin: 0; } .feature-card .num { font-family: var(--font-heading); font-size: .72rem; font-weight: 700; letter-spacing: .22em; color: var(--color-primary-lt); margin-bottom: 14px; display: block; } @media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } } /* ============================================================ SECTION HEAD ============================================================ */ .section-head { margin-bottom: 48px; max-width: 720px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head p { color: var(--color-text-muted); font-size: 1.1rem; } /* ============================================================ PRODUCT CARDS (custom grid replacement) ============================================================ */ .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 768px) { .products-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 480px) { .products-grid { grid-template-columns: 1fr; } } .product-card { background: rgba(10,10,10,0.7); border: 1px solid var(--color-border); transition: border-color .2s ease, transform .2s ease; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .product-card:hover { border-color: var(--color-primary-lt); transform: translateY(-2px); } .product-card .image { aspect-ratio: 1/1; background: var(--color-bg); position: relative; overflow: hidden; } .product-card .image img { width: 100%; height: 100%; object-fit: cover; padding: 0; } .product-card .body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .product-card .title { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--color-text); margin: 0; } .product-card .sku { font-family: var(--font-heading); font-size: .7rem; color: var(--color-text-dim); letter-spacing: .1em; text-transform: uppercase; } .product-card .price { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--color-primary-lt); margin-top: auto; } .product-card .card-cta { margin-top: 14px; } /* WC standard loop classes — make them look like product-card */ ul.products { list-style: none; padding: 0; margin: 0; } /* ============================================================ SHOP LAYOUT — RIGHT sidebar with search above categories ============================================================ */ .shop-main { padding: 56px 0 96px; } .shop-head { margin-bottom: 0; } .shop-title { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } .shop-title .shop-count { font-family: var(--font-heading); font-size: .8rem; font-weight: 500; color: var(--color-text-muted); letter-spacing: .12em; text-transform: uppercase; } .shop-layout { display: grid; grid-template-columns: 1fr 280px; /* results left, sidebar RIGHT */ gap: 48px; align-items: start; } .shop-results { min-width: 0; } .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 1024px) { .shop-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 768px) { .shop-layout { grid-template-columns: 1fr; } .shop-grid { grid-template-columns: repeat(2,1fr); gap: 16px; } } @media (max-width: 480px) { .shop-grid { grid-template-columns: 1fr; } } .shop-card { background: rgba(10,10,10,0.7); border: 1px solid var(--color-border); transition: border-color .2s ease, transform .2s ease; display: flex; flex-direction: column; } .shop-card:hover { border-color: var(--color-primary-lt); transform: translateY(-2px); } .shop-card-image { aspect-ratio: 1/1; background: var(--color-bg); display: block; overflow: hidden; } .shop-card-image img { width: 100%; height: 100%; object-fit: cover; padding: 0; } .shop-card-body { padding: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .shop-card-title { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--color-text); text-decoration: none; } .shop-card-sku { font-family: var(--font-heading); font-size: .7rem; color: var(--color-text-dim); letter-spacing: .1em; text-transform: uppercase; } .shop-card-price { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--color-primary-lt); margin-top: auto; } .shop-card-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; padding: 11px 14px; background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border: 0; cursor: pointer; min-height: 44px; transition: background .2s ease; text-decoration: none; } .shop-card-btn:hover { background: var(--color-primary-dk); color: #fff; } /* Sidebar */ .shop-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 28px; } .shop-filter { padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); } .shop-filter-title { font-family: var(--font-heading); font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 14px; } .shop-search { display: flex; gap: 8px; } .shop-search input[type="search"] { flex: 1; padding: 11px 12px; font-family: var(--font-body); font-size: .95rem; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); min-height: 44px; } .shop-search input[type="search"]:focus { outline: none; border-color: var(--color-primary-lt); } .shop-search button { padding: 0 14px; background: var(--color-primary); color: #fff; border: 0; font-family: var(--font-heading); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; min-height: 44px; min-width: 44px; } .shop-cats, .shop-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .shop-cats a, .shop-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; color: var(--color-text); font-family: var(--font-heading); font-size: .88rem; border: 1px solid transparent; transition: background .2s ease, border-color .2s ease, color .2s ease; } .shop-cats a:hover, .shop-links a:hover { border-color: var(--color-border); background: var(--color-bg); color: var(--color-primary-lt); } .shop-cats li.is-active a { color: var(--color-primary-lt); border-color: var(--color-border-bright); } .shop-cats .count { font-size: .72rem; color: var(--color-text-dim); letter-spacing: .08em; } .shop-pagination { margin-top: 40px; } .shop-pagination ul.page-numbers { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; justify-content: center; flex-wrap: wrap; } .shop-pagination .page-numbers { padding: 10px 14px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-family: var(--font-heading); font-size: .85rem; } .shop-pagination .current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* ============================================================ SINGLE PRODUCT (Revive-style) ============================================================ */ .gem-breadcrumb { font-family: var(--font-heading); font-size: .8rem; letter-spacing: .08em; color: var(--color-text-muted); } .gem-breadcrumb a { color: var(--color-text-muted); } .gem-breadcrumb a:hover { color: var(--color-primary-lt); } .gem-breadcrumb .current { color: var(--color-text); } .gem-breadcrumb span[aria-hidden] { margin: 0 8px; opacity: .5; } .gem-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } @media (max-width: 900px) { .gem-product-grid { grid-template-columns: 1fr; gap: 32px; } } .gem-product-image { background: var(--color-bg-2); border: 1px solid var(--color-border); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; overflow: hidden; } .gem-product-image img { width: 100%; height: 100%; object-fit: contain; padding: 48px; } .gem-product-image .placeholder { color: var(--color-text-dim); padding: 40px; } .gem-buybox { display: flex; flex-direction: column; gap: 16px; } .gem-product-title { font-size: clamp(2rem, 4.2vw, 2.8rem); margin: 0; } .gem-product-sku { font-family: var(--font-heading); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-dim); } .gem-product-short { color: var(--color-text-muted); font-size: 1.05rem; } .gem-buybox-price { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--color-primary-lt); } .gem-buybox-price del { color: var(--color-text-dim); font-size: 1.2rem; margin-right: 8px; } .gem-buybox-cart .quantity { display: inline-flex; margin-right: 12px; } .gem-buybox-cart input[type="number"] { width: 72px; padding: 12px; font-family: var(--font-heading); background: var(--color-bg-2); border: 1px solid var(--color-border); color: var(--color-text); font-size: 1rem; min-height: 48px; } .gem-buybox-cart .single_add_to_cart_button, .gem-buybox-cart button.button { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-size: .9rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border: 0; cursor: pointer; min-height: 48px; transition: background .2s ease; } .gem-buybox-cart .single_add_to_cart_button:hover, .gem-buybox-cart button.button:hover { background: var(--color-primary-dk); } .gem-buybox-trust { margin-top: 8px; padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); display: grid; gap: 12px; } .gem-buybox-trust .trust-row { display: grid; grid-template-columns: 28px 1fr; align-items: center; column-gap: 12px; font-family: var(--font-heading); font-size: .88rem; } .gem-buybox-trust .trust-row .ico { color: var(--color-primary-lt); width: 24px; height: 24px; } .gem-buybox-trust .trust-row .ico svg { width: 24px; height: 24px; } .gem-buybox-trust .trust-row strong { color: var(--color-text); font-weight: 600; } .gem-buybox-trust .trust-row .muted { color: var(--color-text-muted); font-size: .78rem; display: block; } .gem-coa-link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; background: transparent; border: 1px solid var(--color-primary-lt); color: var(--color-primary-lt); font-family: var(--font-heading); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; margin-top: 8px; align-self: flex-start; } .gem-coa-link:hover { background: var(--color-primary); color: #fff; } .gem-ruo-band { background: var(--color-bg-2); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 18px 0; font-family: var(--font-heading); font-size: .8rem; letter-spacing: .04em; color: var(--color-text-muted); text-align: center; } .gem-ruo-band strong { color: var(--color-primary-lt); } .gem-product-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; } @media (max-width: 900px) { .gem-product-detail-grid { grid-template-columns: 1fr; } } .gem-product-meta { background: var(--color-surface); border: 1px solid var(--color-border); padding: 28px; } .gem-product-meta .sidebar-title { font-family: var(--font-heading); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 16px; } .gem-meta-list { display: grid; grid-template-columns: 1fr 1.4fr; row-gap: 10px; column-gap: 16px; font-family: var(--font-heading); font-size: .9rem; margin: 0; } .gem-meta-list dt { color: var(--color-text-muted); font-weight: 500; } .gem-meta-list dd { color: var(--color-text); margin: 0; } /* Research applications grid below product */ .research-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; } @media (max-width: 900px) { .research-apps { grid-template-columns: 1fr; } } .research-app { background: rgba(10,10,10,0.7); border: 1px solid var(--color-border); padding: 24px; } .research-app h4 { font-size: 1rem; margin-bottom: 8px; color: var(--color-primary-lt); } .research-app p { color: var(--color-text-muted); font-size: .92rem; margin: 0; } /* ============================================================ FAQ ============================================================ */ .faq-list { max-width: 820px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--color-border); padding: 22px 0; } .faq-q { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 1.08rem; color: var(--color-text); list-style: none; } .faq-q::-webkit-details-marker { display: none; } .faq-q::after { content: "+"; font-size: 1.6rem; font-weight: 300; color: var(--color-primary-lt); transition: transform .2s ease; } details[open] .faq-q::after { content: "–"; } .faq-a { color: var(--color-text-muted); padding-top: 14px; line-height: 1.75; font-size: 1.02rem; } /* ============================================================ CTA BAND ============================================================ */ .cta-band { background: linear-gradient(135deg, var(--color-bg-2) 0%, var(--color-surface) 100%); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); position: relative; overflow: hidden; } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(100,80,218,0.18), transparent 60%); pointer-events: none; } .cta-band .inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; } .cta-band h2 { margin: 0 0 .2em; } .cta-band p { margin: 0; color: var(--color-text-muted); } /* ============================================================ COA LIST (download-only) ============================================================ */ .coa-list { display: grid; gap: 0; border: 1px solid var(--color-border); } .coa-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .coa-row:last-child { border-bottom: 0; } .coa-row-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .coa-name { font-family: var(--font-heading); font-weight: 600; color: var(--color-text); font-size: 1rem; } .coa-sku { font-family: var(--font-heading); font-size: .72rem; color: var(--color-text-dim); letter-spacing: .12em; text-transform: uppercase; } /* ============================================================ STICKY MOBILE ADD-TO-CART ============================================================ */ .mobile-atc-bar { display: none; } @media (max-width: 768px) { body.single-product .mobile-atc-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--color-bg-2); border-top: 1px solid var(--color-border); padding: 10px 14px; gap: 12px; align-items: center; justify-content: space-between; box-shadow: var(--shadow-dramatic); } body.single-product .mobile-atc-bar .info { min-width: 0; flex: 1; } body.single-product .mobile-atc-bar .name { font-family: var(--font-heading); font-size: .85rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.single-product .mobile-atc-bar .price { font-family: var(--font-heading); font-size: .95rem; font-weight: 700; color: var(--color-primary-lt); } body.single-product .mobile-atc-bar .btn { flex-shrink: 0; padding: 12px 18px; font-size: .78rem; min-height: 48px; } body.single-product { padding-bottom: 72px; } } /* ============================================================ FOOTER — 4 columns w/ research-use disclaimer ============================================================ */ .site-footer { background: var(--color-bg-2); border-top: 1px solid var(--color-border); padding: 72px 0 24px; color: var(--color-text-muted); font-size: .92rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; } .footer-brand img { max-height: 92px; margin-bottom: 16px; width: auto; display: block; } .footer-brand p { max-width: 340px; font-size: .9rem; line-height: 1.6; } .footer-brand .ruo { display: inline-block; margin-top: 12px; padding: 4px 10px; font-family: var(--font-heading); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-primary-lt); border: 1px solid var(--color-primary-lt); } .footer-col h4 { font-family: var(--font-heading); font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--color-text); margin-bottom: 18px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .footer-col a { color: var(--color-text-muted); font-size: .9rem; } .footer-col a:hover { color: var(--color-primary-lt); } .footer-col .contact-line { font-size: .88rem; color: var(--color-text-muted); } .footer-bottom { border-top: 1px solid var(--color-border); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-heading); font-size: .78rem; letter-spacing: .04em; color: var(--color-text-dim); } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* ============================================================ AGE GATE ============================================================ */ .age-gate { position: fixed; inset: 0; z-index: 9999; background: rgba(10,8,20,0.96); display: flex; align-items: center; justify-content: center; padding: 24px; } .age-gate.hidden { display: none; } .age-gate .box { background: var(--color-surface); border: 1px solid var(--color-border-bright); max-width: 480px; width: 100%; padding: 40px; text-align: center; box-shadow: var(--shadow-dramatic); } .age-gate h2 { margin-bottom: .5em; } .age-gate p { color: var(--color-text-muted); } .age-gate .actions { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ============================================================ MY ACCOUNT — styled WC dashboard ============================================================ */ .woocommerce-account .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 64px 24px; } .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 4px; } .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); font-family: var(--font-heading); font-size: .88rem; text-decoration: none; transition: border-color .2s ease, color .2s ease; } .woocommerce-MyAccount-navigation li a:hover, .woocommerce-MyAccount-navigation li.is-active a { border-color: var(--color-primary-lt); color: var(--color-primary-lt); } .woocommerce-MyAccount-content { background: var(--color-surface); border: 1px solid var(--color-border); padding: 32px; } .woocommerce form .form-row { display: grid; gap: 6px; margin-bottom: 16px; } .woocommerce form .form-row label { font-family: var(--font-heading); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { padding: 12px; font-family: var(--font-body); font-size: 1rem; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); min-height: 44px; } .woocommerce .button, .woocommerce-page .button, .woocommerce a.button { display: inline-flex; align-items: center; justify-content: center; padding: 13px 22px; background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border: 0; cursor: pointer; min-height: 44px; text-decoration: none; } .woocommerce .button:hover { background: var(--color-primary-dk); color: #fff; } /* ============================================================ UTILITIES ============================================================ */ .text-center { text-align: center; } .text-muted { color: var(--color-text-muted); } .mb-0 { margin-bottom: 0; } .mt-xl { margin-top: 48px; } /* ============================================================ GLASS THEME — translucent surfaces + blur across the site Requires visual interest behind, so body gets ambient violet glow. ============================================================ */ :root { --glass-bg: rgba(18, 15, 36, 0.45); --glass-bg-soft: rgba(18, 15, 36, 0.30); --glass-bg-strong: rgba(10, 8, 20, 0.62); --glass-border: rgba(224, 221, 231, 0.10); --glass-border-lt: rgba(255, 255, 255, 0.14); --glass-blur: saturate(140%) blur(18px); --glass-blur-lg: saturate(160%) blur(28px); } /* Body ambient glow so the glass has something to refract */ body { background: radial-gradient(1100px 600px at 85% 12%, rgba(100, 80, 218, 0.20), transparent 60%), radial-gradient(900px 700px at 12% 88%, rgba(100, 80, 218, 0.12), transparent 60%), radial-gradient(700px 500px at 50% 50%, rgba(129, 112, 229, 0.06), transparent 65%), #0A0814 !important; background-attachment: fixed; } /* Trust bar + header become FIXED so content scrolls underneath = visible glass */ body { padding-top: 130px; } @media (max-width: 900px) { body { padding-top: 100px; } } @media (max-width: 600px) { body { padding-top: 96px; } } .trust-bar { position: fixed !important; top: 0; left: 0; right: 0; z-index: 101; background: rgba(10, 8, 20, 0.55) !important; backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08) !important; color: var(--color-text-muted) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; } .site-header { position: fixed !important; top: 32px; left: 0; right: 0; z-index: 100; background: rgba(10, 8, 20, 0.42) !important; backdrop-filter: saturate(170%) blur(28px); -webkit-backdrop-filter: saturate(170%) blur(28px); border-bottom: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 14px 40px rgba(0,0,0,0.35); } @media (max-width: 900px) { .site-header { top: 28px; } } @media (max-width: 600px) { .trust-bar { display: none !important; } .site-header { top: 0; } } .site-header .primary-nav a, .site-header .header-cart, .site-header .header-account, .site-header .nav-toggle, .site-header .site-logo .logo-text { color: var(--color-text) !important; } .site-header .primary-nav a:hover, .site-header .header-cart:hover, .site-header .header-account:hover { color: var(--color-primary-lt) !important; } /* Footer — glass */ .site-footer { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-border); } /* Generic glass surface helper */ .glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); } /* Cards — feature, trust-strip items, product cards */ .feature-card, .trust-strip, .trust-item, .product-card, .coa-row, .faq-item, .shop-sidebar, .gem-buybox, .gem-product-image, .cta-band > .container > .inner, .age-gate .box { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.35); } .trust-strip { padding: 24px 28px; } .trust-item { padding: 18px 20px; background: var(--glass-bg-soft) !important; } .product-card:hover, .feature-card:hover { border-color: var(--color-primary-lt) !important; transform: translateY(-2px); box-shadow: 0 14px 44px rgba(100,80,218,0.22); } /* Buttons — secondary becomes a translucent glass pill */ .btn-secondary { background: var(--glass-bg-soft) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: var(--glass-border-lt) !important; } .btn-secondary:hover { background: rgba(100,80,218,0.18) !important; border-color: var(--color-primary-lt) !important; color: #fff !important; } /* Hero already uses its own background image — soften the scrim a touch */ .hero-fullbleed::before { background: linear-gradient(90deg, rgba(10,8,16,0.82) 0%, rgba(10,8,16,0.62) 30%, rgba(10,8,16,0.22) 55%, rgba(10,8,16,0) 75%) !important; } /* CTA band inner — explicit class fallback */ .cta-band .inner { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.35); border-radius: var(--radius); padding: 40px 48px; } /* WC product loop cards (server-side replaced grid) */ .brand-sc, .gem-product-card { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border) !important; } /* COA rows = glass list */ .coa-list { border: 1px solid var(--glass-border) !important; } .coa-row { border-bottom: 1px solid var(--glass-border) !important; } .coa-row:last-child { border-bottom: 0 !important; } /* Section-head etc. retains transparent bg */ .section-head { background: transparent !important; } /* Browser fallback — if no backdrop-filter support, fall back to solid */ @supports not (backdrop-filter: blur(2px)) { .trust-bar, .site-header, .site-footer, .feature-card, .product-card, .trust-strip, .trust-item, .gem-buybox, .shop-sidebar, .faq-item, .age-gate .box, .cta-band .inner, .btn-secondary { background: var(--color-bg-2) !important; } } /* ============================================================ v1.5.0 — HEADER SEARCH + ELECTRIC VIBE + MOBILE POLISH ============================================================ */ /* --- Header search toggle button --- */ .header-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid transparent; color: var(--color-text) !important; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; } .header-search-toggle:hover { color: var(--color-primary-lt) !important; border-color: var(--color-border); background: rgba(100,80,218,0.08); } .header-search-toggle svg { display: block; } /* --- Search panel: drops down below header when open --- */ .header-search-panel { position: absolute; top: 100%; left: 0; right: 0; background: rgba(10, 8, 20, 0.78); backdrop-filter: saturate(170%) blur(28px); -webkit-backdrop-filter: saturate(170%) blur(28px); border-bottom: 1px solid rgba(100,80,218,0.30); box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(100,80,218,0.08) inset; padding: 18px 24px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; z-index: 99; } .header-search-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .header-search-form { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(100,80,218,0.35); border-radius: 2px; padding: 8px 12px; box-shadow: 0 0 0 4px rgba(100,80,218,0.06), 0 0 24px rgba(100,80,218,0.18) inset; } .header-search-form .header-search-icon { color: var(--color-primary-lt); flex-shrink: 0; } .header-search-form input[type="search"] { flex: 1; background: transparent; border: 0; outline: none; color: #fff; font-family: var(--font-body); font-size: 1rem; padding: 8px 4px; min-width: 0; } .header-search-form input[type="search"]::placeholder { color: var(--color-text-muted); } .header-search-form .btn { flex-shrink: 0; } .header-search-close { background: transparent; border: 0; color: var(--color-text-muted); font-size: 1.6rem; line-height: 1; width: 36px; height: 36px; cursor: pointer; flex-shrink: 0; } .header-search-close:hover { color: var(--color-primary-lt); } /* --- Electric violet edge accents (Micro Math vibe) --- */ .feature-card, .product-card, .gem-buybox, .shop-sidebar, .faq-item, .coa-list, .cta-band .inner, .brand-sc, .gem-product-card { position: relative; } .feature-card::after, .product-card::after, .gem-buybox::after, .shop-sidebar::after, .cta-band .inner::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, rgba(129,112,229,0.25) 0%, rgba(129,112,229,0) 35%, rgba(129,112,229,0) 65%, rgba(100,80,218,0.18) 100%); mix-blend-mode: screen; opacity: .55; transition: opacity .25s ease; } .product-card:hover::after, .feature-card:hover::after { opacity: 1; } /* Subtle blueprint grid behind body content */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(129,112,229,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(129,112,229,0.045) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, transparent 75%); z-index: 0; } .site-footer, section, main { position: relative; z-index: 1; } /* Header + trust-bar must stay above content; do NOT include them in the z:1 rule above */ .site-header { z-index: 1000 !important; } .trust-bar { z-index: 1001 !important; } /* Heading accent — electric underline on .accent spans */ h1 .accent, h2 .accent, .accent-underline { position: relative; color: var(--color-primary-lt); } h1 .accent::after, h2 .accent::after, .accent-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: 2px; background: linear-gradient(90deg, rgba(100,80,218,0) 0%, rgba(129,112,229,0.95) 30%, rgba(100,80,218,0.95) 70%, rgba(100,80,218,0) 100%); box-shadow: 0 0 12px rgba(129,112,229,0.55); } /* Primary button — electric glow */ .btn-primary { box-shadow: 0 6px 20px rgba(100,80,218,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset; } .btn-primary:hover { box-shadow: 0 8px 28px rgba(100,80,218,0.55), 0 0 0 1px rgba(255,255,255,0.10) inset; } /* --- Mobile polish --- */ @media (max-width: 900px) { /* Make room for search button in 3-col grid */ .site-header .container { grid-template-columns: 44px 1fr auto !important; } .header-actions { gap: 4px; } .header-search-toggle { width: 40px; height: 40px; } .header-search-panel { padding: 14px 16px; } .header-search-form { padding: 6px 10px; } .header-search-form .btn { padding: 8px 12px; font-size: .8rem; } } @media (max-width: 600px) { .header-search-form .btn span { display: none; } .header-search-form input[type="search"] { font-size: 16px; /* prevent iOS zoom */ } /* Hide blueprint grid on small screens — too busy */ body::before { display: none; } /* Trust bar already hidden at this breakpoint; tighten body padding */ body { padding-top: 64px !important; } /* Hero — tighter on mobile */ .hero-fullbleed-inner { padding: 32px 18px !important; } .hero h1, .hero-fullbleed h1 { font-size: 2.1rem !important; line-height: 1.1; } .hero .lead, .hero-fullbleed .lead { font-size: 1rem !important; } /* Product cards — full width single column already; tighten gaps */ .products-grid, .shop-grid { gap: 14px !important; } /* COA rows — stack request button below name on phones */ .coa-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px; padding: 14px !important; } .coa-row .coa-btn { align-self: stretch; text-align: center; } /* Footer grid → single column */ .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; } .footer-brand img { max-height: 72px !important; } /* Section padding tighter */ section { padding: 48px 0 !important; } } /* ============================================================ v1.6.0 — MOBILE SKILL PASS Patterns distilled from .agents/skills/mobile-optimization/SKILL.md - Universal containment (zero horizontal scroll) - WC Blocks cart/checkout selectors - 16px font / 48px tap targets on inputs - Shop grid forced 2-per-row mobile (1-col only ≤380px) - WC My Account pill nav (wrap, never scroll) - Orders → stacked label/value cards - Address cards stack - Login centered single column This block is intentionally last to win cascade fights. ============================================================ */ @media (max-width: 782px) { /* --- UNIVERSAL CONTAINMENT (cardinal rule) --- */ html, body { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } *, *::before, *::after { box-sizing: border-box !important; max-width: 100% !important; } img, svg, video, iframe, picture { max-width: 100% !important; height: auto !important; } .container, .site-content, .entry-content, .page-content, .woocommerce, .wc-block-cart, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { max-width: 100vw !important; margin-left: auto !important; margin-right: auto !important; padding-left: 14px !important; padding-right: 14px !important; } p, h1, h2, h3, h4, h5, h6, li, td, span, a { overflow-wrap: anywhere !important; word-break: break-word !important; } /* --- FORM INPUTS (kill iOS zoom + WCAG tap targets) --- */ input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search], select, textarea, .wc-block-components-text-input input, .wc-block-components-select select { font-size: 16px !important; min-height: 48px !important; padding: 12px 14px !important; border-radius: 6px !important; width: 100% !important; box-sizing: border-box !important; } button, .btn, .wp-block-button__link, .wc-block-components-button { min-height: 48px !important; padding: 12px 18px !important; } /* --- SHOP GRID: force 2-per-row (override v1.5.x 1-col @ 480) --- */ .shop-grid, .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .shop-card, .product-card { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } .shop-card-body, .product-card .body { padding: 12px !important; } .shop-card-title, .product-card .name { font-size: 13px !important; line-height: 1.25 !important; } .shop-card-price, .product-card .price { font-size: 13px !important; } .shop-card-btn, .product-card .btn { font-size: 12px !important; padding: 10px 8px !important; min-height: 44px !important; } /* --- WC BLOCKS CART --- */ .wp-block-woocommerce-cart .wc-block-cart { display: block !important; } .wc-block-cart__main, .wc-block-cart__sidebar { width: 100% !important; max-width: 100% !important; float: none !important; } .wc-block-cart-items__row, .wc-block-cart-item__row { flex-wrap: wrap !important; gap: 8px !important; padding: 12px !important; } .wc-block-cart-item__image img { max-width: 80px !important; height: auto !important; } .wc-block-cart-item__product-name, .wc-block-components-product-name { font-size: 14px !important; line-height: 1.3 !important; } .wc-block-cart-item__quantity { margin-top: 8px !important; } /* --- WC BLOCKS CHECKOUT --- */ .wp-block-woocommerce-checkout .wc-block-checkout { display: block !important; } .wc-block-checkout__main, .wc-block-checkout__sidebar { width: 100% !important; max-width: 100% !important; float: none !important; } /* Float-label bug on Country/State — convert to stacked labels */ .wc-block-components-combobox-control__label, .wc-block-components-country-input label, .wc-block-components-state-input label { position: static !important; transform: none !important; display: block !important; margin: 0 0 6px 0 !important; font-size: 13px !important; font-weight: 600 !important; } /* Express payment buttons stack */ .wp-block-woocommerce-cart-express-payment-block, .wc-block-components-express-payment { display: block !important; } .wc-block-components-express-payment button { width: 100% !important; margin: 6px 0 !important; } /* --- WC MY ACCOUNT pill nav (wrap, never horizontal-scroll) --- */ body.woocommerce-account .woocommerce { display: block !important; width: 100% !important; max-width: 100vw !important; margin: 12px auto !important; padding: 0 14px !important; overflow-x: hidden !important; } .woocommerce-MyAccount-navigation ul { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; list-style: none !important; padding: 0 !important; margin: 0 0 14px 0 !important; } .woocommerce-MyAccount-navigation ul li { list-style: none !important; margin: 0 !important; } .woocommerce-MyAccount-navigation ul li a { display: inline-flex !important; align-items: center !important; height: 36px !important; padding: 0 12px !important; border-radius: 999px !important; background: rgba(100,80,218,0.10) !important; color: var(--color-text) !important; border: 1px solid rgba(100,80,218,0.30) !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; text-decoration: none !important; } .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; } .woocommerce-MyAccount-navigation-link--customer-logout a { color: #ff6b6b !important; background: rgba(255,107,107,0.10) !important; border-color: rgba(255,107,107,0.40) !important; } /* Content card always visible (no v158-style hide bug) */ .woocommerce-MyAccount-content { display: block !important; visibility: visible !important; opacity: 1 !important; min-height: 280px !important; background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border) !important; border-radius: 8px !important; padding: 18px !important; } .woocommerce-MyAccount-content > * { display: revert !important; visibility: visible !important; } /* --- ORDERS TABLE → stacked cards --- */ .woocommerce-orders-table, table.shop_table { display: block !important; width: 100% !important; } .woocommerce-orders-table thead { display: none !important; } .woocommerce-orders-table tbody { display: block !important; } .woocommerce-orders-table tr { display: block !important; background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; border-radius: 8px !important; padding: 12px 14px !important; margin: 0 0 10px !important; } .woocommerce-orders-table td { display: flex !important; justify-content: space-between !important; width: 100% !important; padding: 7px 0 !important; border-bottom: 1px dashed var(--color-border) !important; text-align: right !important; } .woocommerce-orders-table td::before { content: attr(data-title); font-weight: 700 !important; color: var(--color-primary-lt) !important; text-align: left !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } /* --- ADDRESS CARDS stack --- */ .woocommerce-Addresses { display: block !important; } .woocommerce-Address { width: 100% !important; margin: 0 0 14px !important; padding: 16px !important; background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; border-radius: 8px !important; } .woocommerce-Address-title { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--color-border) !important; margin-bottom: 12px !important; } /* --- LOGIN / REGISTER (single column, max 480px) --- */ body.woocommerce-account:not(.logged-in) .woocommerce { max-width: 480px !important; margin: 24px auto !important; } body.woocommerce-account:not(.logged-in) .u-column1, body.woocommerce-account:not(.logged-in) .u-column2 { width: 100% !important; max-width: 100% !important; margin: 0 0 16px 0 !important; float: none !important; } } /* Small phones — fall back to 1-col only here (per skill) */ @media (max-width: 380px) { .shop-grid, .products-grid { grid-template-columns: 1fr !important; } } /* ============================================================ v1.6.5 — DESKTOP HEADER OPACITY (kill bleed-through on scroll) The glass theme uses rgba(...,0.42) which makes product cards visible through the header during scroll. Bump opacity high enough to fully occlude card images while keeping the blur for vibe. ============================================================ */ .trust-bar { background: rgba(10, 8, 20, 0.94) !important; } .site-header { background: rgba(10, 8, 20, 0.94) !important; backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; } /* ============================================================ v1.6.1 — MOBILE FIXES (nav dropdown, header flash, hero text) ============================================================ */ @media (max-width: 900px) { /* ---- NAV DROPDOWN: rise above hero + everything else ---- */ .site-header { z-index: 9999 !important; } .primary-nav.open { position: fixed !important; top: 64px !important; /* mobile header is 64px tall */ left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; background: rgba(10, 8, 20, 0.98) !important; /* solid, no transparency */ backdrop-filter: saturate(170%) blur(28px); -webkit-backdrop-filter: saturate(170%) blur(28px); border-bottom: 1px solid rgba(100,80,218,0.30) !important; box-shadow: 0 18px 48px rgba(0,0,0,0.55) !important; padding: 18px 24px !important; z-index: 9998 !important; max-height: calc(100vh - 64px) !important; overflow-y: auto !important; } .primary-nav.open ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .primary-nav.open ul li a { display: block !important; padding: 14px 8px !important; font-size: 1rem !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; min-height: 48px !important; } /* Same treatment for search panel */ .header-search-panel.open { position: fixed !important; top: 64px !important; left: 0 !important; right: 0 !important; width: 100vw !important; z-index: 9998 !important; background: rgba(10, 8, 20, 0.98) !important; box-shadow: 0 18px 48px rgba(0,0,0,0.55) !important; } /* ---- HEADER FLASH: stabilize compositing on iOS Safari ---- */ .site-header, .trust-bar { transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* ---- HERO TEXT READABILITY ---- */ /* Replace the horizontal-left scrim with a full-coverage radial scrim darkest at the top-left where the text sits */ .hero-fullbleed::before { background: linear-gradient(180deg, rgba(10,8,16,0.78) 0%, rgba(10,8,16,0.55) 100%), radial-gradient(ellipse at 25% 35%, rgba(10,8,16,0.65) 0%, rgba(10,8,16,0.15) 60%, transparent 100%) !important; } .hero-fullbleed h1, .hero-fullbleed .hero-copy h1, .hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.9) !important; color: #ffffff !important; } .hero-fullbleed .lead, .hero-fullbleed .tagline, .hero-fullbleed .eyebrow, .hero .lead, .hero .tagline { text-shadow: 0 1px 8px rgba(0,0,0,0.8) !important; color: #f4f2f8 !important; } /* ---- v1.6.2 HEADER ACTIONS: visible cart + search ---- */ /* Widen the right column so both icons fit comfortably */ .site-header .container { grid-template-columns: 44px 1fr auto !important; gap: 6px !important; } .header-actions { display: inline-flex !important; align-items: center !important; gap: 4px !important; justify-content: flex-end !important; } /* Search toggle: solid 44px square */ .header-search-toggle { width: 44px !important; height: 44px !important; padding: 0 !important; color: #ffffff !important; } .header-search-toggle svg { display: block !important; width: 22px !important; height: 22px !important; } /* Cart: show ICON not text on mobile */ .header-cart { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 0 10px !important; min-width: 48px !important; height: 44px !important; color: #ffffff !important; position: relative !important; } .header-cart-icon { display: block !important; width: 22px !important; height: 22px !important; } .header-cart .header-cart-label { display: none !important; } .header-cart .count { background: var(--color-primary) !important; color: #fff !important; font-size: .65rem !important; font-weight: 700 !important; padding: 2px 6px !important; min-width: 18px !important; border-radius: 2px !important; line-height: 1.2 !important; } /* Account remains hidden on mobile (lives in hamburger now) */ .header-account { display: none !important; } /* Mobile-only "My Account" item in the dropdown gets a violet accent */ .primary-nav .mobile-only-nav-account a { color: var(--color-primary-lt) !important; font-weight: 600 !important; } /* v1.6.4 — kill bleed-through: header opaque on mobile so cards don't show through the translucent background while scrolling */ .site-header { background: rgba(10, 8, 20, 0.96) !important; backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); } .trust-bar { background: rgba(10, 8, 20, 0.96) !important; } } /* Desktop: hide the cart icon (use the text label as before) */ @media (min-width: 901px) { .header-cart-icon { display: none !important; } /* Mobile-only My Account item is in the hamburger; hide on desktop nav since there's already an account button in header-actions */ .primary-nav .mobile-only-nav-account { display: none !important; } } /* ============================================================ v1.6.3 — FAQ CARD PADDING + CONTACT GRID INLINE OVERRIDE ============================================================ */ /* FAQ — give the card proper inner padding so question + plus sit inside */ .faq-item { padding: 18px 20px !important; margin-bottom: 12px !important; border-bottom: 0 !important; /* was a separator line; card has its own border */ border-radius: 4px !important; } .faq-q { gap: 16px !important; padding-right: 4px !important; } .faq-q::after { flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; line-height: 1 !important; } .faq-a { padding-top: 14px !important; padding-right: 4px !important; } /* CONTACT — kill the inline grid-template-columns at mobile width */ @media (max-width: 782px) { .feature-grid[style*="repeat(3"], .feature-grid[style*="repeat(2"], .feature-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .feature-card { width: 100% !important; max-width: 100% !important; padding: 18px !important; } /* Tighten FAQ on mobile */ .faq-item { padding: 16px 16px !important; } .faq-q { font-size: 1rem !important; line-height: 1.35 !important; } .faq-q::after { width: 32px !important; height: 32px !important; font-size: 1.4rem !important; } } /* ============================================================ v1.6.8 — subtle letter-spacing nudge across body + headings ============================================================ */ body, p, li, a, span, button, input, select, textarea, h1, h2, h3, h4, h5, h6 { letter-spacing: 0.012em; } /* Preserve existing wide-tracked eyebrow/uppercase utility cases — they already use larger values */ /* ============================================================ v1.6.9 — hero lead readability (bolder + brighter) ============================================================ */ .hero p.lead, .hero .lead, .hero-fullbleed .lead { font-weight: 700 !important; color: #e0dee8 !important; /* lighter gray, softer than pure white */ font-size: 1.28rem !important; line-height: 1.55 !important; text-shadow: 0 1px 8px rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.55) !important; } @media (max-width: 768px) { .hero p.lead, .hero .lead, .hero-fullbleed .lead { font-size: 1.05rem !important; font-weight: 700 !important; } } /* ============================================================ v1.7.2 — Cart empty state: kill smiley pseudo + dot separator ============================================================ */ /* The frownie is a ::before pseudo on .with-empty-cart-icon, NOT an */ .wc-block-cart__empty-cart__title.with-empty-cart-icon::before, h2.with-empty-cart-icon::before, .with-empty-cart-icon::before { content: none !important; background: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } .wc-block-cart__empty-cart__title.with-empty-cart-icon, h2.with-empty-cart-icon { padding-top: 0 !important; background-image: none !important; } /* The three-dot separator sits INSIDE the empty-cart block (child, not sibling) */ .wp-block-woocommerce-empty-cart-block hr.wp-block-separator.is-style-dots, .wp-block-woocommerce-cart-empty-cart-block hr.wp-block-separator.is-style-dots { display: none !important; } /* ============================================================ v2.0 — FULL LIGHT THEME OVERRIDE (Gemini Labs clinical pharma) This block flips the entire stylesheet from dark/luxe to white/clinical. Sits at the end so it wins over earlier rules. ============================================================ */ html, body { background: #FFFFFF !important; color: var(--color-text) !important; font-family: var(--font-body) !important; } body { font-weight: 500; letter-spacing: 0; } h1,h2,h3,h4,h5,h6 { color: var(--color-text) !important; font-family: var(--font-display) !important; font-weight: 700; letter-spacing: -0.01em; } p, li, span, a { color: inherit; } a { color: var(--color-primary); } a:hover { color: var(--color-primary-dk); } .text-muted, p.text-muted { color: var(--color-text-muted) !important; } /* Kill all glass/dark backgrounds left over from v1 */ .feature-card, .product-card, .gem-product, .gem-product-meta, .gem-buybox, .gem-buybox-trust, .shop-filter, .shop-results, .coa-row, .gem-coa-link, .gemini-ruo-global, .glass-card, section, main { background: transparent !important; } /* Decorative background grid/scrim — remove */ body::before, body::after { display: none !important; } /* TOP TRUST BAR (the navy band at the very top) */ .trust-bar { background: var(--color-primary) !important; color: #FFFFFF !important; padding: 9px 24px !important; font-size: 0.72rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-weight: 700 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; } .trust-bar span { color: #FFFFFF !important; } .trust-bar .sep { color: rgba(255,255,255,0.55) !important; } /* HEADER (white nav row) */ .site-header { background: #FFFFFF !important; color: var(--color-text) !important; border-bottom: 1px solid var(--color-border) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; position: sticky !important; top: 0 !important; box-shadow: 0 1px 0 var(--color-border); } .site-header .container { padding-top: 12px !important; padding-bottom: 12px !important; } .site-header .primary-nav a, .site-header .header-account, .site-header .header-cart, .site-header .nav-toggle { color: var(--color-text) !important; } .site-header .primary-nav a:hover { color: var(--color-primary) !important; } .site-logo img { max-height: 38px !important; width: auto !important; } .primary-nav a { font-size: 0.86rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } .primary-nav .current-menu-item a, .primary-nav .current_page_item a { color: var(--color-primary) !important; } .header-actions { gap: 10px !important; } .header-search-toggle, .header-cart { background: var(--color-bg-3) !important; border-radius: var(--radius-pill) !important; height: 38px !important; padding: 0 14px !important; color: var(--color-text) !important; } .header-cart .count { background: var(--color-accent) !important; color: #FFFFFF !important; border-radius: var(--radius-pill) !important; font-weight: 700; } .header-account { display: inline-flex !important; align-items: center; gap: 6px; padding: 0 14px !important; } /* BUTTONS */ .btn { font-family: var(--font-body) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; border-radius: var(--radius) !important; } .btn-primary, .btn.btn-primary { background: var(--color-primary) !important; color: #FFFFFF !important; border: 1px solid var(--color-primary) !important; padding: 12px 26px !important; box-shadow: 0 6px 20px -8px rgba(0,39,172,0.45) !important; } .btn-primary:hover { background: var(--color-primary-dk) !important; border-color: var(--color-primary-dk) !important; } .btn-secondary, .btn.btn-secondary { background: #FFFFFF !important; color: var(--color-primary) !important; border: 1.5px solid var(--color-primary) !important; padding: 12px 26px !important; } .btn-secondary:hover { background: var(--color-primary-lt) !important; } /* HERO — light theme. background-COLOR only (the v2 hero uses background-image inline). */ .hero, .hero-fullbleed { background-color: #FFFFFF !important; color: var(--color-text) !important; position: relative; padding: 64px 0 96px !important; } /* v2 hero IS full-bleed by design; do NOT nuke its background-image. */ /* Old v1 scrim ::before removed below in v2.0.1 override; re-allow ::before for v2 hero only. */ .hero-fullbleed-inner, .hero .container { padding: 0 32px !important; } .hero-copy { max-width: 620px !important; } .hero .eyebrow, .eyebrow { font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--color-primary) !important; margin-bottom: 14px !important; display: inline-block !important; } .hero h1, .hero-fullbleed h1 { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: clamp(2.4rem, 4.6vw, 3.6rem) !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; color: var(--color-text) !important; text-shadow: none !important; margin: 0 0 18px !important; } .hero h1 .accent, .hero h1 .accent-underline, .accent { color: var(--color-primary) !important; background: none !important; } .hero p.lead, .hero .lead, .hero-fullbleed .lead { color: var(--color-text-muted) !important; font-weight: 500 !important; font-size: 1.08rem !important; line-height: 1.6 !important; text-shadow: none !important; max-width: 560px !important; } .hero .tagline { color: var(--color-text-muted) !important; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; } /* SECTIONS */ section { padding: 80px 0; } section.alt, .bg-soft { background: var(--color-bg-2) !important; } /* FEATURE / TRUST cards — light card style */ .feature-card, .trust-item, .product-card, .coa-row { background: #FFFFFF !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-card) !important; color: var(--color-text) !important; } .feature-card h3, .feature-card p { color: var(--color-text) !important; } .feature-card .num, .num { color: var(--color-primary) !important; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .trust-strip { background: var(--color-bg-2) !important; padding: 36px 0 !important; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .trust-item .label { color: var(--color-text-muted) !important; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; } .trust-item .value { color: var(--color-text) !important; font-weight: 700; font-size: 1rem; margin-top: 4px; } /* PRODUCT CARDS */ .product-card { padding: 16px !important; display: block !important; transition: transform .15s ease, box-shadow .15s ease !important; } .product-card:hover { transform: translateY(-2px); box-shadow: 0 14px 38px -16px rgba(0,39,172,0.20) !important; } .product-card .image { background-color: var(--color-bg-2) !important; border-radius: var(--radius-sm); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-card .image img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; display: block !important; } .product-card .title, .product-card h3 { color: var(--color-text) !important; font-weight: 700 !important; font-size: 1.05rem !important; margin-top: 14px !important; } .product-card .sku { color: var(--color-text-muted) !important; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .product-card .price, .product-card .price * { color: var(--color-primary) !important; font-weight: 700 !important; } /* SHOP ARCHIVE */ .shop-head, .shop-title { color: var(--color-text) !important; } .shop-title { font-family: var(--font-display) !important; font-weight: 700 !important; } .shop-cats a { color: var(--color-text) !important; } .shop-cats .is-active a, .shop-cats a:hover { color: var(--color-primary) !important; } .shop-filter-title { color: var(--color-text) !important; letter-spacing: 0.18em; text-transform: uppercase; font-size: .76rem; } input[type="search"], input[type="text"], input[type="email"], textarea, select { background: #FFFFFF !important; border: 1px solid var(--color-border) !important; color: var(--color-text) !important; border-radius: var(--radius) !important; padding: 12px 14px !important; font-family: var(--font-body) !important; } input:focus, textarea:focus, select:focus { outline: none !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(0,39,172,0.15) !important; } /* SINGLE PRODUCT */ .gem-buybox { background: #FFFFFF !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; padding: 28px !important; } .gem-product-title { font-family: var(--font-display) !important; color: var(--color-text) !important; } .gem-buybox-price, .gem-buybox-price * { color: var(--color-primary) !important; font-weight: 700; } .gem-buybox-trust .trust-row strong { color: var(--color-text) !important; } .gem-buybox-trust .trust-row .muted { color: var(--color-text-muted) !important; } .gem-buybox-trust .trust-row .ico { color: var(--color-primary) !important; } .gem-coa-link { background: var(--color-primary) !important; color: #FFFFFF !important; border-radius: var(--radius) !important; padding: 12px 18px !important; text-align: center; display: block; } .gem-ruo-band { background: var(--color-bg-2) !important; color: var(--color-text-muted) !important; padding: 18px 0 !important; font-size: 0.85rem; text-align: center; } .gem-ruo-band strong { color: var(--color-primary) !important; } .gem-product-meta { background: var(--color-bg-2) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; padding: 28px !important; color: var(--color-text) !important; } .gem-meta-list dt { color: var(--color-text-muted) !important; } .gem-meta-list dd { color: var(--color-text) !important; } .research-app { background: var(--color-bg-2) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; padding: 22px !important; } .research-app h4 { color: var(--color-primary) !important; } .research-app p { color: var(--color-text-muted) !important; } /* COA ROWS */ .coa-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px !important; } .coa-name { color: var(--color-text) !important; font-weight: 700; } .coa-sku { color: var(--color-text-muted) !important; font-size: .78rem; letter-spacing: 0.06em; } /* FOOTER — deep navy */ .site-footer { background: #0B1430 !important; color: #D8DEEE !important; border-top: 4px solid var(--color-primary) !important; padding: 72px 0 28px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .site-footer h4 { color: #FFFFFF !important; } .site-footer a { color: #D8DEEE !important; } .site-footer a:hover { color: #FFFFFF !important; } .site-footer .footer-bottom, .site-footer .legal { color: #8A92AB !important; } .gemini-ruo-global { background: var(--color-bg-2) !important; color: var(--color-text-muted) !important; border-top: 1px solid var(--color-border) !important; border-bottom: 1px solid var(--color-border) !important; } /* RUO band utility */ .maple { color: var(--color-accent) !important; } /* Forms / WC blocks — soften */ .wc-block-cart, .wc-block-checkout, .woocommerce form { color: var(--color-text) !important; } .wc-block-cart__empty-cart__title.with-empty-cart-icon { color: var(--color-text) !important; padding-top: 0 !important; } /* Trust strip icon row — 5 columns of icon + label + sublabel */ .trust-row-icons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding: 28px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .trust-row-icons .item { display: flex; gap: 12px; align-items: flex-start; } .trust-row-icons .item svg { width: 34px; height: 34px; color: var(--color-primary); flex: 0 0 auto; } .trust-row-icons .item .label { font-weight: 700; color: var(--color-text); font-size: 0.92rem; letter-spacing: 0.02em; } .trust-row-icons .item .sub { color: var(--color-text-muted); font-size: 0.78rem; } @media (max-width: 900px) { .trust-row-icons { grid-template-columns: repeat(2, 1fr); gap: 16px; } .trust-grid { grid-template-columns: repeat(2, 1fr) !important; } .hero h1, .hero-fullbleed h1 { font-size: 2.1rem !important; } } /* HERO v2 layout — left copy, right vial lineup */ .hero-v2 { padding: 56px 0 80px !important; background-color: #FFFFFF !important; } .hero-v2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; } .hero-vials { display: flex; justify-content: center; } .hero-vials img { width: 100%; max-width: 720px; height: auto; display: block; } @media (max-width: 900px) { .hero-v2-grid { grid-template-columns: 1fr; gap: 32px; } .hero-vials img { max-width: 480px; margin: 0 auto; } } /* Top blue trust bar (the colored band above the header) */ .trust-bar { display: flex !important; align-items: center; justify-content: center; gap: 18px !important; } .trust-bar .sep { opacity: .55; } /* v2.0.1 — Hero is full-bleed background image again (Kie hero v6 has built-in left negative space) */ .hero.hero-v2.hero-fullbleed { background-color: #FFFFFF !important; background-size: cover !important; background-position: center right !important; background-repeat: no-repeat !important; padding: 0 !important; min-height: 620px; position: relative; } .hero.hero-v2 .hero-fullbleed-inner { max-width: var(--container); margin: 0 auto; padding: 96px 32px 96px !important; display: flex; align-items: center; min-height: 620px; } .hero.hero-v2 .hero-copy { max-width: 560px !important; position: relative; z-index: 2; } /* Soft white fade behind copy so headline always reads against any vial that creeps left */ .hero.hero-v2.hero-fullbleed::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0.92) 30%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 75%) !important; pointer-events: none !important; z-index: 1 !important; } @media (max-width: 900px) { .hero.hero-v2.hero-fullbleed { background-position: center bottom !important; background-size: contain !important; min-height: auto; } .hero.hero-v2 .hero-fullbleed-inner { flex-direction: column; padding: 48px 20px 360px !important; min-height: auto; } .hero.hero-v2.hero-fullbleed::before { background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.88) 35%, rgba(255,255,255,0.4) 65%, rgba(255,255,255,0) 100%) !important; } } /* v2.0.4 — kill the v1 accent-underline pseudo (was creating purple bars under hero keywords) */ h1 .accent::after, h2 .accent::after, .accent-underline::after { display: none !important; content: none !important; } .accent-underline, .hero h1 .accent-underline { background: none !important; box-shadow: none !important; } /* v2.0.6 — tighter header on desktop */ .site-header .container { padding-top: 6px !important; padding-bottom: 6px !important; } .site-logo img { max-height: 28px !important; } .site-header { line-height: 1; } .primary-nav a { font-size: 0.78rem !important; padding: 6px 10px !important; } .header-search-toggle, .header-cart, .header-account { height: 34px !important; padding: 0 12px !important; } .header-cart .header-cart-icon { width: 16px !important; height: 16px !important; } .header-cart .count { padding: 1px 6px !important; font-size: 0.6rem !important; min-width: 16px !important; } .trust-bar { padding: 6px 24px !important; font-size: 0.66rem !important; } /* v2.0.7 — kill v1 fixed-header compensation padding + make trust-bar flow in document */ body { padding-top: 0 !important; margin-top: 0 !important; } @media (max-width: 900px) { body { padding-top: 0 !important; } } @media (max-width: 600px) { body { padding-top: 0 !important; } } .trust-bar { position: static !important; top: auto !important; left: auto !important; right: auto !important; } /* v2.0.8 — match hero section to 16:9 image aspect for clean fit (no crop) */ .hero.hero-v2.hero-fullbleed { min-height: 0 !important; aspect-ratio: 16 / 9; background-position: center !important; } .hero.hero-v2 .hero-fullbleed-inner { min-height: 0 !important; padding: 56px 32px !important; } @media (max-width: 900px) { .hero.hero-v2.hero-fullbleed { aspect-ratio: auto; background-size: cover !important; background-position: 70% center !important; min-height: 420px !important; } .hero.hero-v2 .hero-fullbleed-inner { padding: 48px 20px 48px !important; } } /* v2.0.9 — SHOP page card audit fix (.shop-card class was never reached by the v2 light override) */ .shop-card { background-color: #FFFFFF !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-card) !important; color: var(--color-text) !important; overflow: hidden !important; } .shop-card:hover { border-color: var(--color-border-bright) !important; box-shadow: 0 14px 38px -16px rgba(0,39,172,0.20) !important; transform: translateY(-2px); } .shop-card-image { background-color: var(--color-bg-2) !important; aspect-ratio: 1/1; display: flex !important; align-items: center; justify-content: center; overflow: hidden !important; } .shop-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; padding: 0 !important; display: block !important; } .shop-card-body { padding: 16px 18px 18px !important; background-color: #FFFFFF !important; } .shop-card-title { color: var(--color-text) !important; font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 1rem !important; text-decoration: none !important; letter-spacing: -0.005em !important; } .shop-card-title:hover { color: var(--color-primary) !important; } .shop-card-sku { color: var(--color-text-muted) !important; font-size: 0.72rem !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 700 !important; } .shop-card-price, .shop-card-price * { color: var(--color-primary) !important; font-weight: 700 !important; font-size: 1.05rem !important; } .shop-card-btn { background-color: var(--color-primary) !important; color: #FFFFFF !important; border: 1px solid var(--color-primary) !important; border-radius: var(--radius) !important; font-family: var(--font-body) !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; padding: 11px 14px !important; font-size: 0.74rem !important; text-align: center; display: block; width: 100%; } .shop-card-btn:hover { background-color: var(--color-primary-dk) !important; border-color: var(--color-primary-dk) !important; color: #FFFFFF !important; } /* SHOP layout container — light theme */ .shop-main, .shop-results, .shop-filter { background-color: transparent !important; color: var(--color-text) !important; } .shop-filter { background-color: var(--color-bg-2) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; padding: 22px !important; } .shop-filter-title { color: var(--color-text) !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-size: 0.72rem !important; margin-bottom: 12px !important; } .shop-cats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .shop-cats li a { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px !important; color: var(--color-text) !important; border-radius: var(--radius-sm) !important; text-decoration: none !important; font-size: 0.92rem !important; font-weight: 500; } .shop-cats li a:hover { background-color: rgba(0,39,172,0.06) !important; color: var(--color-primary) !important; } .shop-cats li.is-active a { background-color: var(--color-primary) !important; color: #FFFFFF !important; } .shop-cats li .count { color: var(--color-text-muted) !important; font-size: 0.78rem !important; font-weight: 700; } .shop-cats li.is-active a .count { color: rgba(255,255,255,0.85) !important; } /* Search input in sidebar */ .shop-search-input { background-color: #FFFFFF !important; border: 1px solid var(--color-border) !important; color: var(--color-text) !important; padding: 10px 12px !important; border-radius: var(--radius) !important; width: 100% !important; } /* Shop head */ .shop-head { padding: 32px 0 24px !important; border-bottom: 1px solid var(--color-border) !important; margin-bottom: 32px !important; } .shop-head .eyebrow { color: var(--color-primary) !important; } .shop-title { color: var(--color-text) !important; font-family: var(--font-display) !important; font-weight: 700 !important; font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important; letter-spacing: -0.01em !important; } .shop-count { color: var(--color-text-muted) !important; font-weight: 500 !important; font-size: 0.86rem !important; margin-left: 12px; } /* Pagination */ .shop-pagination a, .shop-pagination span { color: var(--color-text) !important; border: 1px solid var(--color-border) !important; background-color: #FFFFFF !important; } .shop-pagination .current, .shop-pagination a:hover { background-color: var(--color-primary) !important; color: #FFFFFF !important; border-color: var(--color-primary) !important; } /* v2.1.0 — Age-gate popup: light/clinical theme to match the new brand */ .age-gate { background-color: rgba(15, 20, 40, 0.78) !important; /* slight ink scrim, not heavy dark */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .age-gate .box { background-color: #FFFFFF !important; border: 1px solid var(--color-border) !important; border-top: 4px solid var(--color-primary) !important; border-radius: var(--radius-md) !important; box-shadow: 0 30px 80px -20px rgba(0,39,172,0.28), 0 8px 24px -8px rgba(15,20,40,0.15) !important; max-width: 480px !important; padding: 40px 36px !important; color: var(--color-text) !important; } .age-gate h2 { color: var(--color-text) !important; font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 1.4rem !important; margin-bottom: 12px !important; letter-spacing: -0.005em !important; } .age-gate p { color: var(--color-text-muted) !important; font-size: 0.94rem !important; line-height: 1.55 !important; } .age-gate .actions { margin-top: 28px !important; gap: 10px !important; } .age-gate .btn-primary { background-color: var(--color-primary) !important; color: #FFFFFF !important; border-color: var(--color-primary) !important; } .age-gate .btn-secondary { background-color: #FFFFFF !important; color: var(--color-primary) !important; border: 1.5px solid var(--color-primary) !important; } /* ============================================================ v2.1.1 — MOBILE OPTIMIZATION PASS (skill-driven) ============================================================ */ @media (max-width: 782px){ /* Universal containment safety net */ html, body{ width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } *, *::before, *::after{ box-sizing: border-box !important; max-width: 100% !important; } img, svg, video, iframe, picture{ max-width: 100% !important; height: auto !important; } .container, .container-narrow{ max-width: 100vw !important; margin-left: auto !important; margin-right: auto !important; padding-left: 14px !important; padding-right: 14px !important; } p, h1, h2, h3, h4, h5, h6, li, td, span, a{ overflow-wrap: anywhere !important; word-break: break-word !important; } /* PRODUCT GRID — 2 per row on mobile (legacy + WC blocks + .shop-grid + .products-grid) */ .shop-grid, .products-grid, ul.products, .woocommerce ul.products, .wc-block-grid__products, .wc-block-product-template, .wp-block-woocommerce-product-grid ul, .wp-block-woocommerce-product-collection ul{ display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; padding: 0 !important; margin: 0 0 24px !important; list-style: none !important; width: 100% !important; } .shop-card, .product-card, ul.products li.product, .wc-block-grid__product, .wc-block-product-template li, li.wp-block-post{ width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } .shop-card-body, .product-card .body { padding: 12px !important; } .shop-card-title, .product-card .title { font-size: 0.92rem !important; min-height: 2.4em; } .shop-card-sku, .product-card .sku { font-size: 0.66rem !important; } .shop-card-price, .product-card .price { font-size: 0.95rem !important; } .shop-card-btn { font-size: 0.68rem !important; padding: 10px 8px !important; min-height: 44px !important; } /* Single-column under 380px (tiny phones) */ @media (max-width: 380px) { .shop-grid, .products-grid { grid-template-columns: 1fr !important; } } /* INPUTS — 16px to kill iOS zoom + 48px tap target */ input[type=text], input[type=email], input[type=tel], input[type=search], input[type=password], input[type=number], select, textarea, .wc-block-components-text-input input { font-size: 16px !important; min-height: 48px !important; padding: 14px 14px !important; border-radius: 8px !important; width: 100% !important; box-sizing: border-box !important; } /* Tighter section padding on mobile */ section { padding: 48px 0 !important; } /* Hero v2 — stack vertically with image bleeding below copy */ .hero.hero-v2.hero-fullbleed { aspect-ratio: auto !important; min-height: 480px !important; background-position: 60% 100% !important; background-size: 160% auto !important; } .hero.hero-v2 .hero-fullbleed-inner { padding: 32px 16px 280px !important; min-height: 480px !important; } .hero.hero-v2 .hero-copy { max-width: 100% !important; } .hero.hero-v2 h1 { font-size: 1.75rem !important; line-height: 1.1 !important; } /* My Account — pill nav */ .woocommerce-MyAccount-navigation ul { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 0 !important; list-style: none !important; } .woocommerce-MyAccount-navigation li a { display: inline-block !important; padding: 8px 12px !important; background-color: var(--color-bg-2) !important; color: var(--color-text) !important; border-radius: var(--radius-pill) !important; font-size: 0.78rem !important; text-decoration: none !important; } .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { background-color: var(--color-primary) !important; color: #FFFFFF !important; } /* Orders table → stacked rows */ .woocommerce-MyAccount-orders thead { display: none; } .woocommerce-MyAccount-orders tr { display: block !important; margin-bottom: 12px !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; padding: 12px !important; background-color: #FFFFFF !important; } .woocommerce-MyAccount-orders td { display: block !important; border: 0 !important; padding: 4px 0 !important; text-align: left !important; } /* Trust strip — stack 2 per row */ .trust-row-icons { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; padding: 18px 0 !important; } .trust-row-icons .item .label { font-size: 0.82rem !important; } .trust-row-icons .item .sub { font-size: 0.7rem !important; } } /* ============================================================ v2.1.2 — Trust-bar ticker + hamburger menu repair ============================================================ */ /* TICKER */ .trust-bar.trust-bar--ticker { display: block !important; overflow: hidden !important; padding: 9px 0 !important; position: relative !important; width: 100% !important; max-width: 100vw !important; white-space: nowrap !important; } .trust-bar.trust-bar--ticker .trust-bar-track { display: inline-flex !important; width: max-content !important; align-items: center !important; animation: gemini-trust-scroll 38s linear infinite; will-change: transform; } .trust-bar.trust-bar--ticker .trust-bar-group { display: inline-flex !important; align-items: center !important; gap: 32px !important; padding-right: 32px !important; flex-shrink: 0 !important; } .trust-bar.trust-bar--ticker .trust-bar-item, .trust-bar.trust-bar--ticker .sep { display: inline-block !important; color: #FFFFFF !important; font-size: 0.72rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-weight: 700 !important; white-space: nowrap !important; } .trust-bar.trust-bar--ticker .sep { opacity: 0.55; font-weight: 500 !important; } .trust-bar.trust-bar--ticker:hover .trust-bar-track { animation-play-state: paused; } /* keyframes moved to end of file (v2.4.31) — only ONE definition can exist */ @media (prefers-reduced-motion: reduce) { .trust-bar.trust-bar--ticker .trust-bar-track { animation: none !important; } } @media (max-width: 600px) { .trust-bar.trust-bar--ticker { padding: 7px 0 !important; } .trust-bar.trust-bar--ticker .trust-bar-item, .trust-bar.trust-bar--ticker .sep { font-size: 0.62rem !important; letter-spacing: 0.14em !important; } .trust-bar.trust-bar--ticker .trust-bar-track { animation-duration: 28s !important; } } /* HAMBURGER MENU REPAIR */ .nav-toggle { background: transparent !important; border: 0 !important; color: var(--color-text) !important; font-size: 1.4rem !important; line-height: 1 !important; cursor: pointer !important; width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: var(--radius-sm) !important; } .nav-toggle:hover { background-color: var(--color-bg-3) !important; } @media (max-width: 900px) { .nav-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; z-index: 10001 !important; position: relative !important; } .primary-nav:not(.open) { display: none !important; } .primary-nav.open { display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; background-color: #FFFFFF !important; border-bottom: 1px solid var(--color-border) !important; box-shadow: 0 24px 40px -10px rgba(0,39,172,0.15) !important; padding: 64px 18px 20px !important; z-index: 10000 !important; max-height: 100vh !important; overflow-y: auto !important; } .primary-nav.open ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } .primary-nav.open ul li a { display: block !important; padding: 14px 12px !important; font-size: 0.92rem !important; color: var(--color-text) !important; border-bottom: 1px solid var(--color-border) !important; min-height: 48px !important; text-decoration: none !important; } .primary-nav.open ul li a:hover { background-color: var(--color-bg-2) !important; color: var(--color-primary) !important; } .primary-nav.open ul li.mobile-only-nav-account a { color: var(--color-primary) !important; font-weight: 700 !important; } } /* v2.1.3 — Mobile header rework (logo left + cart + hamburger right, no search/account) */ @media (max-width: 900px) { .site-header .container { display: flex !important; grid-template-columns: none !important; justify-content: space-between !important; align-items: center !important; gap: 4px !important; height: 60px !important; padding: 0 12px !important; } /* Logo — left + slightly larger */ .site-header .site-logo { order: 1 !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; } .site-header .site-logo img { max-height: 42px !important; height: auto !important; width: auto !important; display: block !important; } /* Hide nav inline (only shows when .open) */ .primary-nav { display: none !important; } /* Hide search + account buttons */ .site-header .header-search-toggle, .site-header .header-account, .site-header .header-search-panel:not(.open) { display: none !important; } /* Header actions wrap to the right — cart inside */ .site-header .header-actions { order: 2 !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; margin-left: auto !important; background: none !important; } .site-header .header-cart { background: var(--color-bg-3) !important; border-radius: var(--radius-pill) !important; height: 36px !important; padding: 0 10px !important; color: var(--color-text) !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; } .site-header .header-cart-icon { width: 18px !important; height: 18px !important; } .site-header .header-cart-label { display: none !important; } .site-header .header-cart .count { background-color: var(--color-accent) !important; color: #FFFFFF !important; border-radius: var(--radius-pill) !important; padding: 1px 6px !important; font-size: 0.6rem !important; min-width: 16px !important; font-weight: 700 !important; } /* Hamburger — to the far right (after cart) */ .site-header .nav-toggle { order: 3 !important; flex: 0 0 auto !important; margin-left: 4px !important; width: 40px !important; height: 40px !important; font-size: 1.5rem !important; } } /* Tiny phones — keep proportions tight */ @media (max-width: 380px) { .site-header .container { padding: 0 8px !important; } .site-header .site-logo img { max-height: 36px !important; } } /* v2.1.4 — Kill all hero text-shadow (no longer needed on white BG) */ .hero h1, .hero-fullbleed h1, .hero p.lead, .hero .lead, .hero-fullbleed .lead, .hero .tagline, .hero-fullbleed .tagline, .hero .eyebrow, .hero-fullbleed .eyebrow { text-shadow: none !important; } @media (max-width: 900px) { .hero h1, .hero-fullbleed h1, .hero p.lead, .hero .lead, .hero-fullbleed .lead, .hero .tagline, .hero-fullbleed .tagline, .hero .eyebrow, .hero-fullbleed .eyebrow { text-shadow: none !important; } } /* ============================================================ v2.1.5 — Hero split layout + light blue sections + FAQ cards ============================================================ */ /* Light blue section background (replaces the var that was reading wrong / muddy) */ .bg-light-blue { background-color: #EEF3FB !important; } /* HERO SPLIT — desktop: text left, image right, NO overlap */ .hero.hero-v2.hero-split { background-color: #FFFFFF !important; background-image: none !important; padding: 56px 0 64px !important; min-height: 0 !important; position: relative; overflow: hidden; } .hero.hero-v2.hero-split::before { display: none !important; content: none !important; } .hero-split-inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; } .hero-split-inner .hero-copy { max-width: 560px; z-index: 2; } .hero-split-inner .hero-art { display: flex; justify-content: flex-end; align-items: center; position: relative; z-index: 1; } .hero-split-inner .hero-art img { width: 100%; height: auto; max-width: 760px; display: block; object-fit: contain; } .hero-split-inner .hero-copy * { text-shadow: none !important; } /* MOBILE — stack: text on top, image BELOW the text */ @media (max-width: 900px) { .hero.hero-v2.hero-split { padding: 36px 0 24px !important; aspect-ratio: auto !important; min-height: 0 !important; } .hero-split-inner { grid-template-columns: 1fr; gap: 24px; padding: 0 16px; } .hero-split-inner .hero-copy { max-width: 100%; text-align: left; } .hero-split-inner .hero-copy h1 { font-size: 1.85rem !important; line-height: 1.1 !important; } .hero-split-inner .hero-art { justify-content: center; } .hero-split-inner .hero-art img { max-width: 100%; } } /* FAQ — white cards on the light blue section bg */ .faq-item { background-color: #FFFFFF !important; border: 1px solid var(--color-border) !important; border-bottom: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: 0 1px 0 rgba(15,20,40,0.03) !important; padding: 18px 22px !important; margin-bottom: 10px !important; } .faq-q { color: var(--color-text) !important; font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 1rem !important; } .faq-q::after { color: var(--color-primary) !important; font-weight: 700 !important; } .faq-a { color: var(--color-text-muted) !important; } /* Footer logo (white version, sized) */ .site-footer .footer-brand img { max-height: 38px !important; width: auto !important; margin-bottom: 16px; display: block; } /* Catch any leftover inline var(--color-bg-2) sections */ section[style*="background: var(--color-bg-2)"], section[style*="background:var(--color-bg-2)"] { background-color: #EEF3FB !important; } /* ============================================================ v2.1.6 — Hero "full-bleed with far-left copy" pattern Desktop: image fills section as background, copy pinned hard-left. Mobile: image stacks BELOW text as a real . ============================================================ */ .hero.hero-v2.hero-bleed { background-color: #FFFFFF !important; background-image: none !important; padding: 0 !important; min-height: 0 !important; position: relative; overflow: hidden; aspect-ratio: auto; } .hero.hero-v2.hero-bleed::before { display: none !important; content: none !important; } /* Background image element (desktop only) — fills the whole section */ .hero.hero-v2.hero-bleed .hero-bleed-bg { position: absolute; inset: 0; background-size: cover; background-position: right center; background-repeat: no-repeat; z-index: 0; } .hero.hero-v2.hero-bleed .hero-bleed-inner { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; padding: 96px 32px; min-height: 620px; display: flex; align-items: center; } .hero.hero-v2.hero-bleed .hero-copy { max-width: 520px; margin-right: auto; /* PIN COPY HARD LEFT */ text-align: left; } .hero.hero-v2.hero-bleed .hero-copy * { text-shadow: none !important; } /* Inline only for mobile stack — hide on desktop */ .hero.hero-v2.hero-bleed .hero-mobile-art { display: none; } /* MOBILE — stack: hide bg, show inline image below text */ @media (max-width: 900px) { .hero.hero-v2.hero-bleed { padding: 32px 0 24px !important; } .hero.hero-v2.hero-bleed .hero-bleed-bg { display: none !important; } .hero.hero-v2.hero-bleed .hero-bleed-inner { flex-direction: column; align-items: stretch; padding: 0 16px; min-height: 0 !important; gap: 24px; } .hero.hero-v2.hero-bleed .hero-copy { max-width: 100%; margin-right: 0; } .hero.hero-v2.hero-bleed .hero-copy h1 { font-size: 1.85rem !important; line-height: 1.1 !important; } .hero.hero-v2.hero-bleed .hero-mobile-art { display: block; } .hero.hero-v2.hero-bleed .hero-mobile-art img { width: 100%; height: auto; max-width: 100%; display: block; } } /* v2.1.7 — hero copy further left + subtle bg blur */ .hero.hero-v2.hero-bleed .hero-bleed-bg { filter: blur(2.5px); -webkit-filter: blur(2.5px); transform: scale(1.02); /* avoid blur edge cropping */ transform-origin: center; } .hero.hero-v2.hero-bleed .hero-bleed-inner { max-width: none !important; /* let copy run further to the edge */ padding: 96px 32px 96px 6vw !important; } .hero.hero-v2.hero-bleed .hero-copy { margin-left: 0 !important; max-width: 540px !important; } @media (min-width: 1400px) { .hero.hero-v2.hero-bleed .hero-bleed-inner { padding-left: 8vw !important; } } @media (max-width: 900px) { .hero.hero-v2.hero-bleed .hero-bleed-bg { filter: none !important; -webkit-filter: none !important; transform: none !important; } .hero.hero-v2.hero-bleed .hero-bleed-inner { padding: 32px 16px !important; } } /* v2.1.8 — desktop text pop: left-side white fade so headline never fights vials */ @media (min-width: 901px) { .hero.hero-v2.hero-bleed { isolation: isolate; } .hero.hero-v2.hero-bleed::after { content: ""; position: absolute; inset: 0; z-index: 1; /* sits above the bg image, below the copy (which is z:2) */ background: linear-gradient( 90deg, #FFFFFF 0%, rgba(255,255,255,0.97) 28%, rgba(255,255,255,0.78) 44%, rgba(255,255,255,0.35) 58%, rgba(255,255,255,0) 74% ); pointer-events: none; } /* Buttons get a slight elevation on the white scrim */ .hero.hero-v2.hero-bleed .hero-copy .btn-primary { box-shadow: 0 10px 26px -10px rgba(0,39,172,0.55) !important; } .hero.hero-v2.hero-bleed .hero-copy .btn-secondary { background-color: rgba(255,255,255,0.96) !important; backdrop-filter: blur(2px); } } /* ============================================================ v2.2.0 — Hero split (no blur, no overlap) + logo +25% + maple-leaf cart badge + CTA band repaint ============================================================ */ /* HERO — clean split layout (text left, image contained right) */ .hero.hero-v2.hero-clean { background-color: #FFFFFF !important; background-image: none !important; padding: 56px 0 64px !important; min-height: 0 !important; position: relative; overflow: hidden; } .hero.hero-v2.hero-clean::before, .hero.hero-v2.hero-clean::after { display: none !important; content: none !important; } .hero-clean-inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; } .hero-clean-inner .hero-copy { max-width: 560px; z-index: 2; } .hero-clean-inner .hero-copy * { text-shadow: none !important; } .hero-clean-inner .hero-art { display: flex; justify-content: flex-end; align-items: center; position: relative; z-index: 1; } .hero-clean-inner .hero-art img { width: 100%; height: auto; max-width: 840px; display: block; object-fit: contain; filter: none !important; -webkit-filter: none !important; background: transparent; box-shadow: none; border: 0; } /* MOBILE — stack: text first, image below */ @media (max-width: 900px) { .hero.hero-v2.hero-clean { padding: 36px 0 24px !important; } .hero-clean-inner { grid-template-columns: 1fr; gap: 24px; padding: 0 16px; } .hero-clean-inner .hero-copy { max-width: 100%; } .hero-clean-inner .hero-copy h1 { font-size: 1.85rem !important; line-height: 1.1 !important; } .hero-clean-inner .hero-art { justify-content: center; } .hero-clean-inner .hero-art img { max-width: 100%; } } /* LOGO +25% (28 -> 35 desktop, 42 -> 52 mobile) */ .site-header .site-logo img, .site-logo img { max-height: 35px !important; } @media (max-width: 900px) { .site-header .site-logo img, .site-logo img { max-height: 52px !important; } } @media (max-width: 380px) { .site-header .site-logo img, .site-logo img { max-height: 44px !important; } } /* MAPLE-LEAF CART COUNT BADGE 29-point polygon (Canadian flag silhouette) as clip-path on the existing red count chip */ .header-cart .count { background-color: #B70003 !important; /* maple red */ color: #FFFFFF !important; font-weight: 700 !important; font-family: var(--font-display) !important; font-size: 0.62rem !important; line-height: 1 !important; width: 24px !important; height: 24px !important; min-width: 24px !important; padding: 0 !important; border-radius: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: 4px !important; clip-path: polygon( 50.0% 0.0%, 52.3% 7.7%, 64.6% 7.7%, 61.55% 22.3%, 76.55% 20.75%, 73.85% 29.6%, 84.6% 39.25%, 80.4% 44.6%, 97.7% 52.7%, 73.45% 56.15%, 75.75% 64.6%, 62.3% 62.3%, 57.3% 73.85%, 53.85% 75.4%, 52.7% 100%, 47.3% 100%, 46.15% 75.4%, 42.7% 73.85%, 37.7% 62.3%, 24.25% 64.6%, 26.55% 56.15%, 2.3% 52.7%, 19.6% 44.6%, 15.4% 39.25%, 26.15% 29.6%, 23.45% 20.75%, 38.45% 22.3%, 35.4% 7.7%, 47.7% 7.7% ); } /* Slightly smaller count text so it sits inside the leaf */ .header-cart .count.js-cart-count { font-size: 0.6rem !important; padding-bottom: 1px !important; } /* CTA BAND ("Start with the data") — clean light blue, blue heading */ .cta-band { background: #EEF3FB !important; border-top: 1px solid var(--color-border) !important; border-bottom: 1px solid var(--color-border) !important; position: relative; overflow: hidden; } .cta-band::before { display: none !important; content: none !important; background: none !important; } .cta-band h2 { color: var(--color-text) !important; margin: 0 0 .2em !important; font-family: var(--font-display) !important; font-weight: 700 !important; } .cta-band h2::first-line { color: var(--color-primary) !important; } .cta-band p { color: var(--color-text-muted) !important; margin: 0 !important; } .cta-band .btn-primary { box-shadow: 0 10px 26px -10px rgba(0,39,172,0.55) !important; } /* v2.2.1 — Hero art: kill legacy v1 .hero-art card styling so the image flows clean */ .hero-clean-inner .hero-art { background: none !important; background-image: none !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; aspect-ratio: auto !important; padding: 0 !important; overflow: visible !important; } .hero-clean-inner .hero-art::before, .hero-clean-inner .hero-art::after { display: none !important; content: none !important; background: none !important; } .hero-clean-inner .hero-art img { width: 100% !important; height: auto !important; max-width: 100% !important; display: block !important; border-radius: 12px !important; box-shadow: 0 24px 60px -28px rgba(0,39,172,0.25), 0 4px 12px -6px rgba(15,20,40,0.08) !important; } /* v2.2.2 — maple-leaf cart badge via inline SVG bg (clip-path was muddy at small size) */ .header-cart .count { background-color: transparent !important; background-image: url("data:image/svg+xml;utf8,") !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; color: #FFFFFF !important; font-weight: 700 !important; font-family: var(--font-display) !important; font-size: 0.6rem !important; line-height: 1 !important; width: 26px !important; height: 26px !important; min-width: 26px !important; padding: 0 0 4px 0 !important; border-radius: 0 !important; clip-path: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: 4px !important; text-shadow: 0 1px 2px rgba(0,0,0,0.25) !important; } /* v2.2.3 — hero column FILL fix (align-items stretch + height 100% + object-fit cover) + cleaner maple-leaf SVG (less star-like at small size) + kill stray top line */ /* Kill any 4px blue top accent that may bleed from a section/footer border on small viewports */ body > .gemini-ruo-global-wrap { display: none; } /* the wp_footer-injected RUO div added a top scrim */ /* HERO grid must STRETCH so the right column has height = text column */ .hero-clean-inner { align-items: stretch !important; } .hero-clean-inner .hero-art { align-items: stretch !important; height: auto !important; display: flex !important; } .hero-clean-inner .hero-art img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; border-radius: 12px !important; box-shadow: 0 24px 60px -28px rgba(0,39,172,0.25), 0 4px 12px -6px rgba(15,20,40,0.08) !important; } /* Maple-leaf badge — cleaner polygon, slightly bigger */ .header-cart .count { background-image: url("data:image/svg+xml;utf8,") !important; width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: 0.62rem !important; padding: 0 0 3px 0 !important; } /* v2.2.4 — mobile hero image as a neat card under the CTAs */ @media (max-width: 900px) { .hero-clean-inner .hero-art { margin-top: 20px; padding: 16px; background-color: #EEF3FB !important; border: 1px solid var(--color-border) !important; border-radius: 16px !important; box-shadow: 0 12px 32px -14px rgba(0,39,172,0.18), 0 2px 6px -2px rgba(15,20,40,0.06) !important; justify-content: center !important; align-items: center !important; display: flex !important; aspect-ratio: 16 / 11; height: auto !important; overflow: hidden; } .hero-clean-inner .hero-art img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center center !important; background: transparent !important; border-radius: 8px !important; box-shadow: none !important; } } /* v2.2.5 — mobile hero image card (simpler / always renders) + logo slightly smaller */ @media (max-width: 900px) { /* HERO IMAGE CARD */ .hero-clean-inner .hero-art { display: block !important; margin-top: 24px !important; padding: 14px !important; background-color: #EEF3FB !important; border: 1px solid var(--color-border) !important; border-radius: 16px !important; box-shadow: 0 12px 32px -14px rgba(0,39,172,0.18) !important; aspect-ratio: auto !important; height: auto !important; width: 100% !important; overflow: hidden !important; } .hero-clean-inner .hero-art img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; object-fit: contain !important; background: transparent !important; border-radius: 8px !important; box-shadow: none !important; margin: 0 auto !important; } /* Logo just a touch smaller */ .site-header .site-logo img, .site-logo img { max-height: 44px !important; } } @media (max-width: 380px) { .site-header .site-logo img, .site-logo img { max-height: 38px !important; } } /* ============================================================ v2.2.7 — Kill ugly gray on CTA band + shop, new shop toolbar ============================================================ */ /* CTA BAND — switch from gray-tinted blue to clean white card */ .cta-band { background: #FFFFFF !important; background-image: none !important; border-top: 1px solid var(--color-border) !important; border-bottom: 1px solid var(--color-border) !important; } .cta-band .inner { background: #FFFFFF !important; border-radius: 14px; padding: 24px 28px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 32px !important; } /* Kill the v1 dark glass on .shop-sidebar (just in case it's still rendered anywhere) */ .shop-sidebar { display: none !important; } .shop-filter, .shop-filter-title, .shop-cats, .shop-links { background: transparent !important; } /* SHOP LAYOUT — single column, no sidebar */ .shop-layout--full { display: block !important; } .shop-layout--full .shop-results { width: 100% !important; max-width: 100% !important; } /* SHOP TOOLBAR (top bar with search + categories + count) */ .shop-toolbar { background-color: #FFFFFF !important; border: 1px solid var(--color-border) !important; border-radius: 14px; padding: 14px 16px; margin: 24px 0 28px; display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 14px 18px; align-items: center; box-shadow: 0 1px 0 rgba(15,20,40,0.03); } .shop-toolbar-search { display: flex; align-items: center; gap: 10px; background-color: var(--color-bg-2) !important; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 6px 6px 6px 14px; width: 100%; } .shop-toolbar-search svg { color: var(--color-text-muted); flex: 0 0 auto; } .shop-toolbar-search input { flex: 1; border: 0 !important; background: transparent !important; outline: none !important; padding: 8px 4px !important; font-size: 0.95rem !important; color: var(--color-text); min-height: 0 !important; } .shop-toolbar-search input:focus { box-shadow: none !important; } .shop-toolbar-search button { background-color: var(--color-primary) !important; color: #FFFFFF !important; border: 0; border-radius: var(--radius-pill); padding: 8px 18px !important; font-weight: 700; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; height: 36px; } .shop-toolbar-cats { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; border-top: 1px solid var(--color-border); padding-top: 12px; } .shop-toolbar-cats a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background-color: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text); font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; } .shop-toolbar-cats a:hover { background-color: var(--color-bg-2); border-color: var(--color-border-bright); color: var(--color-primary); } .shop-toolbar-cats a.is-active { background-color: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; } .shop-toolbar-cats a .count { background-color: rgba(0,39,172,0.08); color: var(--color-primary); font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-pill); min-width: 18px; text-align: center; } .shop-toolbar-cats a.is-active .count { background-color: rgba(255,255,255,0.22); color: #FFFFFF; } .shop-toolbar-meta { display: flex; justify-content: flex-end; } .shop-count-pill { display: inline-flex; align-items: center; padding: 6px 14px; background-color: var(--color-bg-2); border-radius: var(--radius-pill); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); } /* Mobile toolbar */ @media (max-width: 700px) { .shop-toolbar { grid-template-columns: 1fr; margin: 16px 0 20px; padding: 12px; } .shop-toolbar-meta { justify-content: flex-start; } .shop-toolbar-cats { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; } .shop-toolbar-cats a { flex: 0 0 auto; } } /* v2.2.8 — nuke the high-specificity v1 dark-glass on cta-band inner (.cta-band > .container > .inner) */ .cta-band > .container > .inner, .cta-band .container .inner, .cta-band .inner { background: #FFFFFF !important; background-color: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--color-border) !important; box-shadow: 0 1px 0 rgba(15,20,40,0.04) !important; border-radius: 14px !important; padding: 24px 28px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 32px !important; } /* Kill the purple gradient ::after overlay on the inner */ .cta-band .inner::after, .cta-band > .container > .inner::after { display: none !important; content: none !important; background: none !important; } /* ============================================================ v2.3.0 — Multi-step Register wizard + Login toggle ============================================================ */ .gem-account-wrap { max-width: 460px; margin: 40px auto 60px; padding: 0 16px; } .gem-account-panel { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 12px 32px -18px rgba(0,39,172,0.15); padding: 32px 28px; } .gem-account-header { text-align: center; margin-bottom: 22px; } .gem-account-header h2 { color: var(--color-text); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 4px; letter-spacing: -0.01em; } .gem-account-sub { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; } .gem-account-wrap form .form-row { margin-bottom: 14px; } .gem-account-wrap form label { display: block; font-weight: 700; font-size: 0.82rem; color: var(--color-text); margin-bottom: 6px; letter-spacing: 0.02em; } .gem-account-wrap form input[type=text], .gem-account-wrap form input[type=email], .gem-account-wrap form input[type=tel], .gem-account-wrap form input[type=password] { width: 100% !important; padding: 12px 14px !important; border: 1px solid var(--color-border) !important; border-radius: 8px !important; background: #FFFFFF !important; color: var(--color-text) !important; font-size: 16px !important; min-height: 48px !important; font-family: var(--font-body); box-sizing: border-box; } .gem-account-wrap form input:focus { outline: none !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(0,39,172,0.14) !important; } .gem-step-intro { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 18px; line-height: 1.5; } .gem-step-nav { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 18px; flex-wrap: wrap; } .gem-btn-primary { background: var(--color-primary) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 8px !important; padding: 12px 22px !important; min-height: 48px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; font-size: 0.8rem !important; cursor: pointer !important; box-shadow: 0 6px 18px -8px rgba(0,39,172,0.45) !important; transition: background .15s ease, transform .1s ease; flex: 1; } .gem-btn-primary:hover { background: var(--color-primary-dk) !important; } .gem-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .gem-btn-ghost { background: transparent !important; color: var(--color-text-muted) !important; border: 1px solid var(--color-border) !important; border-radius: 8px !important; padding: 12px 18px !important; min-height: 48px !important; font-weight: 600 !important; font-size: 0.82rem !important; cursor: pointer !important; flex: 0 0 auto; } .gem-btn-ghost:hover { background: var(--color-bg-2) !important; color: var(--color-text) !important; } .gem-otp-input { letter-spacing: 0.5em !important; font-size: 1.5rem !important; text-align: center !important; font-weight: 700 !important; font-family: var(--font-display) !important; } .gem-otp-resend { margin: 12px 0 18px; text-align: center; } .gem-resend-btn { background: transparent; border: 0; color: var(--color-primary); font-weight: 700; font-size: 0.85rem; cursor: pointer; padding: 6px 12px; text-decoration: underline; } .gem-resend-btn:disabled { color: var(--color-text-dim); text-decoration: none; cursor: not-allowed; } .gem-otp-status { font-size: 0.85rem; margin: 12px 0 0; min-height: 1.2em; text-align: center; } .gem-account-toggle { text-align: center; margin: 20px 0 0; font-size: 0.9rem; color: var(--color-text-muted); } .gem-account-toggle a { color: var(--color-primary); font-weight: 700; text-decoration: none; } .gem-account-toggle a:hover { text-decoration: underline; } .gem-login-row { display: flex !important; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 8px; } .gem-login-row .gem-btn-primary { flex: 0 0 auto; padding-left: 32px !important; padding-right: 32px !important; } .gem-login-row label { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; font-weight: 500 !important; font-size: 0.85rem !important; letter-spacing: 0; } .gem-login-row input[type=checkbox] { width: auto !important; min-height: 0 !important; margin: 0 !important; } .woocommerce-LostPassword { text-align: center; margin-top: 14px; font-size: 0.85rem; } .woocommerce-LostPassword a { color: var(--color-text-muted); text-decoration: underline; } /* Hide any residual WC-default columns that don't apply now that we own the layout */ .u-columns.woocommerce-Columns--login, #customer_login .u-column1, #customer_login .u-column2, #customer_login h2 { display: none !important; } @media (max-width: 500px) { .gem-account-wrap { padding: 0 12px; margin: 20px auto 40px; } .gem-account-panel { padding: 24px 20px; border-radius: 12px; } .gem-step-nav { flex-direction: column-reverse; align-items: stretch; } .gem-btn-ghost, .gem-btn-primary { width: 100%; flex: 1 1 auto; } } /* v2.3.1 — shrink the giant page-title on /my-account/ (and its friends) */ body.woocommerce-account main.page-main > section:first-of-type, body.woocommerce-cart main.page-main > section:first-of-type, body.woocommerce-checkout main.page-main > section:first-of-type { padding: 32px 0 12px !important; border-bottom: 0 !important; } body.woocommerce-account main.page-main > section:first-of-type h1, body.woocommerce-cart main.page-main > section:first-of-type h1, body.woocommerce-checkout main.page-main > section:first-of-type h1 { font-family: var(--font-display) !important; font-size: 1.6rem !important; line-height: 1.15 !important; letter-spacing: -0.005em !important; margin: 4px 0 0 !important; } body.woocommerce-account main.page-main > section:first-of-type .eyebrow, body.woocommerce-cart main.page-main > section:first-of-type .eyebrow, body.woocommerce-checkout main.page-main > section:first-of-type .eyebrow { font-size: 0.68rem !important; margin: 0 !important; } body.woocommerce-account main.page-main > section:nth-of-type(2), body.woocommerce-cart main.page-main > section:nth-of-type(2), body.woocommerce-checkout main.page-main > section:nth-of-type(2) { padding-top: 20px !important; } /* v2.3.2 — first/last name 2-col + select styling on the register wizard */ .gem-form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .gem-form-row-2col p { margin-bottom: 0 !important; } @media (max-width: 500px) { .gem-form-row-2col { grid-template-columns: 1fr; gap: 0; } } .gem-account-wrap form select { width: 100% !important; padding: 12px 14px !important; border: 1px solid var(--color-border) !important; border-radius: 8px !important; background: #FFFFFF !important; color: var(--color-text) !important; font-size: 16px !important; min-height: 48px !important; font-family: var(--font-body); box-sizing: border-box; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px !important; } .gem-account-wrap form select:focus { outline: none !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(0,39,172,0.14) !important; } /* v2.3.4 — privacy checkbox on Step 3 + hide the wordy WC default */ .gem-privacy-check { margin: 8px 0 18px !important; padding: 12px 14px; background: var(--color-bg-2); border-radius: 8px; } .gem-privacy-check label { display: flex !important; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.82rem !important; color: var(--color-text) !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.4; margin: 0 !important; } .gem-privacy-check input[type=checkbox] { width: 18px !important; height: 18px !important; min-height: 0 !important; margin: 2px 0 0 !important; flex: 0 0 auto; accent-color: var(--color-primary); cursor: pointer; } .gem-privacy-check a { color: var(--color-primary); font-weight: 700; text-decoration: underline; } /* Hide the wordy WC-default privacy paragraph if it appears anywhere else on the form */ .gem-account-panel--register .woocommerce-privacy-policy-text { display: none !important; } /* v2.3.5 — revert cart count badge: simple red circle */ .header-cart .count, .site-header .header-cart .count { background-color: #B70003 !important; background-image: none !important; clip-path: none !important; color: #FFFFFF !important; font-weight: 700 !important; font-family: var(--font-body) !important; font-size: 0.65rem !important; line-height: 1 !important; width: 18px !important; height: 18px !important; min-width: 18px !important; padding: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: 6px !important; text-shadow: none !important; box-shadow: 0 0 0 2px #FFFFFF, 0 1px 3px rgba(15,20,40,0.15); } /* v2.3.6 — login method tabs (Email / SMS code) */ .gem-login-tabs { display: flex; gap: 4px; background: var(--color-bg-2); padding: 4px; border-radius: var(--radius-pill); margin: 0 0 22px; } .gem-login-tab { flex: 1; background: transparent; border: 0; padding: 10px 12px; border-radius: var(--radius-pill); cursor: pointer; color: var(--color-text-muted); font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; transition: background .12s ease, color .12s ease; } .gem-login-tab.is-active { background: #FFFFFF; color: var(--color-primary); box-shadow: 0 2px 4px rgba(15,20,40,0.06); } .gem-login-tab:hover:not(.is-active) { color: var(--color-text); } /* ============================================================ v2.4.0 — Desktop logo bump / kill trust-bar dots / mobile search icon back / hero H1 tighten / eyebrow leaf ============================================================ */ /* Bigger desktop logo — mobile unchanged (mobile media queries below still clamp) */ @media (min-width: 901px) { .site-header .site-logo img, .site-logo img { max-height: 56px !important; } } /* Remove leftover DOT separators from the ticker (diamonds ◆ live inline in each item) */ .trust-bar .sep, .trust-bar.trust-bar--ticker .sep { display: none !important; } .trust-bar.trust-bar--ticker .trust-bar-item { margin: 0 22px !important; } @media (max-width: 900px) { .trust-bar.trust-bar--ticker .trust-bar-item { margin: 0 14px !important; } } /* Show the search icon in the mobile header (undo earlier hide) */ @media (max-width: 900px) { .site-header .header-search-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: var(--color-text) !important; } .site-header .header-search-toggle svg { display: block !important; width: 22px !important; height: 22px !important; } } /* Hero H1 — tighter rag/rhythm now that the copy is shorter */ .hero.hero-v2.hero-clean .hero-copy h1 { font-size: clamp(2.1rem, 3vw, 3.05rem) !important; line-height: 1.06 !important; letter-spacing: -0.015em !important; max-width: 15ch !important; margin: 0.35em 0 0.55em !important; } .hero.hero-v2.hero-clean .hero-copy .lead { max-width: 46ch !important; } @media (max-width: 900px) { .hero.hero-v2.hero-clean .hero-copy h1 { font-size: 1.95rem !important; max-width: 18ch !important; } } /* Maple-leaf next to the eyebrow — sized to match the text next to it */ .hero .eyebrow-leaf { font-size: 1.5em; line-height: 1; margin-left: 6px; vertical-align: -0.15em; color: var(--color-accent, #B70003); filter: none; } /* v2.4.8 — Maple leaf inline in CTA band H2 */ .cta-band .inner h2 .cta-leaf, .cta-band h2 .cta-leaf { font-size: 0.9em; line-height: 1; margin-left: 6px; vertical-align: -0.08em; color: var(--color-accent, #B70003); filter: none; } /* v2.4.9 — Maple leaf next to footer RUO chip (removed from CTA H2) */ .footer-brand .ruo-leaf { display: inline-block; margin-left: 10px; font-size: 1.1rem; line-height: 1; color: #B70003; vertical-align: -0.12em; filter: none; } /* v2.4.10 — Search dropdown: swap old dark-glass panel for on-brand light-blue */ .header-search-panel { background: #EEF3FB !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid #DDE4EF !important; box-shadow: 0 10px 28px -12px rgba(0,39,172,0.15) !important; } .header-search-form { background: #FFFFFF !important; border: 1px solid #DDE4EF !important; border-radius: 10px !important; box-shadow: 0 2px 6px rgba(15,20,40,0.04) !important; } .header-search-form .header-search-icon { color: var(--color-primary) !important; } .header-search-form input[type="search"] { color: var(--color-text) !important; background: transparent !important; } .header-search-form input[type="search"]::placeholder { color: #7B849A !important; } .header-search-close { color: var(--color-primary) !important; font-weight: 700 !important; background: transparent !important; border: 0 !important; border-radius: 6px !important; } .header-search-close:hover { color: #FFFFFF !important; background: var(--color-primary) !important; } /* v2.4.11 — Widen My Account panel + tighten vertical whitespace above it */ body.woocommerce-account main.page-main > section:first-of-type { padding: 40px 0 12px !important; } body.woocommerce-account main.page-main > section:first-of-type h1 { font-size: 1.6rem !important; margin: 0 !important; } .gem-account-wrap { max-width: 780px !important; margin: 24px auto 48px !important; padding: 0 20px !important; } .gem-account-panel { padding: 34px 40px !important; } /* Two-column layout for first + last name row */ .gem-register-form .form-row-first, .gem-register-form .form-row-last { display: inline-block; width: calc(50% - 8px); vertical-align: top; } .gem-register-form .form-row-first { margin-right: 14px; } @media (max-width: 640px) { .gem-register-form .form-row-first, .gem-register-form .form-row-last { display: block; width: 100%; margin-right: 0; } .gem-account-panel { padding: 26px 22px !important; } } /* v2.4.12 — Product image: kill grey frame + Related Research Compounds grid */ .gem-product-image { background: transparent !important; border: 0 !important; padding: 0 !important; aspect-ratio: 1/1 !important; } .gem-product-image img { padding: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; background: transparent !important; } .gem-related-section { padding: 64px 0 96px; border-top: 1px solid var(--color-border); background: #FFFFFF; } .gem-related-section .section-head { text-align: center; margin-bottom: 40px; } .gem-related-section .section-head h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 6px 0 0; } .gem-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } @media (max-width: 900px) { .gem-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .gem-related-grid { grid-template-columns: 1fr; } } .gem-related-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .gem-related-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -18px rgba(0,39,172,0.25); border-color: rgba(0,39,172,0.35); } .gem-related-img { background: #EEF3FB; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 14px; } .gem-related-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .gem-related-body { padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .gem-related-title { font-size: 1rem !important; line-height: 1.25; margin: 0 !important; color: var(--color-text) !important; font-weight: 700; min-height: 2.4em; } .gem-related-sku { color: var(--color-text-muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; } .gem-related-price { margin-top: auto; color: var(--color-primary); font-weight: 700; font-size: 1.05rem; } .gem-related-cta { text-align: center; margin-top: 36px; } /* v2.4.13 — Add-to-Order button = Gemini Blue (bulletproof) + product images ALWAYS fill their card */ /* Nail the single_add_to_cart_button anywhere it appears */ .woocommerce div.product form.cart .single_add_to_cart_button, .woocommerce div.product form.cart button.single_add_to_cart_button, .gem-buybox-cart .single_add_to_cart_button, .gem-buybox .single_add_to_cart_button, .single_add_to_cart_button, form.cart button[type="submit"], form.cart .button { background: #0027AC !important; background-color: #0027AC !important; color: #FFFFFF !important; border: 0 !important; border-color: #0027AC !important; } .woocommerce div.product form.cart .single_add_to_cart_button:hover, .gem-buybox-cart .single_add_to_cart_button:hover, .single_add_to_cart_button:hover, form.cart button[type="submit"]:hover, form.cart .button:hover { background: #001E84 !important; background-color: #001E84 !important; color: #FFFFFF !important; } /* IMAGES ALWAYS FILL UP THE WHOLE CARD — global rule for every product card in the theme */ .product-card .image, .shop-card .image, .gem-related-img, .gem-related-card .gem-related-img { padding: 0 !important; background: #FFFFFF !important; overflow: hidden !important; } .product-card .image img, .shop-card .image img, .gem-related-img img, .gem-related-card img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center !important; padding: 0 !important; margin: 0 !important; display: block !important; } /* v2.4.14 — Cart page: left-align with the "Cart" title + bump readability */ body.woocommerce-cart main.page-main > section:first-of-type { padding: 40px 0 8px !important; } body.woocommerce-cart main.page-main > section:first-of-type h1 { font-size: 2rem !important; text-align: left !important; } body.woocommerce-cart main.page-main > section:first-of-type .eyebrow { text-align: left !important; } body.woocommerce-cart main.page-main > section:first-of-type > .container-narrow, body.woocommerce-cart main.page-main > section:first-of-type > div, body.woocommerce-cart main.page-main > section:nth-of-type(2) > .container-narrow, body.woocommerce-cart main.page-main > section:nth-of-type(2) > div { max-width: var(--container) !important; margin-left: auto !important; margin-right: auto !important; text-align: left !important; } /* Bump every text element inside the cart block up to a comfortable read size */ .wp-block-woocommerce-cart, .wc-block-cart { font-size: 1rem !important; color: var(--color-text) !important; } .wc-block-cart-item__product-name, .wc-block-cart-items__row .wc-block-components-product-name, .wc-block-cart-items__row a { font-size: 1.05rem !important; font-weight: 700 !important; line-height: 1.3 !important; } .wc-block-cart-item__product-metadata, .wc-block-components-product-metadata, .wc-block-cart-items__row .wc-block-components-product-metadata__description, .wc-block-cart-item__prices, .wc-block-cart-items__row .wc-block-components-product-price { font-size: 0.98rem !important; line-height: 1.4 !important; } .wc-block-cart-item__total-price-and-sale-badge-wrapper, .wc-block-cart__totals-title, .wp-block-woocommerce-cart-order-summary-block, .wc-block-components-totals-item { font-size: 1rem !important; } .wc-block-components-totals-item__label, .wc-block-components-totals-item__value { font-size: 1rem !important; } .wc-block-cart__totals-title { font-size: 0.9rem !important; letter-spacing: 0.08em !important; } .wc-block-components-totals-footer-item, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value, .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 1.35rem !important; font-weight: 700 !important; } .wc-block-cart-item__image img, .wc-block-cart-items__row img { width: 88px !important; height: 88px !important; max-width: 88px !important; object-fit: cover !important; } th.wc-block-cart-items__header-product, th.wc-block-cart-items__header-total, .wc-block-cart-items__header { font-size: 0.78rem !important; letter-spacing: 0.08em !important; } /* Quantity stepper — larger tap targets */ .wc-block-cart-item__quantity .wc-block-components-quantity-selector button, .wc-block-components-quantity-selector button { width: 34px !important; height: 34px !important; font-size: 1.05rem !important; } .wc-block-components-quantity-selector input { font-size: 1rem !important; } /* Proceed to Checkout — Gemini blue, larger */ .wp-block-woocommerce-proceed-to-checkout-block, .wc-block-cart__submit-container { margin-top: 20px !important; } .wc-block-cart__submit-button, .wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button, a.wc-block-cart__submit-button { background: #0027AC !important; background-color: #0027AC !important; color: #FFFFFF !important; border: 0 !important; border-radius: 8px !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; padding: 16px 22px !important; min-height: 56px !important; } .wc-block-cart__submit-button:hover, a.wc-block-cart__submit-button:hover { background: #001E84 !important; } /* v2.4.15 — COA H1: force second sentence to its own line on desktop (mobile flows naturally) */ .gem-h1-break { display: none; } @media (min-width: 901px) { .gem-h1-break { display: block; content: ""; } } /* v2.4.18 — Contact grid: wider boxes, keep hours line intact */ .gem-contact-grid .feature-card { padding: 24px 22px !important; } .gem-contact-grid .feature-card h3 { font-size: 1.15rem !important; line-height: 1.25 !important; white-space: nowrap; } @media (max-width: 900px) { .gem-contact-grid { grid-template-columns: 1fr !important; } .gem-contact-grid .feature-card h3 { white-space: normal; font-size: 1.05rem !important; } } /* v2.4.20 — About hero image FILLS its card (per site-wide image-fill rule) */ .hero-clean-inner .hero-art.gem-hero-art--about { aspect-ratio: 4 / 3 !important; width: 100% !important; max-width: none !important; height: 100% !important; overflow: hidden !important; border-radius: 20px !important; background: #FFFFFF !important; padding: 0 !important; display: block !important; position: relative !important; } .hero-clean-inner .hero-art.gem-hero-art--about img.gem-hero-img--about { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center !important; padding: 0 !important; margin: 0 !important; display: block !important; } @media (max-width: 900px) { .hero-clean-inner .hero-art.gem-hero-art--about { aspect-ratio: 16 / 10 !important; margin: 20px 0 0 !important; } } /* v2.4.21 — Trust-bar ticker: fix mobile item-overlap at loop seam */ .trust-bar.trust-bar--ticker .trust-bar-track { width: max-content !important; will-change: transform; } .trust-bar.trust-bar--ticker .trust-bar-group { display: inline-flex !important; align-items: center !important; gap: 0 !important; padding-right: 0 !important; flex-shrink: 0 !important; } .trust-bar.trust-bar--ticker .trust-bar-item { display: inline-block !important; flex-shrink: 0 !important; margin: 0 22px !important; white-space: nowrap !important; } @media (max-width: 900px) { .trust-bar.trust-bar--ticker .trust-bar-item { margin: 0 16px !important; } } @media (max-width: 600px) { .trust-bar.trust-bar--ticker .trust-bar-item { margin: 0 12px !important; } .trust-bar.trust-bar--ticker .trust-bar-track { animation-duration: 32s !important; } } /* v2.4.22 — Home hero: strip the card/background/shadow behind the box image on desktop so it sits flush */ @media (min-width: 901px) { body.home .hero-clean-inner .hero-art, body.page-template-default .hero-clean-inner .hero-art { background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; } body.home .hero-clean-inner .hero-art img, body.page-template-default .hero-clean-inner .hero-art img { background: transparent !important; box-shadow: none !important; object-fit: contain !important; max-height: 100% !important; } body.home .hero.hero-v2.hero-clean, body.page-template-default .hero.hero-v2.hero-clean { background: #FFFFFF !important; } } /* v2.4.23 — Home hero: make the box image visibly bigger on desktop (widen image column + let image scale beyond old 840px cap) */ @media (min-width: 901px) { body.home .hero-clean-inner { grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr) !important; gap: 40px !important; } body.home .hero-clean-inner { align-items: center !important; } body.home .hero-clean-inner .hero-art { overflow: visible !important; display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; padding: 0 !important; background: transparent !important; } body.home .hero-clean-inner .hero-art img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; min-height: 0 !important; aspect-ratio: auto !important; object-fit: contain !important; transform: none !important; display: block !important; position: static !important; } } /* v2.4.29 — Trust-bar ticker: bulletproof seamless loop - single track scrolled by keyframes translateX(-50%) - both groups get identical fixed spacing so the seam is invisible - all items forced to a stable width (padding-based, no fractional flex) */ .trust-bar.trust-bar--ticker { padding: 8px 0 !important; } .trust-bar.trust-bar--ticker .trust-bar-track { animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-name: gemini-trust-scroll !important; animation-duration: 40s !important; display: flex !important; width: max-content !important; align-items: center !important; } .trust-bar.trust-bar--ticker .trust-bar-group { display: flex !important; align-items: center !important; gap: 0 !important; padding: 0 !important; flex-shrink: 0 !important; } .trust-bar.trust-bar--ticker .trust-bar-item { display: inline-flex !important; flex-shrink: 0 !important; padding: 0 22px !important; margin: 0 !important; white-space: nowrap !important; } @media (max-width: 900px) { .trust-bar.trust-bar--ticker .trust-bar-item { padding: 0 14px !important; } .trust-bar.trust-bar--ticker .trust-bar-track { animation-duration: 34s !important; } } /* v2.4.31 — single authoritative keyframes; --tb-w is set by JS after fonts.ready */ @keyframes gemini-trust-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--tb-w, 50%)), 0, 0); } } /* v2.4.32 — Header logo 30% smaller on desktop */ @media (min-width: 901px) { .site-header .site-logo img, .site-logo img { max-height: 40px !important; } } /* v2.4.33 — Ticker rebuild: JS-driven infinite scroll, no CSS animation. Items are direct children of the track now (no wrapper groups). Selectors below use high specificity so all older cascading rules lose. */ .trust-bar.trust-bar--ticker .trust-bar-track { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; width: max-content !important; animation: none !important; transform: translate3d(0, 0, 0); will-change: transform; } .trust-bar.trust-bar--ticker .trust-bar-track > .trust-bar-item { display: inline-flex !important; flex: 0 0 auto !important; padding: 0 22px !important; margin: 0 !important; white-space: nowrap !important; align-items: center !important; } @media (max-width: 900px) { .trust-bar.trust-bar--ticker .trust-bar-track > .trust-bar-item { padding: 0 14px !important; } } @media (max-width: 600px) { .trust-bar.trust-bar--ticker .trust-bar-track > .trust-bar-item { padding: 0 12px !important; } } /* v2.4.34 — Mobile featured-product cards: image fills the card edge-to-edge, vial zoomed to eliminate the PNG's baked-in white padding */ @media (max-width: 900px) { .products-grid .product-card { border-radius: 12px !important; overflow: hidden !important; } .products-grid .product-card .image, .product-card .image { padding: 0 !important; margin: 0 !important; border-radius: 0 !important; background: #FFFFFF !important; aspect-ratio: 1/1 !important; overflow: hidden !important; } .products-grid .product-card .image img, .product-card .image img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; transform: scale(1.25) !important; transform-origin: center center !important; padding: 0 !important; margin: 0 !important; display: block !important; } } /* v2.4.37 — Nuke the blue mobile hero card from v2.2.4/v2.2.5 */ @media (max-width: 900px) { body.home .hero-clean-inner .hero-art, .hero-clean-inner .hero-art { background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } body.home .hero-clean-inner .hero-art img, .hero-clean-inner .hero-art img { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } } /* v2.4.40 — Homepage hero: round the CONTAINER + clip so the visible image shows rounded corners (rounding the img alone is invisible because object-fit: contain letterboxes with transparent padding) */ @media (min-width: 901px) { body.home .hero-clean-inner .hero-art { border-radius: 20px !important; overflow: hidden !important; background: #FFFFFF !important; } body.home .hero-clean-inner .hero-art img { border-radius: 20px !important; } }