/** Shopify CDN: Minification failed Line 40:0 All "@import" rules must come first **/ /* ============================================================ INHERENT — Global Brand CSS File: assets/inherent-global.css HOW TO INSTALL: 1. Go to Online Store → Themes → Copy of Horizon → Edit code 2. Open the "Assets" folder 3. Click "Add a new asset" → Create a blank file 4. Name it: inherent-global.css 5. Paste this entire file in 6. Save Then add this line to your theme.liquid file, inside the tag (I'll show you exactly where later): {{ 'inherent-global.css' | asset_url | stylesheet_tag }} ============================================================ */ /* ============================================================ 1. FONT LOADING Degular Medium = your brand heading font (uploaded as .otf) Nunito = your body copy font (loaded from Google Fonts) ============================================================ */ /* Load Degular Medium — your custom brand font */ @font-face { font-family: 'Degular'; src: url('/cdn/shop/files/DegularVariable.ttf?v=1781065694') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } /* Load Nunito from Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap'); /* ============================================================ 2. BRAND COLOR TOKENS These are your exact brand colors from the guidelines. Use these variable names throughout all other files. ============================================================ */ :root { /* Primary Brand Colors */ --inherent-navy: #355165; /* Deep Navy — primary dark, headings */ --inherent-yellow: #FEC200; /* Vibrant Yellow — accent, use sparingly */ --inherent-sand: #F4DFBA; /* Warm Sand — backgrounds */ --inherent-steel: #819EA8; /* Steel Blue — secondary, muted */ --inherent-lime: #E1F2B8; /* Soft Lime — light accent */ --inherent-white: #FFFDFC; /* Off-White — clean backgrounds */ /* Derived / Utility Colors */ --inherent-navy-dark: #2a4053; /* Darker navy for hover states */ --inherent-navy-deep: #1e2f3a; /* Deepest navy for dark sections */ --inherent-sand-light:#FAF6EF; /* Lighter sand for subtle bg */ --inherent-sand-mid: #EDE0C8; /* Mid sand for borders */ --inherent-yellow-dark:#D9A600; /* Darker yellow for hover */ --inherent-steel-light:#a8c0c8; /* Lighter steel */ --inherent-text: #355165; /* Default body text = navy */ --inherent-text-muted:#6B8490; /* Muted text */ --inherent-border: #DDD0B8; /* Default border color */ /* ============================================================ 3. TYPOGRAPHY TOKENS ============================================================ */ --font-heading: 'Degular', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Nunito', 'Helvetica Neue', Arial, sans-serif; /* Font sizes — fluid, scales with viewport */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: clamp(24px, 3vw, 32px); --text-2xl: clamp(28px, 4vw, 42px); --text-3xl: clamp(34px, 5vw, 56px); --text-hero: clamp(40px, 6vw, 72px); /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed:1.7; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.12em; --tracking-widest: 0.18em; /* ============================================================ 4. SPACING TOKENS ============================================================ */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --space-2xl: 96px; --space-3xl: 128px; /* ============================================================ 5. BORDER RADIUS TOKENS ============================================================ */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-full:9999px; /* ============================================================ 6. SHADOWS ============================================================ */ --shadow-sm: 0 1px 4px rgba(53, 81, 101, 0.08); --shadow-md: 0 4px 16px rgba(53, 81, 101, 0.12); --shadow-lg: 0 8px 32px rgba(53, 81, 101, 0.16); --shadow-xl: 0 16px 48px rgba(53, 81, 101, 0.20); /* ============================================================ 7. TRANSITIONS ============================================================ */ --transition-fast: all 0.15s ease; --transition-normal: all 0.25s ease; --transition-slow: all 0.4s ease; /* ============================================================ 8. LAYOUT ============================================================ */ --max-width: 1200px; --max-width-narrow: 720px; --page-padding: 40px; --page-padding-sm: 20px; } /* ============================================================ 9. BASE RESET & DEFAULTS ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* Apply brand fonts globally */ body { font-family: var(--font-body); color: var(--inherent-text); background-color: var(--inherent-white); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings use Degular */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 500; line-height: var(--leading-tight); color: var(--inherent-navy); } /* Body copy uses Nunito */ p, li, span, label, input, textarea, select, button { font-family: var(--font-body); } a { color: var(--inherent-navy); text-decoration: none; transition: var(--transition-fast); } a:hover { color: var(--inherent-yellow-dark); } img { max-width: 100%; display: block; } /* ============================================================ 10. INHERENT BUTTON SYSTEM Use these classes on any button across the store. ============================================================ */ .inh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; cursor: pointer; border: 2px solid transparent; transition: var(--transition-normal); white-space: nowrap; text-decoration: none; } /* Primary — Navy background */ .inh-btn--primary { background: var(--inherent-navy); color: var(--inherent-white); border-color: var(--inherent-navy); } .inh-btn--primary:hover { background: var(--inherent-navy-dark); border-color: var(--inherent-navy-dark); color: var(--inherent-white); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Yellow CTA — use sparingly for maximum impact */ .inh-btn--yellow { background: var(--inherent-yellow); color: var(--inherent-navy); border-color: var(--inherent-yellow); } .inh-btn--yellow:hover { background: var(--inherent-yellow-dark); border-color: var(--inherent-yellow-dark); color: var(--inherent-navy); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Outline — transparent with navy border */ .inh-btn--outline { background: transparent; color: var(--inherent-navy); border-color: var(--inherent-navy); } .inh-btn--outline:hover { background: var(--inherent-navy); color: var(--inherent-white); transform: translateY(-2px); } /* Outline light — for use on dark backgrounds */ .inh-btn--outline-light { background: transparent; color: var(--inherent-white); border-color: var(--inherent-white); } .inh-btn--outline-light:hover { background: var(--inherent-white); color: var(--inherent-navy); } /* Size variants */ .inh-btn--sm { padding: 10px 20px; font-size: var(--text-xs); } .inh-btn--lg { padding: 18px 40px; font-size: var(--text-base); } /* ============================================================ 11. INHERENT EYEBROW / LABEL SYSTEM Small uppercase labels above headings ============================================================ */ .inh-eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--inherent-steel); display: block; margin-bottom: 12px; } .inh-eyebrow--yellow { color: var(--inherent-yellow); } .inh-eyebrow--navy { color: var(--inherent-navy); } /* ============================================================ 12. SECTION LAYOUT UTILITIES ============================================================ */ .inh-section { padding: var(--space-2xl) var(--page-padding); } .inh-section--sm { padding: var(--space-xl) var(--page-padding); } .inh-section--lg { padding: var(--space-3xl) var(--page-padding); } .inh-container { max-width: var(--max-width); margin: 0 auto; } .inh-container--narrow { max-width: var(--max-width-narrow); margin: 0 auto; } /* Section color schemes */ .inh-bg--white { background-color: var(--inherent-white); } .inh-bg--sand { background-color: var(--inherent-sand-light); } .inh-bg--navy { background-color: var(--inherent-navy); } .inh-bg--yellow { background-color: var(--inherent-yellow); } .inh-bg--lime { background-color: var(--inherent-lime); } .inh-bg--steel { background-color: var(--inherent-steel); } /* Text color utilities */ .inh-text--white { color: var(--inherent-white); } .inh-text--navy { color: var(--inherent-navy); } .inh-text--yellow { color: var(--inherent-yellow); } .inh-text--muted { color: var(--inherent-text-muted); } .inh-text--steel { color: var(--inherent-steel); } /* Section header block */ .inh-section-header { text-align: center; margin-bottom: var(--space-xl); } .inh-section-header h2 { font-size: var(--text-2xl); margin-bottom: 12px; } .inh-section-header p { font-size: var(--text-base); color: var(--inherent-text-muted); max-width: 520px; margin: 0 auto; line-height: var(--leading-relaxed); } /* ============================================================ 13. ANNOUNCEMENT BAR ============================================================ */ .inh-announce-bar { background: var(--inherent-navy); color: var(--inherent-white); padding: 10px var(--page-padding); display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-family: var(--font-body); font-weight: 600; } .inh-announce-bar__item { display: flex; align-items: center; gap: 7px; opacity: .9; } .inh-announce-bar__item span { color: var(--inherent-yellow); font-size: 14px; } /* ============================================================ 14. TRUST BADGE STRIP ============================================================ */ .inh-trust-strip { display: flex; align-items: center; justify-content: center; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-sm) var(--page-padding); background: var(--inherent-sand-light); border-top: 1px solid var(--inherent-border); border-bottom: 1px solid var(--inherent-border); } .inh-trust-strip__item { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--inherent-navy); } .inh-trust-strip__item svg { width: 18px; height: 18px; color: var(--inherent-navy); flex-shrink: 0; } /* ============================================================ 15. PRODUCT CREDENTIAL BADGES The yellow circle checkmarks seen in your Amazon creatives ============================================================ */ .inh-cred-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .inh-cred-list__item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--inherent-border); font-size: var(--text-base); color: var(--inherent-navy); font-family: var(--font-body); } .inh-cred-list__item:last-child { border-bottom: none; } .inh-cred-check { width: 28px; height: 28px; border-radius: 50%; background: var(--inherent-yellow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .inh-cred-check svg { width: 14px; height: 14px; color: var(--inherent-navy); } /* ============================================================ 16. ICON GRID (6-up feature grid) ============================================================ */ .inh-icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } @media (max-width: 768px) { .inh-icon-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } } @media (max-width: 480px) { .inh-icon-grid { grid-template-columns: 1fr; } } .inh-icon-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .inh-icon-item__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--inherent-sand-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .inh-icon-item__icon svg { width: 26px; height: 26px; color: var(--inherent-navy); } .inh-icon-item__label { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; color: var(--inherent-navy); line-height: 1.3; } /* ============================================================ 17. COMPARISON TABLE ============================================================ */ .inh-compare { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--inherent-border); } .inh-compare__head { display: grid; grid-template-columns: 2fr 1fr 1fr; background: var(--inherent-navy); padding: 16px 24px; } .inh-compare__head-cell { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--inherent-white); text-align: center; } .inh-compare__head-cell:first-child { text-align: left; } .inh-compare__head-cell--highlight { color: var(--inherent-yellow); } .inh-compare__row { display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 14px 24px; border-bottom: 1px solid var(--inherent-border); align-items: center; } .inh-compare__row:last-child { border-bottom: none; } .inh-compare__row:nth-child(even) { background: var(--inherent-sand-light); } .inh-compare__label { font-size: var(--text-sm); color: var(--inherent-navy); font-family: var(--font-body); } .inh-compare__cell { text-align: center; font-size: 18px; } .inh-compare__yes { color: var(--inherent-navy); } .inh-compare__no { color: #C5C5C5; } /* ============================================================ 18. REVIEW CARDS ============================================================ */ .inh-review-card { background: var(--inherent-white); border: 1px solid var(--inherent-border); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-md); } .inh-review-card__stars { color: var(--inherent-yellow); font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; } .inh-review-card__title { font-family: var(--font-heading); font-size: var(--text-base); color: var(--inherent-navy); margin-bottom: 8px; } .inh-review-card__body { font-size: var(--text-sm); color: var(--inherent-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-sm); font-style: italic; } .inh-review-card__author { font-size: var(--text-xs); color: var(--inherent-steel); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; display: flex; align-items: center; gap: 8px; } .inh-review-card__verified { color: var(--inherent-navy); } /* ============================================================ 19. FAQ ACCORDION ============================================================ */ .inh-faq-item { border-bottom: 1px solid var(--inherent-border); } .inh-faq-item summary { font-family: var(--font-heading); font-size: var(--text-md); color: var(--inherent-navy); padding: 20px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .inh-faq-item summary::-webkit-details-marker { display: none; } .inh-faq-item summary::after { content: '+'; font-size: 24px; color: var(--inherent-yellow); font-weight: 300; flex-shrink: 0; transition: var(--transition-fast); } details[open] .inh-faq-item summary::after, .inh-faq-item details[open] summary::after { content: '−'; } .inh-faq-item p { font-size: var(--text-sm); color: var(--inherent-text-muted); line-height: var(--leading-relaxed); padding-bottom: 20px; } /* ============================================================ 20. SUPPLEMENT FACTS PANEL ============================================================ */ .inh-supfacts { border: 2px solid var(--inherent-navy); border-radius: var(--radius-md); padding: var(--space-md); font-family: var(--font-body); background: var(--inherent-white); } .inh-supfacts__title { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--inherent-navy); border-bottom: 8px solid var(--inherent-navy); padding-bottom: 8px; margin-bottom: 8px; } .inh-supfacts__serving { font-size: var(--text-xs); color: var(--inherent-navy); border-bottom: 4px solid var(--inherent-navy); padding-bottom: 8px; margin-bottom: 8px; } .inh-supfacts__row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--inherent-border); font-size: var(--text-sm); color: var(--inherent-navy); } .inh-supfacts__row strong { font-weight: 700; } .inh-supfacts__footnote { font-size: var(--text-xs); color: var(--inherent-text-muted); margin-top: 8px; line-height: var(--leading-relaxed); } /* ============================================================ 21. RESPONSIVE UTILITIES ============================================================ */ @media (max-width: 768px) { :root { --page-padding: var(--page-padding-sm); } .inh-section { padding: var(--space-xl) var(--page-padding-sm); } .inh-section--sm { padding: var(--space-lg) var(--page-padding-sm); } .inh-section--lg { padding: var(--space-xl) var(--page-padding-sm); } .inh-announce-bar { gap: 16px; padding: 8px var(--page-padding-sm); } } @media (max-width: 480px) { .inh-announce-bar { flex-direction: column; gap: 8px; text-align: center; } } /* ============================================================ 22. PRINT / LEGAL DISCLAIMER Required for supplement products ============================================================ */ .inh-disclaimer { font-size: var(--text-xs); color: var(--inherent-text-muted); line-height: var(--leading-relaxed); font-style: italic; } /* ============================================================ END OF INHERENT GLOBAL CSS Next file: inherent-homepage.liquid ============================================================ */