/* ============================================================ EPIC IT — ADDITIONAL CSS (v3.11) Customizer Additional CSS — sits on top of theme style.css Last updated: 2026-06-07 ─────────────────────────────────────────────────────────── EDITING RULES (read before changing anything) 1. NEVER edit the theme's style.css. The new brand is a skin applied ENTIRELY from this file. Cleaning the source has broken the site before — don't. All brand changes live here. 2. Use LITERAL hex in override rules, NOT var() tokens. This site's CSS optimiser (Remove/Used-CSS) does not reliably keep the :root custom properties in its per-page output, so a rule like `background: var(--epic-ink) !important` can resolve to nothing — the rule is dropped and the element falls back to its SOURCE colour. v3.10 tokenised the CTA banner and it reverted to red in production for exactly this reason; v3.11 put the literals back. The Section 1 tokens are kept for REFERENCE only. Existing var() rules that already render correctly are fine; just don't add new var()-dependent ones. 3. Avoid pinning auto-generated Elementor IDs (e.g. 6da750a, 0f78637, c4a95b6, fa6cc25) — they shift when an element is re-saved, silently breaking the rule. Add a stable CSS class in the editor and target that instead. Still ID-based and worth migrating when convenient: Sections 28, 36, 37. ─────────────────────────────────────────────────────────── CHANGES FROM v3.10 → v3.11 Hotfix. v3.10 tokenised the CTA-banner colours (var(--epic-ink), var(--epic-btn), etc.). In production the banners reverted to the SOURCE red gradient: the CSS optimiser does not keep the :root token block in its per-page output, so the var() references did not resolve and the override rule was dropped, exposing epic-content-styles.css's red banner. v3.11 reverts the banner, the banner button and the body CTA to LITERAL hex (the working v3.9 values). No live override rule depends on var() now. The button consolidation and the EDITING RULES box from v3.10 are kept. ACTION AFTER DEPLOY: clear the CSS optimiser / Used-CSS cache and hard-refresh, or the cached red will persist. CHANGES FROM v3.9 → v3.10 Maintainability pass, NO visual change. (a) Added semantic tokens to Section 1 (--epic-ink, --epic-on-dark, --epic-btn, etc.) and pointed the new-skin rules at them instead of hardcoded hex. (b) Consolidated the CTA-banner button: it was styled in two places (Section 33 + trailing block); the duplicate hover in Section 33 is removed, leaving the trailing block as the single source. (c) Added the EDITING RULES box above. Nothing renders differently. ROLLBACK: To revert to v3.9, the token swap is visually identical so no action is needed; if you want literals back, replace the var() references in Section 33 and trailing items 3-4 with their hex (--epic-ink = #1A1A1A, --epic-btn = linear-gradient(135deg,#e62d2a,#d11c15), etc.), and re-add the removed Section 33 .epic-cta-banner .epic-btn-outline:hover. To revert to v3.8.2, restore Section 33's .epic-cta-banner background to the red gradient (linear-gradient(135deg, var(--epic-red) 0%, var(--epic-red-light-2) 100%)), remove the new .epic-cta-banner h2/h3/p/.red text rules added to Section 33, restore Section 33's .epic-cta-banner .epic-btn-outline:hover to the white-fill/red-text version, and restore the trailing override block's item 3 (.epic-cta-banner .epic-btn-outline white text/border, hover white fill) plus the `.epic-cta-banner a` underline rule. To revert to v3.8.1, restore Sections 31 and 35 from a v3.8.1 backup (they were deleted in v3.8.2). To revert to v3.8, remove the .ef-contact-list rules added to Section 38. To revert to v3.7, remove Section 38 (and its v3.8 addition banner). To revert to v3.6, also remove the #team-overlay-close img rotate rule again (item 1 of the trailing overrides block) — but note v3.6 removed it IN ERROR, so you almost certainly do not want to. To revert to v3.5, also remove Section 37. To revert to v3.4, remove Sections 34-37, remove the three margin/padding lines added to Section 28's mobile @media block (margin-top / margin-bottom / padding-top on .elementor-element-0f78637 p:last-child), and optionally restore the duplicate #team-overlay-close img rule that was removed from the end of Section 33 (it was identical to the documented one in the trailing overrides block, so leaving it out changes nothing). To revert to v3.3, change the H1 font-size in Section 28 from clamp(2.25rem, 3.6vw, 3.25rem) back to clamp(2.5rem, 5.2vw, 4.25rem). To revert to v3.2, also restore Section 28's other v3.3 values (H1 max-width: 22ch, button padding: 14px 28px, button font-size: 1rem, body copy floor: 1rem) and remove the new hero button :hover block. To revert further, paste your saved v2.5 backup. ============================================================ */ /* === EPIC IT OVERRIDES v3 — START ========================== */ /* ------------------------------------------------------------ CHANGES FROM v3.8.2 → v3.9 ------------------------------------------------------------ CTA banner restyle. The full-width .epic-cta-banner blocks (the "Ready to talk?" / "Book a free assessment" panels that sit at the foot of the .epic-content service and industry pages) moved from the red gradient to a charcoal panel with a solid-red button, for a calmer, more premium close that reads as enterprise rather than promotional. UPDATED — Section 33: - .epic-cta-banner background: red gradient -> flat #1A1A1A. - Added .epic-cta-banner h2/h3 (white), p (72% white) and .red (lightened to #FF6B5E so a red accent word stays legible on dark) so the panel's text contrasts correctly on charcoal. - .epic-cta-banner .epic-btn-outline:hover: was white-fill / red-text (correct on red); now a deeper red solid with a lift, to suit the dark panel. UPDATED — trailing "Custom CSS overrides" block (item 3): - .epic-cta-banner .epic-btn-outline: was a white outline (transparent fill, white text/border); now a SOLID red button (red gradient fill, white text, no border) with a red-glow hover lift. This is the visible button change. - Removed the underline from the `.epic-cta-banner a` rule (kept the white colour) so the solid button is not underlined. In-banner text links, if any are ever added, simply inherit white without a decoration. NOTE: the general (non-banner) .epic-btn-outline:hover rule in Section 33 is unchanged — outline buttons elsewhere still fill white with red text. Only the in-banner button changed. ------------------------------------------------------------ CHANGES FROM v3.8.1 → v3.8.2 ------------------------------------------------------------ Cleanup. Removed the two dead footer sections that targeted the retired ElementsKit footer. The current footer is the custom .epic-footer (handled by Section 38), so these no longer matched anything live. REMOVED: - Section 31 (Footer office addresses). Targeted .ekit-template-content-footer with widget IDs 29b7674, 0d94773, e09e99d. Dead since the footer moved to .epic-footer. - Section 35 (Footer link columns stacked spacing). Targeted widget IDs 3c87d58 and 3ab8b97. Same reason. NOTE on numbering: the section numbers are intentionally left with gaps (no 31, no 35) so the existing changelog references to Sections 32-38 stay accurate. Do not renumber. ------------------------------------------------------------ */ /* ------------------------------------------------------------ CHANGES FROM v3.8 → v3.8.1 ------------------------------------------------------------ Follow-up to v3.8. The Section 38 fix corrected the footer link columns, but the contact column's call/email list was still spreading on mobile (Email pinned to the top, Call to the middle, office cards to the bottom of a tall column). UPDATED: - Section 38: added two rules for .ef-contact-list. It is the same mechanism as the link lists, just a list Section 38 did not name. justify-content:flex-start with height:auto stops the list centring, and flex:0 0 auto pins each row to its text height so the column cannot fan them apart. No other change. Desktop is unaffected. ------------------------------------------------------------ */ /* ------------------------------------------------------------ CHANGES FROM v3.7 → v3.8 ------------------------------------------------------------ One new section appended (38). Sections 0-37 and the trailing overrides block are unchanged. ADDED: - Section 38: Footer link columns. The custom HTML footer (.epic-footer) is styled by a style block embedded inside its own HTML widget, not by this file. Those embedded rules are NOT !important, so this section overrides them from here using !important plus full specificity. This is necessary because head-level Additional CSS otherwise loses to the body-level inline style block at equal specificity. The footer link lists (.ef-col ul) are flex columns. When a column ends up taller than its text content, the links spread to fill it, which renders as large vertical gaps ("voids") on mobile. flex:0 0 auto pins each link to its text height so the column can never fan them apart. justify-content:flex-start and align-self:start stop the list and column from stretching. The max-width:600px block forces the single-column stack even if the widget's own @media rule is stripped by CSS optimisation on mobile. Safe on desktop: links are already at text height there. NOTE on the OLD footer sections (31 and 35): both target an ElementsKit footer (.ekit-template-content-footer and widget IDs 29b7674 / 0d94773 / e09e99d / 3c87d58 / 3ab8b97) that does NOT match the current custom .epic-footer structure (.ef-grid, .ef-col, .ef-contact). They are very likely dead now. Left in place rather than removed in this pass. Audit and remove them in a future cleanup once the ElementsKit footer is confirmed fully retired. ------------------------------------------------------------ CHANGES FROM v3.6 → v3.7 ------------------------------------------------------------ Correction. v3.6 removed the #team-overlay-close img rotate rule on the assumption it was a redundant close-button fix. That was WRONG: that rule is needed — the Meet the Team overlay's close glyph is a "+" at source, and the 45° rotation is what turns it into an "X". This pass restores it (item 1 of the trailing overrides block). DO NOT REMOVE the #team-overlay-close img rotate rule. It is intentional and load-bearing. STILL OPEN (not addressed in this file): - The "double X" on the MOBILE MEGA-MENU close button (.elementskit-menu-close). This is a different element from the team overlay. The button's markup is literally a text "X" with empty/invisible pseudo-elements, so the duplicate only renders when the offcanvas menu is open on a phone and is NOT produced by anything in this Additional CSS file. The likely source is the menu widget's own Custom CSS in Elementor, or a code snippet. Locate and remove the second X there. If it must be handled from here instead, the override is a one-liner once the second X's source (text vs injected icon) is known. ------------------------------------------------------------ CHANGES FROM v3.5 → v3.6 ------------------------------------------------------------ Two small fixes from a follow-up review. One new section appended (37) and one stale rule removed from the trailing overrides block. Sections 1-36 unchanged. ADDED: - Section 37: Footer seam. The footer's flex-column parent (fa6cc25) carries gap:20px, with the black footer section (b71b7b1) as its last child. That 20px flex gap sat between the page content and the footer; against the white page background it rendered as a thin white strip above the footer. Zeroing the parent's gap closes it. The wrapper holds only an empty placeholder + the footer, so this has no other effect. Same ID-fragility caveat as Sections 31 and 35 — fa6cc25 is auto-generated and can shift if the footer wrapper is re-saved. REMOVED: - The "#team-overlay-close img { transform: rotate(45deg) }" rule (was item 1 of the trailing "Custom CSS overrides" block). It rotated a "+" glyph into an "X" close button. The overlay icon is now already an X at source, so the rotation was working against a correct glyph and producing a wonky result. Removing it lets the native icon show as-is. NOTE: if a second X still shows after this, it is a duplicate close element in the overlay template, not CSS. NOT CHANGED IN THIS PASS: - No horizontal overflow on desktop (scrollWidth == clientWidth verified), so no fix needed there. ------------------------------------------------------------ CHANGES FROM v3.4 → v3.5 ------------------------------------------------------------ Mobile spacing pass. Surfaced in a mobile browser audit of the homepage. Three new sections appended (34-36), one conservative line-set added to Section 28's existing mobile media query, and one stray duplicate removed. Sections 1-33 are otherwise unchanged. ADDED: - Section 34: Testimonial slider. .case-track2 is a flexbox with no align-items, so cards stretch to the height of the tallest review; .testi-avatar2 carries margin-top:auto, which pins the avatar to the bottom of that stretched card. On mobile (one card visible) this left a large empty band between the quote and the avatar. Scoped to max-width:1024px so the desktop multi-card row keeps its equal-height look. - Section 35: Footer link columns. "Our Services" (3c87d58) and "Pages" (3ab8b97) each carry margin-top:80px. Fine side-by-side on desktop, but on mobile they stack and the 80px becomes a large gap between columns. Reduced to 32px under max-width:767px only. Same fragility note as Section 31 — these IDs are auto-generated by Elementor and can shift if the footer template (post 12212) is re-saved. - Section 36: "Our technology partners" label (c4a95b6). The inner heading has margin 0 top / 16px bottom, so it crammed directly under the "Claim our offer" CTA button. Added margin-top so it sits clear of the button on mobile. UPDATED — Section 28 (Homepage hero polish): - Added three lines to the existing @media (max-width: 768px) block, on .elementor-element-0f78637 p:last-child (the "Australia's first AI-led MSP" tagline): trimmed margin-top 1.5em → 1em, margin-bottom 1.75em → 1.25em, padding-top 1.25em → 0.9em. Tightens the bordered tagline's vertical rhythm on phones only. The border-top divider and the desktop spacing are unchanged and intentional. REMOVED: - The stray, undocumented #team-overlay-close img rule that sat at the end of Section 33. It was byte-identical to item 1 of the trailing "Custom CSS overrides" block, which is kept. No behavioural change. NOT CHANGED IN THIS PASS: - Hero inter-element spacing beyond the tagline trim above. Most of the hero's vertical spacing is intentional (the bordered tagline + divider), so it was left alone. - The "7 reasons" section top spacing. Looked larger than it is on audit — the visible band was mostly the preceding card's own whitespace, not section padding. Deferred. - The trailing "Custom CSS overrides" block still overlaps additively with Section 33 (it adds shadows / transforms / hover lifts on top of Section 33's colour-only rules, so it is not pure duplication). Left in place. Tidy in a future pass if a full refactor of 33 + trailing is done. ------------------------------------------------------------ CHANGES FROM v3.3 → v3.4 ------------------------------------------------------------ Single-line change — H1 font-size in Section 28 only. UPDATED — Section 28 (Homepage hero polish): - H1 font-size: clamp(2.5rem, 5.2vw, 4.25rem) → clamp(2.25rem, 3.6vw, 3.25rem) Why: v3.3's max-width fix (22ch → 36ch) didn't actually improve the wrap because the binding constraint at this viewport is the two-column hero layout, not max-width. The H1 column is ~600-700px wide; at the previous 68px font-size ceiling that left room for only one short word per line, producing a 5-6 line wrap. Dropping the font-size ceiling to 52px (3.25rem) lets the H1 fit the column properly — wraps to 4 lines on desktop now, and the hero text/image proportions feel balanced. Side effects to note: - max-width: 36ch from v3.3 is now redundant at desktop widths (column constrains first), but harmless. Leaving it in place because it still acts as a safety cap on wider single-column layouts. - Existing line-height (1.05) reads fine at the smaller font size — no change needed. NOT CHANGED IN THIS PASS: - The "Australia's first AI-led MSP" tagline styling. Still holding until the "first AI-led MSP" claim wording is finalised. - The remaining wrap nit ("cyber security" split, "for" dangling at end of line 2). Pushing smaller to chase a 3-line break would erode the hero's presence. The clean fix is a manual BR tag in the Elementor H1 widget to lock the wrap points — defer until you decide the final tagline copy. - The trailing "Custom CSS overrides" block still has duplication with Sections 28 and 33. Tidy in a future pass. ------------------------------------------------------------ CHANGES FROM v3.2 → v3.3 ------------------------------------------------------------ Hero polish only. Section 28 updated in place — no new sections, no removed sections. All other sections (1-27, 29-33, and the trailing custom overrides block) unchanged. UPDATED — Section 28 (Homepage hero polish): - H1 max-width: 22ch → 36ch. Previous value was forcing the homepage H1 to wrap to five short lines on desktop. (NOTE: v3.4 deprioritised this fix — see above. The max-width is now redundant but harmless.) - Hero CTA button padding: 14px 28px → 18px 38px. - Hero CTA button font-size: 1rem → 1.0625rem (17px). - Hero CTA button: added hover lift (translateY(-2px) with brighter shadow). Section 10 sets transform:none on every .elementor-button:hover site-wide; the new rule here targets the hero buttons specifically via higher specificity so the lift applies ONLY to the homepage hero CTA, not to buttons elsewhere on the site. - Body copy font-size floor: 1rem → 1.0625rem (17px). Ceiling stays at 1.125rem (18px) so it does not inflate on large viewports. ------------------------------------------------------------ CHANGES FROM v3.1 → v3.2 ------------------------------------------------------------ Five new sections appended (29-33) addressing experience inconsistencies surfaced in a cross-template browser audit (transformation pages, template-blocks pages, pure Elementor pages, and the ElementsKit footer template). ADDED: - Section 29: Transformation page hero — caps height and adds object-fit: cover so the banner image no longer overflows the viewport on the right. - Section 30: Bridges legacy --primary-color and font tokens in style.css to brand-correct values. Plus seven hardcoded off-brand colour overrides (.transform-quote-image, .red-underline, .bg-red, .block-quote, .table-intro, .wp-block-epicit-blocks-epic-quote, #popoverbanner, .bg-gold). - Section 31: Footer office addresses — drops three address widgets from 19px to 14px. Pinned to specific Elementor widget IDs (29b7674, 0d94773, e09e99d). If the footer template is re-saved these IDs may shift. - Section 32: Transformation H2s — catches the 66px UPPERCASE section headings (Challenge / Solution / Success) sitting in .content-wrapper-text. v3.1 section 3 missed them because it only targets .content-wrapper (no -text suffix). - Section 33: Agent content component library overrides. The file epic-content-styles.css hardcodes #e90000 in 13 places as literal hex values, so the section 30 token bridge cannot reach them. This section mirrors each declaration and routes to brand red. NOT CHANGED IN THIS PASS: - The two source files (style.css and epic-content-styles.css) still hold off-brand values at source. v3.2 papers over them safely from the override layer. A source-side cleanup is queued separately; when it lands, sections 30 (hardcoded part) and 33 can be deleted. ------------------------------------------------------------ CHANGES FROM v2.5 → v3.1 ------------------------------------------------------------ This pass became possible because we fixed the source in style.css v2.0 — correct brand red, no DIN font, sensible h1/h2 defaults, dead legacy templates removed. As a result, ~9 sections of v2.5 were either patching things that no longer exist, or targeting selectors that don't match anything. v3.1 PATCH: Re-added a defensive `text-transform: none` override (now Section 5b). The original v3 removed this thinking the source was clean, but a separate minify bundle (bb147.css, for service / block-template pages) is still shipping the legacy `h1, h2 { text-transform: uppercase }` rule. The defensive override keeps content headings in normal case regardless of which bundle is stale. REMOVED (confirmed via live audit): - Old "Kill legacy uppercase transform" block (base CSS no longer makes h1/h2/h3 uppercase, so override is moot) - Old "[style*=#e90000]" inline-style patch (legacy red is gone at the source — no inline styles use it any more) - "Neutralise the 60px red underline" (target classes .heading-underline, .section-title, .page-title don't match any element on tested pages) - "Tone down legacy orange CTA" (.cta-section.orange, .staff-cta, [class*=orange-cta], .callout-orange — none match any element) - "Reduce visual weight of $5K guarantee" ([class*=guarantee] and [class*=onboarding-fee] — no matches) - "Hide phone hours in nav on mobile" ([class*=phone-hours] and similar — no matches) - "Future-use utility classes" (.epic-logo-wall, .epic-founder-quote, .epic-trust-line — defined for "future use", never applied) - "Fix Elementor container vertical padding" (used an undefined custom property, was a no-op) - "Hero utility classes" (.epic-hero-prelabel, .epic-hero-trust-row — defined for future use, never applied) TRIMMED: - Heading-size override (was: section 4) — dropped the .single-faqs and .single-faq_page selectors since the FAQ system was retired in style.css v2.0. KEPT (verified still in use): - All Elementor + ElementsKit patches (mega menu colours, button standardisation, card hover, icon motion) - All blog / transformation / Polaroid card overrides - Homepage hero polish — element IDs 6da750a and 0f78637 DO exist on the live homepage (verified) - Section background utility classes — .epic-section-soft IS in use on the homepage (verified) - The "a { color: inherit }" rule (intentional design choice, stops every link from being brand red by default) ------------------------------------------------------------ */ /* --- 0. Font loading (Inter) -------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* --- 1. Brand tokens ---------------------------------------- */ :root { --epic-red: #e62d2a; --epic-black: #000000; --epic-red-light-1: #f98071; --epic-red-light-2: #fb493a; --epic-red-dark-1: #d11c15; --epic-red-dark-2: #a00707; --epic-muted: #6a6a6a; --epic-divider: #e8e8e8; --epic-bg-white: #ffffff; --epic-bg-soft: #f6f4f3; --epic-bg-blush: #fef6f4; --epic-bg-dark: #000000; --epic-radius: 8px; --epic-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* v3.10 — semantic tokens. New-skin rules read from these so a brand change is one edit. Reference the token, don't re-hardcode. */ --epic-ink: #1A1A1A; /* charcoal panels / dark surfaces */ --epic-on-dark: #ffffff; /* text on dark */ --epic-on-dark-dim: rgba(255, 255, 255, .72); /* secondary text on dark */ --epic-red-on-dark: #FF6B5E; /* red accent kept legible on dark */ --epic-btn: linear-gradient(135deg, var(--epic-red), var(--epic-red-dark-1)); --epic-btn-hover: linear-gradient(135deg, var(--epic-red-light-2), var(--epic-red-dark-2)); --epic-btn-glow: 0 8px 18px rgba(230, 45, 42, 0.34); } /* --- 2. Font enforcement (site-wide) ------------------------ */ /* Required because Elementor widgets inline their own font-family in places. !important keeps Inter consistent. */ html, body, h1, h2, h3, h4, h5, h6, p, li, a, span, div, button, input, select, textarea, .elementor-widget-heading .elementor-heading-title, .elementor-widget-text-editor, .elementor-button, .wysiwyg-content, .content-wrapper, .epic-content { font-family: var(--epic-font) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* --- 3. Heading sizes for legacy theme containers ----------- */ /* Adds responsive clamp() scaling on top of style.css base sizes, but only inside legacy theme content containers. */ .content-wrapper h1, .wysiwyg-content h1, .epic-content h1 { font-size: clamp(2rem, 4vw, 3.25rem) !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } .content-wrapper h2, .wysiwyg-content h2, .epic-content h2 { font-size: clamp(1.5rem, 2.5vw, 2rem) !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -0.015em !important; } .content-wrapper h3, .wysiwyg-content h3, .epic-content h3 { font-size: clamp(1.125rem, 1.6vw, 1.375rem) !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -0.01em !important; } /* --- 4. Body copy baseline ---------------------------------- */ body { font-size: 16px; line-height: 1.6; color: var(--epic-black); font-feature-settings: "kern" !important; } .wysiwyg-content p, .content-wrapper p, .epic-content p, .elementor-widget-text-editor p { line-height: 1.65; margin-bottom: 1em; } /* --- 5. Typography polish ----------------------------------- */ h1, h2, h3 { letter-spacing: -0.01em !important; font-feature-settings: "ss01", "kern" !important; } /* --- 5b. Defensive: suppress legacy uppercase --------------- */ /* The legacy style.css used to set h1/h2 to uppercase. After the v2.0 source cleanup that rule is gone, but stale minify bundles or third-party stylesheets can still ship a similar rule. This blanket override keeps content headings in normal case across all legacy-template containers. */ .content-wrapper h1, .content-wrapper h2, .content-wrapper h3, .wysiwyg-content h1, .wysiwyg-content h2, .wysiwyg-content h3, .epic-content h1, .epic-content h2, .epic-content h3, #page-heading-wrapper h1, #page-heading-wrapper h2 { text-transform: none !important; } /* --- 6. Link defaults --------------------------------------- */ /* Inherit text colour by default (rather than brand red) so in-content links don't shout. Explicit inline link styling below in section 17. */ a { color: inherit; } /* --- 7. Tabular numbers for stats --------------------------- */ .elementor-counter-number, [class*="stat"] [class*="number"], .epic-stat-value { font-feature-settings: "tnum", "ss01", "kern" !important; font-variant-numeric: tabular-nums !important; } /* --- 8. Text selection -------------------------------------- */ ::selection { background: var(--epic-red); color: white; } ::-moz-selection { background: var(--epic-red); color: white; } /* --- 9. Smooth scroll --------------------------------------- */ html { scroll-behavior: smooth; } /* --- 10. Elementor buttons ---------------------------------- */ .elementor-button, a.elementor-button-link { background: var(--epic-red) !important; background-image: none !important; border-radius: var(--epic-radius) !important; transition: background-color 0.15s ease !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } .elementor-button:hover, a.elementor-button-link:hover { background: var(--epic-red-dark-1) !important; transform: none !important; } /* --- 11. Legacy / WP / form buttons ------------------------- */ /* Covers .btn / .button in legacy content, WP block buttons, and form submit inputs. Plain button elements are reset minimally in style.css. */ .btn, .button, input[type="submit"], input[type="button"], .wp-block-button__link, .legacy-cta { background: var(--epic-red) !important; color: #fff !important; border: none !important; border-radius: var(--epic-radius) !important; padding: 12px 24px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; transition: background-color 0.15s ease !important; } .btn:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover, .wp-block-button__link:hover { background: var(--epic-red-dark-1) !important; } /* --- 12. Mega menu — neutralise current-page red highlight - */ .elementor-widget-nav-menu .current_page_item > a, .elementor-widget-nav-menu .current-menu-item > a, .elementor-widget-nav-menu .current_page_ancestor > a, .elementor-widget-nav-menu .current-menu-ancestor > a, .elementor-widget-nav-menu .current_page_parent > a, .elementor-widget-nav-menu .current-menu-parent > a, .elementor-widget-page-list .current_page_item > a, .elementor-widget-page-list .current-menu-item > a, .elementor-widget-page-list .current_page_ancestor > a, .elementor-widget-page-list .current-menu-ancestor > a, .elementor-widget-page-list li.current_page_item, .elementor-widget-page-list li.current-menu-item, .elementor-nav-menu .current_page_item > a, .elementor-nav-menu .current-menu-item > a, .elementor-nav-menu .current_page_ancestor > a, .menu-item.current_page_item > a, .menu-item.current-menu-item > a, .menu-item.current_page_ancestor > a, .menu-item.current-menu-parent > a { color: var(--epic-black) !important; background: transparent !important; background-color: transparent !important; font-weight: inherit !important; text-decoration: none !important; } .elementor-widget-nav-menu a:hover, .elementor-widget-page-list a:hover, .menu-item a:hover { color: var(--epic-red) !important; background: transparent !important; } /* --- 13. ElementsKit mega-menu link colour ------------------ */ .elementskit-megamenu-panel .elementor-widget-elementskit-page-list a, .elementskit-megamenu-panel .elementor-widget-elementskit-page-list a .ekit_page_list_content, .elementskit-megamenu-panel .elementor-widget-elementskit-page-list a .elementor-icon-list-text, .elementskit-megamenu-panel .elementor-widget-elementskit-page-list a .ekit_page_list_title_title, .elementskit-megamenu-panel a.ekit_badge_left, .elementskit-megamenu-panel a.ekit_badge_left .ekit_page_list_content { color: var(--epic-black) !important; } .elementskit-megamenu-panel .elementor-widget-elementskit-page-list a:hover, .elementskit-megamenu-panel .elementor-widget-elementskit-page-list a:hover .ekit_page_list_content, .elementskit-megamenu-panel .elementor-widget-elementskit-page-list a:hover .elementor-icon-list-text { color: var(--epic-red) !important; } /* --- 14. Card hover elevation ------------------------------- */ .elementor-widget-image-box .elementor-image-box-wrapper, [class*="case-study"] article, [class*="transformation"] article, .elementor-post.elementor-grid-item article { transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .elementor-widget-image-box:hover .elementor-image-box-wrapper, [class*="case-study"] article:hover, [class*="transformation"] article:hover, .elementor-post.elementor-grid-item:hover article { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important; } /* --- 15. Polaroid card shadows (softer) --------------------- */ .polaroid, .polaroid-card, [class*="polaroid"], .team-member-card, .staff-card { box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10) !important; border-radius: 12px !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .polaroid:hover, .polaroid-card:hover, [class*="polaroid"]:hover, .team-member-card:hover, .staff-card:hover { box-shadow: 0 4px 6px rgba(16,24,40,.05), 0 12px 24px rgba(16,24,40,.10) !important; transform: translateY(-2px); } /* --- 16. Focus states (accessibility) ----------------------- */ a:focus-visible, button:focus-visible, .elementor-button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--epic-red) !important; outline-offset: 3px !important; border-radius: 4px; } /* --- 17. Inline link styling -------------------------------- */ .elementor-widget-text-editor a:not(.elementor-button), .wysiwyg-content a:not(.elementor-button), .epic-content a:not(.elementor-button) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(230, 45, 42, 0.4); transition: text-decoration-color 0.15s ease; color: inherit; } .elementor-widget-text-editor a:not(.elementor-button):hover, .wysiwyg-content a:not(.elementor-button):hover, .epic-content a:not(.elementor-button):hover { text-decoration-color: var(--epic-red); color: var(--epic-red); } /* --- 18. Image rounded corners ------------------------------ */ .elementor-widget-image img:not([class*="logo"]):not([class*="badge"]):not([alt*="logo"]) { border-radius: 8px; } /* --- 19. Blockquote ----------------------------------------- */ blockquote { border-left: 3px solid var(--epic-red); padding: 16px 24px; font-style: normal; font-size: 1.125rem; line-height: 1.5; color: var(--epic-black); background: var(--epic-bg-soft); border-radius: 0 8px 8px 0; margin: 24px 0; } /* --- 20. Scrollbar ------------------------------------------ */ * { scrollbar-width: thin; scrollbar-color: var(--epic-muted) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--epic-muted); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--epic-black); } /* --- 21. Icon micro-motion ---------------------------------- */ .elementor-widget-icon-list .elementor-icon-list-icon, .elementor-icon-wrapper { transition: transform 0.2s ease; } .elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-icon { transform: scale(1.1); } /* --- 22. WP pagination (.page-numbers) ---------------------- */ /* Safety net for WordPress's paginate_links() output, in case it ever appears (the custom #pagination in style.css uses different selectors). */ .pagination a, .pagination span, .page-numbers { background: var(--epic-bg-soft) !important; color: var(--epic-black) !important; border-radius: 6px !important; border: 1px solid var(--epic-divider) !important; padding: 8px 14px !important; margin: 0 4px !important; min-width: auto !important; width: auto !important; height: auto !important; line-height: 1.2 !important; font-weight: 500 !important; transition: all 0.15s ease !important; } .pagination a:hover, .page-numbers:hover, .page-numbers.current { background: var(--epic-red) !important; color: #fff !important; border-color: var(--epic-red) !important; } /* --- 23. Transformation / case study headings --------------- */ .single-transformations .wysiwyg-content h1, .single-transformations .content-wrapper h1 { font-size: 2.5rem !important; line-height: 1.2 !important; } @media (max-width: 768px) { .single-transformations .wysiwyg-content h1, .single-transformations .content-wrapper h1 { font-size: 1.8rem !important; line-height: 1.2 !important; } } /* --- 24. Blog post titles ----------------------------------- */ #news-article-heading h1, #news-article-heading .content-wrapper h1, .single-post #news-article-heading h1 { font-size: 2.375rem !important; line-height: 1.25 !important; text-transform: none !important; font-weight: 700 !important; max-width: 800px; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { #news-article-heading h1, #news-article-heading .content-wrapper h1, .single-post #news-article-heading h1 { font-size: 1.75rem !important; line-height: 1.3 !important; } } /* --- 25. Blog post subheadings ------------------------------ */ .single-post .content-wrapper h2, .single-post .wysiwyg-content h2, .single-post .epic-content h2 { font-size: 1.5rem !important; line-height: 1.3 !important; text-transform: none !important; font-weight: 700 !important; } .single-post .content-wrapper h3, .single-post .wysiwyg-content h3, .single-post .epic-content h3 { font-size: 1.25rem !important; line-height: 1.35 !important; text-transform: none !important; font-weight: 600 !important; } @media (max-width: 768px) { .single-post .content-wrapper h2, .single-post .wysiwyg-content h2, .single-post .epic-content h2 { font-size: 1.375rem !important; } .single-post .content-wrapper h3, .single-post .wysiwyg-content h3, .single-post .epic-content h3 { font-size: 1.125rem !important; } } /* --- 26. Blog post footer ----------------------------------- */ #news-article-footer .content-wrapper > div > a[href*="/blog/"] { display: none !important; } #news-article-footer .content-wrapper > div { display: flex !important; justify-content: center !important; gap: 24px !important; max-width: 800px !important; margin: 0 auto !important; } #news-article-footer .content-wrapper > div > a { flex: 1 !important; max-width: 380px !important; } #news-article-footer .content-wrapper > div > a h2 { font-size: 1rem !important; line-height: 1.35 !important; text-transform: none !important; font-weight: 600 !important; } #news-article-footer > .content-wrapper > h2 { font-size: 1.125rem !important; font-weight: 600 !important; text-transform: none !important; margin-bottom: 16px !important; } /* --- 27. Section background utility classes ---------------- */ /* .epic-section-soft is in use on the homepage. Others are available for future Elementor sections. */ .epic-section-soft { background-color: var(--epic-bg-soft) !important; } .epic-section-blush { background-color: var(--epic-bg-blush) !important; } .epic-section-dark { background-color: var(--epic-bg-dark) !important; color: var(--epic-bg-white) !important; } .epic-section-dark h1, .epic-section-dark h2, .epic-section-dark h3, .epic-section-dark h4, .epic-section-dark h5, .epic-section-dark h6, .epic-section-dark p, .epic-section-dark li, .epic-section-dark span { color: var(--epic-bg-white) !important; } .epic-section-accent { background-color: var(--epic-red) !important; color: var(--epic-bg-white) !important; } .epic-section-accent h1, .epic-section-accent h2, .epic-section-accent h3, .epic-section-accent h4, .epic-section-accent h5, .epic-section-accent h6, .epic-section-accent p, .epic-section-accent li, .epic-section-accent span { color: var(--epic-bg-white) !important; } /* --- 28. Homepage hero polish ------------------------------- */ /* Targets the live homepage hero by Elementor widget IDs. Verified live on 2026-05-26: #6da750a is the H1 widget, #0f78637 is the text-editor widget. v3.5 update: added three lines to the mobile @media block below to trim the bordered tagline's vertical spacing on phones only (see v3.5 changelog). Desktop spacing and the border-top divider are intentional and unchanged. v3.4 update: H1 font-size clamp tightened from clamp(2.5rem, 5.2vw, 4.25rem) to clamp(2.25rem, 3.6vw, 3.25rem) so the H1 fits the two-column hero layout without forcing a 5-6 line wrap. Result on desktop: clean 4-line wrap with balanced text/image proportions. v3.3 updates (carried forward): - H1 max-width set to 36ch. With the v3.4 font-size now smaller, max-width is no longer the binding constraint at desktop widths but remains a useful safety cap. - Hero CTA padding bumped to 18px 38px, font-size to 1.0625rem. - Hover lift specifically for hero buttons. Section 10 sets transform:none site-wide on Elementor buttons; the more specific selector here overrides that for the hero only. - Body copy floor raised to 1.0625rem (17px) for a more confident default at typical desktop widths. Ceiling unchanged at 1.125rem. */ .elementor-element-6da750a .elementor-heading-title { font-size: clamp(2.25rem, 3.6vw, 3.25rem) !important; line-height: 1.05 !important; font-weight: 800 !important; letter-spacing: -0.025em !important; max-width: 36ch !important; margin-bottom: 0.4em !important; } .elementor-element-0f78637 p { font-size: clamp(1.0625rem, 1.15vw, 1.125rem) !important; line-height: 1.6 !important; color: #1a1a1a !important; max-width: 52ch !important; margin-bottom: 1.1em !important; } .elementor-element-0f78637 p:last-child { font-size: 0.95rem !important; font-weight: 600 !important; letter-spacing: 0.01em !important; color: var(--epic-black) !important; text-transform: none !important; margin-top: 1.5em !important; margin-bottom: 1.75em !important; padding-top: 1.25em !important; border-top: 1px solid var(--epic-divider) !important; max-width: 42ch !important; } .elementor-element-6da750a { margin-top: 0.5em !important; } .elementor-element-6da750a ~ * .elementor-button, .elementor-element-0f78637 ~ * .elementor-button, .elementor-element-0f78637 + * .elementor-button { padding: 18px 38px !important; font-size: 1.0625rem !important; font-weight: 600 !important; border-radius: var(--epic-radius) !important; box-shadow: 0 1px 2px rgba(230, 45, 42, 0.18), 0 4px 12px rgba(230, 45, 42, 0.12) !important; } .elementor-element-6da750a ~ * .elementor-button:hover, .elementor-element-0f78637 ~ * .elementor-button:hover, .elementor-element-0f78637 + * .elementor-button:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(230, 45, 42, 0.25), 0 12px 24px rgba(230, 45, 42, 0.18) !important; } @media (max-width: 768px) { .elementor-element-6da750a .elementor-heading-title { font-size: clamp(2rem, 8vw, 2.75rem) !important; line-height: 1.1 !important; max-width: 100% !important; } .elementor-element-0f78637 p:last-child { max-width: 100% !important; /* v3.5: trim the bordered tagline's spacing on phones only */ margin-top: 1em !important; margin-bottom: 1.25em !important; padding-top: 0.9em !important; } } /* ============================================================ v3.2 ADDITIONS — added 2026-05-27 ============================================================ */ /* --- 29. Transformation page hero --------------------------- */ /* Caps the height of #static-banner-wrapper and adds object-fit: cover so the banner image no longer overflows the viewport on the right. Also overrides the legacy mobile zoom hack (max-width: 160%; margin-left: -30%) in style.css line ~875 — that was a workaround for the same root problem and now actively conflicts. Verified via browser audit: pre-fix banner was rendering at 2550px wide on a 1690px viewport with image stretched. */ #static-banner-wrapper, .content-banner-wrapper { height: clamp(420px, 50vh, 560px); position: relative; } #static-banner-wrapper > img, .content-banner-wrapper > img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } @media (max-width: 799px) { #static-banner-wrapper, .content-banner-wrapper { height: clamp(280px, 45vh, 380px); } #static-banner-wrapper > img, .content-banner-wrapper > img { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; } } /* --- 30. Legacy token bridge + style.css off-brand fixes ---- */ /* Two related jobs: 1. Alias the legacy variable tokens from style.css to brand values. Any base CSS rule reading from var(--primary-color) or var(--main-font) now silently resolves to brand. 2. Override the hardcoded hex values in style.css that bypass the variable system. Seven selectors total — three reds, three coral, two non-brand orange/gold values. Coral elements move to Gradient 1 to preserve warmth. Orange and gold go to full brand red (no equivalents in the brand guide). */ :root { /* Bridge legacy font tokens to Inter */ --main-font: var(--epic-font); --heading-font: var(--epic-font); --alt-font: var(--epic-font); /* Bridge legacy primary colour to brand red */ --primary-color: var(--epic-red); --primary-color-transparent: rgba(230, 45, 42, 0.7); } /* Hardcoded off-brand reds in style.css */ .transform-quote-image { border-color: var(--epic-red) !important; } .red-underline::after { background: var(--epic-red) !important; } .bg-red { background-color: var(--epic-red) !important; } /* Off-brand coral pink → Gradient 1 (warmest in-brand tone) */ .block-quote, .wp-block-epicit-blocks-epic-quote, .table-intro { background-color: var(--epic-red-light-1) !important; } /* Orange and gold → brand red (no equivalent in the palette) */ #popoverbanner > div { background-color: var(--epic-red) !important; } .bg-gold { background-color: var(--epic-red) !important; } /* --- 32. Transformation page H2s ---------------------------- */ /* Case study pages render their section headings (Challenge, Solution, Success) at 66px UPPERCASE — legacy base style. v3.1 section 3 only catches H2 inside .content-wrapper, .wysiwyg-content, and .epic-content. The transformation template wraps these headings in .content-wrapper-text (with the -text suffix), and the h2 is a sibling of .wysiwyg-content rather than a descendant. This catches that case explicitly. */ .single-transformations .content-wrapper-text h2, .single-transformations h2 { font-size: clamp(1.5rem, 2.5vw, 2rem) !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: -0.015em !important; } /* --- 33. Agent content component library — colour overrides */ /* epic-content-styles.css defines the .epic-* component system (.epic-hero, .epic-cards, .epic-stats, .epic-cta-banner, .epic-accordion, .epic-steps, .epic-btn). It hardcodes #e90000 in 13 places as literal hex values, so the section 30 token bridge can't reach them — only direct selector overrides work. Each rule below mirrors a specific declaration in that file. When that file is updated at source (queued separately), this entire section becomes redundant. v3.9: the .epic-cta-banner is no longer a red gradient. It is now a charcoal panel with white/soft text and a solid-red button (the button itself is finished in the trailing override block, item 3). See the v3.9 changelog at the top. */ /* Text colour */ .epic-content a, .epic-content .red, .epic-stat h3, .epic-card h3, .epic-testimonial .author { color: var(--epic-red) !important; } .epic-content a:hover { color: var(--epic-red-dark-1) !important; } /* Borders */ .epic-content blockquote { border-left-color: var(--epic-red) !important; } /* Solid backgrounds — primary button + numbered step circle */ .epic-btn, .epic-steps ol li::before { background-color: var(--epic-red) !important; } .epic-btn:hover { background-color: var(--epic-red-dark-1) !important; } /* Outline button on hover (white fill, brand-red text). NOTE: this is the GENERAL outline button, used outside the CTA banner. The in-banner button is overridden below + in the trailing block, so this no longer affects the banner. */ .epic-btn-outline:hover { background-color: #fff !important; color: var(--epic-red) !important; } /* CTA banner: charcoal panel (was red gradient). v3.11: LITERAL hex (NOT var() — the optimiser drops token-based rules; see header rule 2). */ .epic-cta-banner { background: #1A1A1A !important; background-image: none !important; } /* CTA banner text on charcoal */ .epic-cta-banner h2, .epic-cta-banner h3 { color: #ffffff !important; } .epic-cta-banner p { color: rgba(255, 255, 255, 0.72) !important; } /* keep a red accent word legible on the dark panel */ .epic-cta-banner .red { color: #FF6B5E !important; } /* v3.10: the in-banner button (base AND hover) is now defined in ONE place — the trailing "Custom CSS overrides" block, item 3. The duplicate hover that used to live here has been removed. */ /* ============================================================ v3.5 ADDITIONS — added 2026-05-30 (mobile spacing pass) ============================================================ */ /* --- 34. Testimonial slider — kill the stretched-card gap --- */ /* .case-track2 is a flexbox with no align-items set, so every card stretches to match the tallest review. .testi-avatar2 carries margin-top:auto, which then pins the avatar to the bottom of that stretched card. On mobile (one card visible) that leaves a large empty band between the quote and the avatar. Desktop shows multiple cards side by side, where equal height is desirable — so scope the fix to mobile only. NOTE: if the carousel still shows two cards on tablet, drop this breakpoint to 768px so the tablet row keeps equal height. */ @media (max-width: 1024px) { .case-track2 { align-items: flex-start; } .testi-card2 .testi-avatar2 { margin-top: 20px !important; } } /* --- 36. "Our technology partners" label — space above ----- */ /* The label block (c4a95b6) has an inner heading with margin 0 top / 16px bottom, so on mobile it crams directly under the "Claim our offer" CTA button while keeping a comfortable gap to the partner logos below. Add breathing room on top so the spacing reads symmetrically. */ @media (max-width: 767px) { .elementor-element-c4a95b6 { margin-top: 28px !important; } } /* --- 37. Footer seam — remove the white strip above footer -- */ /* The footer's flex-column parent (fa6cc25) has gap:20px, and the black footer section (b71b7b1) is its last child. That 20px gap sits between the page content and the footer; with a white page background it renders as a thin white strip just above the black footer. Zeroing the parent's gap closes it. The wrapper holds only an empty placeholder + the footer, so removing its gap has no other effect. FRAGILITY: fa6cc25 is an auto-generated Elementor ID and can shift if the footer template / its wrapper is re-saved. If the white strip returns after a footer edit, re-grab the parent ID of the black footer section. */ .elementor-element-fa6cc25 { gap: 0 !important; row-gap: 0 !important; } /* ============================================================ v3.8 ADDITION — added 2026-06-04 (footer mobile spacing) ============================================================ */ /* --- 38. Footer link columns — stop list items stretching --- */ /* The current custom footer (.epic-footer) is styled by a style block embedded inside its own HTML widget, NOT by this file. Those embedded rules are not !important, so the rules below override them from here using !important plus full specificity. This is required because head-level Additional CSS otherwise loses to the body-level inline style block at equal specificity (which is why earlier edits to this file had no effect on the footer). Each .ef-col ul is a flex column. When a column ends up taller than its text content, the links spread to fill it, which reads as large vertical gaps ("voids") on mobile. flex:0 0 auto pins each link to its text height so a tall column can never fan the links apart. justify-content:flex-start and align-self:start stop the list and column from stretching. The max-width:600px block forces the single-column stack even if the widget's own @media rule is stripped by CSS optimisation on the phone. Safe on desktop: the links are already at text height there, so pinning them to it changes nothing on wide viewports. FRAGILITY: relies on the footer keeping the .epic-footer / .ef-grid / .ef-col / .ef-contact class names. If the footer is rebuilt with different class names, re-grab them. */ .epic-footer .ef-col { align-self: start !important; } .epic-footer .ef-col ul { justify-content: flex-start !important; height: auto !important; } .epic-footer .ef-col ul li { flex: 0 0 auto !important; } .epic-footer .ef-contact { align-self: start !important; } /* v3.8.1: the contact column's call/email list (.ef-contact-list) is the same case as the link lists. Its li items were being stretched and the list was centred, so Email sat at the top and Call in the middle of a tall column, with the office cards pushed to the bottom. Pin the items to text height and top-align. */ .epic-footer .ef-contact-list { justify-content: flex-start !important; height: auto !important; } .epic-footer .ef-contact-list li { flex: 0 0 auto !important; } @media (max-width: 600px) { .epic-footer .ef-grid { grid-template-columns: 1fr !important; gap: 32px !important; } } /* === Epic IT: Custom CSS overrides === */ /* Last updated: 2026-06-07 */ /* 1. Meet the Team overlay — rotate the "+" icon 45° so it reads as a close button. LOAD-BEARING: the source glyph is a "+", this rotation makes the "X". Do not remove. */ #team-overlay-close img { transform: rotate(45deg); transition: transform 0.2s ease; } /* 2. Blog footer "Further Reading" — shrink the oversized previous/next titles */ #news-article-footer .content-wrapper a p, #news-article-footer .content-wrapper a h2, #news-article-footer .content-wrapper a h3, #news-article-footer .content-wrapper a h4, #news-article-footer .content-wrapper a h5 { font-size: 20px !important; line-height: 1.4 !important; font-weight: 600 !important; } #news-article-footer .content-wrapper a h6 { font-size: 12px !important; letter-spacing: 1px !important; margin-bottom: 8px !important; } /* 3. CTA banner button — v3.9: SOLID RED (was white outline). The .epic-cta-banner is now a charcoal panel (Section 33), so the button switches from a transparent white outline to a solid red fill with a red-glow hover lift. The panel background + text colours live in Section 33. */ .epic-cta-banner .epic-btn-outline, .epic-cta-banner a.epic-btn-outline { background: #e62d2a !important; background-image: linear-gradient(135deg, #e62d2a, #d11c15) !important; color: #ffffff !important; border: 0 !important; border-color: transparent !important; text-decoration: none !important; box-shadow: none !important; transition: transform 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease; } .epic-cta-banner .epic-btn-outline:hover, .epic-cta-banner a.epic-btn-outline:hover { background-image: linear-gradient(135deg, #fb493a, #a00707) !important; color: #ffffff !important; box-shadow: 0 8px 18px rgba(230, 45, 42, 0.34) !important; transform: translateY(-2px); } /* 4. Body CTA button (.epic-btn) — make it pop like the header Contact Us button */ .epic-content a.epic-btn, .epic-btn { background-color: #e62d2a !important; color: #ffffff !important; text-decoration: none !important; box-shadow: 0 4px 12px rgba(230, 45, 42, 0.25); transition: all 0.2s ease; font-weight: 600; } .epic-content a.epic-btn:hover, .epic-btn:hover { background-color: #d11c15 !important; box-shadow: 0 6px 18px rgba(230, 45, 42, 0.4); transform: translateY(-2px); text-decoration: none !important; } /* v3.9: in-banner links inherit white, no underline (the button is the only anchor in these panels and is styled solid red above). */ .epic-cta-banner a { color: #fff !important; text-decoration: none; } /* --- Sticky header (ElementsKit header wrapper) --- */ .ekit-template-content-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 999; } /* WP admin bar offset — logged-in admins only, so the sticky header tucks under the 32px admin bar instead of hiding behind it. Normal visitors are unaffected. */ .admin-bar .ekit-template-content-header { top: 32px; } /* === EPIC IT OVERRIDES v3 — END ============================ */