/* SurfPeptides-Nutreko3 (ap-nutreko-home-3) bridge tokens. * * Maps the Nutreko theme's CSS-variable surface to the SurfPeptides * coastal palette. 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 SurfPeptides values instead of the theme's default green-on-white. * * Palette reference (SurfPeptides Website Brief §2.1, draft 2026-04-26): * --sp-bg #F4ECDC Warm sand (244, 236, 220) * --sp-bg-deep #E8DCC0 Wet sand (232, 220, 192) * --sp-text #1A2A3A Deep ocean text (26, 42, 58 ) * --sp-muted #5A6B7A Cool fog gray-blue (90, 107, 122 ) * --sp-accent #0E5378 Ocean blue (14, 83, 120 ) * --sp-coral #FF8255 Sun-coral CTA (255, 130, 85) * --sp-foam #F8F4ED Foam / card surface (248, 244, 237) * --sp-border #D4C8AC Sand hairline (212, 200, 172) * * Typography (Brief §2.2): GT America with Inter as the licensed * fallback. Until GT America is licensed, the layout pulls Inter * (300 / 400 / 500 / 700) and we point both heading + body families * at it. One face, three weights — the brand's restraint is the design. * * Variable surface lifted from a grep of the Nutreko theme's chrome CSS: * ap-nutreko-home-3/assets/header-3.css, footer.css, announcement-bar.css, * copyright.css, base.css, ap-theme.css, bootstrap.min.css * * Design intent (brief §2): "coastal at golden hour. Sand background, * deep-ocean text, ocean-blue navigation, sun-coral CTAs. Two signal * colors so when coral appears (Add to Cart, 'New batch,' pricing * emphasis) it carries weight." Every mapping below honors that — * no green, no fluorescent, no carbon-dark. Sand, ocean, coral. */ .surfpeptides { /* ---- Brand identity (CSS-color values for hex consumers) ----------- */ --primary: #0E5378; /* Ocean blue — primary signal */ --primary-2: #FF8255; /* Sun-coral — sparingly used CTA */ --primary_hover: #FF8255; --header-background: #F4ECDC; /* Warm sand canvas */ --header-border-color: 212, 200, 172; /* Sand hairline (RGB triple) */ --bg-link: #0E5378; --text-link: #1A2A3A; --color-link: #1A2A3A; --color-link-hover: #0E5378; --color-social: #1A2A3A; --color-svg-hover: #0E5378; --color-icon: #1A2A3A; /* Theme custom-color slots (footer + accents) */ --color-accent-1: #0E5378; --color-accent-2: #1A2A3A; --color-accent-3: #5A6B7A; --color-accent-4: #D4C8AC; --color-accent-5: #E8DCC0; --color-accent-6: #F8F4ED; /* ---- 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: 26, 42, 58; /* Deep ocean text on sand */ --heading-color: 26, 42, 58; --background: 244, 236, 220; /* Warm sand */ --secondary-background: 248, 244, 237; /* Foam — card / lifted surface */ --border-color: 212, 200, 172; /* Sand hairline */ --border-color-darker: 90, 107, 122; /* Fog gray for sharper rules */ /* Buttons — coral filled CTA, sand-on-ocean secondary */ --primary-button-background: 255, 130, 85; --primary-button-text-color: 255, 255, 255; --secondary-button-background: 244, 236, 220; --secondary-button-text-color: 14, 83, 120; /* Header text color — used by header-3.liquid var binding */ --header-text-color: 26, 42, 58; /* Status */ --success-color: 34, 139, 95; --success-background: 220, 240, 230; --error-color: 198, 50, 50; --error-background: 250, 232, 226; /* Product chrome */ --product-star-rating: 255, 130, 85; --product-star-rating-empty: 212, 200, 172; --price-regular: 26, 42, 58; --product-on-price: 90, 107, 122; --product-on-sale-accent: 255, 130, 85; --product-sold-out-accent: 90, 107, 122; --product-custom-label-background: 255, 130, 85; --product-custom-label-text-color: 255, 255, 255; --product-custom-label-2-background: 14, 83, 120; --product-custom-label-2-text-color: 255, 255, 255; --product-low-stock-text-color: 255, 130, 85; --product-in-stock-text-color: 34, 139, 95; --ap-loadingbar-background: 14, 83, 120; --payment-terms-background-color: 244, 236, 220; --bg-cart-count: #FF8255; --color-cart-count: #FFFFFF; --color-type: #5A6B7A; --color-title-product: #1A2A3A; --color-addcart: #1A2A3A; --background-product: #F8F4ED; --background-product-hover: #F1EAD7; /* Root duplicates (drawers + popovers, must not flip on theme) */ --root-heading-color: 26, 42, 58; --root-text-color: 26, 42, 58; --root-background: 244, 236, 220; --root-border-color: 212, 200, 172; --root-primary-button-background: 255, 130, 85; --root-primary-button-text-color: 255, 255, 255; --root-primary-button-color-hover: 255, 255, 255; --root-primary-button-background-hover: 14, 83, 120; /* Sub-heading / banner copy */ --sub-heading-color: #1A2A3A; --sub-background: #F8F4ED; --highlight-heading-color: #FF8255; /* Video play button */ --play-button-background: 244, 236, 220; --play-button-arrow: 26, 42, 58; /* ---- Typography ---------------------------------------------------- * * GT America is the brand-mandated face; until licensed, Inter is the * publicly drop-in fallback (same Swiss-grotesque register, free, also * the workhorse of contemporary outdoor brands). Both heading and body * point at the same family — the SurfPeptides voice is restraint. */ --hd-font-family: "Inter", "GT America", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --body-font-family: "Inter", "GT America", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --custom-font-family: "Inter", sans-serif; --g-font-other: "Inter", sans-serif; --base-font-size: 17px; /* brief §2.2 body 17px */ --heading-font-size: 56px; /* brief §2.2 h1 */ --heading-font-weight: 300; /* brief §2.2 h1 weight 300 */ --heading-font-style: normal; --heading-text-transform: none; --text-font-weight: 400; --text-font-style: normal; --text-font-bold-weight: 700; --xxsmall-font-size: 11px; --xsmall-font-size: 12px; --heading-small-font-size: 14px; --large-font-size: 32px; --h1-font-size: 56px; --h2-font-size: 32px; --h3-font-size: 22px; --h4-font-size: 20px; --h5-font-size: 17px; --h6-font-size: 14px; /* Borders + radii — coastal soft, slightly rounded vs Nutreko default */ --button-border-radius: 4px; --block-border-radius: 8px; --block-border-radius-reduced: 4px; --color-swatch-border-radius: 4px; --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: 1320px; --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: 80px; --vertical-breather-tight: 40px; /* RTL */ --transform-logical-flip: 1; --transform-origin-start: left; --transform-origin-end: right; /* Product list spacing — brief §2.3 wants substantial 2-up cards */ --ap-productlist-block-spacing: 32px; --ap-productlist-column-gap: 32px; /* Custom button overrides */ --color-btn-custom: #FFFFFF; --background-color-custom: #FF8255; --color-border-custom: #FF8255; --color-btn-custom-hover: #FFFFFF; --background-color-custom-hover: #0E5378; }