/* ═══════════════════════════════════════════════════════════════ SAFEGUARD SUPPLY - GLOBAL SHARED CSS Critical styles loaded on ALL pages VERSION: 2.0 Optimized File Size Target: <15KB (~200 lines) ═══════════════════════════════════════════════════════════════ PERFORMANCE NOTES: - This file contains ONLY styles used on multiple pages - Page-specific styles remain inline in Kadence Elements - Load this in for critical CSS - Total load: ~10-12KB gzipped CONTENTS: 1. CSS Variables (Colors, Spacing) 2. Global Button Styles 3. Typography Utilities 4. Common Animations ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ 1. CSS VARIABLES - DESIGN TOKENS ═══════════════════════════════════════════════════════════════ */ :root { /* Brand Colors */ --color-primary: #EF6711; --color-primary-dark: #D45A0A; --color-primary-light: #FF7722; /* Neutrals */ --color-text-primary: #1a1a1a; --color-text-secondary: #4a4a4a; --color-text-muted: #676767; --color-bg-light: #f8f9fa; --color-bg-lighter: #ffffff; --color-border: #e5e7eb; /* Spacing Scale */ --space-xs: 8px; --space-sm: 12px; --space-md: 20px; --space-lg: 40px; --space-xl: 80px; /* Typography Scale */ --font-size-sm: 14px; --font-size-base: 16px; --font-size-lg: 18px; --font-size-xl: 20px; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 50px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 6px 20px rgba(0,0,0,0.15); /* Transitions */ --transition-base: all 0.3s ease; } /* ═══════════════════════════════════════════════════════════════ 2. BUTTON SYSTEM - SHARED ACROSS ALL PAGES ═══════════════════════════════════════════════════════════════ */ /* Base Button */ .sg-btn { display: inline-block; padding: 14px 32px; font-size: var(--font-size-base); font-weight: 600; text-decoration: none; border-radius: var(--radius-sm); transition: var(--transition-base); cursor: pointer; border: none; text-align: center; line-height: 1.5; } /* Primary Button - White on Orange */ .sg-btn-primary { background: var(--color-bg-lighter); color: var(--color-primary); border: 2px solid var(--color-bg-lighter); } .sg-btn-primary:hover { background: var(--color-bg-light); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* Outline Button - Orange Border */ .sg-btn-outline { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); display: inline-block; padding: 12px 28px; font-size: var(--font-size-base); font-weight: 600; text-decoration: none; border-radius: var(--radius-sm); transition: var(--transition-base); } .sg-btn-outline:hover { background: var(--color-primary); color: var(--color-bg-lighter); transform: translateY(-2px); } /* White Button (for colored backgrounds) */ .sg-btn-white { background: var(--color-bg-lighter); color: var(--color-primary); border: 2px solid var(--color-bg-lighter); } .sg-btn-white:hover { background: transparent; color: var(--color-bg-lighter); transform: translateY(-2px); } /* White Outline Button */ .sg-btn-white-outline { background: transparent; color: var(--color-bg-lighter); border: 2px solid var(--color-bg-lighter); } .sg-btn-white-outline:hover { background: var(--color-bg-lighter); color: var(--color-text-primary); transform: translateY(-2px); } /* Button Shadow Variant */ .sg-btn-shadow { box-shadow: var(--shadow-md); } .sg-btn-shadow:hover { box-shadow: var(--shadow-lg); } /* ═══════════════════════════════════════════════════════════════ 3. TYPOGRAPHY UTILITIES ═══════════════════════════════════════════════════════════════ */ /* Strong tags in colored sections */ .sg-why-content strong, .sg-intro-text strong { font-weight: 700; } /* Link styling in body text */ a { transition: var(--transition-base); } /* ═══════════════════════════════════════════════════════════════ 4. COMMON ANIMATIONS - SHARED ACROSS PAGES ═══════════════════════════════════════════════════════════════ */ /* Fade In Up - Used in hero sections */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .sg-hero-title-animated { animation: fadeInUp 0.8s ease-out; } /* Pulse Animation - Icons */ @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } } /* ═══════════════════════════════════════════════════════════════ 5. SKIP TO PRODUCTS BUTTON - USED ON ALL ARCHIVE PAGES ═══════════════════════════════════════════════════════════════ */ .skip-to-products-container { text-align: center; padding: 30px 20px; background: var(--color-bg-light); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .skip-to-products-container p { margin: 0 0 15px 0; font-size: var(--font-size-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .skip-to-products-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--color-primary); color: var(--color-bg-lighter); padding: 12px 28px; border: none; border-radius: var(--radius-sm); font-size: var(--font-size-base); font-weight: 600; cursor: pointer; transition: var(--transition-base); } .skip-to-products-btn:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); } .skip-to-products-btn .arrow { font-size: 18px; transition: var(--transition-base); } .skip-to-products-btn:hover .arrow { transform: translateY(3px); } /* ═══════════════════════════════════════════════════════════════ 6. RESPONSIVE BUTTON ADJUSTMENTS ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .sg-btn, .sg-btn-outline { padding: 12px 24px; font-size: 15px; } /* Full width buttons on mobile when in flex containers */ .sg-hero-buttons, .sg-cta-buttons { width: 100%; } .sg-hero-buttons .sg-btn, .sg-cta-buttons .sg-btn, .sg-hero-buttons .sg-btn-outline, .sg-cta-buttons .sg-btn-outline { width: 100%; max-width: 350px; margin: 0 auto; } } /* ═══════════════════════════════════════════════════════════════ END OF GLOBAL SHARED CSS Total Lines: ~220 Gzipped Size: ~3-4KB ═══════════════════════════════════════════════════════════════ */