/* ============================================================================ AMELIA → "axis flow" DESIGN-SYSTEM OVERRIDE (all rules !important) ---------------------------------------------------------------------------- Maps the Amelia v2 booking UI onto the site's Elementor global variables. Everything is scoped under .amelia-v2-booking so it cannot leak elsewhere. WHERE TO ADD IT Best: the page holding the Amelia shortcode → Elementor section/widget → Advanced → Custom CSS (loads exactly where the form lives). Or: Appearance → Customize → Additional CSS (site-wide). Then: clear ALL caches (page cache + browser) — Amelia styles are cached. DO THIS FIRST (handles all the accent/selected-state colours natively) Amelia → Customize → set Primary colour = #434942 and Fonts = Montserrat / TheSeasons, Save. That regenerates Amelia's inline --am-* variables, which out-rank stylesheets. This file then only fixes shape, typography, layout. NOTE ON !important + inline vars: Amelia injects some --am-* values INLINE. An inline style still beats an !important stylesheet rule UNLESS your rule is also !important AND targets the same property on the same/again-more-specific element. The selectors below are deliberately specific for that reason. ========================================================================== */ /* ---- 1. LOCAL TOKEN LAYER -------------------------------------------------- */ .amelia-v2-booking { --ax-brand: var(--brand-primary, #434942) !important; --ax-brand-dark: var(--brand-primary-dark, #1f1f1d) !important; --ax-brand-light: var(--brand-primary-light, #eceae7) !important; --ax-text: var(--neutral-text-primary, #434942) !important; --ax-text-soft: var(--neutral-text-secondary, #5b5a57) !important; --ax-border: var(--neutral-border, #d9d6d1) !important; --ax-bg: var(--neutral-background, #f5f3f0) !important; --ax-bg-soft: var(--neutral-background-soft, #edeae5) !important; --ax-dark: var(--dark-base, #232321) !important; --ax-dark-hover: var(--dark-hover, #343430) !important; --ax-success: var(--functional-success, #4b5a4f) !important; --ax-warning: var(--functional-warning, #a88d67) !important; --ax-error: var(--functional-error, #8e5f5f) !important; --ax-info: var(--functional-info, #6a7378) !important; --ax-font-body: var(--font-family-body, "Montserrat", sans-serif) !important; --ax-font-head: "the-seasons", Georgia, serif !important; --ax-font-script: "Bigmaker", cursive !important; --ax-fs-button: var(--font-size-button, 15px) !important; --ax-btn-hover-text: var(--neutral-text-secondary, #5b5a57) !important; --ax-btn-hover-bg: rgba(91, 90, 87, 0.15) !important; /* #5B5A5726 */ --ax-btn-hover-border: var(--neutral-text-secondary, #5b5a57) !important; } /* ---- 2. OPTIONAL: re-map Amelia's OWN --am-* variables --------------------- The exact names vary by version. Run the console dump on your site, paste the real names here, point them at the --ax-* tokens above. Example shape: .amelia-v2-booking#amelia-container, .amelia-v2-booking #amelia-container { --am-c-main: var(--ax-brand) !important; <-- replace with real name --am-c-text: var(--ax-text) !important; <-- replace with real name } (Setting Primary colour in Amelia → Customize does this for you, cleaner.) */ /* ---- 3. CONTAINER + BASE TYPOGRAPHY ---------------------------------------- */ .amelia-v2-booking, .amelia-v2-booking #amelia-container, .amelia-v2-booking .am-fs__main, .amelia-v2-booking .am-cap__wrapper { font-family: var(--ax-font-body) !important; color: var(--ax-text) !important; } .amelia-v2-booking #amelia-container.am-fs__wrapper, .amelia-v2-booking .am-fs__main, .amelia-v2-booking .am-cap__wrapper { background-color: var(--ax-bg) !important; border-color: var(--ax-border) !important; } .amelia-v2-booking h1, .amelia-v2-booking h2, .amelia-v2-booking h3, .amelia-v2-booking h4, .amelia-v2-booking h5, .amelia-v2-booking h6, .amelia-v2-booking .am-fs__title, .amelia-v2-booking [class*="__title"], .amelia-v2-booking [class*="-title"] { font-family: var(--ax-font-head) !important; color: var(--ax-text) !important; } .amelia-v2-booking [class*="subtitle"], .amelia-v2-booking [class*="description"], .amelia-v2-booking [class*="--secondary"] { color: var(--ax-text-soft) !important; } /* ---- 4. BUTTONS (your .btn-primary spec) ---------------------------------- Shared look applies to ALL buttons (incl. small icon buttons). PADDING is the only thing that's split out below, so icon buttons keep their native size. */ .amelia-v2-booking .el-button, .amelia-v2-booking .el-button--primary, .amelia-v2-booking .am-button, .amelia-v2-booking button[class*="button"] { font-family: var(--ax-font-body) !important; font-weight: 600 !important; font-size: var(--ax-fs-button) !important; color: var(--ax-brand) !important; background-color: transparent !important; /* #edebe800 */ border-width: 2px !important; border-style: solid !important; border-color: var(--ax-brand) !important; border-radius: 48px !important; text-align: center !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; box-shadow: none !important; transition: color .2s ease, background-color .2s ease, border-color .2s ease !important; } /* Larger padding ONLY on the main / primary CTA. Everything else (icon buttons, steppers, calendar arrows) keeps Amelia's original padding. */ .amelia-v2-booking .am-button--primary, .amelia-v2-booking .el-button--primary { padding-top: 12px !important; padding-bottom: 12px !important; padding-left: 24px !important; padding-right: 24px !important; } .amelia-v2-booking .el-button:hover, .amelia-v2-booking .el-button:focus, .amelia-v2-booking .el-button--primary:hover, .amelia-v2-booking .el-button--primary:focus, .amelia-v2-booking .am-button:hover, .amelia-v2-booking button[class*="button"]:hover { color: var(--ax-btn-hover-text) !important; background-color: var(--ax-btn-hover-bg) !important; border-color: var(--ax-btn-hover-border) !important; } .amelia-v2-booking .el-button i, .amelia-v2-booking .el-button svg, .amelia-v2-booking .el-button [class*="icon"] { color: var(--ax-brand) !important; fill: var(--ax-brand) !important; } .amelia-v2-booking .el-button:hover i, .amelia-v2-booking .el-button:hover svg, .amelia-v2-booking .el-button:hover [class*="icon"] { color: var(--ax-btn-hover-text) !important; fill: var(--ax-btn-hover-text) !important; } .amelia-v2-booking .el-button i, .amelia-v2-booking .el-button svg, .amelia-v2-booking .el-button [class*="icon"] { color: var(--ax-brand) !important; fill: var(--ax-brand) !important; } .amelia-v2-booking .el-button:hover i, .amelia-v2-booking .el-button:hover svg, .amelia-v2-booking .el-button:hover [class*="icon"] { color: var(--ax-btn-hover-text) !important; fill: var(--ax-btn-hover-text) !important; } /* ---- 4b. CLOSE / DISMISS BUTTONS ------------------------------------------- Dialog/popup close (X). Inspector-tested: square 32x32, no padding, centred. The selectors out-specify the primary-padding rule so they always win. Covers both the booking popup dialog and the forms dialog. If another close button is still off, paste its class and add it to the selector list. */ .amelia-v2-booking.am-dialog-el.am-dialog-popup .el-dialog .el-dialog__headerbtn, .amelia-v2-booking.am-forms-dialog .el-dialog__headerbtn { top: 4px!important; right: 4px!important; background: transparent !important; width: 32px!important; height: 32px!important; display: flex!important; padding: 0 !important; align-items: center!important; justify-content: center!important; &:hover{ color: var(--e-global-color-e-gv-c7649b71)!important; border-style: solid!important; border-width: 2px!important; border-color: var(--e-global-color-e-gv-c7649b71)!important; border-radius: 48px!important; } } /* ---- 5. BOX-SHADOWS (replace Amelia's blue inset accent) ------------------ Amelia bakes its default blue (#1A84EE) into the inline box-shadow on cards. That layer is NOT driven by the primary colour you set, so it stays blue. This replaces the whole shadow with a soft brand/white neumorphic stack. Inline styles here have no !important, so a stylesheet !important wins. */ .amelia-v2-booking .am-ec, .amelia-v2-booking .am-el__item, .amelia-v2-booking [class*="__card"], .amelia-v2-booking [class*="-card"] { box-shadow: 0 12px 24px rgba(67, 73, 66, 0.10), inset 0 12px 16px rgba(67, 73, 66, 0.06), 0 -12px 18px rgba(255, 255, 255, 0.75), inset 0 -12px 16px rgba(255, 255, 255, 0.5) !important; } /* ---- 6. LINKS + ACCENT / SELECTED STATES ----------------------------------- */ .amelia-v2-booking a, .amelia-v2-booking [class*="link"] { color: var(--ax-brand) !important; } .amelia-v2-booking a:hover, .amelia-v2-booking [class*="link"]:hover { color: var(--ax-brand-dark) !important; } .amelia-v2-booking .is-selected, .amelia-v2-booking .am-selected, .amelia-v2-booking [class*="--selected"], .amelia-v2-booking [class*="is-active"] { border-color: var(--ax-brand) !important; color: var(--ax-brand) !important; } .amelia-v2-booking .el-loading-spinner .path, .amelia-v2-booking [class*="spinner"] { stroke: var(--ax-brand) !important; } /* ---- 7. FUNCTIONAL (status) COLOURS ---------------------------------------- */ .amelia-v2-booking [class*="success"] { color: var(--ax-success) !important; } .amelia-v2-booking [class*="error"], .amelia-v2-booking [class*="danger"] { color: var(--ax-error) !important; } .amelia-v2-booking [class*="warning"] { color: var(--ax-warning) !important; } .amelia-v2-booking [class*="info"] { color: var(--ax-info) !important; } /* ---- 8. DARK CTA VARIANT (optional) ---------------------------------------- Add class am-cta-dark to any button you want filled-dark instead of outlined. */ .amelia-v2-booking .am-cta-dark { color: var(--ax-bg) !important; background-color: var(--ax-dark) !important; border-color: var(--ax-dark) !important; } .amelia-v2-booking .am-cta-dark:hover { background-color: var(--ax-dark-hover) !important; border-color: var(--ax-dark-hover) !important; color: var(--ax-bg) !important; } .amelia-v2-booking [class*="is-active"] { background-color: var(--ax-bg) !important; }