/** * ========================================================= * ATS Modern - Root Variables * ========================================================= */ :root { /* ===================================================== BRAND COLORS ===================================================== */ --ats-primary: #2457D6; --ats-secondary: #18243A; --ats-accent: #FF715B; --ats-heading: #121826; --ats-text: #4A5568; --ats-background: #F6F8FC; --ats-white: #FFFFFF; /* ===================================================== SUPPORTING COLORS ===================================================== */ --ats-border: #E3E8F0; --ats-muted-bg: #EEF2F7; --ats-text-light: #6B7280; --ats-placeholder: #8A94A6; /* ===================================================== TYPOGRAPHY ===================================================== */ --ats-font-heading: "Sora", sans-serif; --ats-font-body: "Inter", sans-serif; /* ===================================================== LAYOUT ===================================================== */ --ats-container: 1180px; --ats-section-space-desktop: 88px; --ats-section-space-tablet: 64px; --ats-section-space-mobile: 48px; /* ===================================================== BORDER RADIUS ===================================================== */ --ats-radius-sm: 8px; --ats-radius-md: 12px; --ats-radius: 16px; --ats-radius-lg: 24px; --ats-radius-full: 999px; /* ===================================================== BUTTONS ===================================================== */ /* Buttons */ --ats-btn-height: 50px; --ats-btn-padding-x: 24px; --ats-btn-radius: 16px; --ats-btn-font-size: 15px; --ats-btn-font-weight: 600; --ats-whatsapp: #25D366; --ats-whatsapp-hover: #1EBE5D; --ats-btn-shadow: 0 8px 20px rgba(18, 24, 38, 0.10); --ats-btn-shadow-hover: 0 12px 28px rgba(18, 24, 38, 0.16); --ats-btn-transition: 0.25s ease; /* ===================================================== FORMS ===================================================== */ --ats-input-height: 50px; --ats-input-padding-x: 16px; --ats-input-padding-y: 12px; --ats-input-radius: 12px; --ats-input-background: #FFFFFF; --ats-input-border: #DCE2EA; --ats-input-border-focus: #2457D6; --ats-input-text: #121826; --ats-input-placeholder: #8A94A6; /* ===================================================== CARDS ===================================================== */ --ats-card-radius: 16px; --ats-card-padding: 28px; --ats-card-border: 1px solid var(--ats-border); --ats-card-shadow: 0 12px 32px rgba(18, 24, 38, 0.08); /* ===================================================== MOTION ===================================================== */ --ats-transition: 0.25s ease; } /* ========================================================= BUTTONS - GLOBAL FOUNDATION ========================================================= */ /* ========================================================= BUTTONS - ELEMENTOR ========================================================= */ /* --------------------------------------------------------- BASE BUTTON --------------------------------------------------------- */ .ats-btn-primary .elementor-button, .ats-btn-secondary .elementor-button, .ats-btn-dark .elementor-button, .ats-btn-whatsapp .elementor-button { min-height: var(--ats-btn-height); padding: 12px var(--ats-btn-padding-x) !important; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--ats-font-body) !important; font-size: var(--ats-btn-font-size) !important; font-weight: var(--ats-btn-font-weight) !important; line-height: 1; border-radius: var(--ats-btn-radius); text-decoration: none; transition: background-color var(--ats-btn-transition), color var(--ats-btn-transition), border-color var(--ats-btn-transition), box-shadow var(--ats-btn-transition), transform var(--ats-btn-transition); } /* ========================================================= PRIMARY ========================================================= */ .ats-btn-primary .elementor-button { color: var(--ats-white); background-color: var(--ats-primary); border: 1px solid var(--ats-primary); box-shadow: 0 4px 12px rgba(36, 87, 214, 0.18); } .ats-btn-primary .elementor-button:hover { color: var(--ats-white); background-color: var(--ats-secondary); border-color: var(--ats-secondary); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18, 24, 38, 0.16); } /* ========================================================= SECONDARY ========================================================= */ .ats-btn-secondary .elementor-button { color: var(--ats-primary); background-color: transparent; border: 1px solid var(--ats-primary); box-shadow: none; } .ats-btn-secondary .elementor-button:hover { color: var(--ats-white); background-color: var(--ats-primary); border-color: var(--ats-primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(36, 87, 214, 0.16); } /* ========================================================= DARK ========================================================= */ .ats-btn-dark .elementor-button { color: var(--ats-white); background-color: var(--ats-secondary); border: 1px solid var(--ats-secondary); } .ats-btn-dark .elementor-button:hover { color: var(--ats-white); background-color: var(--ats-heading); border-color: var(--ats-heading); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18, 24, 38, 0.16); } /* ========================================================= WHATSAPP ========================================================= */ .ats-btn-whatsapp .elementor-button { color: var(--ats-white); background-color: var(--ats-whatsapp); border: 1px solid var(--ats-whatsapp); box-shadow: 0 4px 14px rgba(37, 211, 102, 0.20); } .ats-btn-whatsapp .elementor-button:hover { color: var(--ats-white); background-color: var(--ats-whatsapp-hover); border-color: var(--ats-whatsapp-hover); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37, 211, 102, 0.24); } /* ========================================================= ICON MOTION ========================================================= */ .ats-btn-primary .elementor-button-icon, .ats-btn-secondary .elementor-button-icon, .ats-btn-dark .elementor-button-icon, .ats-btn-whatsapp .elementor-button-icon { transition: transform var(--ats-btn-transition); } .ats-btn-primary .elementor-button:hover .elementor-button-icon, .ats-btn-secondary .elementor-button:hover .elementor-button-icon, .ats-btn-dark .elementor-button:hover .elementor-button-icon { transform: translateX(3px); } .ats-btn-whatsapp .elementor-button:hover .elementor-button-icon { transform: scale(1.08); } /* ========================================================= ACCESSIBILITY / FOCUS ========================================================= */ .ats-btn-primary .elementor-button:focus-visible, .ats-btn-secondary .elementor-button:focus-visible, .ats-btn-dark .elementor-button:focus-visible, .ats-btn-whatsapp .elementor-button:focus-visible { outline: 3px solid rgba(36, 87, 214, 0.22); outline-offset: 3px; } /* ========================================================= MOBILE FULL WIDTH ========================================================= */ @media (max-width: 767px) { .ats-btn-mobile-full, .ats-btn-mobile-full .elementor-button-wrapper, .ats-btn-mobile-full .elementor-button { width: 100%; } .ats-btn-mobile-full .elementor-button { display: flex; } }