/* ============================================================================= KI PEPTIDES — Molecular Architecture Global tokens + shared primitives. Ported 1:1 from the Shopify Horizon build (layout/theme.liquid :root + docs/brand/molecular-architecture.md). Component-specific CSS lives in assets/css/components/*.css. ========================================================================== */ :root { /* ---- Color (exact hex, do not approximate) ---------------------------- */ --ki-primary: #2e003c; /* deep purple — primary CTA, dark accents */ --ki-primary-container: #4a0e5c; /* lighter purple — CTA gradient end + hover */ --ki-secondary: #006877; /* teal — eyebrows, links, accent bars, icons */ --ki-secondary-container: #84e9fd;/* bright cyan — glass chips, dark-hero chip text */ --ki-teal-bright: #0E8B8B; /* sibling teal used on home hero/science/products */ --ki-surface: #f9f9fb; /* base page background ("Clinical White") */ --ki-surface-low: #f3f3f5; /* large section blocks */ --ki-surface-lowest: #ffffff; /* cards/modules on top of low sections */ --ki-surface-high: #e8e8ea; /* input fill */ --ki-on-surface: #1a1c1d; /* text — NEVER pure black; also footer bg */ --ki-on-surface-muted: rgb(var(--ki-ink) / 0.7); --ki-outline: rgba(209,194,207,0.15); /* ghost border — 15% hairline */ --ki-outline-variant: #d1c2cf; /* ghost-border base color */ --ki-gold: #d97706; /* gold/amber — stat labels, data chips, sale */ --ki-alert: #ba1a1a; /* critical alerts only */ --ki-ink: 26 28 29; /* ink RGB triplet — muted text + hairlines use rgb(var(--ki-ink)/α); flips to paper in dark mode */ --ki-surface-inverse: #1a1c1d; /* always-dark surfaces (footer, .ki-section--dark) — decoupled from --ki-on-surface */ --ki-on-inverse: rgba(255, 255, 255, 0.72); /* ---- Type ------------------------------------------------------------- */ --ki-font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ki-font-label: "Space Grotesk", ui-monospace, "SFMono-Regular", monospace; /* ---- Spacing / layout ------------------------------------------------- */ --ki-section-y: clamp(4rem, 10vh, 8.5rem); /* signature vertical rhythm */ --ki-section-y-sm: clamp(2.5rem, 8vh, 4rem); --ki-container: 1440px; --ki-container-narrow: 1200px; --ki-gutter: clamp(1.5rem, 5vw, 4rem); /* ---- Radii ------------------------------------------------------------ */ --ki-radius-pill: 9999px; /* buttons / chips / inputs */ --ki-radius-card: 12px; /* cards / modules */ --ki-radius-img: 8px; /* media — kept deliberately sharp */ /* ---- Elevation (tonal, not shadow) ------------------------------------ */ --ki-hairline: inset 0 0 0 1px rgba(209,194,207,0.2); /* painted-border replacement */ --ki-lift: 0 20px 60px rgba(46,0,60,0.06); /* card hover */ --ki-lift-soft: 0 16px 48px rgba(46,0,60,0.05); --ki-glow: 0 0 40px rgba(46,0,60,0.4); /* dark-hero CTA */ /* ---- Header ----------------------------------------------------------- */ --ki-header-h: 76px; } /* ============================================================================= Dark mode — redefine the semantic tokens only. Applied via (set pre-paint by the no-FOUC head script + flipped by the header toggle). Brand hues (purple CTA, gold) hold; surfaces invert and ink → paper, which flips every rgb(var(--ki-ink)/α) muted text + hairline automatically. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --ki-ink: 232 233 238; /* paper — flips all muted text + hairlines */ --ki-surface: #141417; /* base page background */ --ki-surface-low: #19191e; /* large section blocks */ --ki-surface-lowest: #1f2026; /* cards / modules (elevated) */ --ki-surface-high: #2a2b32; /* input fill */ --ki-on-surface: #e9eaf0; /* primary text */ --ki-outline: rgba(255, 255, 255, 0.10); --ki-outline-variant: #3a3b44; --ki-surface-inverse: #0d0d0f; /* footer / dark sections — deepest band */ --ki-secondary: #2ab7cb; /* brighter teal so links/eyebrows/icons read on dark */ --ki-primary: #c6a6e6; /* lift the deep-purple ACCENT to a readable lavender (eyebrows, accent bars, links, labels) */ --ki-primary-container: #d9c4f0; --ki-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.08); --ki-lift: 0 20px 60px rgba(0, 0, 0, 0.5); --ki-lift-soft: 0 16px 48px rgba(0, 0, 0, 0.45); } /* Primary BUTTONS fill with --ki-primary, so the lavender accent-lift above would wash them out under white text. Hold them at a rich purple in dark mode. */ :root[data-theme="dark"] .ki-btn--primary, :root[data-theme="dark"] .single_add_to_cart_button, :root[data-theme="dark"] .ki-pdp .single_add_to_cart_button, :root[data-theme="dark"] .wc-block-cart__submit-button, :root[data-theme="dark"] .ki-products__add-to-cart, :root[data-theme="dark"] .ki-products__view-all-btn, :root[data-theme="dark"] .ki-news__btn, :root[data-theme="dark"] .ki-page-cta__btn--primary { background: linear-gradient(135deg, #5b1a72, #7c2c98) !important; color: #fff !important; } :root[data-theme="dark"] .ki-btn--primary:hover, :root[data-theme="dark"] .single_add_to_cart_button:hover, :root[data-theme="dark"] .ki-products__add-to-cart:hover, :root[data-theme="dark"] .ki-products__view-all-btn:hover, :root[data-theme="dark"] .ki-news__btn:hover, :root[data-theme="dark"] .ki-page-cta__btn--primary:hover { background: linear-gradient(135deg, #6b2585, #8f3cab) !important; } /* Announcement bar is a --ki-primary band — keep it a deep purple, not lavender. */ :root[data-theme="dark"] .ki-announcement { background: #350f47; } /* ============================================================================= Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--ki-font-display); font-weight: 400; font-size: 1rem; line-height: 1.6; color: var(--ki-on-surface); background: var(--ki-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--ki-font-display); font-weight: 300; letter-spacing: -0.02em; color: var(--ki-on-surface); margin: 0 0 0.5em; } p { margin: 0 0 1rem; } a { color: var(--ki-secondary); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--ki-primary); } img, svg, video { max-width: 100%; height: auto; display: block; } ::selection { background: rgba(46,0,60,0.12); } /* ============================================================================= Layout primitives ========================================================================== */ .ki-container { width: 100%; max-width: var(--ki-container); margin-inline: auto; padding-inline: var(--ki-gutter); } .ki-container--narrow { max-width: var(--ki-container-narrow); } .ki-section { padding-block: var(--ki-section-y); } @media (max-width: 749px) { .ki-section { padding-block: var(--ki-section-y-sm); } } /* Tonal section boundaries — the "no-line" rule. Alternate these, never borders. */ .ki-section--surface { background: var(--ki-surface); } .ki-section--low { background: var(--ki-surface-low); } .ki-section--white { background: var(--ki-surface-lowest); } .ki-section--dark { background: var(--ki-surface-inverse); color: var(--ki-on-inverse); } /* Asymmetric 2-col section header (1.1fr / 0.9fr), subhead right-aligned. */ .ki-section-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: end; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .ki-section-head__aside { align-self: end; text-align: right; color: var(--ki-on-surface-muted); } /* Collapse at 768 (not 749) so iPad portrait doesn't keep a squeezed right-aligned aside. */ @media (max-width: 768px) { .ki-section-head { grid-template-columns: 1fr; } .ki-section-head__aside { text-align: left; } } /* ============================================================================= Typography helpers ========================================================================== */ .ki-h1 { font-size: clamp(3rem, 6vw, 5.2rem); font-weight: 200; line-height: 1.04; } .ki-h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 300; line-height: 1.1; } .ki-h3 { font-size: clamp(1.0625rem, 1.6vw, 1.5rem); font-weight: 500; letter-spacing: -0.01em; } .ki-lede { font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 300; line-height: 1.7; color: var(--ki-on-surface-muted); } .ki-muted { color: var(--ki-on-surface-muted); } .ki-mono { font-family: var(--ki-font-label); } /* Eyebrow — Space Grotesk uppercase, teal, with a leading bar */ .ki-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--ki-font-label); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ki-secondary); margin: 0 0 1rem; } .ki-eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; display: inline-block; } .ki-eyebrow--gold { color: var(--ki-gold); } .ki-eyebrow--dot::before { width: 6px; height: 6px; border-radius: 50%; } /* 3-span descending accent bar (teal). Reused across why-ki/stacks/story/blog. */ .ki-accent-bar { display: flex; align-items: center; gap: 4px; margin: 0 0 1.25rem; } .ki-accent-bar span { height: 3px; border-radius: 2px; background: var(--ki-secondary); } .ki-accent-bar span:nth-child(1) { width: 48px; opacity: 1; } .ki-accent-bar span:nth-child(2) { width: 24px; opacity: 0.5; } .ki-accent-bar span:nth-child(3) { width: 12px; opacity: 0.25; } .ki-accent-bar--gold span { background: var(--ki-gold); } .ki-accent-bar--purple span { background: var(--ki-primary); } /* ============================================================================= Buttons / CTAs — rounded-full, always ========================================================================== */ .ki-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--ki-font-display); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.01em; line-height: 1; min-height: 52px; padding: 0 1.75rem; border: 0; border-radius: var(--ki-radius-pill); cursor: pointer; text-align: center; transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease; } .ki-btn--primary { background: linear-gradient(135deg, var(--ki-primary), var(--ki-primary-container)); color: #fff; } .ki-btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(46,0,60,0.28); } .ki-btn--teal { background: var(--ki-secondary); color: #fff; } .ki-btn--teal:hover { background: #005563; color: #fff; transform: translateY(-2px); } .ki-btn--ghost { background: transparent; color: var(--ki-on-surface); box-shadow: inset 0 0 0 1px rgba(209,194,207,0.5); } .ki-btn--ghost:hover { color: var(--ki-primary); box-shadow: inset 0 0 0 1px var(--ki-primary); } /* On dark surfaces (hero/footer) */ .ki-section--dark .ki-btn--ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); } .ki-section--dark .ki-btn--primary:hover { box-shadow: var(--ki-glow); } /* ============================================================================= Card — white module on a low section. Hairline via inset shadow, no border. ========================================================================== */ .ki-card { background: var(--ki-surface-lowest); border-radius: var(--ki-radius-card); box-shadow: var(--ki-hairline); padding: 2rem 1.75rem; transition: transform .25s ease, box-shadow .25s ease; } .ki-card--hover:hover { transform: translateY(-4px); box-shadow: var(--ki-lift); } /* Glassmorphism for floating elements */ .ki-glass { background: rgba(249,249,251,0.7); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: var(--ki-radius-card); } /* Chip / pill label */ .ki-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--ki-font-label); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ki-on-surface-muted); padding: 0.4rem 0.85rem; border-radius: var(--ki-radius-pill); box-shadow: var(--ki-hairline); } /* Stat block */ .ki-stat__value { font-family: var(--ki-font-label); font-weight: 700; font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1; color: var(--ki-on-surface); } .ki-stat__label { font-family: var(--ki-font-label); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ki-gold); margin-top: 0.5rem; } /* ============================================================================= Accordion — native
, chevron rotates 180° on open ========================================================================== */ .ki-accordion { border-radius: 0.5rem; } .ki-accordion > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font-family: var(--ki-font-display); font-weight: 500; font-size: 1.0625rem; color: var(--ki-on-surface); } .ki-accordion > summary::-webkit-details-marker { display: none; } .ki-accordion > summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ki-secondary); border-bottom: 2px solid var(--ki-secondary); transform: rotate(45deg); transition: transform .25s ease; } .ki-accordion[open] > summary::after { transform: rotate(-135deg); } .ki-accordion__body { padding: 0 0 1.25rem; color: var(--ki-on-surface-muted); line-height: 1.75; font-weight: 300; } .ki-accordion + .ki-accordion { box-shadow: inset 0 1px 0 rgba(209,194,207,0.25); } /* ============================================================================= Accessibility ========================================================================== */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .ki-skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--ki-primary); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0; } .ki-skip-link:focus { left: 0; color: #fff; } :where(a, button, summary, input, [tabindex]):focus-visible { outline: 2px solid var(--ki-secondary); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Long no-space values (sequences/formulae) must never overflow their grid cell */ .ki-breakable { overflow-wrap: anywhere; word-break: break-word; min-width: 0; } /* WooCommerce Cart block — primary "Proceed to Checkout" CTA. The block default rendered low-contrast (teal text on dark grey); match the PDP add-to-cart: brand purple gradient + white text. */ .wc-block-cart__submit-button { background: linear-gradient(135deg, var(--ki-primary), var(--ki-primary-container)) !important; color: #fff !important; border: 0 !important; } .wc-block-cart__submit-button:hover, .wc-block-cart__submit-button:focus { color: #fff !important; filter: brightness(1.08); }