/** Shopify CDN: Minification failed Line 10:0 Unexpected "{" Line 10:1 Expected identifier but found "%" Line 11:10 Expected identifier but found whitespace Line 12:64 Unexpected "<" Line 14:1 Expected identifier but found "%" **/ {% comment %} Snippet: sg-global-styles.liquid Include this once in your theme.liquid or layout file, inside . Contains shared design tokens and utility classes used across all sg-* sections. {% endcomment %} /* ===== SMARTY GEAR — DESIGN TOKENS ===== */ :root { --sg-midnight: #0A1A2F; --sg-black: #0B0B0B; --sg-gold: #C6A75C; --sg-white: #F5F5F5; --sg-card: #111A2B; --sg-muted: rgba(245,245,245,0.6); --sg-faint: rgba(245,245,245,0.35); --sg-glow: rgba(198,167,92,0.08); --sg-border: rgba(198,167,92,0.08); --sg-border-h: rgba(198,167,92,0.25); } /* ===== SHARED UTILITY CLASSES ===== */ /* Gold label above headings */ .sg-label { font-size: 12px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: var(--sg-gold); margin-bottom: 16px; text-align: center; } /* Section heading */ .sg-section-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 4vw, 42px); font-weight: 600; text-align: center; margin-bottom: 16px; color: var(--sg-white); line-height: 1.2; } /* Section subheading */ .sg-section-sub { font-size: 17px; font-weight: 300; text-align: center; color: #fff; max-width: 640px; margin: 0 auto 60px; line-height: 1.7; } /* Gold divider bar */ .sg-divider { width: 60px; height: 1px; background: var(--sg-gold); margin: 0 auto 24px; } /* Buttons */ .sg-btn { display: inline-block; font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; padding: 17px 40px; border: none; cursor: pointer; text-decoration: none; transition: all .4s; } .sg-btn--gold { background: var(--sg-gold); color: var(--sg-black); } .sg-btn--gold:hover { background: #D4B76A; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(198,167,92,0.3); } .sg-btn--outline { border: 1px solid rgba(198,167,92,0.5); background: transparent; color: var(--sg-white); } .sg-btn--outline:hover { border-color: var(--sg-gold); color: var(--sg-gold); background: var(--sg-glow); } /* Card link arrow */ .sg-card-link { font-size: 13px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sg-gold); display: inline-flex; align-items: center; gap: 8px; transition: gap .3s; text-decoration: none; } .sg-card-link:hover { gap: 14px; }