/** Shopify CDN: Minification failed Line 33:0 All "@import" rules must come first **/ /* ============================================================ 1. BRAND COLOR VARIABLES ============================================================ */ :root { /* Primary brand palette */ --fp-green-deep: #1C3A2B; /* Primary background / hero */ --fp-green-mid: #2D5A3D; /* Secondary surfaces */ --fp-green-light: #4A7C5E; /* Accents, borders */ --fp-green-sage: #7A9E8A; /* Subtle accents, icon backgrounds */ --fp-cream: #F2EDE4; /* Primary text on dark backgrounds */ --fp-cream-warm: #E8DFD0; /* Secondary text, borders on dark */ --fp-white: #FFFFFF; /* Pure white for high-contrast needs */ --fp-charcoal: #1A1A1A; /* Body text on light backgrounds */ --fp-charcoal-mid: #3D3D3D; /* Secondary text on light backgrounds */ /* Functional colors */ --fp-cta-primary: #1C3A2B; /* Primary button background */ --fp-cta-hover: #2D5A3D; /* Primary button hover */ --fp-cta-text: #F2EDE4; /* Primary button text */ --fp-border: rgba(74, 124, 94, 0.25); /* Subtle green border */ } /* ============================================================ 2. TYPOGRAPHY ============================================================ */ /* Import brand fonts — add to theme.liquid instead if preferred */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Jost:wght@300;400;500;600&display=swap'); /* Heading font: Cormorant Garamond — editorial, premium serif */ .h1, .h2, .h3, h1, h2, h3, .section__title, .product__title, .hero__title, .slideshow__title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; letter-spacing: 0.01em; } /* Body / UI font: Jost — clean, geometric sans-serif */ body, .btn, .product__price, .nav__link, .footer__link, .announcement-bar__text { font-family: 'Jost', system-ui, sans-serif; font-weight: 400; } /* Product name on cards — slightly wider tracking */ .product-item__title { font-family: 'Jost', system-ui, sans-serif; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; } /* Section headings — generous size */ .section__title { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; } /* ============================================================ 3. ANNOUNCEMENT BAR ============================================================ */ .announcement-bar { background-color: var(--fp-green-deep); color: var(--fp-cream); font-family: 'Jost', sans-serif; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; } .announcement-bar a { color: var(--fp-cream); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ 4. HEADER / NAVIGATION ============================================================ */ .header { background-color: var(--fp-white); border-bottom: 1px solid var(--fp-border); } /* Logo sizing */ .header__logo img { max-height: 48px; width: auto; } /* Nav links */ .nav__link, .header__nav-item a { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fp-charcoal); transition: color 0.2s ease; } .nav__link:hover, .header__nav-item a:hover { color: var(--fp-green-deep); } /* ============================================================ 5. HERO / SLIDESHOW ============================================================ */ .slideshow__title, .hero__title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: clamp(2.5rem, 6vw, 5rem); color: var(--fp-cream); line-height: 1.05; letter-spacing: -0.01em; } .slideshow__subtitle, .hero__subtitle { font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--fp-cream-warm); letter-spacing: 0.02em; max-width: 560px; } /* ============================================================ 6. BUTTONS ============================================================ */ /* Primary button */ .btn, .btn--primary, .button--primary { background-color: var(--fp-green-deep); color: var(--fp-cream); font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1.5px solid var(--fp-green-deep); border-radius: 0; /* Sharp corners — clinical, precise */ padding: 14px 32px; transition: background-color 0.25s ease, color 0.25s ease; } .btn:hover, .btn--primary:hover, .button--primary:hover { background-color: var(--fp-green-mid); border-color: var(--fp-green-mid); color: var(--fp-cream); } /* Secondary / outline button */ .btn--secondary, .button--secondary { background-color: transparent; color: var(--fp-cream); border: 1.5px solid var(--fp-cream); font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 0; padding: 14px 32px; transition: background-color 0.25s ease, color 0.25s ease; } .btn--secondary:hover, .button--secondary:hover { background-color: var(--fp-cream); color: var(--fp-green-deep); } /* Add to cart button */ .product-form__submit, .btn--add-to-cart { background-color: var(--fp-green-deep); color: var(--fp-cream); font-family: 'Jost', sans-serif; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 0; border: none; padding: 16px 40px; width: 100%; transition: background-color 0.25s ease; } .product-form__submit:hover, .btn--add-to-cart:hover { background-color: var(--fp-green-mid); } /* ============================================================ 7. PRODUCT CARDS ============================================================ */ .product-item { border: none; background: transparent; } .product-item__image-wrapper { background-color: #F7F4EF; /* Warm off-white product image background */ border-radius: 0; } .product-item__title { color: var(--fp-charcoal); margin-top: 12px; } .product-item__price { font-family: 'Jost', sans-serif; font-weight: 500; color: var(--fp-green-deep); } /* Subscription badge */ .product-item__badge, .badge--subscription { background-color: var(--fp-green-sage); color: var(--fp-white); font-family: 'Jost', sans-serif; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 0; padding: 3px 8px; } /* ============================================================ 8. RICH TEXT / EDITORIAL SECTIONS ============================================================ */ .rich-text__heading { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--fp-charcoal); } .rich-text__text { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 1.05rem; line-height: 1.75; color: var(--fp-charcoal-mid); max-width: 680px; margin-left: auto; margin-right: auto; } /* ============================================================ 9. COUNTDOWN TIMER ============================================================ */ .countdown-timer { background-color: var(--fp-green-deep); color: var(--fp-cream); } .countdown-timer__title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.5rem; color: var(--fp-cream); } .countdown-timer__number { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 3rem; color: var(--fp-cream); } .countdown-timer__label { font-family: 'Jost', sans-serif; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fp-green-sage); } /* ============================================================ 10. TESTIMONIALS ============================================================ */ .testimonials__quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.25rem; line-height: 1.6; color: var(--fp-charcoal); } .testimonials__author { font-family: 'Jost', sans-serif; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fp-green-deep); font-weight: 500; } /* Star rating color */ .rating__star, .icon-star { color: var(--fp-green-light); fill: var(--fp-green-light); } /* ============================================================ 11. NEWSLETTER SECTION ============================================================ */ .newsletter { background-color: var(--fp-green-deep); } .newsletter__title { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--fp-cream); } .newsletter__subtitle { font-family: 'Jost', sans-serif; font-weight: 300; color: var(--fp-cream-warm); } .newsletter__input { border: 1px solid var(--fp-green-sage); border-radius: 0; background: rgba(255,255,255,0.08); color: var(--fp-cream); font-family: 'Jost', sans-serif; } .newsletter__input::placeholder { color: var(--fp-green-sage); } .newsletter__submit { background-color: var(--fp-cream); color: var(--fp-green-deep); font-family: 'Jost', sans-serif; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 0; border: none; transition: background-color 0.2s ease; } .newsletter__submit:hover { background-color: var(--fp-cream-warm); } /* ============================================================ 12. FOOTER ============================================================ */ .footer { background-color: var(--fp-charcoal); color: var(--fp-cream-warm); border-top: 1px solid rgba(242,237,228,0.1); } .footer__heading { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fp-cream); margin-bottom: 16px; } .footer__link { font-family: 'Jost', sans-serif; font-size: 0.85rem; color: var(--fp-cream-warm); text-decoration: none; line-height: 2; transition: color 0.2s ease; } .footer__link:hover { color: var(--fp-green-sage); } .footer__copyright { font-family: 'Jost', sans-serif; font-size: 0.75rem; color: rgba(242,237,228,0.4); letter-spacing: 0.05em; } /* FDA disclaimer in footer */ .footer__fda-disclaimer { font-family: 'Jost', sans-serif; font-size: 0.7rem; color: rgba(242,237,228,0.5); line-height: 1.6; border-top: 1px solid rgba(242,237,228,0.1); padding-top: 16px; margin-top: 16px; } /* ============================================================ 13. PRODUCT PAGE ============================================================ */ .product__title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--fp-charcoal); line-height: 1.15; } .product__price { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 1.25rem; color: var(--fp-green-deep); } .product__description { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.95rem; line-height: 1.8; color: var(--fp-charcoal-mid); } /* Subscription pricing highlight */ .product__subscription-price { background-color: rgba(28,58,43,0.06); border-left: 3px solid var(--fp-green-deep); padding: 12px 16px; font-family: 'Jost', sans-serif; font-size: 0.85rem; color: var(--fp-green-deep); font-weight: 500; } /* ============================================================ 14. FAQ SECTION ============================================================ */ .faq__question { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.95rem; color: var(--fp-charcoal); letter-spacing: 0.01em; } .faq__answer { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.9rem; line-height: 1.75; color: var(--fp-charcoal-mid); } /* Accordion border */ .faq__item { border-bottom: 1px solid var(--fp-border); } /* ============================================================ 15. SCROLLING CONTENT SECTION ============================================================ */ .scrolling-content__card { border: 1px solid var(--fp-border); background: var(--fp-white); padding: 32px; } .scrolling-content__card-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.4rem; color: var(--fp-green-deep); margin-bottom: 12px; } .scrolling-content__card-text { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.9rem; line-height: 1.75; color: var(--fp-charcoal-mid); } /* ============================================================ 16. MOBILE RESPONSIVE ADJUSTMENTS ============================================================ */ @media (max-width: 768px) { .slideshow__title, .hero__title { font-size: 2.25rem; } .section__title { font-size: 1.75rem; } .btn, .btn--primary { padding: 12px 24px; font-size: 0.75rem; } .countdown-timer__number { font-size: 2rem; } } /* ============================================================ 17. UTILITY CLASSES ============================================================ */ /* Use on any section to apply the deep green background */ .fp-bg-dark { background-color: var(--fp-green-deep); color: var(--fp-cream); } /* Use on any section to apply the warm cream background */ .fp-bg-light { background-color: #FAF7F2; color: var(--fp-charcoal); } /* Thin horizontal rule in brand green */ .fp-rule { border: none; border-top: 1px solid var(--fp-green-sage); margin: 32px 0; } /* Science badge — for use on product cards or sections */ .fp-badge-science { display: inline-block; background-color: var(--fp-green-deep); color: var(--fp-cream); font-family: 'Jost', sans-serif; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 10px; border-radius: 0; } /* ============================================================ 18. LEARN THE SCIENCE BUTTON — GRADIENT SCROLL ANIMATION Matches the hero section button transition behavior. The Vogue theme's gradient wipe requires features--button-transition on a parent. We replicate the same animation directly here. ============================================================ */ #shopify-section-brand-positioning .button { --button-background: 28, 58, 43; --button-text-color: 242, 237, 228; --button-outline-color: 28, 58, 43; --initial-gradient: linear-gradient(rgb(var(--button-background)), rgb(var(--button-background))); --hover-gradient: linear-gradient(transparent, transparent); --initial-background-position: right center; --hover-background-position: left center; background-image: var(--initial-gradient), var(--hover-gradient); background-size: 101% 101%, 0 101%; background-position: var(--initial-background-position); background-repeat: no-repeat; color: rgb(var(--button-text-color)); border-color: rgb(var(--button-outline-color)); transition: background-size .45s cubic-bezier(.785, .135, .15, .86), background-position .45s step-end, color .45s cubic-bezier(.785, .135, .15, .86), border .45s cubic-bezier(.785, .135, .15, .86); } @media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) { #shopify-section-brand-positioning .button:not([disabled]):hover { color: rgb(28, 58, 43); background-size: 0 101%, 101% 101%; background-position: var(--hover-background-position); border-color: rgb(28, 58, 43); background-image: linear-gradient(transparent, transparent), linear-gradient(rgb(242, 237, 228), rgb(242, 237, 228)); } } /* ============================================================ 19. FEATURED COLLECTIONS — VIEW ALL PRODUCTS BUTTON Background: #F2EDE4 (cream/linen), Text: #1C3A2B (forest green) ============================================================ */ #shopify-section-featured-products .button, #shopify-section-featured-products a.button { --button-background: 242, 237, 228 !important; --button-text-color: 28, 58, 43 !important; --button-outline-color: 242, 237, 228 !important; background-color: #F2EDE4 !important; color: #1C3A2B !important; border-color: #F2EDE4 !important; } #shopify-section-featured-products .button:hover, #shopify-section-featured-products a.button:hover { background-color: #e8e2d8 !important; color: #1C3A2B !important; border-color: #e8e2d8 !important; }