/** Shopify CDN: Minification failed Line 21:2 All "@import" rules must come first **/ /* ── GLOW EQUESTRIAN HOMEPAGE STYLES ── */ :root { --ge-navy: #151b2b; --ge-blue: #1A6B9A; --ge-blue-light: #4A90C4; --ge-blue-pale: #E8F4FA; --ge-white: #ffffff; --ge-cream: #faf8f5; --ge-gray: #888888; --ge-gold: #c9a84c; --ge-font-display: 'Cormorant Garamond', Georgia, serif; --ge-font-body: 'Jost', sans-serif; } /* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@200;300;400;500&display=swap'); html { scroll-behavior: smooth; } /* Reset for this section */ .ge-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .ge-homepage * { box-sizing: border-box; } .ge-homepage { overflow-x: hidden; } /* ── HERO ── */ .ge-hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: var(--ge-navy); overflow: hidden; margin-top: 0; } .header-wrapper, .shopify-section-header-sticky, .shopify-section-header-scroll-up { z-index: 9999 !important; } /* Interior page top offset — clears the absolutely-positioned transparent header. This theme does NOT add .template-* classes to , so we target the content wrappers that actually exist in the DOM on each page type. The homepage's hero already has its own 140px top padding, so #MainContent only gets the offset when its first child isn't the hero. */ #MainContent { margin-top: 80px !important; } /* Homepage exception: the hero section is the first child of #MainContent and already handles its own top spacing. Remove the global offset when the hero is present. Includes the Guide page hero (.gg-hero) and the product page hero wrapper (.gph-page-wrap) as well. */ #MainContent:has(.ge-hero), #MainContent:has(.gg-hero), #MainContent:has(.gph-page-wrap) { margin-top: 0 !important; } /* Policy pages: Shopify's template has its own title spacing built in, so override the global rule with a smaller offset. Selector chained through #MainContent for specificity against theme defaults. */ #MainContent .shopify-policy__container { margin-top: 40px !important; } #MainContent:has(.shopify-policy__container) { margin-top: 0 !important; } /* Mobile: halve the offsets — the header is shorter on small screens and the desktop values produce excessive whitespace. */ @media (max-width: 749px) { #MainContent { margin-top: 40px !important; } /* Homepage exception still applies on mobile — hero handles its own spacing. Includes the Guide page hero (.gg-hero) and product page (.gph-page-wrap) as well. */ #MainContent:has(.ge-hero), #MainContent:has(.gg-hero), #MainContent:has(.gph-page-wrap) { margin-top: 0 !important; } #MainContent .shopify-policy__container { margin-top: 20px !important; } /* Shopify's policy template gives its title generous top spacing that looks proportionally too large on mobile. Tighten it here. */ #MainContent .shopify-policy__title { padding-top: 0 !important; margin-top: 0 !important; } #MainContent .shopify-policy__title h1 { margin-top: 0 !important; padding-top: 0 !important; } } .ge-hero-bg { position: absolute; inset: 0; background: linear-gradient(110deg, #0d1520 0%, #151b2b 40%, #1a2840 100%); } .ge-hero-bg-image { position: absolute; inset: 0; background-size: cover; background-position: center right; background-repeat: no-repeat; } /* Desktop image — shown by default, hidden on mobile */ .ge-hero-bg-desktop { display: block !important; } .ge-hero-bg-mobile { display: none !important; } @media (max-width: 749px) { .ge-hero-bg-desktop { display: none !important; } .ge-hero-bg-mobile { display: block !important; background-position: center top; } } .ge-hero-overlay { position: absolute !important; inset: 0 !important; } .ge-hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 140px 40px 80px; width: 100%; } .ge-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(74,144,196,0.15); border: 1px solid rgba(74,144,196,0.3); border-radius: 40px; padding: 6px 16px; font-family: var(--ge-font-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ge-blue-light); margin-bottom: 28px; } .ge-hero-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ge-blue-light); flex-shrink: 0; } .ge-hero-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } .ge-stars { color: var(--ge-gold); font-size: 16px; letter-spacing: 2px; } .ge-rating-text { font-family: var(--ge-font-body); font-size: 13px; color: rgba(255,255,255,0.55); font-weight: 300; letter-spacing: 0.05em; } .ge-hero h1 { font-family: var(--ge-font-display); font-size: clamp(42px, 6vw, 80px); font-weight: 300; color: var(--ge-white); line-height: 1.05; margin: 0 0 24px; max-width: 680px; } .ge-hero h1 em { font-style: italic; color: var(--ge-gold); } .ge-hero-sub { font-family: var(--ge-font-body); font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.62); line-height: 1.75; max-width: 480px; margin-bottom: 40px; letter-spacing: 0.02em; } .ge-hero-trust { display: flex; gap: 28px; margin-bottom: 40px; flex-wrap: wrap; } .ge-trust-item { display: flex; align-items: center; gap: 8px; font-family: var(--ge-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); } .ge-trust-item::before { content: '✦'; color: var(--ge-blue-light); font-size: 9px; } .ge-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; } /* ── BUTTONS ── */ .ge-btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--ge-blue); color: var(--ge-white); text-decoration: none; padding: 15px 34px; font-family: var(--ge-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; border: none; cursor: pointer; transition: background 0.25s, transform 0.2s; } .ge-btn-primary:hover { background: var(--ge-blue-light); color: var(--ge-white); transform: translateY(-1px); } .ge-btn-secondary { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: rgba(255,255,255,0.65); text-decoration: none; padding: 15px 34px; font-family: var(--ge-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; transition: all 0.25s; } .ge-btn-secondary:hover { border-color: rgba(255,255,255,0.5); color: var(--ge-white); } .ge-btn-outline { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--ge-navy); text-decoration: none; padding: 14px 32px; font-family: var(--ge-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--ge-navy); cursor: pointer; transition: all 0.25s; } .ge-btn-outline:hover { background: var(--ge-navy); color: var(--ge-white); } .ge-btn-card { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ge-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ge-navy); text-decoration: none; border-bottom: 1px solid var(--ge-navy); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; } .ge-btn-card:hover { color: var(--ge-blue); border-color: var(--ge-blue); } /* ── PRODUCT CARDS ── */ .ge-products-section { padding: 80px 40px; } .ge-section-eyebrow { font-family: var(--ge-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ge-blue); text-align: center; margin-bottom: 16px; } .ge-section-title { font-family: var(--ge-font-display); font-size: clamp(32px, 4vw, 52px); font-weight: 300; text-align: center; color: var(--ge-navy); margin-bottom: 56px; line-height: 1.1; } .ge-section-title em { font-style: italic; color: var(--ge-gold); } .ge-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; } .ge-product-card { background: var(--ge-white); border: 1px solid rgba(21,27,43,0.08); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; } .ge-product-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(21,27,43,0.1); } .ge-card-image { width: 100%; aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--ge-navy); } .ge-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .ge-card-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--ge-font-body); font-size: 12px; letter-spacing: 0.1em; color: rgba(255,255,255,0.2); background: linear-gradient(135deg, #151b2b, #1a2840); } .ge-card-badge { position: absolute; top: 16px; left: 16px; background: var(--ge-gold); color: var(--ge-navy); font-family: var(--ge-font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 12px; z-index: 1; } .ge-card-badge-navy { background: var(--ge-navy); color: var(--ge-white); } .ge-card-badge-blue { background: var(--ge-blue); color: var(--ge-white); } .ge-card-body { padding: 24px; } .ge-card-eyebrow { font-family: var(--ge-font-body); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ge-blue); margin-bottom: 8px; } .ge-product-card h3 { font-family: var(--ge-font-display); font-size: 26px; font-weight: 300; color: var(--ge-navy); margin: 0 0 12px; line-height: 1.1; } .ge-product-card p { font-family: var(--ge-font-body); font-size: 13px; font-weight: 300; color: #666; line-height: 1.65; margin-bottom: 20px; } .ge-view-all { text-align: center; margin-top: 40px; } /* ── MARQUEE ── */ .ge-marquee-section { padding: 18px 0; overflow: hidden; } .ge-marquee-track { display: flex; animation: ge-marquee 32s linear infinite; width: max-content; } .ge-marquee-item { display: flex; align-items: center; gap: 20px; padding: 0 28px; white-space: nowrap; font-family: var(--ge-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.45); } .ge-marquee-dot { color: var(--ge-blue-light); font-size: 8px; } @keyframes ge-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── FEATURE SECTIONS ── */ .ge-features-wrapper { padding: 100px 40px; max-width: 1200px; margin: 0 auto; } .ge-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 120px; } .ge-feature-row:last-child { margin-bottom: 0; } .ge-feature-row.ge-reverse { direction: rtl; } .ge-feature-row.ge-reverse > * { direction: ltr; } .ge-feature-image { aspect-ratio: 4/5; position: relative; overflow: hidden; background: var(--ge-navy); } .ge-feature-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .ge-feature-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--ge-font-body); font-size: 12px; letter-spacing: 0.1em; color: rgba(255,255,255,0.2); background: linear-gradient(135deg, #151b2b, #1a2840); } .ge-feature-badge { position: absolute; top: 20px; left: 20px; background: var(--ge-gold); color: var(--ge-navy); font-family: var(--ge-font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; padding: 5px 14px; z-index: 1; } .ge-feature-content .ge-eyebrow { font-family: var(--ge-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ge-blue); margin-bottom: 16px; } .ge-feature-content h2 { font-family: var(--ge-font-display); font-size: clamp(34px, 4vw, 54px); font-weight: 300; color: var(--ge-navy); line-height: 1.05; margin: 0 0 20px; } .ge-feature-content h2 em { font-style: italic; color: var(--ge-gold); } .ge-feature-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .ge-feature-rating .ge-stars { font-size: 14px; } .ge-feature-rating .ge-count { font-family: var(--ge-font-body); font-size: 13px; color: var(--ge-gray); font-weight: 300; } .ge-feature-content p { font-family: var(--ge-font-body); font-size: 15px; font-weight: 300; color: #555; line-height: 1.8; margin-bottom: 28px; } .ge-feature-bullets { list-style: none; margin: 0 0 36px; padding: 0; } .ge-feature-bullets li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--ge-font-body); font-size: 14px; font-weight: 300; color: var(--ge-navy); margin-bottom: 12px; line-height: 1.55; } .ge-feature-bullets li::before { content: '✦'; color: var(--ge-blue); font-size: 9px; margin-top: 5px; flex-shrink: 0; } .ge-feature-meta { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 24px; } .ge-feature-meta-item { font-family: var(--ge-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ge-gray); display: flex; align-items: center; gap: 6px; } .ge-feature-meta-item::before { content: '—'; color: var(--ge-blue-light); } /* ── STACK SECTION ── */ .ge-stack-section { padding: 100px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; overflow: hidden; } .ge-stack-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(26,107,154,0.15) 0%, transparent 70%); pointer-events: none; } .ge-stack-content { position: relative; z-index: 1; max-width: 700px; } .ge-stack-section .ge-eyebrow { font-family: var(--ge-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ge-blue-light); margin-bottom: 16px; } .ge-stack-section h2 { font-family: var(--ge-font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 300; color: var(--ge-white); margin: 0 0 24px; line-height: 1.05; } .ge-stack-section h2 em { font-style: italic; color: var(--ge-gold); } .ge-stack-section p { font-family: var(--ge-font-body); font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.58); line-height: 1.8; margin-bottom: 0; } .ge-stack-image { position: relative; z-index: 1; width: 100%; max-width: 900px; aspect-ratio: 16/7; overflow: hidden; margin: 48px auto; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); } .ge-stack-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .ge-stack-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--ge-font-body); font-size: 12px; letter-spacing: 0.1em; color: rgba(255,255,255,0.18); } .ge-stack-meta { position: relative; z-index: 1; display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin-top: 32px; } .ge-stack-meta-item { font-family: var(--ge-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.35); display: flex; align-items: center; gap: 8px; } .ge-stack-meta-item::before { content: '✦'; color: var(--ge-blue-light); font-size: 8px; } /* ── STATS ── */ .ge-stats-section { padding: 60px 40px; } .ge-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1000px; margin: 0 auto; text-align: center; } .ge-stat-number { font-family: var(--ge-font-display); font-size: 48px; font-weight: 300; color: var(--ge-white); line-height: 1; margin-bottom: 8px; } .ge-stat-label { font-family: var(--ge-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.62); } /* ── STATS EYEBROW ── */ .ge-stats-eyebrow { font-family: var(--ge-font-body); font-size: 12px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.5); text-align: center; margin-bottom: 40px; } /* ── UNCOMFORTABLE TRUTH ── */ .ge-truth-section { padding: 100px 40px; } .ge-truth-inner { max-width: 1000px; margin: 0 auto; } .ge-truth-header { text-align: center; margin-bottom: 64px; } .ge-truth-headline { font-family: var(--ge-font-display); font-size: clamp(32px, 4vw, 52px); font-weight: 300; color: var(--ge-white); line-height: 1.1; margin: 16px 0 24px; } .ge-truth-headline em { font-style: italic; color: var(--ge-gold); } .ge-truth-intro { font-family: var(--ge-font-body); font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.55); line-height: 1.8; max-width: 700px; margin: 0 auto 48px; } .ge-truth-stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; margin-bottom: 0; } .ge-truth-stat { text-align: center; } .ge-truth-stat-number { font-family: var(--ge-font-display); font-size: 48px; font-weight: 300; color: var(--ge-blue-light); line-height: 1; margin-bottom: 8px; } .ge-truth-stat-label { font-family: var(--ge-font-body); font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.45); letter-spacing: 0.05em; } .ge-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; } .ge-comparison-col { border-radius: 8px; padding: 32px; } .ge-comparison-conventional { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); } .ge-comparison-glow { background: rgba(26,107,154,0.12); border: 1px solid rgba(74,144,196,0.25); } .ge-comparison-col-header { font-family: var(--ge-font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 24px; display: flex; align-items: center; gap: 10px; } .ge-comparison-glow .ge-comparison-col-header { color: var(--ge-blue-light); } .ge-comparison-icon { font-size: 16px; color: rgba(255,255,255,0.3); } .ge-comparison-icon-check { color: var(--ge-blue-light); } .ge-comparison-list { list-style: none; padding: 0; margin: 0; } .ge-comparison-list li { font-family: var(--ge-font-body); font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.6; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; gap: 10px; align-items: flex-start; } .ge-comparison-list li::before { content: '—'; color: rgba(255,255,255,0.2); flex-shrink: 0; } .ge-comparison-glow .ge-comparison-list li::before { content: '✦'; color: var(--ge-blue-light); } .ge-comparison-glow .ge-comparison-list li { color: rgba(255,255,255,0.8); } .ge-truth-callout { font-family: var(--ge-font-display); font-size: 20px; font-weight: 300; font-style: italic; color: rgba(255,255,255,0.6); margin-bottom: 28px; } @media (max-width: 749px) { .ge-truth-section { padding: 60px 24px; } .ge-comparison-grid { grid-template-columns: 1fr; } .ge-truth-stats { gap: 32px; } .ge-truth-stat-number { font-size: 36px; } } /* ──────────────────────────────────────────────────────────────────── GLOW STANDARD All .ge-standard-* styles are defined inside sections/glow-standard.liquid