/* ============================================================ * Axis V2 — Design Tokens * Single source of truth for the v2 mobile redesign. * Axis brand palette (navy/teal/cream) + Vera-style structure. * All v2 component CSS scopes under .axis-v2 (set on ). * ============================================================ */ :root { /* Brand */ --axis-navy: #1a2847; --axis-teal: #4abec9; --axis-cream: #faf8f3; --axis-ink: #0a0f1f; --axis-muted: #374151; --axis-line: #e5e7eb; --axis-white: #ffffff; /* Category accents — keyed to live WooCommerce product_cat slugs. glp-1-peptides / growth-hormone-peptides / healing-recovery / nootropic-peptides / research-blends / skin-wellness / accessories */ --cat-glp1: #4abec9; /* GLP-1 Peptides */ --cat-gh: #1a2847; /* Growth Hormone Peptides */ --cat-healing: #7fb39c; /* Healing & Recovery */ --cat-noo: #8aa7c2; /* Nootropic Peptides */ --cat-blends: #c9b27a; /* Research Blends */ --cat-skin: #e8d5b7; /* Skin & Wellness */ --cat-acc: #9aa3b2; /* Accessories */ /* Radii */ --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-8: 48px; /* Type */ --font-serif: Georgia, 'Times New Roman', serif; --font-sans: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Elevation */ --shadow-sm: 0 1px 2px rgba(10,15,31,0.06); --shadow-md: 0 8px 24px rgba(26,40,71,0.10); --shadow-lg: 0 16px 44px rgba(26,40,71,0.18); /* Layout */ --header-h: 64px; --maxw: 520px; /* mobile-first content cap */ } /* Base typography for v2 surfaces */ .axis-v2 { font-family: var(--font-sans); color: var(--axis-ink); background: var(--axis-cream); -webkit-font-smoothing: antialiased; } .axis-v2 h1, .axis-v2 .v2-serif { font-family: var(--font-serif); letter-spacing: -0.01em; } .axis-v2 h2, .axis-v2 h3 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; } /* Shared primitives reused across v2 components */ .axis-v2 .v2-pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); border-radius: var(--r-pill); font-family: var(--font-sans); font-weight: 600; line-height: 1; cursor: pointer; border: none; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .axis-v2 .v2-pill:active { transform: scale(0.97); } .axis-v2 .v2-pill--primary { background: var(--axis-navy); color: var(--axis-white); padding: 14px 26px; font-size: 15px; box-shadow: var(--shadow-md); } .axis-v2 .v2-pill--primary:hover { background: var(--axis-ink); } .axis-v2 .v2-pill--ghost { background: transparent; color: var(--axis-navy); padding: 14px 22px; font-size: 15px; } .axis-v2 .v2-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(74,190,201,0.12); color: var(--axis-navy); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .axis-v2 .v2-card { background: var(--axis-white); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; } /* Respect reduced-motion globally */ @media (prefers-reduced-motion: reduce) { .axis-v2 *, .axis-v2 *::before, .axis-v2 *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }