/* Theme Name: Astra Child - Eagle Rock Orthodontics Theme URI: https://eaglerockbraces.com/ Description: Custom Astra child theme for Eagle Rock Orthodontics (eaglerockbraces.com). Built by OrthoMarketing. Author: OrthoMarketing Author URI: https://orthomarketing.com/ Template: astra Version: 1.0.0 Text Domain: astra-child-eaglerock */ /* ===================================================== BRAND VARIABLES Sampled directly from the live site screenshot (07/29/26): mint/emerald green CTA + accent, near-black navy for dark sections (hero, FAQ bars, footer). ===================================================== */ :root { --erk-primary: #2ed488; /* mint/emerald - CTA buttons, announcement bar */ --erk-primary-dark: #22a86b; /* darker mint - hover state */ --erk-navy: #060817; /* near-black navy - hero/FAQ/footer bg */ --erk-navy-alt: #103a38; /* dark teal - gradient transition sections */ --erk-text: #222222; --erk-light-bg: #f5f8fb; --erk-white: #ffffff; --erk-radius: 8px; --erk-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } /* ===================================================== GLOBAL ===================================================== */ body { color: var(--erk-text); } a { color: var(--erk-primary); } a:hover { color: var(--erk-primary-dark); } .ast-button, button, input[type="submit"], .wp-block-button__link { background-color: var(--erk-primary); border-radius: var(--erk-radius); transition: background-color 0.2s ease, transform 0.15s ease; } .ast-button:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover { background-color: var(--erk-primary-dark); transform: translateY(-1px); } /* ===================================================== HEADER SCROLL SHADOW Added by assets/js/custom.js toggling .erk-scrolled on once the user scrolls past the header. ===================================================== */ .ast-main-header-bar { transition: box-shadow 0.25s ease; } body.erk-scrolled .ast-main-header-bar { box-shadow: var(--erk-shadow); } /* ===================================================== STICKY MOBILE CALL BAR ===================================================== */ .erk-mobile-call-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--erk-primary); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); } .erk-mobile-call-bar__inner { display: flex; } .erk-mobile-call-bar a { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--erk-white); font-weight: 600; font-size: 15px; padding: 14px 10px; text-decoration: none; } .erk-mobile-call-bar a:first-child { border-right: 1px solid rgba(255, 255, 255, 0.25); } .erk-mobile-call-bar a:hover { background: var(--erk-primary-dark); color: var(--erk-white); } .erk-mobile-call-bar svg { width: 16px; height: 16px; flex-shrink: 0; } @media (max-width: 768px) { .erk-mobile-call-bar { display: block; } /* prevent the sticky bar from covering footer content / GF submit buttons */ body { padding-bottom: 56px; } } /* ===================================================== GRAVITY FORMS ===================================================== */ .gform_wrapper.gravity-theme { --gf-ctrl-btn-bg-color-primary-hover: var(--erk-primary-dark); } .gform_wrapper.gravity-theme .gform_footer input.gform_button { background-color: var(--erk-primary) !important; border-radius: var(--erk-radius) !important; border: none !important; } .gform_wrapper.gravity-theme .gform_footer input.gform_button:hover { background-color: var(--erk-primary-dark) !important; } .gform_wrapper.gravity-theme .gfield_label { color: var(--erk-text); } .gform_confirmation_wrapper { background: var(--erk-light-bg); border-radius: var(--erk-radius); padding: 24px; } /* ===================================================== AREAS SERVED / LOCATION CARDS ===================================================== */ .erk-locations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .erk-locations-grid .erk-location-card { background: var(--erk-white); border-radius: var(--erk-radius); box-shadow: var(--erk-shadow); overflow: hidden; text-align: center; } .erk-locations-grid .erk-location-card img { width: 100%; height: 140px; object-fit: cover; } .erk-locations-grid .erk-location-card h3 { margin: 12px 0; }