/** * MG Design System - Complete Utilities * Elementor-compatible spacing, typography, and color utilities * * @version 1.0.2 * @author MG Leadbuilder * @updated 2025-10-28 * * TABLE OF CONTENTS: * 1. Layout & Container Padding (Respects Elementor) * 2. Typography Classes (Elementor Tokens) * 3. Color Classes (Elementor Tokens) * 4. Gap Utilities * 5. Padding Utilities * 6. Section Spacing (Mobile-Optimized) * 7. Header Utilities * 8. Reset Utilities * 9. Quick Reference Guide */ /* =================================== 1. LAYOUT & CONTAINER PADDING Smart defaults that ALWAYS respect Elementor manual settings Uses :where() for zero specificity - inline styles win =================================== */ :where(.elementor-section), :where(.e-con), :where(.e-container), :where(.elementor-top-section) { padding-left: clamp(1rem, 3vw, 2rem); padding-right: clamp(1rem, 3vw, 2rem); } @media (max-width: 767px) { :where(.elementor-section), :where(.e-con), :where(.e-container) { padding-left: 1rem; padding-right: 1rem; } } @media (min-width: 768px) and (max-width: 1024px) { :where(.elementor-section), :where(.e-con), :where(.e-container) { padding-left: 1.5rem; padding-right: 1.5rem; } } /* =================================== 2. TYPOGRAPHY CLASSES Auto-generated from Elementor Global Typography =================================== */ /* System Typography */ .mg-primary { font-family: var(--e-global-typography-primary-font-family); font-size: var(--e-global-typography-primary-font-size); font-weight: var(--e-global-typography-primary-font-weight); line-height: var(--e-global-typography-primary-line-height); letter-spacing: var(--e-global-typography-primary-letter-spacing); } .mg-secondary { font-family: var(--e-global-typography-secondary-font-family); font-size: var(--e-global-typography-secondary-font-size); font-weight: var(--e-global-typography-secondary-font-weight); line-height: var(--e-global-typography-secondary-line-height); letter-spacing: var(--e-global-typography-secondary-letter-spacing); } .mg-text { font-family: var(--e-global-typography-text-font-family); font-size: var(--e-global-typography-text-font-size); font-weight: var(--e-global-typography-text-font-weight); line-height: var(--e-global-typography-text-line-height); letter-spacing: var(--e-global-typography-text-letter-spacing); } .mg-accent { font-family: var(--e-global-typography-accent-font-family); font-size: var(--e-global-typography-accent-font-size); font-weight: var(--e-global-typography-accent-font-weight); line-height: var(--e-global-typography-accent-line-height); letter-spacing: var(--e-global-typography-accent-letter-spacing); } /* Headings */ .mg-h1-heading { font-family: var(--e-global-typography-ac5d448-font-family); font-size: var(--e-global-typography-ac5d448-font-size); font-weight: var(--e-global-typography-ac5d448-font-weight); line-height: var(--e-global-typography-ac5d448-line-height); letter-spacing: var(--e-global-typography-ac5d448-letter-spacing); } .mg-h2-heading { font-family: var(--e-global-typography-db81887-font-family); font-size: var(--e-global-typography-db81887-font-size); font-weight: var(--e-global-typography-db81887-font-weight); line-height: var(--e-global-typography-db81887-line-height); letter-spacing: var(--e-global-typography-db81887-letter-spacing); } .mg-h3-heading { font-family: var(--e-global-typography-1218e41-font-family); font-size: var(--e-global-typography-1218e41-font-size); font-weight: var(--e-global-typography-1218e41-font-weight); line-height: var(--e-global-typography-1218e41-line-height); letter-spacing: var(--e-global-typography-1218e41-letter-spacing); } .mg-h4-heading { font-family: var(--e-global-typography-f11f36d-font-family); font-size: var(--e-global-typography-f11f36d-font-size); font-weight: var(--e-global-typography-f11f36d-font-weight); line-height: var(--e-global-typography-f11f36d-line-height); letter-spacing: var(--e-global-typography-f11f36d-letter-spacing); } .mg-h5-heading { font-family: var(--e-global-typography-e53e1e3-font-family); font-size: var(--e-global-typography-e53e1e3-font-size); font-weight: var(--e-global-typography-e53e1e3-font-weight); line-height: var(--e-global-typography-e53e1e3-line-height); letter-spacing: var(--e-global-typography-e53e1e3-letter-spacing); } .mg-h6-heading { font-family: var(--e-global-typography-1409b2b-font-family); font-size: var(--e-global-typography-1409b2b-font-size); font-weight: var(--e-global-typography-1409b2b-font-weight); line-height: var(--e-global-typography-1409b2b-line-height); letter-spacing: var(--e-global-typography-1409b2b-letter-spacing); } /* Display Headings */ .mg-xl-heading { font-family: var(--e-global-typography-d331b24-font-family); font-size: var(--e-global-typography-d331b24-font-size); font-weight: var(--e-global-typography-d331b24-font-weight); line-height: var(--e-global-typography-d331b24-line-height); letter-spacing: var(--e-global-typography-d331b24-letter-spacing); } .mg-hero-headline { font-family: var(--e-global-typography-525ef95-font-family); font-size: var(--e-global-typography-525ef95-font-size); font-weight: var(--e-global-typography-525ef95-font-weight); line-height: var(--e-global-typography-525ef95-line-height); letter-spacing: var(--e-global-typography-525ef95-letter-spacing); } .mg-page-hero-headline { font-family: var(--e-global-typography-a12161a-font-family); font-size: var(--e-global-typography-a12161a-font-size); font-weight: var(--e-global-typography-a12161a-font-weight); line-height: var(--e-global-typography-a12161a-line-height); letter-spacing: var(--e-global-typography-a12161a-letter-spacing); } .mg-section-headline { font-family: var(--e-global-typography-323b6bb-font-family); font-size: var(--e-global-typography-323b6bb-font-size); font-weight: var(--e-global-typography-323b6bb-font-weight); line-height: var(--e-global-typography-323b6bb-line-height); letter-spacing: var(--e-global-typography-323b6bb-letter-spacing); } .mg-widget-heading { font-family: var(--e-global-typography-da119c4-font-family); font-size: var(--e-global-typography-da119c4-font-size); font-weight: var(--e-global-typography-da119c4-font-weight); line-height: var(--e-global-typography-da119c4-line-height); letter-spacing: var(--e-global-typography-da119c4-letter-spacing); } /* Body Text */ .mg-body-text { font-family: var(--e-global-typography-899c25a-font-family); font-size: var(--e-global-typography-899c25a-font-size); font-weight: var(--e-global-typography-899c25a-font-weight); line-height: var(--e-global-typography-899c25a-line-height); letter-spacing: var(--e-global-typography-899c25a-letter-spacing); } .mg-body-text-bold { font-family: var(--e-global-typography-e58e3ed-font-family); font-size: var(--e-global-typography-e58e3ed-font-size); font-weight: var(--e-global-typography-e58e3ed-font-weight); line-height: var(--e-global-typography-e58e3ed-line-height); letter-spacing: var(--e-global-typography-e58e3ed-letter-spacing); } .mg-body-text-underlined { font-family: var(--e-global-typography-d78d4b7-font-family); font-size: var(--e-global-typography-d78d4b7-font-size); font-weight: var(--e-global-typography-d78d4b7-font-weight); line-height: var(--e-global-typography-d78d4b7-line-height); letter-spacing: var(--e-global-typography-d78d4b7-letter-spacing); } .mg-body-text-small { font-family: var(--e-global-typography-a2f724f-font-family); font-size: var(--e-global-typography-a2f724f-font-size); font-weight: var(--e-global-typography-a2f724f-font-weight); line-height: var(--e-global-typography-a2f724f-line-height); letter-spacing: var(--e-global-typography-a2f724f-letter-spacing); } .mg-body-text-small-bold { font-family: var(--e-global-typography-7c9da9f-font-family); font-size: var(--e-global-typography-7c9da9f-font-size); font-weight: var(--e-global-typography-7c9da9f-font-weight); line-height: var(--e-global-typography-7c9da9f-line-height); letter-spacing: var(--e-global-typography-7c9da9f-letter-spacing); } .mg-body-text-small-underline { font-family: var(--e-global-typography-5dc6010-font-family); font-size: var(--e-global-typography-5dc6010-font-size); font-weight: var(--e-global-typography-5dc6010-font-weight); line-height: var(--e-global-typography-5dc6010-line-height); letter-spacing: var(--e-global-typography-5dc6010-letter-spacing); } .mg-body-text-large { font-family: var(--e-global-typography-d3ea2f2-font-family); font-size: var(--e-global-typography-d3ea2f2-font-size); font-weight: var(--e-global-typography-d3ea2f2-font-weight); line-height: var(--e-global-typography-d3ea2f2-line-height); letter-spacing: var(--e-global-typography-d3ea2f2-letter-spacing); } .mg-body-text-large-bold { font-family: var(--e-global-typography-e93f7d3-font-family); font-size: var(--e-global-typography-e93f7d3-font-size); font-weight: var(--e-global-typography-e93f7d3-font-weight); line-height: var(--e-global-typography-e93f7d3-line-height); letter-spacing: var(--e-global-typography-e93f7d3-letter-spacing); } .mg-body-text-large-underlined { font-family: var(--e-global-typography-c22b3bd-font-family); font-size: var(--e-global-typography-c22b3bd-font-size); font-weight: var(--e-global-typography-c22b3bd-font-weight); line-height: var(--e-global-typography-c22b3bd-line-height); letter-spacing: var(--e-global-typography-c22b3bd-letter-spacing); } .mg-body-text-xl { font-family: var(--e-global-typography-ea18575-font-family); font-size: var(--e-global-typography-ea18575-font-size); font-weight: var(--e-global-typography-ea18575-font-weight); line-height: var(--e-global-typography-ea18575-line-height); letter-spacing: var(--e-global-typography-ea18575-letter-spacing); } .mg-body-text-xl-bold { font-family: var(--e-global-typography-eaff138-font-family); font-size: var(--e-global-typography-eaff138-font-size); font-weight: var(--e-global-typography-eaff138-font-weight); line-height: var(--e-global-typography-eaff138-line-height); letter-spacing: var(--e-global-typography-eaff138-letter-spacing); } .mg-body-text-xl-underlined { font-family: var(--e-global-typography-56e2c23-font-family); font-size: var(--e-global-typography-56e2c23-font-size); font-weight: var(--e-global-typography-56e2c23-font-weight); line-height: var(--e-global-typography-56e2c23-line-height); letter-spacing: var(--e-global-typography-56e2c23-letter-spacing); } .mg-body-text-xs { font-family: var(--e-global-typography-a23c8f1-font-family); font-size: var(--e-global-typography-a23c8f1-font-size); font-weight: var(--e-global-typography-a23c8f1-font-weight); line-height: var(--e-global-typography-a23c8f1-line-height); letter-spacing: var(--e-global-typography-a23c8f1-letter-spacing); } .mg-body-text-xs-bold { font-family: var(--e-global-typography-3cb844c-font-family); font-size: var(--e-global-typography-3cb844c-font-size); font-weight: var(--e-global-typography-3cb844c-font-weight); line-height: var(--e-global-typography-3cb844c-line-height); letter-spacing: var(--e-global-typography-3cb844c-letter-spacing); } .mg-body-text-xs-underlined { font-family: var(--e-global-typography-ebd87f7-font-family); font-size: var(--e-global-typography-ebd87f7-font-size); font-weight: var(--e-global-typography-ebd87f7-font-weight); line-height: var(--e-global-typography-ebd87f7-line-height); letter-spacing: var(--e-global-typography-ebd87f7-letter-spacing); } /* Subtitles & Intros */ .mg-hero-subtitle { font-family: var(--e-global-typography-f9dbe14-font-family); font-size: var(--e-global-typography-f9dbe14-font-size); font-weight: var(--e-global-typography-f9dbe14-font-weight); line-height: var(--e-global-typography-f9dbe14-line-height); letter-spacing: var(--e-global-typography-f9dbe14-letter-spacing); } .mg-page-intro-text { font-family: var(--e-global-typography-3cb32a3-font-family); font-size: var(--e-global-typography-3cb32a3-font-size); font-weight: var(--e-global-typography-3cb32a3-font-weight); line-height: var(--e-global-typography-3cb32a3-line-height); letter-spacing: var(--e-global-typography-3cb32a3-letter-spacing); } /* UI Elements */ .mg-uppercase-text { font-family: var(--e-global-typography-bb096ff-font-family); font-size: var(--e-global-typography-bb096ff-font-size); font-weight: var(--e-global-typography-bb096ff-font-weight); line-height: var(--e-global-typography-bb096ff-line-height); letter-spacing: var(--e-global-typography-bb096ff-letter-spacing); } .mg-navigation-text { font-family: var(--e-global-typography-68a2e4f-font-family); font-size: var(--e-global-typography-68a2e4f-font-size); font-weight: var(--e-global-typography-68a2e4f-font-weight); line-height: var(--e-global-typography-68a2e4f-line-height); letter-spacing: var(--e-global-typography-68a2e4f-letter-spacing); } .mg-button-text { font-family: var(--e-global-typography-087c764-font-family); font-size: var(--e-global-typography-087c764-font-size); font-weight: var(--e-global-typography-087c764-font-weight); line-height: var(--e-global-typography-087c764-line-height); letter-spacing: var(--e-global-typography-087c764-letter-spacing); } .mg-button-text-large { font-family: var(--e-global-typography-8977862-font-family); font-size: var(--e-global-typography-8977862-font-size); font-weight: var(--e-global-typography-8977862-font-weight); line-height: var(--e-global-typography-8977862-line-height); letter-spacing: var(--e-global-typography-8977862-letter-spacing); } /* =================================== 3. COLOR CLASSES Auto-generated from Elementor Global Colors =================================== */ /* Base Colors */ .mg-color-primary-base { color: var(--e-global-color-primary, #155f6f); } .mg-bg-primary-base { background-color: var(--e-global-color-primary, #155f6f); } .mg-color-secondary-base { color: var(--e-global-color-secondary, #6ca1ac); } .mg-bg-secondary-base { background-color: var(--e-global-color-secondary, #6ca1ac); } .mg-color-accent-base { color: var(--e-global-color-accent, #ffa200); } .mg-bg-accent-base { background-color: var(--e-global-color-accent, #ffa200); } .mg-color-text-base { color: var(--e-global-color-text, #1f2937); } .mg-bg-text-base { background-color: var(--e-global-color-text, #1f2937); } /* Primary Scale */ .mg-color-primary-lightest { color: var(--e-global-color-d19a246, #cceef5); } .mg-bg-primary-lightest { background-color: var(--e-global-color-d19a246, #cceef5); } .mg-color-primary-lighter { color: var(--e-global-color-f41606c, #73d0e4); } .mg-bg-primary-lighter { background-color: var(--e-global-color-f41606c, #73d0e4); } .mg-color-primary-light { color: var(--e-global-color-086bb7d, #26aac8); } .mg-bg-primary-light { background-color: var(--e-global-color-086bb7d, #26aac8); } .mg-color-primary-dark { color: var(--e-global-color-581507c, #155e6e); } .mg-bg-primary-dark { background-color: var(--e-global-color-581507c, #155e6e); } .mg-color-primary-darker { color: var(--e-global-color-768fa73, #0e414c); } .mg-bg-primary-darker { background-color: var(--e-global-color-768fa73, #0e414c); } .mg-color-primary-darkest { color: var(--e-global-color-d6ec43d, #08232a); } .mg-bg-primary-darkest { background-color: var(--e-global-color-d6ec43d, #08232a); } /* Secondary Scale */ .mg-color-secondary-lightest { color: var(--e-global-color-1343ed6, #e2ecee); } .mg-bg-secondary-lightest { background-color: var(--e-global-color-1343ed6, #e2ecee); } .mg-color-secondary-lighter { color: var(--e-global-color-90c06ea, #bad3d8); } .mg-bg-secondary-lighter { background-color: var(--e-global-color-90c06ea, #bad3d8); } .mg-color-secondary-light { color: var(--e-global-color-771302e, #93bac2); } .mg-bg-secondary-light { background-color: var(--e-global-color-771302e, #93bac2); } .mg-color-secondary-dark { color: var(--e-global-color-df060b8, #548a96); } .mg-bg-secondary-dark { background-color: var(--e-global-color-df060b8, #548a96); } .mg-color-secondary-darker { color: var(--e-global-color-ecd1a29, #446f79); } .mg-bg-secondary-darker { background-color: var(--e-global-color-ecd1a29, #446f79); } .mg-color-secondary-darkest { color: var(--e-global-color-ad05ba2, #33545b); } .mg-bg-secondary-darkest { background-color: var(--e-global-color-ad05ba2, #33545b); } /* Accent Scale */ .mg-color-accent-lightest { color: var(--e-global-color-f7f61b6, #ffedcf); } .mg-bg-accent-lightest { background-color: var(--e-global-color-f7f61b6, #ffedcf); } .mg-color-accent-lighter { color: var(--e-global-color-5b41860, #ffd48a); } .mg-bg-accent-lighter { background-color: var(--e-global-color-5b41860, #ffd48a); } .mg-color-accent-light { color: var(--e-global-color-cf8b445, #ffbb45); } .mg-bg-accent-light { background-color: var(--e-global-color-cf8b445, #ffbb45); } .mg-color-accent-dark { color: var(--e-global-color-4f9fb50, #d98900); } .mg-bg-accent-dark { background-color: var(--e-global-color-4f9fb50, #d98900); } .mg-color-accent-darker { color: var(--e-global-color-d23f231, #b06f00); } .mg-bg-accent-darker { background-color: var(--e-global-color-d23f231, #b06f00); } .mg-color-accent-darkest { color: var(--e-global-color-bc90954, #875600); } .mg-bg-accent-darkest { background-color: var(--e-global-color-bc90954, #875600); } /* Neutral Scale */ .mg-color-neutral-white { color: var(--e-global-color-fff0000, #ffffff); } .mg-bg-neutral-white { background-color: var(--e-global-color-fff0000, #ffffff); } .mg-color-neutral-50 { color: var(--e-global-color-faf0050, #e8e8e8); } .mg-bg-neutral-50 { background-color: var(--e-global-color-faf0050, #e8e8e8); } .mg-color-neutral-100 { color: var(--e-global-color-f735c92, #d1d1d1); } .mg-bg-neutral-100 { background-color: var(--e-global-color-f735c92, #d1d1d1); } .mg-color-neutral-200 { color: var(--e-global-color-07e47d8, #bababa); } .mg-bg-neutral-200 { background-color: var(--e-global-color-07e47d8, #bababa); } .mg-color-neutral-300 { color: var(--e-global-color-f5ae406, #a3a3a3); } .mg-bg-neutral-300 { background-color: var(--e-global-color-f5ae406, #a3a3a3); } .mg-color-neutral-400 { color: var(--e-global-color-c460b15, #8c8c8c); } .mg-bg-neutral-400 { background-color: var(--e-global-color-c460b15, #8c8c8c); } .mg-color-neutral-500 { color: var(--e-global-color-4b3db79, #737373); } .mg-bg-neutral-500 { background-color: var(--e-global-color-4b3db79, #737373); } .mg-color-neutral-600 { color: var(--e-global-color-51b61ca, #5c5c5c); } .mg-bg-neutral-600 { background-color: var(--e-global-color-51b61ca, #5c5c5c); } .mg-color-neutral-700 { color: var(--e-global-color-922fea6, #454545); } .mg-bg-neutral-700 { background-color: var(--e-global-color-922fea6, #454545); } .mg-color-neutral-800 { color: var(--e-global-color-2620800, #2e2e2e); } .mg-bg-neutral-800 { background-color: var(--e-global-color-2620800, #2e2e2e); } .mg-color-neutral-900 { color: var(--e-global-color-1710900, #171717); } .mg-bg-neutral-900 { background-color: var(--e-global-color-1710900, #171717); } .mg-color-neutral-black { color: var(--e-global-color-0000bla, #000000); } .mg-bg-neutral-black { background-color: var(--e-global-color-0000bla, #000000); } /* Utility Colors */ .mg-color-white { color: var(--e-global-color-63acc82, #FFFFFF); } .mg-bg-white { background-color: var(--e-global-color-63acc82, #FFFFFF); } .mg-color-black { color: var(--e-global-color-3ff4adf, #000000); } .mg-bg-black { background-color: var(--e-global-color-3ff4adf, #000000); } .mg-color-transparent { color: var(--e-global-color-transparent, transparent); } .mg-bg-transparent { background-color: var(--e-global-color-transparent, transparent); } .mg-color-dark-overlay { color: var(--e-global-color-ae62a7e, #00000080); } .mg-bg-dark-overlay { background-color: var(--e-global-color-ae62a7e, #00000080); } .mg-color-light-overlay { color: var(--e-global-color-3a1f939, #FFFFFF80); } .mg-bg-light-overlay { background-color: var(--e-global-color-3a1f939, #FFFFFF80); } .mg-color-warning-error { color: var(--e-global-color-8b7ed56, #D11900); } .mg-bg-warning-error { background-color: var(--e-global-color-8b7ed56, #D11900); } /* Accent Variations */ .mg-color-light-accent-2 { color: var(--e-global-color-47aa9a0, #FF7C40); } .mg-bg-light-accent-2 { background-color: var(--e-global-color-47aa9a0, #FF7C40); } .mg-color-accent-alt { color: var(--e-global-color-445ac6b, #D14118); } .mg-bg-accent-alt { background-color: var(--e-global-color-445ac6b, #D14118); } .mg-color-light-accent-alt { color: var(--e-global-color-00fe18b, #F5A404); } .mg-bg-light-accent-alt { background-color: var(--e-global-color-00fe18b, #F5A404); } .mg-color-alt-light-light-accent { color: var(--e-global-color-88602f9, #F5D104); } .mg-bg-alt-light-light-accent { background-color: var(--e-global-color-88602f9, #F5D104); } /* =================================== 4. GAP UTILITIES Responsive spacing between elements =================================== */ /* Universal (Row + Column) */ .mg-gap-none { gap: 0 !important; } .mg-gap-xxs { gap: clamp(0.25rem, 0.5vw, 0.5rem) !important; } .mg-gap-xs { gap: clamp(0.5rem, 0.75vw, 0.75rem) !important; } .mg-gap-s { gap: clamp(0.75rem, 1vw, 1rem) !important; } .mg-gap-m { gap: clamp(1rem, 1.25vw, 1.25rem) !important; } .mg-gap-l { gap: clamp(1.25rem, 1.5vw, 1.75rem) !important; } .mg-gap-xl { gap: clamp(1.5rem, 2vw, 2.5rem) !important; } .mg-gap-xxl { gap: clamp(2rem, 2.5vw, 3.5rem) !important; } /* Row Gap (Vertical) */ .mg-row-gap-none { row-gap: 0 !important; } .mg-row-gap-xxs { row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important; } .mg-row-gap-xs { row-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important; } .mg-row-gap-s { row-gap: clamp(0.75rem, 1vw, 1rem) !important; } .mg-row-gap-m { row-gap: clamp(1rem, 1.25vw, 1.25rem) !important; } .mg-row-gap-l { row-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important; } .mg-row-gap-xl { row-gap: clamp(1.5rem, 2vw, 2.5rem) !important; } .mg-row-gap-xxl { row-gap: clamp(2rem, 2.5vw, 3.5rem) !important; } /* Column Gap (Horizontal) */ .mg-col-gap-none { column-gap: 0 !important; } .mg-col-gap-xxs { column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important; } .mg-col-gap-xs { column-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important; } .mg-col-gap-s { column-gap: clamp(0.75rem, 1vw, 1rem) !important; } .mg-col-gap-m { column-gap: clamp(1rem, 1.25vw, 1.25rem) !important; } .mg-col-gap-l { column-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important; } .mg-col-gap-xl { column-gap: clamp(1.5rem, 2vw, 2.5rem) !important; } .mg-col-gap-xxl { column-gap: clamp(2rem, 2.5vw, 3.5rem) !important; } /* =================================== 5. PADDING UTILITIES Individual side padding control NO !important - Elementor can override =================================== */ /* Top */ .mg-padding-t-none { padding-top: 0; } .mg-padding-t-xxs { padding-top: clamp(0.5rem, 1vw, 0.75rem); } .mg-padding-t-xs { padding-top: clamp(1rem, 1.5vw, 1.5rem); } .mg-padding-t-s { padding-top: clamp(1.5rem, 2vw, 2rem); } .mg-padding-t-m { padding-top: clamp(2rem, 3vw, 3rem); } .mg-padding-t-l { padding-top: clamp(3rem, 4vw, 4rem); } .mg-padding-t-xl { padding-top: clamp(4rem, 5vw, 5rem); } .mg-padding-t-xxl { padding-top: clamp(5rem, 6vw, 6rem); } /* Bottom */ .mg-padding-b-none { padding-bottom: 0; } .mg-padding-b-xxs { padding-bottom: clamp(0.5rem, 1vw, 0.75rem); } .mg-padding-b-xs { padding-bottom: clamp(1rem, 1.5vw, 1.5rem); } .mg-padding-b-s { padding-bottom: clamp(1.5rem, 2vw, 2rem); } .mg-padding-b-m { padding-bottom: clamp(2rem, 3vw, 3rem); } .mg-padding-b-l { padding-bottom: clamp(3rem, 4vw, 4rem); } .mg-padding-b-xl { padding-bottom: clamp(4rem, 5vw, 5rem); } .mg-padding-b-xxl { padding-bottom: clamp(5rem, 6vw, 6rem); } /* Left */ .mg-padding-l-none { padding-left: 0; } .mg-padding-l-xxs { padding-left: clamp(0.5rem, 1vw, 0.75rem); } .mg-padding-l-xs { padding-left: clamp(1rem, 1.5vw, 1.5rem); } .mg-padding-l-s { padding-left: clamp(1.5rem, 2vw, 2rem); } .mg-padding-l-m { padding-left: clamp(2rem, 3vw, 3rem); } .mg-padding-l-l { padding-left: clamp(3rem, 4vw, 4rem); } .mg-padding-l-xl { padding-left: clamp(4rem, 5vw, 5rem); } .mg-padding-l-xxl { padding-left: clamp(5rem, 6vw, 6rem); } /* Right */ .mg-padding-r-none { padding-right: 0; } .mg-padding-r-xxs { padding-right: clamp(0.5rem, 1vw, 0.75rem); } .mg-padding-r-xs { padding-right: clamp(1rem, 1.5vw, 1.5rem); } .mg-padding-r-s { padding-right: clamp(1.5rem, 2vw, 2rem); } .mg-padding-r-m { padding-right: clamp(2rem, 3vw, 3rem); } .mg-padding-r-l { padding-right: clamp(3rem, 4vw, 4rem); } .mg-padding-r-xl { padding-right: clamp(4rem, 5vw, 5rem); } .mg-padding-r-xxl { padding-right: clamp(5rem, 6vw, 6rem); } /* Y-Axis (Top + Bottom) */ .mg-padding-y-none { padding-top: 0; padding-bottom: 0; } .mg-padding-y-xxs { padding-top: clamp(0.5rem, 1vw, 0.75rem); padding-bottom: clamp(0.5rem, 1vw, 0.75rem); } .mg-padding-y-xs { padding-top: clamp(1rem, 1.5vw, 1.5rem); padding-bottom: clamp(1rem, 1.5vw, 1.5rem); } .mg-padding-y-s { padding-top: clamp(1.5rem, 2vw, 2rem); padding-bottom: clamp(1.5rem, 2vw, 2rem); } .mg-padding-y-m { padding-top: clamp(2rem, 3vw, 3rem); padding-bottom: clamp(2rem, 3vw, 3rem); } .mg-padding-y-l { padding-top: clamp(3rem, 4vw, 4rem); padding-bottom: clamp(3rem, 4vw, 4rem); } .mg-padding-y-xl { padding-top: clamp(4rem, 5vw, 5rem); padding-bottom: clamp(4rem, 5vw, 5rem); } .mg-padding-y-xxl { padding-top: clamp(5rem, 6vw, 6rem); padding-bottom: clamp(5rem, 6vw, 6rem); } /* X-Axis (Left + Right) */ .mg-padding-x-none { padding-left: 0; padding-right: 0; } .mg-padding-x-xxs { padding-left: clamp(0.5rem, 1vw, 0.75rem); padding-right: clamp(0.5rem, 1vw, 0.75rem); } .mg-padding-x-xs { padding-left: clamp(1rem, 1.5vw, 1.5rem); padding-right: clamp(1rem, 1.5vw, 1.5rem); } .mg-padding-x-s { padding-left: clamp(1.5rem, 2vw, 2rem); padding-right: clamp(1.5rem, 2vw, 2rem); } .mg-padding-x-m { padding-left: clamp(2rem, 3vw, 3rem); padding-right: clamp(2rem, 3vw, 3rem); } .mg-padding-x-l { padding-left: clamp(3rem, 4vw, 4rem); padding-right: clamp(3rem, 4vw, 4rem); } .mg-padding-x-xl { padding-left: clamp(4rem, 5vw, 5rem); padding-right: clamp(4rem, 5vw, 5rem); } .mg-padding-x-xxl { padding-left: clamp(5rem, 6vw, 6rem); padding-right: clamp(5rem, 6vw, 6rem); } /* =================================== 6. SECTION SPACING (MOBILE-OPTIMIZED) Better mobile scaling - uses rem on small screens =================================== */ /* Section XXL */ .mg-section-xxl { padding-top: clamp(4rem, 8vw, 10rem) !important; padding-bottom: clamp(4rem, 8vw, 10rem) !important; } /* Section XL */ .mg-section-xl { padding-top: clamp(3.5rem, 6vw, 8rem) !important; padding-bottom: clamp(3.5rem, 6vw, 8rem) !important; } /* Section L - Large section spacing */ .mg-section-l { padding-top: clamp(3rem, 5vw, 6rem) !important; padding-bottom: clamp(3rem, 5vw, 6rem) !important; } /* Section M - Medium section spacing */ .mg-section-m { padding-top: clamp(2.5rem, 4vw, 5rem) !important; padding-bottom: clamp(2.5rem, 4vw, 5rem) !important; } /* Section S - Small section spacing */ .mg-section-s { padding-top: clamp(2rem, 3vw, 3.75rem) !important; padding-bottom: clamp(2rem, 3vw, 3.75rem) !important; } /* Section XS - Extra small section spacing */ .mg-section-xs { padding-top: clamp(1.5rem, 2vw, 2.5rem) !important; padding-bottom: clamp(1.5rem, 2vw, 2.5rem) !important; } /* Section XXS - Minimal section spacing */ .mg-section-xxs { padding-top: clamp(0.75rem, 1vw, 1rem) !important; padding-bottom: clamp(0.75rem, 1vw, 1rem) !important; } /* Section Layout Helpers */ .mg-section-100vh { min-height: 100vh !important; } .mg-section-narrow .e-con-inner { max-width: 62.5rem !important; margin-left: auto; margin-right: auto; } .mg-section-narrow-xs .e-con-inner { max-width: 45rem !important; margin-left: auto; margin-right: auto; } .mg-section-full div { max-width: 100% !important; } /* =================================== 7. HEADER UTILITIES Compact spacing for headers =================================== */ .mg-header-std { padding-top: clamp(0.5rem, 1vw, 1rem) !important; padding-bottom: 0 !important; gap: clamp(0.25rem, 0.5vw, 0.5rem) !important; } .mg-header-std .e-con-inner { gap: clamp(0.25rem, 0.5vw, 0.5rem) !important; } .mg-top-bar { padding-top: clamp(0.5rem, 0.75vw, 0.75rem) !important; padding-bottom: clamp(0.5rem, 0.75vw, 0.75rem) !important; padding-left: clamp(1rem, 2vw, 2rem) !important; padding-right: clamp(1rem, 2vw, 2rem) !important; } .mg-top-bar > .e-con-inner { padding: 0 !important; } /* =================================== 8. RESET UTILITIES =================================== */ .mg-no-gap { gap: 0 !important; } .mg-no-padding { padding: 0 !important; } /* =================================== 9. QUICK REFERENCE GUIDE =================================== */ /* MOBILE-OPTIMIZED SECTION SIZES: Mobile (320px): Desktop (1920px): mg-section-xxl = 64px → 160px mg-section-xl = 56px → 128px mg-section-l = 48px → 96px ⭐ (much better on mobile!) mg-section-m = 40px → 80px mg-section-s = 32px → 60px mg-section-xs = 24px → 40px mg-section-xxs = 12px → 16px GAP SIZES (4-56px responsive): xxs = 4-8px | xs = 8-12px | s = 12-16px | m = 16-20px l = 20-28px | xl = 24-40px | xxl = 32-56px PADDING SIZES (8-96px responsive): xxs = 8-12px | xs = 16-24px | s = 24-32px | m = 32-48px l = 48-64px | xl = 64-80px | xxl = 80-96px ⭐ = Most commonly used */