html, body {
overflow-x: clip;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #cbd5e1; /* Gray background outside the app container */
color: #334155;
-webkit-tap-highlight-color: transparent;
}
/* Mobile App Container styles */
.app-container {
max-width: 480px;
margin: 0 auto;
background-color: #ffffff;
min-height: 100vh;
position: relative;
box-shadow: 0 0 40px rgba(0,0,0,0.15);
}
/* #bottomNav is position:fixed, which does NOT auto-center like a normal block element —
it needs explicit left:50%+transform centering to genuinely line up with .app-container
at every width, mirroring the same breakpoints exactly so it's never narrower than (or
misaligned with) the actual page content above it. */
#bottomNav {
left: 50%;
transform: translateX(-50%);
max-width: 480px;
}
@media (min-width: 600px) and (max-width: 1023px) {
#bottomNav { max-width: 100%; }
}
/* Tablet range (roughly iPad portrait through just-under-desktop-mode) — widen the
container progressively instead of leaving it stuck at a tiny 480px island surrounded by
empty space on a much bigger screen. Desktop-mode (>=1024px, JS-driven sidebar layout)
takes over above this range, so there's no conflict with the override below. */
@media (min-width: 600px) and (max-width: 1023px) {
.app-container { max-width: 100%; }
}
/* Hide Scrollbar but keep functionality */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* ===== Trusted Brands — two-row auto-scrolling logo marquee (real client logos) =====
Row 1 drifts left, Row 2 drifts right — classic "trust wall" effect. Each row's
content is duplicated once in the HTML so the loop is perfectly seamless. */
.brand-marquee-wrap {
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.brand-marquee-row {
display: flex;
gap: 10px;
width: max-content;
}
.brand-marquee-left {
animation: brandMarqueeLeft 50s linear infinite;
}
.brand-marquee-right {
animation: brandMarqueeRight 46s linear infinite;
}
.brand-marquee-wrap:hover .brand-marquee-row {
animation-play-state: paused;
}
@keyframes brandMarqueeLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes brandMarqueeRight {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
.brand-logo-chip {
flex-shrink: 0;
width: 108px;
height: 84px;
background: #fff;
border-radius: 14px;
border: 1px solid #eef0f5;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
}
.brand-logo-chip img {
width: 100%;
height: 100%;
object-fit: contain;
}
html.desktop-mode .brand-logo-chip {
width: 132px;
height: 100px;
}
/* Safe area for bottom nav */
.pb-safe {
padding-bottom: 80px;
}
/* ============================================================
DESKTOP APP SHELL — activated only via the .desktop-mode class,
which JS adds to automatically when it detects a desktop
screen (see the device-detection script near the end of ).
Mobile has NO desktop-mode class ever, so everything below is
100% invisible on mobile and the mobile layout above is untouched.
This gives desktop a fresh "Windows application" feel: a window
title bar, a left icon rail, and a card-based dashboard canvas —
not just a reflowed version of the mobile page.
============================================================ */
html.desktop-mode body {
background: #eef1f4;
}
html.desktop-mode .app-container {
max-width: 100%;
width: 100%;
box-shadow: none;
background-color: transparent;
}
/* Hide every mobile-only chrome element on desktop — replaced by the injected shell below */
html.desktop-mode header.app-sticky-header,
html.desktop-mode #bottomNav,
html.desktop-mode #sidebar,
html.desktop-mode #sidebar-overlay {
display: none !important;
}
/* The bottom Contact section is redundant on desktop — the same phone/email/location info
already lives permanently in the right sidebar panel, so remove the duplicate here */
html.desktop-mode #contact {
display: none !important;
}
/* Gallery images used a mobile-tuned fixed height (224px) — on desktop's much wider card,
that made photos look heavily cropped/squished. Give them proper room to breathe. */
html.desktop-mode #photo-gallery img {
height: 480px !important;
}
/* "Your Growth Is Our Success" trust badges — on desktop the generic 2→4 column grid
reflow spread these 4 small boxes very wide with almost nothing in them (just an icon
+ one short line), so they looked empty. Give them real content proportions instead. */
.trust-badge-caption { display: none; }
html.desktop-mode .trust-badge-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 1.25rem !important;
}
html.desktop-mode .trust-badge-box {
padding: 28px 18px !important;
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.3s ease, background 0.3s ease;
}
html.desktop-mode .trust-badge-box:hover {
transform: translateY(-4px);
background: rgba(255,255,255,0.16) !important;
}
html.desktop-mode .trust-badge-box i {
font-size: 30px !important;
margin-bottom: 12px !important;
}
html.desktop-mode .trust-badge-box h5 {
font-size: 13px !important;
}
html.desktop-mode .trust-badge-caption {
display: block;
}
/* ----- Window Title Bar (injected by JS) ----- */
#desktopTitleBar {
position: fixed;
top: 0; left: 0; right: 0;
height: 52px;
background: #ffffff;
border-bottom: 1px solid #e5e8ee;
display: flex;
align-items: center;
padding: 0 18px;
gap: 16px;
z-index: 300;
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
#desktopTitleBar .title-dots { display: flex; gap: 7px; }
#desktopTitleBar .title-dot { width: 12px; height: 12px; border-radius: 50%; }
#desktopTitleBar .title-dot.red { background: #ff5f57; }
#desktopTitleBar .title-dot.yellow { background: #febc2e; }
#desktopTitleBar .title-dot.green { background: #28c840; }
#desktopTitleBar .title-app-name {
font-weight: 800;
font-size: 13px;
color: #12127A;
display: flex;
align-items: center;
gap: 8px;
}
.title-search-wrap {
position: relative;
flex: 1;
max-width: 440px;
margin: 0 auto;
}
#desktopTitleBar .title-search {
background: #f1f3f7;
border-radius: 9px;
padding: 8px 14px;
font-size: 12.5px;
color: #9aa0ab;
display: flex;
align-items: center;
gap: 9px;
border: 1.5px solid transparent;
transition: all 0.18s ease;
}
#desktopTitleBar .title-search:focus-within {
background: #fff;
border-color: #F28119;
box-shadow: 0 2px 10px rgba(242,129,25,0.14);
}
#desktopTitleBar .title-search i {
color: #b0b5bf;
font-size: 12px;
}
#desktopTitleBar .title-search:focus-within i { color: #F28119; }
#desktopSearchInput {
border: none;
outline: none;
background: transparent;
width: 100%;
font-size: 12.5px;
font-family: 'Poppins', sans-serif;
color: #12127A;
}
#desktopSearchInput::placeholder { color: #9aa0ab; }
.title-search-results {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(18,18,122,0.16);
border: 1px solid #eef0f5;
max-height: 360px;
overflow-y: auto;
z-index: 320;
padding: 6px;
}
.search-result-item {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 10px;
border-radius: 8px;
cursor: pointer;
transition: background 0.12s ease;
}
.search-result-item:hover { background: #fdf1e7; }
.search-result-item i {
width: 30px;
height: 30px;
border-radius: 8px;
background: linear-gradient(135deg, #12127A, #4285F4);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
}
.search-result-item > div { display: flex; flex-direction: column; gap: 1px; }
.search-result-label { font-size: 12.5px; font-weight: 700; color: #12127A; }
.search-result-section { font-size: 10px; font-weight: 600; color: #9aa0ab; text-transform: uppercase; letter-spacing: 0.03em; }
.search-no-results { padding: 14px; text-align: center; font-size: 12px; color: #9aa0ab; }
#desktopTitleBar .title-cta {
background: linear-gradient(135deg, #F28119, #ff5a3c);
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 8px 18px;
border-radius: 8px;
cursor: pointer;
border: none;
white-space: nowrap;
display: flex;
align-items: center;
gap: 7px;
text-decoration: none;
}
#desktopTitleBar .title-cta + .title-cta { margin-left: 10px; }
#desktopTitleBar .title-cta-secondary {
background: #fff;
color: #14137A;
border: 1.5px solid #14137A;
}
#desktopTitleBar .title-cta-secondary:hover { background: #14137A; color: #fff; }
/* ----- Left Icon Navigation Rail (injected by JS) ----- */
#desktopIconRail {
position: fixed;
top: 52px; left: 0; bottom: 0;
width: 76px;
background: #14143f;
display: flex;
flex-direction: column;
align-items: center;
padding: 14px 0;
gap: 4px;
z-index: 290;
overflow-y: auto;
scrollbar-width: none;
}
#desktopIconRail::-webkit-scrollbar { display: none; }
#desktopIconRail .rail-item {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.55);
font-size: 17px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
#desktopIconRail .rail-item:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
#desktopIconRail .rail-item.active {
background: linear-gradient(135deg, #F28119, #ff5a3c);
color: #fff;
}
/* Shared tooltip — lives in , positioned via JS with getBoundingClientRect() on
hover, so it is never clipped by the rail's overflow-y:auto (see app.js). */
#railTooltip {
position: fixed;
transform: translateY(-50%);
background: #12127A;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 6px 10px;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 400;
}
#railTooltip.visible {
opacity: 1;
}
/* ----- Dashboard Canvas — the main scrollable content area ----- */
html.desktop-mode #pageContent {
margin-left: 76px;
margin-right: 300px;
padding-top: 52px;
display: block;
}
/* With the icon rail switched off in Floating Widgets there is nothing in that 76px, so
the content reclaims it rather than sitting beside an empty strip. */
html.desktop-mode.no-rail #pageContent { margin-left: 0; }
html.desktop-mode #pageContent > section {
max-width: 900px;
margin: 28px auto !important;
padding: 2.75rem 3rem !important;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 4px 22px rgba(20,20,50,0.05);
border: 1px solid #eef0f5;
}
/* The 28px margin is correct BETWEEN cards, but on the first one it left a strip of grey
page background showing between the sticky header and the top of the white card. The
first card sits flush under the header instead; spacing between the rest is unchanged. */
html.desktop-mode #pageContent > section:first-of-type {
margin-top: 0 !important;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
html.desktop-mode #pageContent .grid-cols-2 {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem;
}
/* ----- Desktop Typography — bigger, and headings stay on one line instead of wrapping ----- */
html.desktop-mode #pageContent section h1 br,
html.desktop-mode #pageContent section h2 br {
display: none; /* the extra space already in the source text keeps words apart */
}
html.desktop-mode #pageContent section h1 {
font-size: 2.75rem !important;
line-height: 1.15 !important;
white-space: nowrap;
}
html.desktop-mode #pageContent section h2 {
font-size: 2.1rem !important;
line-height: 1.2 !important;
}
html.desktop-mode #pageContent section h3 {
font-size: 1.15rem !important;
}
html.desktop-mode #pageContent section p {
font-size: 0.95rem !important;
line-height: 1.65 !important;
}
/* Mobile text sizes (arbitrary Tailwind values) were tuned for small screens — scale them
up on desktop so body copy, labels, and card text are comfortably readable at this size. */
html.desktop-mode #pageContent .text-\[7px\] { font-size: 10px !important; }
html.desktop-mode #pageContent .text-\[8px\] { font-size: 11px !important; }
html.desktop-mode #pageContent .text-\[9px\] { font-size: 12px !important; }
html.desktop-mode #pageContent .text-\[10px\] { font-size: 13px !important; }
html.desktop-mode #pageContent .text-\[11px\] { font-size: 14px !important; }
html.desktop-mode #pageContent .text-\[12px\] { font-size: 15px !important; }
html.desktop-mode #pageContent .text-\[13px\] { font-size: 16px !important; }
/* ----- Uniform Service Cards — same size for every card, button always aligned at the bottom, modern hover lift ----- */
html.desktop-mode #services .grid-cols-2 > div {
display: flex;
min-height: 172px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
html.desktop-mode #services .grid-cols-2 > div:hover {
transform: translateY(-5px);
box-shadow: 0 14px 28px rgba(20,20,50,0.10) !important;
}
html.desktop-mode #services .grid-cols-2 > div.col-span-2 {
grid-column: span 2 / span 2;
min-height: 172px;
}
html.desktop-mode #services .grid-cols-2 > div > .relative.z-10 {
display: flex;
flex-direction: column;
width: 100%;
}
html.desktop-mode #services .grid-cols-2 > div > .relative.z-10 button {
margin-top: auto;
}
/* ----- General modern desktop micro-interactions ----- */
html.desktop-mode #pageContent section {
transition: box-shadow 0.3s ease;
}
html.desktop-mode #pageContent section:hover {
box-shadow: 0 8px 30px rgba(20,20,50,0.07);
}
html.desktop-mode button,
html.desktop-mode a {
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
html.desktop-mode .review-card:hover,
html.desktop-mode #photo-gallery img:hover {
transform: translateY(-3px);
}
html.desktop-mode #leadFormModal,
html.desktop-mode #healthQuizModal,
html.desktop-mode #referralModal,
html.desktop-mode #pdfViewerModal {
margin-left: 76px;
margin-right: 300px;
}
/* Same reason as #pageContent above: no rail, no gutter to avoid. */
html.desktop-mode.no-rail #leadFormModal,
html.desktop-mode.no-rail #healthQuizModal,
html.desktop-mode.no-rail #referralModal,
html.desktop-mode.no-rail #pdfViewerModal { margin-left: 0; }
/* ----- Persistent Right Sidebar (injected by JS, desktop only) -----
This is the genuinely different part of the desktop layout: instead of one
long linear scroll like mobile, desktop keeps key trust info, stats, and a
quick-action CTA always visible alongside the content — every number and
fact here is pulled from the same real data already used elsewhere on the
page (About section stats, reviews rating, contact section), not invented. */
#desktopSidebar {
position: fixed;
top: 52px; right: 0; bottom: 0;
width: 300px;
background: #ffffff;
border-left: 1px solid #eef0f5;
padding: 22px 20px 20px;
overflow-y: auto;
z-index: 280;
}
#desktopSidebar .ds-card {
background: #f7f8fb;
border-radius: 14px;
padding: 16px;
margin-bottom: 16px;
border: 1px solid #eef0f5;
}
#desktopSidebar .ds-title {
font-size: 10px;
font-weight: 800;
color: #9aa0ab;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 12px;
}
#desktopSidebar .ds-stats-row {
display: flex;
justify-content: space-between;
text-align: center;
}
#desktopSidebar .ds-stats-row div { flex: 1; }
#desktopSidebar .ds-stats-row strong {
display: block;
font-size: 17px;
font-weight: 800;
color: #12127A;
}
#desktopSidebar .ds-stats-row span {
font-size: 9px;
font-weight: 700;
color: #9aa0ab;
text-transform: uppercase;
}
#desktopSidebar .ds-list { list-style: none; padding: 0; margin: 0; }
#desktopSidebar .ds-list li {
font-size: 11.5px;
color: #3a3f4b;
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 10px;
line-height: 1.4;
}
#desktopSidebar .ds-list li i { color: #F28119; margin-top: 2px; font-size: 10px; }
#desktopSidebar .ds-cta {
background: linear-gradient(135deg, #12127A, #1c1cab);
border-radius: 14px;
padding: 18px 16px;
text-align: center;
margin-bottom: 16px;
}
#desktopSidebar .ds-cta p {
color: rgba(255,255,255,0.75);
font-size: 11px;
font-weight: 600;
margin-bottom: 10px;
}
#desktopSidebar .ds-cta button {
background: linear-gradient(135deg, #F28119, #ff5a3c);
color: #fff;
border: none;
font-size: 12px;
font-weight: 700;
padding: 10px 16px;
border-radius: 9px;
width: 100%;
cursor: pointer;
}
#desktopSidebar .ds-contact a {
display: flex;
align-items: center;
gap: 9px;
font-size: 11.5px;
font-weight: 700;
color: #12127A;
padding: 8px 0;
text-decoration: none;
border-bottom: 1px solid #eef0f5;
}
#desktopSidebar .ds-contact a:last-child { border-bottom: none; }
#desktopSidebar .ds-contact a i { width: 16px; color: #F28119; }
/* Desktop sidebar's own mini-footer — #contact (which carries these on mobile) is
deliberately hidden on desktop since its phone/email/address block is redundant with
the sidebar above, but that also hid the legal links + copyright entirely on desktop.
This adds just those back, without duplicating the contact-info block. */
#desktopSidebar .ds-footer-legal {
text-align: center;
padding: 14px 4px 4px;
}
#desktopSidebar .ds-footer-legal a {
display: inline-block;
font-size: 10.5px;
font-weight: 600;
color: #7c85a3;
text-decoration: underline;
text-underline-offset: 2px;
margin: 0 7px 5px;
transition: color 0.2s ease;
}
#desktopSidebar .ds-footer-legal a:hover { color: #F28119; }
#desktopSidebar .ds-footer-legal p {
font-size: 9.5px;
color: #9aa2ba;
letter-spacing: 0.02em;
margin-top: 4px;
}
/* ===== Reading Modes (forceful, applies to entire app) ===== */
.app-container {
zoom: 100%;
}
/* Theme filters apply ONLY to #pageContent (the scrollable sections),
never to .app-container itself — CSS filter creates a new containing
block for position:fixed children, which was making the sticky header,
bottom nav bar and sidebar disappear/misplace themselves in Night/Sepia mode. */
#pageContent.theme-night {
filter: invert(1) hue-rotate(180deg);
background: #0b0f19 !important;
}
#pageContent.theme-night img,
#pageContent.theme-night svg,
#pageContent.theme-night video,
#pageContent.theme-night iframe {
filter: invert(1) hue-rotate(180deg);
}
#pageContent.theme-sepia {
filter: sepia(0.55) saturate(1.15) brightness(0.97) contrast(0.98);
}
/* Force header to stay pinned to top while scrolling */
header.app-sticky-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
}
/* Modern FAQ Accordion Animation */
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.faq-answer.open {
max-height: 500px;
}
/* Scroll Animations for Process Flows */
/* ===== Service cards — uniform size (mobile + desktop) + info "eye" button ===== */
.service-card {
height: 180px; /* fixed (not min-height) so cards stay identical even when a longer
title wraps to 2 lines — sized to fit the longest real title */
}
html.desktop-mode .service-card {
height: 216px;
}
.service-card h3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.service-eye-btn {
position: absolute;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
border: 1px solid rgba(0,0,0,0.06);
color: #9aa0ab;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 20;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.service-eye-btn:hover {
background: #F28119;
color: #fff;
transform: scale(1.15);
box-shadow: 0 4px 12px rgba(242,129,25,0.4);
}
.service-eye-btn:active {
transform: scale(0.9);
}
@keyframes eyeBtnPulse {
0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 0 0 0 rgba(242,129,25,0.3); }
50% { box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 0 0 5px rgba(242,129,25,0); }
}
.service-card.animate-on-scroll.is-visible .service-eye-btn {
animation: eyeBtnPulse 2.5s ease-in-out 1.5s 2;
}
.animate-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-700 { transition-delay: 700ms; }
/* ============================================================
MOTION SYSTEM — desktop gets rich hover/cursor motion (mouse-driven),
mobile gets tap/press feedback (touch-driven). Applied to real card
and interactive elements across services, pricing, gallery, reviews,
stats, and the process flow — not decorative, tied to real content.
============================================================ */
/* ----- DESKTOP: cards lift toward the cursor with a soft shadow ----- */
html.desktop-mode #services .rounded-2xl,
html.desktop-mode #pricing .rounded-2xl,
html.desktop-mode #results .rounded-2xl,
html.desktop-mode #reviews .review-card,
html.desktop-mode #stats .rounded-2xl,
html.desktop-mode #dm-vs-smm .platform-icon-box,
html.desktop-mode #campaigns .rounded-2xl,
html.desktop-mode #leadgen .rounded-2xl,
html.desktop-mode #about .rounded-2xl {
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}
html.desktop-mode #services .rounded-2xl:hover,
html.desktop-mode #pricing .rounded-2xl:hover,
html.desktop-mode #results .rounded-2xl:hover,
html.desktop-mode #reviews .review-card:hover,
html.desktop-mode #stats .rounded-2xl:hover,
html.desktop-mode #campaigns .rounded-2xl:hover,
html.desktop-mode #leadgen .rounded-2xl:hover,
html.desktop-mode #about .rounded-2xl:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(18,18,122,0.12);
}
html.desktop-mode #dm-vs-smm .platform-icon-box:hover {
transform: translateY(-4px) scale(1.06);
}
/* Service/add-on icons give a little "alive" bounce when their card is hovered —
tied to what the icon represents, not random motion */
html.desktop-mode #services .rounded-2xl i,
html.desktop-mode #campaigns .rounded-2xl i {
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.desktop-mode #services .rounded-2xl:hover i,
html.desktop-mode #campaigns .rounded-2xl:hover i {
animation-play-state: paused;
transform: scale(1.18) rotate(-6deg);
}
/* ============================================================
UNIVERSAL BUTTON HOVER — every button across the entire site
(Enquire Now, CTAs, form buttons, modal buttons, nav icons,
add-to-calendar, everything) gets the same smooth, professional
glowing shine that sweeps left → right on hover, so it's always
obvious something is interactive. Layered on top of whatever
other hover motion a specific button already has (lift, scale) —
this uses its own pseudo-element so the two never fight.
============================================================ */
button,
.enquire-glow-btn,
a.rounded-full,
a.rounded-xl,
a.rounded-2xl {
position: relative;
overflow: hidden;
isolation: isolate;
}
button::before,
.enquire-glow-btn::before,
a.rounded-full::before,
a.rounded-xl::before,
a.rounded-2xl::before {
content: '';
position: absolute;
inset: 0;
left: -120%;
width: 55%;
background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
transform: skewX(-22deg);
transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 1;
}
button:hover::before,
.enquire-glow-btn:hover::before,
a.rounded-full:hover::before,
a.rounded-xl:hover::before,
a.rounded-2xl:hover::before {
left: 130%;
}
/* Keep real button content above the shine layer */
button > *, .enquire-glow-btn > * {
position: relative;
z-index: 2;
}
/* ===== Digital Awareness Slider — smooth cross-fade + dot indicators ===== */
.awareness-heading {
font-size: 22px; /* mobile: sized so every headline fits its intended 2 lines, not 3-4 */
}
html.desktop-mode .awareness-heading {
font-size: 1.875rem; /* desktop: restore the bigger text-3xl feel — much more width available */
}
#awarenessSliderTrack {
position: relative;
min-height: 90px;
transition: min-height 0.3s ease;
}
.awareness-slide {
opacity: 1;
transform: translateY(0);
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* While a transition is in progress, BOTH the entering and exiting slide are pinned to
the same absolute position — this is what makes the crossfade genuinely smooth with no
stretch: neither slide affects the other's layout during the ~350ms overlap, since both
are removed from normal flow at that moment. The container's own height already stays
fixed via measureAndFixHeight(), so this purely fixes the crossfade itself. */
#awarenessSliderTrack.is-transitioning .awareness-slide {
position: absolute; top: 0; left: 0; right: 0;
}
.awareness-slide-enter {
animation: awarenessFadeIn 0.45s ease both;
}
@keyframes awarenessFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.awareness-slide-exit {
opacity: 0 !important;
transform: translateY(-8px) !important;
}
.awareness-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #e2e5eb;
transition: all 0.35s ease;
}
.awareness-dot-active {
width: 18px;
border-radius: 4px;
background: linear-gradient(90deg, #F28119, #ff5a3c);
}
/* ============================================================
AI CHAT WIDGET — floating 3D button + modern chat panel
============================================================ */
.ai-chat-fab {
position: fixed;
bottom: 84px; /* sits above the mobile bottom-nav bar instead of covering its Download button */
right: 16px;
width: 50px; /* smaller, less intrusive on mobile */
height: 50px;
border-radius: 50%;
z-index: 200;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* Rotating gradient "ring of light" behind the button — a spinning conic-gradient masked
down to just a glowing border, giving the logo a brilliant, colorful halo. */
.ai-chat-fab::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
background: conic-gradient(from 0deg, #F28119, #ff5a3c, #12127A, #F28119);
animation: aiRingSpin 3.5s linear infinite;
z-index: 1;
}
.ai-chat-fab::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
box-shadow: 0 0 16px 4px rgba(242,129,25,0.55);
z-index: 1;
pointer-events: none;
}
@keyframes aiRingSpin { to { transform: rotate(360deg); } }
/* On desktop: sit right at the corner near the sidebar's contact-info card (where the
visitor is already looking for ways to reach the business), with a z-index high enough
to render above the sidebar itself so it's never blocked/unclickable. */
html.desktop-mode .ai-chat-fab { bottom: 22px; right: 22px; width: 62px; height: 62px; z-index: 350; }
html.desktop-mode .ai-chat-panel { right: 22px; z-index: 350; }
.ai-fab-core {
position: relative;
z-index: 3;
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 9px;
box-shadow: 0 10px 28px rgba(242,129,25,0.45);
animation: aiCoreFloat 3s ease-in-out infinite;
transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.ai-fab-core img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.ai-chat-fab:hover .ai-fab-core { transform: scale(1.1); }
@keyframes aiCoreFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-5px) rotate(3deg); }
}
.ai-chat-panel {
position: fixed;
bottom: 22px;
right: 22px;
width: 370px;
max-width: calc(100vw - 24px);
height: 560px;
max-height: calc(100vh - 100px);
background: #fff;
border-radius: var(--ea-chat-radius, 22px);
box-shadow: 0 24px 60px rgba(18,18,122,0.25);
z-index: 201;
display: flex;
flex-direction: column;
overflow: hidden;
animation: aiPanelIn 0.35s cubic-bezier(0.16,1,0.3,1);
}
#aiChatPanel.hidden { display: none; } /* must win over .ai-chat-panel's display:flex above */
/* iOS Safari has ignored user-scalable=no since iOS 10, so the viewport meta tag alone
does not stop a two-finger pinch. pan-y keeps normal vertical scrolling of the message
list working while telling the browser not to treat pinches as zoom. */
.ai-chat-panel { touch-action: pan-y; }
.ai-chat-input-row, .ai-chat-header { touch-action: none; }
@keyframes aiPanelIn {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
.ai-chat-panel { bottom: 0; right: 0; left: 0; top: 0; width: 100vw; max-width: 100vw; height: 100vh; height: -webkit-fill-available; height: 100dvh; max-height: 100vh; max-height: -webkit-fill-available; max-height: 100dvh; border-radius: 0; }
/* iOS Safari force-zooms into a focused input whose font-size is under 16px, and it
does so even when user-scalable=no is set — the meta tag alone does not prevent it.
16px is the documented threshold and the only reliable way to stop that zoom. */
.ai-chat-input, #aiChatInput { font-size: 16px; }
}
/* Prevents the page behind the chat from scrolling while it's open on mobile — otherwise
a taller-than-expected panel (address-bar show/hide quirks) could let the underlying
page scroll, pushing the input box out of view. */
body.ai-chat-open { overflow: hidden; position: fixed; width: 100%; }
.ai-chat-header {
background: linear-gradient(135deg, var(--ea-chat-header-from, #12127A), var(--ea-chat-header-to, #1e3a8a));
padding: 16px 18px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.ai-chat-header-info { display: flex; align-items: center; gap: 10px; }
.ai-chat-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: #fff;
display: flex; align-items: center; justify-content: center;
padding: 4px;
flex-shrink: 0;
position: relative;
box-shadow: 0 0 0 2px #fff, 0 0 12px 2px rgba(242,129,25,0.6);
}
.ai-chat-avatar::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: conic-gradient(from 0deg, #F28119, #ff5a3c, #12127A, #F28119);
z-index: -1;
animation: aiRingSpin 4s linear infinite;
}
.ai-chat-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.ai-chat-title { color: #fff; font-weight: 700; font-size: 13px; }
.ai-chat-status { color: rgba(255,255,255,0.65); font-size: 10px; display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.ai-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: aiStatusPulse 1.8s ease-in-out infinite; }
@keyframes aiStatusPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.ai-chat-header-actions { display: flex; align-items: center; gap: 8px; }
.ai-chat-call-btn { background: rgba(74,222,128,0.2); border: none; color: #4ade80; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; }
.ai-chat-call-btn:hover { background: rgba(74,222,128,0.32); }
.ai-chat-close { background: rgba(255,255,255,0.12); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* ===== Live voice-call overlay ===== */
.ai-call-overlay {
position: absolute; inset: 0; z-index: 10;
background: var(--ea-call-bg, linear-gradient(160deg, #12127A, #1e3a8a 60%, #12127A));
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 40px 24px; text-align: center;
}
#aiCallOverlay.hidden { display: none; } /* must win over .ai-call-overlay's display:flex above */
.ai-call-avatar-wrap { position: relative; width: 96px; height: 96px; margin-bottom: 18px; }
.ai-call-avatar { position: relative; z-index: 2; width: 96px; height: 96px; border-radius: 50%; background: #fff; padding: 12px; display: flex; align-items: center; justify-content: center; border-radius: var(--ea-call-avatar-radius, 50%);
box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 20px 4px var(--ea-call-ring, rgba(242,129,25,0.5)); }
.ai-call-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.ai-call-avatar-wrap::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: conic-gradient(from 0deg, #F28119, #ff5a3c, #12127A, #F28119);
z-index: 1;
animation: aiRingSpin 3.5s linear infinite;
}
.ai-call-ring { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); animation: aiCallRingPulse 1.8s ease-out infinite; z-index: 1; }
@keyframes aiCallRingPulse { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.25); opacity: 0; } }
.ai-call-name { color: #fff; font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.ai-call-status { color: rgba(255,255,255,0.65); font-size: 12px; margin-bottom: 26px; }
.ai-call-status.listening { color: #4ade80; }
.ai-call-status.speaking { color: #F28119; }
.ai-call-caption { color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.6; max-width: 300px; min-height: 60px; margin-bottom: 30px; }
.ai-call-retry-btn { display: flex; align-items: center; gap: 8px; padding: 12px 22px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 16px; }
.ai-call-retry-btn:hover { background: rgba(255,255,255,0.22); }
#aiCallRetryBtn.hidden { display: none; }
.ai-call-end-btn { width: 58px; height: 58px; border-radius: 50%; background: #ef4444; color: #fff; border: none; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(239,68,68,0.45); transition: transform 0.15s ease; }
.ai-call-end-btn:hover { transform: scale(1.08); }
.ai-chat-close:hover { background: rgba(255,255,255,0.22); }
.ai-chat-messages {
flex: 1;
min-height: 0; /* critical flexbox fix — without this, a flex:1 child can refuse to
shrink below its content's natural height on some browsers, which
pushes the input row below the visible area */
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
background: #f8fafc;
}
.ai-msg { max-width: 82%; padding: 10px 13px; border-radius: 16px; font-size: 12.5px; line-height: 1.55; animation: aiMsgIn 0.25s ease; }
@keyframes aiMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ai-msg p { margin: 0; }
/* Structure inside the assistant's replies (rendered by chat.js from its reply text). */
.ai-msg-bot p + p, .ai-msg-bot p + ul, .ai-msg-bot p + ol, .ai-msg-bot ul + p, .ai-msg-bot ol + p { margin-top: 8px; }
.ai-msg-bot ul, .ai-msg-bot ol { margin: 6px 0 0; padding-left: 18px; }
/* ===== Live chat (a person from the team in the same window) ===== */
.lc-human-btn { height: 32px; border-radius: 999px; border: 0; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
background: rgba(255,255,255,.16); color: #fff; font: 700 11px/1 'Poppins', sans-serif; margin-right: 6px; transition: background .15s; }
.lc-human-btn:hover { background: rgba(255,255,255,.26); }
.lc-human-btn.is-on { background: #22c55e; }
.lc-bar { display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: #fff7ed; border-bottom: 1px solid #fde2c4; font-size: 11.5px; font-weight: 600; color: #9a3412; }
.lc-bar[hidden] { display: none; }
.lc-bar.is-live { background: #ecfdf5; border-bottom-color: #bbf7d0; color: #166534; }
.lc-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; animation: aiHintLive 1.6s ease-in-out infinite; }
.lc-bar.is-live .lc-bar-dot { background: #22c55e; }
.lc-bar-t { flex: 1; min-width: 0; }
.lc-bar-end { border: 0; background: #fff; color: #12127A; font: 700 10.5px/1 'Poppins', sans-serif; padding: 6px 10px; border-radius: 999px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.lc-sys { align-self: center; max-width: 88%; margin: 4px auto; padding: 6px 12px; border-radius: 999px; background: #eef1f7; color: #475569; font-size: 11px; font-weight: 600; text-align: center; }
.lc-agent { border-left: 3px solid #22c55e; }
.lc-who { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; color: #15803d; margin-bottom: 3px; }
.lc-time { display: block; font-size: 9.5px; opacity: .6; margin-top: 4px; text-align: right; }
.lc-file { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; max-width: 260px; }
.lc-file > img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; cursor: zoom-in; display: block; }
.lc-media { border-radius: 12px; overflow: hidden; background: #000; }
.lc-media .ea-vp { width: 100%; }
.lc-media audio, .lc-media video { width: 100%; display: block; }
.lc-file-audio .lc-media { background: #f1f5f9; }
.lc-card { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 12px; background: rgba(15,23,42,.05); }
.lc-card-ic { width: 34px; height: 34px; border-radius: 10px; background: #fff; color: #F28119; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lc-file-pdf .lc-card-ic { color: #dc2626; }
.lc-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lc-card-t b { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-card-t small { font-size: 10px; opacity: .65; }
.lc-card-btn { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #fff; color: #12127A; display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; text-decoration: none; flex-shrink: 0; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.lc-card-btn:hover { color: #F28119; }
.lc-form { display: flex; flex-direction: column; gap: 7px; }
.lc-form-t { font-size: 12.5px; margin: 0 0 2px; }
.lc-form input { border: 1.5px solid #e2e5ef; border-radius: 10px; padding: 9px 11px; font: 500 13px/1.3 'Poppins', sans-serif; color: #0f172a; background: #fff; outline: none; }
.lc-form input:focus { border-color: #F28119; }
.lc-form button { border: 0; border-radius: 10px; padding: 10px; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font: 700 12.5px/1 'Poppins', sans-serif; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 7px; }
.lc-form button:disabled { opacity: .7; }
.lc-form-err { color: #dc2626; font-size: 11.5px; font-weight: 600; margin: 0; }
.lc-offer { display: flex; justify-content: flex-start; margin: 2px 0 6px; }
.lc-offer button { border: 1.5px solid #22c55e; background: #fff; color: #15803d; border-radius: 999px; padding: 7px 13px; font: 700 12px/1 'Poppins', sans-serif; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; animation: lcPop .3s ease; }
@keyframes lcPop { from { transform: scale(.85); opacity: 0; } }
.lc-badge { position: absolute; top: -4px; right: -4px; z-index: 5; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff;
font: 800 11px/20px 'Poppins', sans-serif; text-align: center; box-shadow: 0 0 0 2px #fff; }
.lc-lb { position: fixed; inset: 0; z-index: 100001; background: rgba(8,11,30,.88); display: flex; flex-direction: column; }
.lc-lb-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; }
.lc-lb-bar b { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-lb-btn { height: 36px; min-width: 36px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center;
justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font: 700 12px/1 'Poppins', sans-serif; }
.lc-lb-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px 12px; }
.lc-lb-body img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lc-lb-body iframe { width: min(1000px, 100%); height: 100%; border: 0; border-radius: 8px; background: #fff; }
.ai-msg-bot ul { list-style: disc; }
.ai-msg-bot ol { list-style: decimal; }
.ai-msg-bot li { margin: 3px 0; padding-left: 2px; }
.ai-msg-bot li::marker { color: var(--ea-chat-accent-from, #F28119); }
.ai-msg-bot strong { font-weight: 700; }
.ai-msg-bot { align-self: flex-start; background: var(--ea-chat-bot-bg, #fff); color: var(--ea-chat-bot-text, #1e2233); border: 1px solid #eef0f5; border-bottom-left-radius: 4px; }
.ai-msg-user { align-self: flex-end; background: linear-gradient(135deg, var(--ea-chat-user-from, #12127A), var(--ea-chat-user-to, #1e3a8a)); color: #fff; border-bottom-right-radius: 4px; }
.ai-typing { display: inline-flex; gap: 4px; padding: 12px 16px; background: #fff; border: 1px solid #eef0f5; border-radius: 16px; border-bottom-left-radius: 4px; align-self: flex-start; animation: aiMsgIn 0.25s ease; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: aiTypingBounce 1.2s ease-in-out infinite; }
.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aiTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }
.ai-chat-input-row { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid #eef0f5; background: #fff; flex-shrink: 0; }
.ai-chat-input { flex: 1; min-width: 0; border: 1px solid #e2e5eb; border-radius: 22px; padding: 10px 16px; font-size: 12.5px; font-family: inherit; outline: none; }
.ai-chat-input:focus { border-color: #F28119; }
.ai-chat-send { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--ea-chat-accent-from, #F28119), var(--ea-chat-accent-to, #ff5a3c)); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; flex-shrink: 0; transition: transform 0.15s ease; }
.ai-chat-send:hover { transform: scale(1.08); }
.ai-chat-send:active { transform: scale(0.95); }
.ai-chat-mic { width: 38px; height: 38px; border-radius: 50%; background: #f1f3f7; color: #12127A; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; flex-shrink: 0; transition: all 0.15s ease; }
.ai-chat-mic:hover { background: #e5e8f0; }
.ai-chat-mic.listening { background: #ef4444; color: #fff; animation: aiMicPulse 1.2s ease-in-out infinite; }
@keyframes aiMicPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
/* Call-to-action phone button rendered inside a bot message (see renderCallButton in app.js) */
.ai-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ai-call-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: linear-gradient(135deg, #12127A, #1e3a8a); color: #fff; border-radius: 12px; font-size: 12px; font-weight: 700; text-decoration: none; }
.ai-whatsapp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: #25D366; color: #fff; border-radius: 12px; font-size: 12px; font-weight: 700; text-decoration: none; }
.ai-start-call-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: linear-gradient(135deg, #F28119, #ff5a3c); color: #fff; border: none; border-radius: 12px; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(242,129,25,0.35); animation: aiStartCallPulse 1.8s ease-in-out 3; }
@keyframes aiStartCallPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.ai-call-btn:hover, .ai-whatsapp-btn:hover { opacity: 0.9; }
.ai-call-btn:hover { opacity: 0.9; }
/* ============================================================
GLOBAL ICON MOTION — every feature/decorative icon badge across
the entire project (services, trust badges, stats, platform icons,
contact icons, add-ons) breathes continuously and automatically,
so the page feels alive at a glance rather than static — no hover
needed. Small UI-control icons (buttons, chevrons, close icons)
are NOT matched by this — only real icon-badges (w-10 to w-16,
rounded-full) are targeted, so nothing feels chaotic or busy.
============================================================ */
.w-10.h-10.rounded-full > i,
.w-11.h-11.rounded-full > i,
.w-12.h-12.rounded-full > i,
.w-14.h-14.rounded-full > i,
.w-16.h-16.rounded-full > i,
.platform-icon-box i,
.icon-breathe {
display: inline-block;
animation: iconAutoBreathe 2.8s ease-in-out infinite;
}
@keyframes iconAutoBreathe {
0%, 100% { transform: scale(1) translateY(0); }
50% { transform: scale(1.14) translateY(-2px); }
}
/* Gentle variety so nearby icons in the same grid don't all move in perfect unison */
.grid > *:nth-child(2n) .w-10.h-10.rounded-full > i,
.grid > *:nth-child(2n) .w-11.h-11.rounded-full > i,
.grid > *:nth-child(2n) .w-12.h-12.rounded-full > i,
.flex > *:nth-child(2n) .platform-icon-box i {
animation-delay: 0.45s;
}
.grid > *:nth-child(3n) .w-10.h-10.rounded-full > i,
.grid > *:nth-child(3n) .w-12.h-12.rounded-full > i {
animation-delay: 0.9s;
}
.grid > *:nth-child(4n) .w-10.h-10.rounded-full > i {
animation-delay: 1.35s;
}
/* Pause the auto-breathe while a card is actively being hovered, so it doesn't fight
with the more deliberate hover-triggered bounce defined above */
html.desktop-mode #services .rounded-2xl:hover .w-10.h-10.rounded-full > i,
html.desktop-mode .rounded-2xl:hover .w-10.h-10.rounded-full > i,
html.desktop-mode .rounded-2xl:hover .w-12.h-12.rounded-full > i {
animation-play-state: paused;
}
/* Gallery photos zoom in gently on hover instead of sitting static */
html.desktop-mode #photo-gallery img {
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html.desktop-mode #photo-gallery .rounded-2xl:hover img {
transform: scale(1.06);
}
/* Buttons feel responsive to the cursor everywhere on desktop */
html.desktop-mode button,
html.desktop-mode a.rounded-full,
html.desktop-mode a.rounded-xl {
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
html.desktop-mode #services button:hover,
html.desktop-mode #pricing button:hover,
html.desktop-mode .enquire-glow-btn:hover {
transform: translateY(-2px);
filter: brightness(1.06);
}
/* Enquire buttons open the lead form on desktop (not WhatsApp, since desktop browsers
usually can't launch the WhatsApp app) — so the WhatsApp icon there would be misleading.
This targets only the button's own leading icon, not feature-icon badges elsewhere. */
html.desktop-mode .enquire-glow-btn .fa-whatsapp {
display: none;
}
/* ----- MOBILE: cards/buttons give tactile press feedback instead of hover ----- */
html:not(.desktop-mode) #services .rounded-2xl,
html:not(.desktop-mode) #pricing .rounded-2xl,
html:not(.desktop-mode) #results .rounded-2xl,
html:not(.desktop-mode) .review-card,
html:not(.desktop-mode) #stats .rounded-2xl,
html:not(.desktop-mode) button,
html:not(.desktop-mode) .enquire-glow-btn {
transition: transform 0.15s ease;
}
html:not(.desktop-mode) #services .rounded-2xl:active,
html:not(.desktop-mode) #pricing .rounded-2xl:active,
html:not(.desktop-mode) #results .rounded-2xl:active,
html:not(.desktop-mode) .review-card:active,
html:not(.desktop-mode) #stats .rounded-2xl:active,
html:not(.desktop-mode) button:active,
html:not(.desktop-mode) .enquire-glow-btn:active {
transform: scale(0.96);
}
/* ----- Process flow (Formula section): the connecting line draws itself in as
you scroll, instead of just appearing — visually ties each step together ----- */
.formula-timeline::before {
transform-origin: top;
transform: scaleY(0);
transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}
.formula-timeline.is-visible::before {
transform: scaleY(1);
}
/* Lead Form Panel — slides up from bottom on open, slides down on submit/close */
.lead-panel-slide {
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
/* Real max-height + scroll, since the max-h-[XXvh] Tailwind arbitrary-value classes
used inline on these panels aren't present in this project's precompiled CSS bundle
(confirmed: zero matches in tailwind-compiled.css) — without this, a panel's natural
content-height applied with no constraint at all, which stayed invisible while every
panel's content was short, until the longer blog-article content made a panel render
thousands of pixels tall with its own close-button pushed off-screen entirely. */
max-height: 90vh;
overflow-y: auto;
}
.lead-panel-slide.lead-panel-open {
transform: translateY(0);
}
/* Inline success message — simple fade + drop in below the submit button (no popup) */
.lead-success-msg {
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.lead-success-msg.lead-success-visible {
opacity: 1;
transform: translateY(0);
}
/* Platform Icon — gentle pulsing glow for a modern, engaging feel (individual delays set inline per icon) */
@keyframes platformPulseGlow {
0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
50% { box-shadow: 0 4px 16px rgba(242,129,25,0.28); }
}
.platform-icon-box {
animation: platformPulseGlow 3s ease-in-out infinite;
}
/* Enquire Now (WhatsApp) buttons — soft navy glow pulse, brand color, professional not harsh */
@keyframes enquireGlowPulse {
0%, 100% { box-shadow: 0 2px 6px rgba(18,18,122,0.15); }
50% { box-shadow: 0 0 16px rgba(18,18,122,0.55); }
}
.enquire-glow-btn {
animation: enquireGlowPulse 2.4s ease-in-out infinite;
}
/* Photo Gallery — dot indicators */
.gallery-dot {
width: 6px;
height: 6px;
border-radius: 9999px;
background: #d1d5db;
transition: all 0.3s ease;
padding: 0;
border: none;
cursor: pointer;
}
.gallery-dot.gallery-dot-active {
width: 18px;
background: #F28119;
}
.review-card {
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.review-card:active {
transform: scale(0.98);
}
.rising-bubble {
position: fixed;
border-radius: 50%;
pointer-events: none;
z-index: 250;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), rgba(210,235,255,0.35) 55%, rgba(170,210,250,0.18) 100%);
border: 1px solid rgba(255,255,255,0.7);
box-shadow: inset 0 0 6px rgba(255,255,255,0.6), inset -2px -2px 6px rgba(80,140,200,0.15), 0 3px 10px rgba(0,80,180,0.12);
backdrop-filter: blur(1.5px);
animation-name: bubbleRiseUp;
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation-fill-mode: forwards;
}
.rising-bubble i, .rising-bubble svg, .rising-bubble span, .rising-bubble img {
opacity: 0.78;
}
@keyframes bubbleRiseUp {
0% { transform: translate(0, 0) scale(0.5) rotate(0deg); opacity: 0; }
12% { opacity: 1; transform: translate(calc(var(--bubble-drift, 20px) * 0.12), -12px) scale(1) rotate(calc(var(--bubble-rotate, 12deg) * 0.15)); }
100% { transform: translate(var(--bubble-drift, 20px), var(--bubble-rise, -320px)) scale(0.85) rotate(var(--bubble-rotate, 12deg)); opacity: 0; }
}
/* ===== Slide to Submit (iPhone-style slide-to-unlock pattern) ===== */
.slide-track {
position: relative;
width: 100%;
height: 3.25rem;
border-radius: 1.1rem;
background: #f1f5f9;
border: 1px solid #e2e8f0;
overflow: hidden;
user-select: none;
touch-action: none;
}
.slide-fill {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 0;
background: linear-gradient(90deg, rgba(34,197,94,0.12), rgba(34,197,94,0.26));
}
.slide-hint-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
color: #94a3b8;
pointer-events: none;
transition: opacity 0.1s linear;
}
.slide-chevron {
display: inline-block;
animation: slideChevronPulse 1.4s ease-in-out infinite;
}
.slide-chevron:nth-child(2) { animation-delay: 0.15s; }
.slide-chevron:nth-child(3) { animation-delay: 0.3s; }
@keyframes slideChevronPulse {
0%, 100% { opacity: 0.25; transform: translateX(0); }
50% { opacity: 1; transform: translateX(3px); }
}
.slide-handle {
position: absolute;
top: 4px;
left: 4px;
width: 3rem;
height: 3rem;
border-radius: 0.85rem;
background: linear-gradient(135deg, #12127A, #1c1cab);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(18,18,122,0.3);
cursor: grab;
touch-action: none;
transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.slide-handle:active { cursor: grabbing; }
.slide-handle.slide-handle-dragging { transition: none !important; }
@keyframes slideHandleGlow {
0%, 100% { box-shadow: 0 2px 6px rgba(18,18,122,0.3), 0 0 0 rgba(18,18,122,0); }
50% { box-shadow: 0 2px 6px rgba(18,18,122,0.3), 0 0 18px rgba(18,18,122,0.65); }
}
.slide-handle.slide-handle-glow {
animation: slideHandleGlow 1.8s ease-in-out infinite;
}
/* Bar Chart Animation Initial State */
.stat-bar-fill {
width: 0%;
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Pie Chart Styles */
.gender-pie {
background: conic-gradient(from 0deg, #3b82f6 0%, #3b82f6 52.3%, #ec4899 52.3%, #ec4899 100%);
border-radius: 50%;
position: relative;
}
.gender-pie::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
background-color: white;
border-radius: 50%;
}
/* Footer legal links (Terms / Privacy / Refund) — explicit spacing here since the
Tailwind gap-x/gap-y utilities aren't present in this project's precompiled CSS
bundle, so those classes silently had no effect and the links ran together. */
.footer-legal-links a {
margin: 0 12px 6px;
white-space: nowrap;
position: relative;
}
.footer-legal-links a:not(:last-child)::after {
content: '•';
position: absolute;
right: -16px;
top: 0;
color: rgba(255,255,255,0.25);
text-decoration: none;
}
/* ===============================================================
FESTIVAL MODE — header (motif-agnostic, driven by --festival-*
CSS custom properties set inline per-motif from config.php).
Add a new festival by adding its entry + motif-color mapping in
config.php/index.php — nothing here needs to change.
=============================================================== */
.app-sticky-header.festival-header {
background: linear-gradient(160deg, #FFF8ED 0%, #fff 55%, #FFF3DA 100%) !important;
}
/* Swinging garland across the top of the header */
.festival-garland {
position: absolute; top: -2px; left: 0; right: 0; height: 46px;
pointer-events: none; z-index: 5;
}
.festival-garland-string {
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background-image: repeating-linear-gradient(90deg, var(--festival-secondary) 0 8px, transparent 8px 14px);
}
.festival-hang-thread {
position: absolute; top: 0; width: 2px; height: 14px;
background: var(--festival-secondary);
transform-origin: top center;
animation: festivalThreadSwing 2.6s ease-in-out infinite;
}
.festival-hang-thread .festival-charm {
position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
font-size: 14px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}
@keyframes festivalThreadSwing {
0%, 100% { transform: rotate(-9deg); }
50% { transform: rotate(9deg); }
}
/* Drifting sparkle particles across the header band */
.festival-header-particles {
position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden;
}
.festival-h-particle { position: absolute; animation: festivalParticleFloat linear infinite; }
@keyframes festivalParticleFloat {
0% { transform: translateY(10px) translateX(0) rotate(0deg); opacity: 0; }
15% { opacity: 0.85; }
85% { opacity: 0.85; }
100% { transform: translateY(-60px) translateX(var(--fpx,15px)) rotate(360deg); opacity: 0; }
}
/* Festival icon (replaces the logo mark) */
.festival-icon { width: 30px; height: 30px; position: relative; flex-shrink: 0; }
.festival-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 5px var(--festival-glow)); }
.festival-icon-spin { animation: festivalSpinSlow 8s linear infinite; transform-origin: 20px 20px; }
@keyframes festivalSpinSlow { to { transform: rotate(360deg); } }
/* Header wordmark — shimmering gradient text using the motif's two colors */
.festival-header-word {
font-weight: 800; font-size: 13.5px; letter-spacing: -0.01em; white-space: nowrap;
background: linear-gradient(90deg, var(--festival-primary), var(--festival-secondary) 30%, var(--festival-primary) 60%, var(--festival-secondary) 90%);
background-size: 300% auto;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
animation: festivalShimmerHeader 3s linear infinite;
}
@keyframes festivalShimmerHeader { to { background-position: -300% center; } }
@media (min-width: 1024px) {
.festival-header-word { font-size: 15px; }
}
/* ===============================================================
FESTIVAL MODE — slider card (motif-agnostic via --festival-*)
=============================================================== */
.festival-slide { position: relative; }
/* Glow border wraps the WHOLE outer card (not just the inner content) — sits just inside
the card's own edge (not extending past it) since the card uses overflow:hidden for
other legitimate purposes and would clip anything extending beyond its bounds.
Always present in the DOM (not conditional on the class) so toggling the class fades it
smoothly via opacity+transition, rather than popping abruptly in/out — this only shows
while a festival-slide is actually being displayed, not for the rest of the rotation. */
#awarenessCardWrapper { position: relative; }
#awarenessCardWrapper::after {
content: ''; position: absolute; inset: 0; border-radius: 24px;
padding: 4px;
background: linear-gradient(120deg, var(--festival-secondary, transparent), var(--festival-primary, transparent), var(--festival-secondary, transparent), var(--festival-primary, transparent));
background-size: 300% 300%;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none; z-index: 20;
opacity: 0;
transition: opacity 0.45s ease;
animation: festivalBorderTravel 4s linear infinite;
}
#awarenessCardWrapper.festival-card-glow::after { opacity: 1; }
@keyframes festivalBorderTravel { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.festival-motif {
position: absolute; top: 8px; right: 8px; width: 60px; height: 60px; z-index: 3;
animation: festivalMotifFloat 3.6s ease-in-out infinite;
}
@keyframes festivalMotifFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.festival-motif svg { width: 100%; height: 100%; filter: drop-shadow(0 5px 10px var(--festival-glow)); }
.festival-motif-ring { animation: festivalSpinSlow 10s linear infinite; transform-origin: center; }
.festival-motif-pulse { animation: festivalKnotPulse 2s ease-in-out infinite; transform-origin: center; }
@keyframes festivalKnotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.festival-badge-pill {
display: inline-flex; align-items: center; gap: 5px;
font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
padding: 6px 13px; border-radius: 999px; margin-bottom: 10px;
color: #fff;
background: linear-gradient(90deg, var(--festival-primary), var(--festival-secondary));
box-shadow: 0 4px 14px var(--festival-glow);
animation: festivalBadgeGlow 2s ease-in-out infinite;
position: relative; z-index: 4;
}
@keyframes festivalBadgeGlow {
0%, 100% { box-shadow: 0 4px 14px var(--festival-glow); }
50% { box-shadow: 0 4px 22px var(--festival-glow); }
}
.festival-badge-emoji { display: inline-block; animation: festivalSpinIcon 2.2s ease-in-out infinite; }
@keyframes festivalSpinIcon { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(15deg) scale(1.2); } }
.festival-shimmer-heading {
font-size: 20px; position: relative; z-index: 4;
background: linear-gradient(100deg, #0C0B52 0%, var(--festival-primary) 30%, var(--festival-secondary) 50%, var(--festival-primary) 70%, #0C0B52 100%);
background-size: 250% auto;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
animation: festivalShimmerText 4s linear infinite;
}
@keyframes festivalShimmerText { 0% { background-position: 0% center; } 100% { background-position: -250% center; } }
/* Confined to the same top-right corner the big festival motif occupies, instead of
spanning the whole card.
Previously this layer was inset:0, so a decoration's position was whatever percentage
happened to be chosen — and anything below roughly 20% landed on the heading. Bounding
the layer itself means decorations CANNOT reach the text, whatever positions are used
inside it, rather than relying on each one being tuned by hand.
The box matches the motif's area (60px, 76px on wider screens) plus room to drift. */
.festival-card-deco {
position: absolute;
top: 0; right: 0;
width: 148px;
height: 82px;
pointer-events: none;
overflow: visible; /* a decoration mid-drift may sit slightly outside the box */
border-radius: 14px;
z-index: 2;
}
@media (min-width: 820px) {
.festival-card-deco { width: 180px; height: 100px; }
}
.festival-deco-item { position: absolute; animation: festivalFloatDrift ease-in-out infinite; animation-duration: 3.4s; }
@keyframes festivalFloatDrift {
0%, 100% { transform: translateY(0) rotate(-6deg); }
50% { transform: translateY(-12px) rotate(8deg); }
}
.festival-sparkle {
position: absolute; border-radius: 50%; opacity: 0;
background: var(--festival-secondary);
box-shadow: 0 0 6px var(--festival-secondary);
animation: festivalSparklePop ease-in-out infinite;
}
@keyframes festivalSparklePop {
0%, 100% { opacity: 0; transform: scale(0.3); }
50% { opacity: 1; transform: scale(1); }
}
@media (min-width: 1024px) {
.festival-shimmer-heading { font-size: 26px; }
.festival-motif { width: 76px; height: 76px; top: 12px; right: 12px; }
}
.festival-title-name { display: flex; align-items: center; gap: 8px; }
/* ===== Blogs section — category pills, card line-clamp, in-app article typography ===== */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; }
.blog-cat-pill {
flex-shrink: 0;
font-size: 10.5px;
font-weight: 700;
padding: 7px 14px;
border-radius: 999px;
background: #f4f5fa;
color: #64748b;
border: 1px solid #eef0f5;
transition: all 0.2s ease;
white-space: nowrap;
}
.blog-cat-pill-active {
background: #F2811A;
color: #fff;
border-color: transparent;
box-shadow: 0 4px 10px rgba(242,129,26,0.3);
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Article typography inside the in-app blog detail modal — a smaller-scale version of
the standalone blog page's own typography, matched for a modal context rather than a
full page. */
#blogDetailBody h3 { font-size: 1.05rem; font-weight: 800; color: #12127A; margin-top: 1.8rem; margin-bottom: 0.7rem; }
#blogDetailBody h3:first-child { margin-top: 0; }
#blogDetailBody p { margin-bottom: 0.9rem; }
#blogDetailBody ul { margin-bottom: 0.9rem; padding-left: 1.2rem; }
#blogDetailBody li { list-style: disc; margin-bottom: 0.4rem; }
#blogDetailBody code { background: #f4f5fa; padding: 1px 5px; border-radius: 4px; font-size: 0.9em; color: #C0392B; }
#blogDetailBody strong { color: #1e293b; font-weight: 700; }
/* ---- Voice-call theme hooks ----
The call screen's colours, avatar shape and glow come from the theme variables emitted by
easeado_render_call_theme_css(). Declared here, after the base rules, so a chosen theme wins
without needing !important scattered through the original styles. */
.ai-call-name, .ai-call-status, .ai-call-caption { color: var(--ea-call-text, #ffffff); }
.ai-call-avatar { border-radius: var(--ea-call-avatar-radius, 50%); }
.ai-call-avatar img { border-radius: var(--ea-call-avatar-radius, 50%); }
.ai-call-avatar-wrap::before { background: var(--ea-call-ring, rgba(242,129,25,0.5)); }
.ai-call-end-btn { background: var(--ea-call-end, #ef4444); }
.ai-call-retry-btn { background: var(--ea-call-accent, #F28119); }
/* ===== Custom page blocks =====
Deliberately reuses the site's existing spacing, radius and palette so an added block reads as
part of the page rather than something pasted in. Desktop mode wraps sections in white cards,
so these inherit that treatment through the same #pageContent > section rule. */
.ea-block { padding: 2.5rem 1.25rem; }
.ea-block-h { font-size: clamp(20px, 4vw, 28px); font-weight: 800; color: #14137A; margin: 0 0 8px; line-height: 1.25; }
.ea-block-sub { font-size: 14px; color: #64748b; margin: 0 0 20px; line-height: 1.6; }
.ea-block-body { font-size: 14.5px; color: #475569; line-height: 1.75; }
.ea-block-btn { display: inline-block; margin-top: 16px; background: linear-gradient(135deg, #F28119, #ff5a3c); color: #fff; text-decoration: none; padding: 11px 24px; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.ea-block-btn:hover { opacity: .92; }
.ea-block-split { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.ea-block-img img { width: 100%; height: auto; border-radius: 16px; display: block; }
@media (min-width: 820px) {
.ea-block-split { grid-template-columns: 1fr 1fr; gap: 40px; }
.ea-block-split.ea-img-left .ea-block-copy { order: 2; }
}
.ea-feature-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .ea-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ea-feature-grid { grid-template-columns: repeat(3, 1fr); } }
.ea-feature { background: #fff; border: 1px solid #eef0f5; border-radius: 16px; padding: 22px; box-shadow: 0 4px 18px rgba(20,20,50,.05); }
.ea-feature-ic { width: 44px; height: 44px; border-radius: 12px; background: #fff3e6; color: #F28119; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 12px; }
.ea-feature h3 { font-size: 15px; font-weight: 700; color: #14137A; margin: 0 0 6px; }
.ea-feature p { font-size: 13px; color: #64748b; line-height: 1.65; margin: 0; }
.ea-stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 820px) { .ea-stat-row { grid-template-columns: repeat(4, 1fr); } }
.ea-stat { text-align: center; padding: 18px 10px; background: #fff; border: 1px solid #eef0f5; border-radius: 14px; }
.ea-stat-n { font-size: clamp(20px, 4vw, 28px); font-weight: 800; color: #F28119; line-height: 1.1; }
.ea-stat-l { font-size: 11.5px; color: #64748b; margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; }
.ea-cta { background: linear-gradient(135deg, #12127A, #1e3a8a); border-radius: 20px; padding: 30px 26px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.ea-cta .ea-block-h, .ea-cta .ea-block-body { color: #fff; }
.ea-cta .ea-block-body { opacity: .85; }
@media (min-width: 820px) { .ea-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 30px; } .ea-cta .ea-block-btn { margin-top: 0; flex-shrink: 0; } }
.ea-quote { margin: 0; padding: 24px 26px; border-left: 4px solid #F28119; background: #f8fafc; border-radius: 0 14px 14px 0; font-size: clamp(15px, 2.6vw, 18px); line-height: 1.7; color: #1e2233; font-style: italic; }
.ea-quote cite { display: block; margin-top: 12px; font-size: 12.5px; color: #64748b; font-style: normal; font-weight: 700; }
.ea-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ea-checklist li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: #475569; line-height: 1.65; }
.ea-checklist i { color: #16a34a; margin-top: 3px; flex-shrink: 0; }
.ea-checklist strong { color: #14137A; }
.ea-faq-wrap { display: grid; gap: 10px; }
.ea-faq { background: #fff; border: 1px solid #eef0f5; border-radius: 12px; padding: 14px 18px; }
.ea-faq summary { font-size: 14px; font-weight: 700; color: #14137A; cursor: pointer; list-style: none; }
.ea-faq summary::-webkit-details-marker { display: none; }
.ea-faq summary::after { content: '+'; float: right; color: #F28119; font-size: 18px; line-height: 1; }
.ea-faq[open] summary::after { content: '\2212'; }
.ea-faq p { font-size: 13.5px; color: #64748b; line-height: 1.7; margin: 10px 0 0; }
/* ===== Media-only slides =====
A slide carrying an image or video is that media and nothing else — no badge, heading or body
underneath. These rules let it fill the slide instead of sitting as a small strip above text.
min-height matches a typical text slide so the slider doesn't jump in height between the two. */
.awareness-media-full {
display: block;
width: 100%;
/* Fills whatever height the card settled at, rather than carrying a size of its own.
The card height is set from the longest TEXT slide, so a media slide simply matches it —
which is what keeps the slider from jumping in height as slides come around. */
height: 100%;
min-height: 0;
object-fit: cover; /* fills the card without distorting; edges crop rather than stretch */
object-position: center;
border-radius: 14px;
margin: 0;
background: #0f172a;
}
/* height:100% only resolves when every ancestor has a definite height, and the slide's chain
does not — measured 308x173 inside a 358x258 card. Filling by absolute position instead is
unconditional: the media covers the card exactly whatever the card's height turns out to be. */
.awareness-slide:has(.awareness-media-full) {
/* Absolutely filling the TRACK, which is the element that carries the measured pixel height.
Sizing the slide itself did not work: with the media taken out of flow the slide had no
content left to give it height, so it collapsed to zero. */
position: absolute;
inset: 0;
padding: 0;
}
.awareness-slide:has(.awareness-media-full) > a { position: static; }
.awareness-media-full {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.awareness-media-embed { position: absolute; inset: 0; aspect-ratio: auto; }
/* Video embeds keep their aspect ratio rather than being cropped — cropping a 16:9 video to a
square loses the subject, which matters far less for a photo than for a talking-head clip. */
.awareness-media-embed {
position: relative;
aspect-ratio: 16 / 9;
height: auto;
min-height: 0;
overflow: hidden;
padding: 0;
}
.awareness-media-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* The slide wrapper pads for text; a full-bleed media slide doesn't want that gap. */
.awareness-slide:has(.awareness-media-full) { padding: 0; }
/* ===== Logo marquee: hold to pause, drag to look =====
The rows scroll by CSS animation. Pausing that animation while a finger is down lets someone
stop on a logo they recognise; the row also becomes horizontally scrollable so it can be
dragged either way. Scrollbars are hidden because the motion itself is the affordance. */
.brand-marquee-row { touch-action: pan-y; }
.brand-marquee-row.is-held { animation-play-state: paused; }
.brand-marquee-row.is-held { cursor: grab; }
/* ===== Blog carousel =====
The posts were a vertical stack. As a carousel they show one at a time and loop, matching how
the gallery and reviews already behave — one interaction pattern across the page rather than
three different ones. */
.blog-carousel { position: relative; overflow: hidden; }
.blog-track {
display: flex;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.blog-track > .blog-post-card {
flex: 0 0 100%;
max-width: 100%;
/* Cards were vertically stacked with space-y; as slides they need their own gutter, and
box-sizing keeps the padding inside the 100% width so slides don't drift out of step. */
box-sizing: border-box;
margin: 0;
}
/* Two across once there is room. Three was tried and measured out at 267px per card on an
802px carousel, which squeezed the titles onto three lines and left the excerpt cramped —
two cards at ~400px reads properly. Three only makes sense on a genuinely wide screen. */
@media (min-width: 720px) {
.blog-track > .blog-post-card { flex: 0 0 50%; max-width: 50%; }
}
/* No three-across tier. The carousel container is capped at ~802px whatever the screen width,
so three cards always come out at 267px and wrap the titles onto two lines — measured at both
1440px and 1600px. Two cards at ~400px is the right answer at every desktop size. */
.blog-track > .blog-post-card { padding-right: 12px; }
.blog-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
/* The dot stays small visually, but the button itself is 24px tall with padding so it can
actually be tapped — a 7px target fails every touch-size guideline and is genuinely hard to
hit on a phone. The dot is drawn with a pseudo-element so the tap area and the mark are
independent. */
.blog-dot {
width: 24px; height: 24px; border: none; padding: 0; background: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.blog-dot::before {
content: ''; display: block;
width: 7px; height: 7px; border-radius: 999px; background: #e2e5ef;
transition: width 0.25s ease, background 0.25s ease;
}
.blog-dot.active::before { width: 20px; background: #F28119; }
/* ===== Block colour customisation =====
Each block can override five colours, set per block in Page Blocks. Every var() falls back to
the value that was hard-coded before, so blocks saved earlier render exactly as they did.
Declared after the base block rules, same specificity, so these win without !important. */
.ea-block { background: var(--eab-bg, transparent); }
html.desktop-mode #pageContent > section.ea-block { background: var(--eab-bg, #ffffff); }
.ea-block-h, .ea-feature h3, .ea-checklist strong, .ea-faq summary { color: var(--eab-heading, #14137A); }
.ea-block-sub, .ea-feature p, .ea-stat-l, .ea-quote cite, .ea-faq p { color: var(--eab-text, #64748b); }
.ea-block-body, .ea-checklist li, .ea-quote { color: var(--eab-text, #475569); }
.ea-block-btn { background: var(--eab-accent, linear-gradient(135deg, #F28119, #ff5a3c)); }
.ea-feature-ic { color: var(--eab-accent, #F28119); background: color-mix(in srgb, var(--eab-accent, #F28119) 12%, #ffffff); }
.ea-stat-n, .ea-faq summary::after { color: var(--eab-accent, #F28119); }
.ea-quote { border-left-color: var(--eab-accent, #F28119); }
.ea-checklist i { color: var(--eab-accent, #16a34a); }
.ea-cta { background: var(--eab-banner, linear-gradient(135deg, #12127A, #1e3a8a)); }
/* Text inside the banner keeps its own colour: heading/text colours are chosen for a light
section, and would be unreadable on a dark banner if applied there too. */
.ea-cta .ea-block-h, .ea-cta .ea-block-body { color: var(--eab-banner-text, #ffffff); }
/* ===== App: splash, install bar, notification bar =====
All three are only ever created by assets/js/pwa.js when the Mobile App is switched on. */
.ea-splash {
position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center;
justify-content: center; opacity: 1; transition: opacity .3s ease;
}
.ea-splash.is-out { opacity: 0; pointer-events: none; }
.ea-splash img { max-width: 62%; max-height: 42%; object-fit: contain; }
/* A notification that arrives while the site is open: a banner inside the app, like a chat app. */
.ea-inapp {
position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; z-index: 100000; width: min(420px, calc(100% - 20px));
display: flex; align-items: center; gap: 11px; padding: 11px 12px; cursor: pointer;
background: rgba(255,255,255,.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid #eceef5; border-radius: 18px; box-shadow: 0 18px 44px rgba(15,20,50,.22);
transform: translate(-50%, -140%); transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.ea-inapp.is-in { transform: translate(-50%, 0); }
.ea-inapp img { width: 42px; height: 42px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid #eceef5; padding: 3px; flex-shrink: 0; }
.ea-inapp-t { flex: 1; min-width: 0; line-height: 1.35; }
.ea-inapp-h { display: flex; align-items: baseline; gap: 8px; }
.ea-inapp-h b { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; color: #12127A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-inapp-h small { font-size: 10.5px; color: #94a3b8; flex-shrink: 0; }
.ea-inapp-t span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: #475569; margin-top: 1px; }
.ea-inapp-x { border: 0; background: #f1f3f9; color: #64748b; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex-shrink: 0; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .ea-inapp { transition: none; } }
.ea-install, .ea-notify {
position: fixed; left: 14px; right: 14px; bottom: 16px; z-index: 9990;
background: #fff; border: 1px solid #e8eaf3; border-radius: 16px;
box-shadow: 0 16px 44px rgba(15, 20, 50, .2);
display: flex; align-items: center; gap: 12px; padding: 13px 15px;
max-width: 460px; margin: 0 auto;
}
.ea-install-ic { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; flex-shrink: 0; }
.ea-install-text, .ea-notify-text { flex: 1; min-width: 0; line-height: 1.4; }
.ea-install-text strong, .ea-notify-text strong {
display: block; font-size: 13px; font-weight: 700; color: #14137A;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ea-install-text span, .ea-notify-text span {
display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; line-height: 1.45;
}
.ea-install-go, .ea-notify-go {
border: 0; border-radius: 999px; padding: 9px 18px; font-size: 12.5px; font-weight: 700;
color: #fff; background: linear-gradient(135deg, #F28119, #ff5a3c); cursor: pointer; flex-shrink: 0;
}
.ea-install-no {
border: 0; background: none; color: #94a3b8; font-size: 20px; line-height: 1;
cursor: pointer; padding: 4px 6px; flex-shrink: 0;
}
.ea-notify-no {
border: 0; background: none; color: #94a3b8; font-size: 11.5px; font-weight: 600;
cursor: pointer; padding: 8px 4px; flex-shrink: 0; white-space: nowrap;
}
.ea-notify { transform: translateY(14px); opacity: 0; transition: transform .24s ease, opacity .24s ease; }
.ea-notify.is-in { transform: none; opacity: 1; }
/* Clear of the chat button, which sits in the same corner. */
@media (max-width: 640px) { .ea-install, .ea-notify { bottom: 150px; } }
/* Install banner: slides in from the top or the bottom, as set in the admin panel. */
.ea-install { opacity: 0; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease; }
.ea-install.is-top { top: calc(10px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translateY(-140%); }
.ea-install.is-bottom { transform: translateY(140%); }
.ea-install.is-in { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ea-install { transition: opacity .2s ease; } }
/* Install steps, opened from the menu's "Install App" when the browser has no dialog of its own. */
.ea-guide {
position: fixed; inset: 0; z-index: 9995; background: rgba(15, 20, 50, .45);
display: flex; align-items: flex-end; justify-content: center; padding: 16px;
}
@media (min-width: 641px) { .ea-guide { align-items: center; } }
.ea-guide-card {
background: #fff; border-radius: 18px; width: 100%; max-width: 420px; padding: 18px 18px 16px;
box-shadow: 0 24px 60px rgba(15, 20, 50, .28);
}
.ea-guide-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ea-guide-head strong { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; color: #14137A; line-height: 1.35; }
.ea-guide-close {
width: 36px; height: 36px; border-radius: 10px; border: 1px solid #e8eaf3; background: #fff;
color: #475569; font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.ea-guide-steps { list-style: none; margin: 0; padding: 0; }
.ea-guide-steps li {
display: flex; align-items: flex-start; gap: 12px; padding: 10px 0;
border-top: 1px solid #f1f3f8; font-size: 12.5px; line-height: 1.55; color: #334155;
}
.ea-guide-steps li:first-child { border-top: 0; }
.ea-guide-steps li i {
width: 32px; height: 32px; border-radius: 10px; background: #fff7ed; color: #E0660C;
display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;
}
.ea-guide-steps li b { color: #0f172a; }
.ea-guide-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: #5f6d81; }
/* ===== Social links row (contact footer) =====
One rule, any number of networks: each link carries its own colour as --sc, so adding a
network in the admin panel needs no CSS at all. */
.social-row { margin-bottom: 4px; }
.social-dot {
width: 44px; height: 44px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-size: 17px; text-decoration: none;
background: var(--sc, #64748B);
/* The glow is the network's own colour, which is what makes the row read as branded
rather than as a line of grey circles. */
box-shadow: 0 6px 18px color-mix(in srgb, var(--sc, #64748B) 45%, transparent);
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.social-dot:hover, .social-dot:focus-visible {
transform: translateY(-3px) scale(1.06);
box-shadow: 0 10px 24px color-mix(in srgb, var(--sc, #64748B) 62%, transparent);
filter: brightness(1.08);
}
.social-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.social-dot:active { transform: translateY(-1px) scale(.98); }
/* Snapchat's yellow needs dark glyphs to be legible at all. */
.social-dot[style*="#FFFC00"] { color: #14137A; }
@media (prefers-reduced-motion: reduce) { .social-dot { transition: none; } }
/* Shape and alignment of the social row, both set in Admin -> Social Links. One class on
the row rather than per link: a row of mixed shapes reads as a mistake, not a choice. */
.social-row.social-align-left { justify-content: flex-start; }
.social-row.social-align-center { justify-content: center; }
.social-row.social-align-right { justify-content: flex-end; }
.social-shape-circle .social-dot { border-radius: 50%; }
.social-shape-squircle .social-dot { border-radius: 36%; }
.social-shape-rounded .social-dot { border-radius: 8px; }
.social-shape-square .social-dot { border-radius: 3px; }
/* ===== AI hints: "AI Assistant" beside the chat button, "Talk to AI" on the call button ===== */
.ai-fab-hint {
position: fixed; right: 76px; bottom: 86px; z-index: 199;
display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 96px);
padding: 9px 10px 9px 9px; background: #fff; border-radius: 16px; cursor: pointer;
border: 1px solid rgba(242,129,25,0.25);
box-shadow: 0 14px 34px rgba(18,18,122,0.18), 0 2px 6px rgba(18,18,122,0.08);
opacity: 0; transform: translateX(12px) scale(0.96); transform-origin: right center;
transition: opacity .3s ease, transform .35s cubic-bezier(0.34,1.56,0.64,1);
pointer-events: none;
}
.ai-fab-hint.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ai-fab-hint::after {
content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
background: #fff; border-right: 1px solid rgba(242,129,25,0.25); border-top: 1px solid rgba(242,129,25,0.25);
transform: rotate(45deg);
}
html.desktop-mode .ai-fab-hint { right: 98px; bottom: 30px; z-index: 349; }
.ai-fab-hint-ic {
width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #F28119, #ff5a3c); color: #fff; font-size: 14px;
box-shadow: 0 6px 14px rgba(242,129,25,0.35);
}
.ai-fab-hint-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ai-fab-hint-t b { font-size: 12.5px; font-weight: 800; color: #12127A; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ai-fab-hint-t em { font-style: normal; font-size: 11px; font-weight: 500; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-fab-hint-live { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); animation: aiHintLive 1.6s ease-in-out infinite; }
@keyframes aiHintLive { 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0.05); } }
.ai-fab-hint-x {
border: 0; background: #f1f3f9; color: #64748b; width: 22px; height: 22px; border-radius: 50%;
font-size: 14px; line-height: 1; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.ai-fab-hint-x:hover { background: #e2e8f0; color: #12127A; }
/* The voice-call button: solid green with a soft pulse, so it reads as "talk", not a decoration. */
.ai-chat-call-btn.ai-chat-call-btn {
position: relative; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; width: 32px; height: 32px;
box-shadow: 0 4px 12px rgba(34,197,94,0.45);
}
.ai-chat-call-btn.ai-chat-call-btn:hover { background: linear-gradient(135deg, #16a34a, #15803d); }
.ai-chat-call-btn::after {
content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(74,222,128,0.7);
animation: aiCallPulse 2.4s ease-out infinite; pointer-events: none;
}
.ai-chat-call-btn.is-hinting::after { animation-duration: 1.1s; border-color: #4ade80; }
@keyframes aiCallPulse { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.ai-call-hint {
position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; text-align: left;
padding: 9px 13px 9px 9px; border: 0; border-radius: 14px; cursor: pointer; font-family: inherit;
background: #fff; box-shadow: 0 14px 34px rgba(18,18,122,0.22), 0 0 0 1px rgba(34,197,94,0.25);
opacity: 0; transform: translateY(-6px) scale(0.96); transform-origin: top right;
transition: opacity .25s ease, transform .3s cubic-bezier(0.34,1.56,0.64,1);
}
.ai-call-hint.is-on { opacity: 1; transform: none; }
.ai-call-hint::before {
content: ''; position: absolute; top: -6px; right: var(--ai-hint-arrow, 16px); width: 12px; height: 12px;
background: #fff; transform: rotate(45deg); box-shadow: -1px -1px 0 0 rgba(34,197,94,0.25);
}
.ai-call-hint-ic {
width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-size: 13px;
}
.ai-call-hint-t { display: flex; flex-direction: column; line-height: 1.25; }
.ai-call-hint-t b { font-size: 12.5px; font-weight: 800; color: #12127A; }
.ai-call-hint-t em { font-style: normal; font-size: 11px; color: #64748b; }
/* Attention motion while a hint is up: the card gently nudges toward its button, a light
sweep crosses it, its icon moves, and the button it points at glows — so the eye goes
there. Uses the separate `translate` property so it never fights the entry transform. */
.ai-fab-hint, .ai-call-hint { overflow: visible; isolation: isolate; }
.ai-fab-hint.is-on { animation: aiHintNudgeX 2.6s ease-in-out .5s infinite; }
.ai-call-hint.is-on { animation: aiHintNudgeY 2.2s ease-in-out .5s infinite; }
@keyframes aiHintNudgeX { 0%, 60%, 100% { translate: 0 0; } 70% { translate: 6px 0; } 80% { translate: 0 0; } 90% { translate: 4px 0; } }
@keyframes aiHintNudgeY { 0%, 60%, 100% { translate: 0 0; } 70% { translate: 0 -5px; } 80% { translate: 0 0; } 90% { translate: 0 -3px; } }
/* Light sweep, clipped to the card by its own rounded box. */
.ai-fab-hint::before, .ai-call-hint::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.9) 45%, rgba(255,236,214,0.9) 50%, transparent 65%) no-repeat;
background-size: 250% 100%; background-position: 130% 0; opacity: 0;
}
.ai-call-hint::after { background-image: linear-gradient(110deg, transparent 30%, rgba(220,252,231,0.95) 48%, transparent 65%); }
.ai-fab-hint.is-on::before, .ai-call-hint.is-on::after { opacity: 1; animation: aiHintSweep 2.6s ease-in-out .3s infinite; }
@keyframes aiHintSweep { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
/* A glowing ring breathing around the card. */
.ai-fab-hint.is-on .ai-fab-hint-ic { animation: aiHintIcon 2.6s ease-in-out .4s infinite; }
@keyframes aiHintIcon { 0%, 55%, 100% { transform: none; } 62% { transform: rotate(-14deg) scale(1.12); } 70% { transform: rotate(12deg) scale(1.12); } 78% { transform: none; } }
.ai-fab-hint.is-on .ai-fab-hint-ic, .ai-call-hint.is-on .ai-call-hint-ic { position: relative; }
.ai-fab-hint.is-on .ai-fab-hint-ic::after, .ai-call-hint.is-on .ai-call-hint-ic::after {
content: ''; position: absolute; inset: -4px; border-radius: 13px; border: 2px solid rgba(242,129,25,0.55);
animation: aiHintRing 1.8s ease-out infinite; pointer-events: none;
}
.ai-call-hint.is-on .ai-call-hint-ic::after { border-color: rgba(34,197,94,0.6); border-radius: 12px; }
@keyframes aiHintRing { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
/* The chat button itself glows while its hint is showing. */
body:has(.ai-fab-hint.is-on) #aiChatButton { animation: aiFabFocus 1.6s ease-in-out infinite; border-radius: 50%; }
@keyframes aiFabFocus { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,129,25,0.55); } 50% { box-shadow: 0 0 0 12px rgba(242,129,25,0); } }
/* Talk with AI: the headset rings, live sound bars move beside the words, and the call
button beats with a double ring while the hint is up. */
.ai-call-hint.is-on .ai-call-hint-ic i { animation: aiCallRing 1.8s ease-in-out .3s infinite; }
@keyframes aiCallRing { 0%, 50%, 100% { transform: none; } 55%, 65%, 75% { transform: rotate(-16deg); } 60%, 70%, 80% { transform: rotate(16deg); } }
.ai-call-hint-t b { display: flex; align-items: center; gap: 7px; }
.ai-call-hint-wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.ai-call-hint-wave i { width: 3px; height: 4px; border-radius: 2px; background: #22c55e; animation: aiCallWave 1s ease-in-out infinite; }
.ai-call-hint-wave i:nth-child(2) { animation-delay: .15s; }
.ai-call-hint-wave i:nth-child(3) { animation-delay: .3s; }
.ai-call-hint-wave i:nth-child(4) { animation-delay: .45s; }
@keyframes aiCallWave { 0%, 100% { height: 4px; } 50% { height: 12px; } }
.ai-chat-call-btn.is-hinting { animation: aiCallBeat 1.1s ease-in-out infinite; }
.ai-chat-call-btn.is-hinting::before {
content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(74,222,128,0.6);
animation: aiCallPulse 1.1s ease-out .55s infinite; pointer-events: none;
}
@keyframes aiCallBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
.ai-chat-call-btn::after, .ai-fab-hint-live { animation: none; }
.ai-fab-hint, .ai-call-hint { transition: opacity .2s ease; transform: none; }
.ai-fab-hint.is-on, .ai-call-hint.is-on, .ai-fab-hint.is-on::before, .ai-call-hint.is-on::after,
.ai-fab-hint.is-on .ai-fab-hint-ic, .ai-fab-hint-ic::after, .ai-call-hint-ic::after, .ai-call-hint-ic i,
.ai-call-hint-wave i, .ai-chat-call-btn.is-hinting, .ai-chat-call-btn.is-hinting::before,
body:has(.ai-fab-hint.is-on) #aiChatButton { animation: none !important; }
}