/* * app.css — custom styles for ENDA website * Load order: normalize.css → webflow.css → enda-0dc47a.webflow.css → app.css * Add new styles here; do not edit the legacy Webflow CSS files. */ /* ─── Language switcher ──────────────────────────────────────────────────── */ /* Active locale label */ .locale-active { font-weight: 700; text-decoration: underline; } /* Dropdown list items: hover + focus */ .locales-list .locale.w-locales-item { display: flex; align-items: center; } .locales-list .locale.w-locales-item a.link-2 { display: block; width: 100%; padding: 8px 16px; color: inherit; text-decoration: none; transition: background-color 0.15s ease, opacity 0.15s ease; border-radius: 4px; } .locales-list .locale.w-locales-item a.link-2:hover, .locales-list .locale.w-locales-item a.link-2:focus { background-color: rgba(255, 255, 255, 0.15); opacity: 1; text-decoration: underline; } /* Ensure the dropdown list renders on top */ .locales-wrapper .w-dropdown-list { z-index: 901; } /* ─── Navigation hover / active contrast ────────────────────────────────── */ /* Webflow default: nav-link:hover = var(--dark-teal) = #193c40 — invisible on the dark animated-gradient navbar. Override to white with slight fade. */ .navbar .nav-link:hover, .navbar .nav-link:focus { color: #fff !important; opacity: 0.85; } /* Keep the active (current page) link fully white so it stands out */ .navbar .nav-link.w--current { color: #fff !important; opacity: 1; } /* ─── Footer link hover ──────────────────────────────────────────────────── */ /* Webflow defines no hover state for footer-link-3 at all */ .footer-link-3 { transition: opacity 0.15s ease, color 0.15s ease; } .footer-link-3:hover, .footer-link-3:focus { color: rgba(255, 255, 255, 0.75) !important; text-decoration: underline; opacity: 1; } /* ─── Section gradients ──────────────────────────────────────────────────── */ /* On pricing.html: section-15 (ROI) ends white at the bottom; section-cta originally has linear-gradient(0deg, #fff, #e3fcf2) which puts green at the TOP, creating a harsh white→green cut. Flip to 180deg so white is at top. Scoped to .page-pricing to avoid affecting the landing page's section-cta where the original direction is correct. */ .page-pricing .section-cta { background-image: linear-gradient(180deg, #fff, #e3fcf2) !important; } .page-success .section-cta { padding-top: 10rem; } /* ─── Consistent horizontal padding ─────────────────────────────────────── */ /* Webflow footer uses 3% / 30px / 15px at different breakpoints while content sections use 20px margins. Standardise footer inner padding on mobile. */ @media (max-width: 767px) { .footer-wrapper-2 { padding-left: 20px; padding-right: 20px; } } /* ─── Animated navbar gradient ──────────────────────────────────────────────── */ /* Defined inline on every page by Webflow; moved here to avoid duplication. */ .animated-gradient-bg-header { background: linear-gradient(-45deg, #193c40 5%, #1fa586 30%, #1fa586 70%, #193c40 95%); background-size: 400% 400%; animation: gradientMove 45s ease infinite; } @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ─── Logo carousel (trust banner) ──────────────────────────────────────────── */ /* Defined inline in of index.html and en/index.html; moved here. */ .logo-wrap { display: block; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient( to right, transparent 0%, #000 10%, #000 90%, transparent 100% ); mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); } .logo-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; width: max-content; gap: 0; will-change: transform; transform: translate3d(0, 0, 0); animation: logo-loop 60s linear infinite; } .logo-seq, .logo-seq.is-clone { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; /* gap and justify-content intentionally omitted — Webflow's .div-block-53 supplies gap: 4rem */ } .logo-wrap:hover .logo-container { animation-play-state: paused; } @keyframes logo-loop { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--loop-dist, 0px)), 0, 0); } } /* ─── Unified button hover ───────────────────────────────────────────────────── */ /* All button variants share the same hover animation as the landing page .button-cat. Transition defined on BOTH base and hover so in/out speeds are identical — CSS picks the destination state's transition for each direction. Transparent border pre-reserves the 1px so the reveal causes no layout shift. */ .button-cat, .button-template, .button-cta, .button-primary, .button-primary-2.outline-button { border: 1px solid transparent; transition: all 0.5s cubic-bezier(0.6, 0.6, 0, 1); } /* .button-primary and .button-primary-2.outline-button use a gradient background-image in the Webflow CSS. CSS cannot animate between a gradient and "none" — it snaps instantly while color/border animate at 0.5s, causing a two-speed effect. Replace with the same solid background-color that .button-cat uses so all properties animate together. */ .button-primary, .button-primary-2.outline-button { background-image: none; background-color: var(--light-green); } .button-cat:hover, .button-cat:focus, .button-template:hover, .button-template:focus, .button-cta:hover, .button-cta:focus, .button-primary:hover, .button-primary:focus, .button-primary-2.outline-button:hover, .button-primary-2.outline-button:focus { border: 1px solid var(--digital-green); background-color: #0000; background-image: none; color: var(--digital-green); -webkit-text-fill-color: var(--digital-green); transition: all 0.5s cubic-bezier(0.6, 0.6, 0, 1); } /* ─── FAQ hover ─────────────────────────────────────────────────────────────── */ /* No hover state exists in the Webflow CSS — make the clickable title legible */ .faq-item-title { cursor: pointer; transition: opacity 0.15s ease; } .faq-item-title:hover, .faq-item-title:focus { opacity: 0.75; } /* ─── Logo hover (nav + footer) ─────────────────────────────────────────────── */ /* Scale up slightly on hover — mirrors the bold-on-hover feel of the nav text links */ .brand.w-nav-brand, .footer-brand-3, .footer-social-link-4 { transition: transform 0.15s ease; } .brand.w-nav-brand:hover, .brand.w-nav-brand:focus, .footer-brand-3:hover, .footer-brand-3:focus, .footer-social-link-4:hover, .footer-social-link-4:focus { transform: scale(1.05); } /* ─── Global font smoothing ──────────────────────────────────────────────────── */ /* Defined inline in of every page; moved here. */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }