/* ===================================================================== EpicCRM — brand tokens for the WordPress landing (sierra-child theme) --------------------------------------------------------------------- Purpose: make the marketing site (www.epiccrm.eu / epiccrm.pl) inherit the SAME design language as the app (app.epiccrm.eu). Source of truth for every value below = app.epiccrm.eu/public/css/app.css. Strategy = token-first, CSS-only, fully reversible: (A) redefine Elementor's Global-Kit CSS variables (--e-global-*) so every Elementor widget that uses the kit's colors/fonts is recolored automatically — WITHOUT editing the kit in the DB; (B) expose the app's --ec-* tokens for component polish; (C) light component styling (buttons / inputs / links) matching `ec-*`. Load order matters: enqueue this AFTER the theme + Elementor styles (see functions-snippet.php). Same-specificity `:root` rules that load later win the cascade, so no `!important` is needed for the variables. If a stubborn widget hard-codes a color inline, add a scoped override in the "per-widget overrides" section at the bottom (use !important sparingly and as narrowly as possible). Rollback: remove the enqueue line in functions.php (or delete this file). Nothing here is written to the database. ===================================================================== */ /* --------------------------------------------------------------------- 0) Fonts — Inter (body + headings) is loaded via Google Fonts in functions-snippet.php (wght 400;500;600;700) + JetBrains Mono for code. Kept out of CSS @import to avoid render-blocking. --------------------------------------------------------------------- */ :root { /* ---- App design tokens (mirror of app.css :root) ---- */ --ec-primary-50: #eef2f8; --ec-primary-100: #d6e0ee; --ec-primary-200: #aec0dc; --ec-primary-300: #7d97c2; --ec-primary-400: #4d6ba0; --ec-primary-500: #2d4978; --ec-primary-600: #223a61; --ec-primary-700: #1b2e4b; /* navy — primary brand */ --ec-primary-800: #15233a; --ec-primary-900: #0f1a2b; --ec-accent-50: #fef8ec; --ec-accent-100: #fdedcc; --ec-accent-200: #fbd989; --ec-accent-300: #f9c44d; --ec-accent-400: #f7b023; --ec-accent-500: #f59e0b; /* amber — accent */ --ec-accent-600: #d97e06; --ec-accent-700: #b45c09; --ec-surface: #ffffff; --ec-bg: #f5f6fa; --ec-text: #1f2937; --ec-text-muted:#4b5563; --ec-border: #e5e7eb; --ec-border-strong: #d1d5db; --ec-radius-sm: 4px; --ec-radius: 6px; --ec-radius-md: 8px; --ec-radius-lg: 12px; --ec-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ec-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --------------------------------------------------------------- Elementor Global-Kit override (kit id 6 "CRM Kit"). BEFORE (live): primary #00CC61 (green), secondary #004050, text #000000, accent #DFF9EB (light green), light #F4F4F4, fonts Manrope. AFTER (app-aligned): --------------------------------------------------------------- */ --e-global-color-primary: #1b2e4b; /* green -> navy */ --e-global-color-secondary: #15233a; /* teal -> navy-800 */ --e-global-color-text: #1f2937; /* black -> app text */ /* accent stays a SOFT background tint (was light green) to avoid turning soft backgrounds into loud amber; amber is applied only via the .ec-btn / accent component classes. Alt mapping if the owner wants amber accents globally: set this to #f59e0b. */ --e-global-color-accent: #eef2f8; /* light green -> navy-50 tint */ --e-global-color-light: #f5f6fa; /* app background */ --e-global-typography-primary-font-family: "Inter"; --e-global-typography-secondary-font-family: "Inter"; --e-global-typography-text-font-family: "Inter"; --e-global-typography-accent-font-family: "Inter"; } /* --------------------------------------------------------------------- 0b) Elementor declares the kit variables on the BODY-level class `.elementor-kit-6` (post-6.css), which shadows the `:root` values above for every descendant. So we MUST redefine them at the same (body) level or anything reading `var(--e-global-*)` further down the tree (e.g. the keydesign heading-underline gradient, which is `linear-gradient(..., var(--e-global-color-primary))`) keeps the old green. `body[class*="elementor-kit-"]` matches regardless of the kit id and loads after post-6.css, so it wins the cascade. --------------------------------------------------------------------- */ body[class*="elementor-kit-"] { --e-global-color-primary: #1b2e4b; --e-global-color-secondary: #15233a; --e-global-color-text: #1f2937; --e-global-color-accent: #eef2f8; --e-global-color-light: #f5f6fa; --e-global-typography-primary-font-family: "Inter"; --e-global-typography-secondary-font-family: "Inter"; --e-global-typography-text-font-family: "Inter"; --e-global-typography-accent-font-family: "Inter"; } /* --------------------------------------------------------------------- 1) Base typography — Inter everywhere, app text color. Scope kept broad but low-specificity so theme/Elementor per-element rules still win where they must. --------------------------------------------------------------------- */ body, button, input, select, textarea { font-family: var(--ec-font-sans); } body { color: var(--ec-text); } h1, h2, h3, h4, h5, h6 { font-family: var(--ec-font-sans); color: var(--ec-primary-700); } /* --------------------------------------------------------------------- 2) Links — navy default, amber on hover (matches app). --------------------------------------------------------------------- */ a { color: var(--ec-primary-700); } a:hover, a:focus { color: var(--ec-accent-600); } /* --------------------------------------------------------------------- 3) Buttons. 3a) Elementor / ElementsKit / Essential-Addons buttons already pull their colors from the global kit vars we overrode above (background = --e-global-color-primary → navy; outline variants keep transparent bg + navy text). So here we ONLY normalise radius + font — we DO NOT force a background, which would wrongly fill the outline/ghost variants. 3b) Non-Elementor buttons (CF7 submit, Gutenberg, theme) don't use those vars, so we give them an explicit navy fill. --------------------------------------------------------------------- */ /* 3a — var-driven builders: shape/typography only */ .elementor-button, .elementskit-btn, .eael-lr-btn, .ekit-btn-wraper .elementskit-btn { border-radius: var(--ec-radius); font-family: var(--ec-font-sans); transition: background-color .15s ease, border-color .15s ease, color .15s ease; } /* 3b — non-Elementor buttons: explicit app-primary (navy) fill */ .wp-block-button__link, .sierra-btn, .btn-primary, .wpcf7 input[type="submit"], form input[type="submit"], form button[type="submit"] { border-radius: var(--ec-radius); font-family: var(--ec-font-sans); font-weight: 600; background-color: var(--ec-primary-700); color: #fff; border-color: var(--ec-primary-700); transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .wp-block-button__link:hover, .sierra-btn:hover, .btn-primary:hover, .wpcf7 input[type="submit"]:hover, form input[type="submit"]:hover, form button[type="submit"]:hover { background-color: var(--ec-primary-800); border-color: var(--ec-primary-800); color: #fff; } /* Accent (amber) button — opt-in via class on the Elementor button. */ .ec-btn--accent, .elementor-button.ec-btn--accent { background-color: var(--ec-accent-500); border-color: var(--ec-accent-500); color: var(--ec-primary-900); } .ec-btn--accent:hover, .elementor-button.ec-btn--accent:hover { background-color: var(--ec-accent-600); border-color: var(--ec-accent-600); color: #fff; } /* Secondary (outline) button — white bg, navy border/text. */ .ec-btn--secondary, .elementor-button.ec-btn--secondary { background-color: #fff; border: 1px solid var(--ec-primary-700); color: var(--ec-primary-700); } .ec-btn--secondary:hover, .elementor-button.ec-btn--secondary:hover { background-color: var(--ec-primary-50); color: var(--ec-primary-800); } /* --------------------------------------------------------------------- 4) Form fields (Contact Form 7 / theme) — align to app inputs. --------------------------------------------------------------------- */ .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .wpcf7 select, .wpcf7 textarea, input.ec-input, .sierra-form input:not([type="submit"]), .sierra-form textarea { border: 1px solid var(--ec-border-strong); border-radius: var(--ec-radius); font-family: var(--ec-font-sans); color: var(--ec-text); } .wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus, input.ec-input:focus { border-color: var(--ec-primary-500); outline: none; box-shadow: 0 0 0 3px rgba(45, 73, 120, .15); } /* --------------------------------------------------------------------- 5) FAZA 2 — de-green ElementsKit / theme colors baked per-widget. These colors live as literal hex (#00CC61 green, #DFF9EB light green, #004050 teal) inside the generated per-post CSS (uploads/elementor/css/post-*.css) as `.elementor-element-ID .foo{...}` — they do NOT use the kit variables, so section 0 can't reach them. We override by SEMANTIC class + !important (beats any element-id selector regardless of specificity), which catches every instance on every page (EN + PL). Section backgrounds are set per element-id, so those few are overridden by id (WPML reuses the same ids). --------------------------------------------------------------------- */ /* 5a — filled CTA buttons + form submit -> amber pop (app accent) */ .ekit-popup-btn__filled, .elementskit-btn.ekit-popup-footer__close, a.ekit_creative_button, .wpcf7-submit, input.wpcf7-submit { background-color: var(--ec-accent-500) !important; border-color: var(--ec-accent-500) !important; color: #fff !important; } .ekit-popup-btn__filled:hover, .elementskit-btn.ekit-popup-footer__close:hover, a.ekit_creative_button:hover, .wpcf7-submit:hover, input.wpcf7-submit:hover { background-color: var(--ec-accent-600) !important; border-color: var(--ec-accent-600) !important; color: #fff !important; } /* 5b — outline "Demo"-style popup buttons (were teal #004050) -> navy outline */ .elementskit-btn.ekit-popup-btn:not(.ekit-popup-btn__filled):not(.ekit-popup-footer__close), .ekit-popup-btn__has-icon, .ekit-popup-btn__has-icon .far, .ekit-popup-btn__has-icon .fas { color: var(--ec-primary-700) !important; border-color: var(--ec-primary-700) !important; } /* 5c — eyebrow / section subtitle labels (were light-green bg + green text) -> soft amber tint + amber text (app accent label) */ .elementskit-section-subtitle { background-color: var(--ec-accent-50) !important; color: var(--ec-accent-600) !important; } /* 5d — feature checkmarks (were green) -> navy */ .icon-check, .elementskit-icon-list-icon .icon-check, i.icon-check:before { color: var(--ec-primary-700) !important; border-color: var(--ec-primary-700) !important; } /* 5e — scroll-to-top arrow (was green bg) -> navy */ .icon-arrow-up, .ekit-scroll-to-top .icon-arrow-up { background-color: var(--ec-primary-700) !important; } /* 5f — stray green icons / social / meta-category links on LIGHT surfaces -> navy (footer overrides below flip them light on the dark footer) */ .icon-facebook-2, .fa-facebook, .fa-facebook-f, .fa-linkedin, .fa-linkedin-in, .fa-x-twitter, .fa-twitter, .elementskit-meta-categories a { color: var(--ec-primary-700) !important; border-color: var(--ec-primary-700) !important; } /* 5g — dark section bands (were teal #004050) -> navy. Element-ids from the homepage Elementor data; WPML PL homepage reuses the same ids. Add more ids here if a teal band shows up on another in-scope page. */ .elementor-element-6d364f73, .elementor-element-7d2bd7b5, .elementor-element-7d29ab4 { background-color: var(--ec-primary-700) !important; } /* 5h — FOOTER — the theme footer sits on a LIGHT (white) background, so any link/icon that section 5f flipped to navy is already fine. We only set a muted-grey resting tone + amber hover for the footer nav links so they read as secondary text, and keep social icons navy. */ .site-footer .elementor-nav-menu a, .site-footer nav a, .site-footer .elementskit-nav-menu a { color: var(--ec-text-muted) !important; } .site-footer a:hover, .site-footer .elementor-nav-menu a:hover, .site-footer nav a:hover { color: var(--ec-accent-600) !important; } .site-footer .fa-linkedin, .site-footer .fa-linkedin-in, .site-footer .fa-x-twitter, .site-footer .fa-twitter, .site-footer .icon-facebook-2, .site-footer .fa-facebook, .site-footer .fa-facebook-f { color: var(--ec-primary-700) !important; } /* 5i — primary "Get started" CTA (plain elementskit-button widget, was green fill). Target by widget element-id (WPML PL reuses the same id) so we don't accidentally fill the white "Contact sales" secondary button. */ .elementor-element-fbeb9e6 .elementskit-btn { background-color: var(--ec-accent-500) !important; border-color: var(--ec-accent-500) !important; color: #fff !important; } .elementor-element-fbeb9e6 .elementskit-btn:hover { background-color: var(--ec-accent-600) !important; border-color: var(--ec-accent-600) !important; } /* 5j — "Learn more"/text link-style buttons (keydesign-underline) had white text -> unreadable on light cards. Make them navy; underline amber. */ .elementskit-btn.keydesign-underline { color: var(--ec-primary-700) !important; } .elementskit-btn.keydesign-underline:after, .elementskit-btn.keydesign-underline:before { background-color: var(--ec-accent-500) !important; border-color: var(--ec-accent-500) !important; } /* 5k — heading highlight underline. Keydesign draws a gradient bar under an emphasised word with `background-image: linear-gradient(180deg, transparent 92%, var(--e-global-color-primary) 50%)` — via a CSS rule keyed to specific widget element-ids (NOT every section-title span, so we can't blanket `.elementskit-section-title > span`). With the kit var now navy, that bar would go navy — invisible on the dark navy sections. So repaint ONLY the underlined widgets amber (accent pop, readable on both light and dark). Element-ids from homepage EN (21568) + PL (22339); WPML reuses most ids. Add ids here if a new underlined heading appears. */ .elementor-element-1396eaa .elementskit-section-title > span, .elementor-element-2b55a3a .elementskit-section-title > span, .elementor-element-32320e4 .elementskit-section-title > span, .elementor-element-70bf10bd .elementskit-section-title > span, .elementor-element-7d43470 .elementskit-section-title > span, .elementor-element-88ef8f1 .elementskit-section-title > span, .elementor-element-8fce894 .elementskit-section-title > span, .elementor-element-91feaef .elementskit-section-title > span, .elementor-element-96dde4c .elementskit-section-title > span, .elementor-element-9a08d9b .elementskit-section-title > span, .elementor-element-a8cdcb0 .elementskit-section-title > span, .elementor-element-b08ee75 .elementskit-section-title > span, .elementor-element-f494ab1 .elementskit-section-title > span { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 92%, var(--ec-accent-500) 50%) !important; } /* 5l — back-to-top button ring (SVG circle stroke was green) -> navy */ .back-to-top svg circle, .back-to-top circle, .ekit-scroll-to-top svg circle { stroke: var(--ec-primary-700) !important; } /* --------------------------------------------------------------------- 6) Pricing page (custom `.epc-*` markup, ETAP 15/19, rendered from raw post_content with an inline