/* MyPeptides-Nutreko2 (ap-nutreko-home-2) bridge tokens. * * Maps the Nutreko theme's CSS-variable surface to the MyPeptides clinical * palette + IBM Plex typography. Loaded BEFORE every other Nutreko theme * CSS file so the theme's selectors (which reference `var(--primary)`, * `rgb(var(--color-body))`, `var(--hd-font-family)`, etc.) resolve to * MyPeptides values instead of the theme's default green-on-white. * * Palette reference (MyPeptides Website Brief §2.1, project CLAUDE.md): * --mp-bg #FAFAF7 Warm off-white (paper, not screen-white) (250, 250, 247) * --mp-surface #F2F1EB One step darker — card backgrounds (242, 241, 235) * --mp-text #2C3035 Slate near-black — never pure black ( 44, 48, 53) * --mp-muted #6B7280 Cool gray — metadata (107, 114, 128) * --mp-accent #1B4965 Deep medical blue — single signal color ( 27, 73, 101) * --mp-data #2C5F2D Forest green — numerical values only ( 44, 95, 45) * --mp-border #E5E5DF Hairline borders (229, 229, 223) * * Typography (Brief §2.2): * IBM Plex Sans (300/500/700) for body + headings. * IBM Plex Mono (400/500) for ALL numerical values. * * Variable surface lifted from a grep of the Nutreko theme's chrome CSS: * themeforest-0o97115k-ap-nutreko-gym-supplements-shopify-theme/ap-nutreko-home-2 * (assets/header-2.css, footer.css, announcement-bar.css, copyright.css, * base.css, ap-theme.css) * * Design intent (CLAUDE.md / Brief): "off-white background, deep medical * blue accent, forest green for data, IBM Plex throughout. Reads like a * research paper, not a supplement store." Every mapping below honors * that — no orange, no pink, no champagne. Just paper, navy, and * forest-green data values. */ .mypeptides { /* ---- Brand identity (CSS-color values for hex consumers) ----------- */ --primary: #1B4965; /* Deep medical blue — sole accent */ --primary-2: #2A6A8E; /* Lighter navy (hover lift) */ --primary_hover: #2A6A8E; --header-background: #FAFAF7; /* Off-white, matches canvas */ --header-border-color: #E5E5DF; --bg-link: #1B4965; --text-link: #2C3035; --color-link: #2C3035; --color-link-hover: #1B4965; --color-social: #2C3035; --color-svg-hover: #1B4965; --color-icon: #2C3035; /* Theme custom-color slots (footer + accents) */ --color-accent-1: #1B4965; --color-accent-2: #2A6A8E; --color-accent-3: #6B7280; --color-accent-4: #2C5F2D; --color-accent-5: #F2F1EB; --color-accent-6: #2C3035; /* ---- Triple-channel rgb(...) consumers ----------------------------- * * Theme writes rgb(var(--color-body), var(--alpha-link)) etc. so each * of these MUST be three comma-separated decimals — no hex, no rgb() */ /* Body / canvas */ --color-body: 44, 48, 53; /* Slate text on off-white */ --heading-color: 44, 48, 53; --background: 250, 250, 247; /* Warm off-white */ --secondary-background: 242, 241, 235; /* Surface */ --border-color: 229, 229, 223; --border-color-darker: 214, 214, 207; /* Buttons */ --primary-button-background: 27, 73, 101; --primary-button-text-color: 250, 250, 247; --secondary-button-background: 250, 250, 247; --secondary-button-text-color: 27, 73, 101; /* Status */ --success-color: 44, 95, 45; --success-background: 230, 240, 230; --error-color: 176, 32, 32; --error-background: 250, 230, 230; /* Product chrome (theme CSS expects these even when we don't render stars) */ --product-star-rating: 27, 73, 101; --product-star-rating-empty: 107, 114, 128; --price-regular: 44, 48, 53; --product-on-price: 107, 114, 128; --product-on-sale-accent: 27, 73, 101; --product-sold-out-accent: 107, 114, 128; --product-custom-label-background: 27, 73, 101; --product-custom-label-text-color: 250, 250, 247; --product-custom-label-2-background: 107, 114, 128; --product-custom-label-2-text-color: 250, 250, 247; --product-low-stock-text-color: 176, 110, 32; --product-in-stock-text-color: 44, 95, 45; --ap-loadingbar-background: 27, 73, 101; --payment-terms-background-color: 250, 250, 247; --bg-cart-count: #1B4965; --color-cart-count: #FAFAF7; --color-type: #6B7280; --color-title-product: #2C3035; --color-addcart: #2C3035; --background-product: #F2F1EB; --background-product-hover: #ECEBE3; /* Root duplicates (used by drawers + popovers, must not flip on theme) */ --root-heading-color: 44, 48, 53; --root-text-color: 44, 48, 53; --root-background: 250, 250, 247; --root-border-color: 229, 229, 223; --root-primary-button-background: 27, 73, 101; --root-primary-button-text-color: 250, 250, 247; --root-primary-button-color-hover: 250, 250, 247; --root-primary-button-background-hover: 42, 106, 142; /* Sub-heading / banner copy */ --sub-heading-color: #6B7280; --sub-background: #F2F1EB; --highlight-heading-color: #1B4965; /* Video play button */ --play-button-background: 250, 250, 247; --play-button-arrow: 27, 73, 101; /* MyPeptides-specific accents (consumed by chrome.css + custom views) */ --mp-bg: #FAFAF7; --mp-surface: #F2F1EB; --mp-text: #2C3035; --mp-muted: #6B7280; --mp-accent: #1B4965; --mp-accent-2: #2A6A8E; --mp-data: #2C5F2D; --mp-border: #E5E5DF; /* ---- Typography ---------------------------------------------------- * * IBM Plex Sans (300/500/700) for body + headings. * IBM Plex Mono (400/500) for numerical values (purity %, mg, lots). * Theme defines `--hd-font-family` (headings) and `--body-font-family` * (body); both point to Plex Sans; --custom-font-family reserved for Mono. */ --hd-font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --body-font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --custom-font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace; --g-font-other: "IBM Plex Sans", sans-serif; --mp-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace; --base-font-size: 17px; /* Brief §2.2 — body 17px */ --heading-font-size: 48px; --heading-font-weight: 300; /* Brief — headings light, not bold */ --heading-font-style: normal; --heading-text-transform: none; --text-font-weight: 400; --text-font-style: normal; --text-font-bold-weight: 500; --xxsmall-font-size: 11px; --xsmall-font-size: 12px; --heading-small-font-size: 14px; --large-font-size: 32px; --h1-font-size: 48px; --h2-font-size: 32px; --h3-font-size: 22px; --h4-font-size: 18px; --h5-font-size: 16px; --h6-font-size: 14px; /* Borders + radii — clinical, square-ish, never pill-shaped */ --button-border-radius: 2px; --block-border-radius: 4px; --block-border-radius-reduced: 2px; --color-swatch-border-radius: 2px; --button-height: 48px; --button-small-height: 40px; /* Form inputs */ --form-input-field-height: 48px; --form-input-gap: 12px; --form-submit-margin: 8px; /* Container */ --container-max-width: 1280px; --container-distance: 24px; --container-max-width-minus-gutters: calc(var(--container-max-width) - (var(--container-distance)) * 2); --container-outer-width: max(calc((100vw - var(--container-max-width-minus-gutters)) / 2), var(--container-distance)); --container-outer-margin: var(--container-outer-width); --container-inner-width: calc(100vw - var(--container-outer-width) * 2); --grid-column-count: 20; --grid-gap: 0px; --grid-column-width: calc((100vw - var(--container-outer-width) * 2 - var(--grid-gap) * (var(--grid-column-count) - 1)) / var(--grid-column-count)); --vertical-breather: 96px; --vertical-breather-tight: 48px; /* RTL */ --transform-logical-flip: 1; --transform-origin-start: left; --transform-origin-end: right; /* Product list spacing */ --ap-productlist-block-spacing: 24px; --ap-productlist-column-gap: 24px; /* Custom button overrides (theme allows component-level overrides) */ --color-btn-custom: #FAFAF7; --background-color-custom: #1B4965; --color-border-custom: #1B4965; --color-btn-custom-hover: #1B4965; --background-color-custom-hover: #FAFAF7; }