/* ========================================================================== E-Wing Marketing — base overrides that next/font used to provide. The compiled Tailwind build references these font variables. ========================================================================== */ :root { --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif; --font-inter-tight: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif; --font-serif: "DM Serif Display", ui-serif, Georgia, serif; /* ====================================================================== BRAND PALETTE — single source of truth for every colour on the site. These defaults are overridden live from the WordPress Customizer (Appearance > Customize > "Global Colors & Branding"). The whole theme — compiled Tailwind utilities included — reads from these variables, so changing a colour here (or in the Customizer) recolours the entire site. Only three brand colours are used: primary, dark, light. ====================================================================== */ --ewm-primary: #7231ef; /* main accent / buttons / highlights */ --ewm-primary-dark: #5a1fd6; /* primary hover / pressed */ --ewm-primary-rgb: 114, 49, 239; --ewm-light: #efeafe; /* light text, cream accents */ --ewm-light-rgb: 239, 234, 254; /* Dark surfaces are tints built from the brand dark (#12093d). */ --ewm-dark: #0a0620; /* deepest — page / section background */ --ewm-dark-2: #12093d; /* cards, panels (exact brand dark) */ --ewm-surface: #1a0f4a; /* pills / button backgrounds */ --ewm-surface-2: #2a1a5e; /* icon chips, raised elements */ /* Remap Tailwind's black token so every `bg-black`, `from-black`, `to-black`, `via-black` utility follows the brand dark automatically. */ --color-black: var(--ewm-dark); } /* NOTE: `scroll-behavior: smooth` is deliberately NOT set here. The browser's native smooth scrolling animates the scroll position, which fights GSAP ScrollTrigger's scrub/pin — the Services card stack would stay blank until scrolling stopped, then jump. Smooth scrolling for in-page anchor links is handled in main.js (initAnchors) instead. */ html, body { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } body { background-color: var(--ewm-dark); color: #fff; font-family: var(--font-inter); /* `overflow-x: hidden` on turns it into a scroll container, which breaks ScrollTrigger's position:fixed pinning (the Services stack). `clip` stops the sideways overflow without creating that container. The hidden value stays first as a fallback for very old browsers. */ overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Serif italic used in the footer headline ("we transform.") */ .font-serif { font-family: var(--font-serif); } /* Hide scrollbars used by horizontal card rails */ .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .hide-scrollbar::-webkit-scrollbar { display: none; } /* Custom logo sizing in the navbar */ .site-logo img { height: 2.5rem; width: auto; max-width: 180px; } /* WordPress admin bar should not cover the sticky navbar */ body.admin-bar .site-navbar { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-navbar { top: 46px; } } /* ── Footer map location dots (CSS replacement for the old heavy GIF) ── */ .map-dot { position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 9999px; background: var(--ewm-primary); box-shadow: 0 0 12px 2px rgba(var(--ewm-primary-rgb), 0.8); } .map-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 9999px; border: 2px solid rgba(var(--ewm-primary-rgb), 0.5); animation: map-dot-pulse 2s ease-out infinite; } @keyframes map-dot-pulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } } /* Sliding map track (CSS replacement for framer-motion animation frame) */ .map-track { display: flex; width: max-content; height: 100%; animation: map-slide 60s linear infinite; will-change: transform; } @keyframes map-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Scroll-reveal words start dim; JS toggles .is-revealed */ .reveal-word { color: #7f7f7f; transition: color 0.9s ease-in-out; } .reveal-word.is-revealed { color: #fff; } /* ── Our Process: hub + card activation (JS toggles .is-active) ── */ .process-hub .glow { opacity: 0; transition: opacity 0.45s ease; } .process-hub.is-active .glow { opacity: 1; } .process-card .ring { opacity: 0; transition: opacity 0.55s ease; } .process-card { transition: transform 0.55s ease; } .process-card.is-active .ring { opacity: 1; } .process-card.is-active { transform: translateY(-8px); } /* Navbar scrolled state */ .site-navbar.is-scrolled { background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(255, 255, 255, 0.05); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); } /* ========================================================================== Scroll reveal — opt-in via [data-anim] and [data-anim-group]. Animates the `transform` property only (NOT the `translate` property), so it never clashes with Tailwind v4 translate-x/y utilities, which compile to `translate:`. JS (initScrollAnim) toggles .is-inview when the element scrolls into view; group children get a staggered transition-delay. ========================================================================== */ [data-anim], [data-anim-group] > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } [data-anim="fade"] { transform: none; } [data-anim="left"] { transform: translate3d(-34px, 0, 0); } [data-anim="right"] { transform: translate3d(34px, 0, 0); } [data-anim="zoom"] { transform: scale(0.94); } [data-anim].is-inview, [data-anim-group].is-inview > * { opacity: 1; transform: translate3d(0, 0, 0); } [data-anim="zoom"].is-inview { transform: scale(1); } @media (prefers-reduced-motion: reduce) { [data-anim], [data-anim-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Inside the Elementor editor the IntersectionObserver reveal never fires, so scroll-reveal elements would sit invisible. Force everything visible there so the section previews correctly while editing. */ .elementor-editor-active [data-anim], .elementor-editor-active [data-anim-group] > *, .elementor-editor-active .reveal-word { opacity: 1 !important; transform: none !important; color: #fff; } /* ========================================================================== Pill button (.ewm-btn) Written as real CSS rather than Tailwind arbitrary classes, because only utilities present in the compiled tailwind-build.css would take effect. Replaces the old double inset shadow, which read as an odd coloured band. ========================================================================== */ .ewm-btn { background-color: var(--ewm-surface); border: 1px solid rgba(var(--ewm-light-rgb), 0.16); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; } .ewm-btn:hover { background-color: var(--ewm-primary); border-color: var(--ewm-primary); box-shadow: 0 10px 28px rgba(var(--ewm-primary-rgb), 0.4); transform: translateY(-2px); } .ewm-btn:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(var(--ewm-primary-rgb), 0.35); } .ewm-btn:focus-visible { outline: 2px solid var(--ewm-light); outline-offset: 3px; } /* Arrow bubble inside the button */ .ewm-btn .ewm-btn-arrow { background-color: rgba(var(--ewm-light-rgb), 0.16); border: 1px solid rgba(var(--ewm-light-rgb), 0.14); transition: background-color 0.35s ease, transform 0.35s ease; } .ewm-btn:hover .ewm-btn-arrow { background-color: var(--ewm-light); transform: translateX(3px); } /* Dark arrow once the bubble turns light, so it stays visible */ .ewm-btn:hover .ewm-btn-arrow img { filter: brightness(0) saturate(100%) invert(12%) sepia(48%) saturate(3000%) hue-rotate(250deg) brightness(90%) contrast(101%); } @media (prefers-reduced-motion: reduce) { .ewm-btn, .ewm-btn .ewm-btn-arrow { transition: none; } .ewm-btn:hover { transform: none; } } /* ========================================================================== CSS replacements for two heavy decorative images (rings.png was 504 KB and logo-3d.png 244 KB, shown at 22px). Drawn in CSS instead so the theme ZIP stays small enough to upload on hosts with a low upload_max_filesize. ========================================================================== */ .ewm-rings { display: block; width: 16rem; height: 16rem; border-radius: 9999px; position: relative; border: 1px solid rgba(var(--ewm-primary-rgb), 0.4); box-shadow: 0 0 70px rgba(var(--ewm-primary-rgb), 0.18); } .ewm-rings::before, .ewm-rings::after { content: ""; position: absolute; border-radius: 9999px; border: 1px solid rgba(var(--ewm-primary-rgb), 0.28); } .ewm-rings::before { inset: 16%; } .ewm-rings::after { inset: 34%; border-color: rgba(var(--ewm-light-rgb), 0.18); } @media (min-width: 640px) { .ewm-rings { width: 20rem; height: 20rem; } } /* Small brand mark used beside the Case Studies eyebrow */ .ewm-mark { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 6px; background: linear-gradient(135deg, var(--ewm-primary), var(--ewm-light)); box-shadow: 0 0 12px rgba(var(--ewm-primary-rgb), 0.5); flex-shrink: 0; } /* Typewriter caret */ .typewriter { color: transparent; background-image: linear-gradient(90deg, var(--ewm-primary) 0%, var(--ewm-light) 100%); -webkit-background-clip: text; background-clip: text; caret-color: var(--ewm-primary); white-space: nowrap; } .typewriter::after { content: "|"; -webkit-text-fill-color: var(--ewm-primary); color: var(--ewm-primary); margin-left: 2px; animation: caret-blink 0.8s step-end infinite; } @keyframes caret-blink { 50% { opacity: 0; } }