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;
}
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;
}
html.desktop-mode #pageContent > section:first-of-type {
margin-top: 28px !important;
}
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;
}
/* ----- 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: 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 */
@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; }
}
/* 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, #12127A, #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: 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; box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 20px 4px 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; }
.ai-msg-bot { align-self: flex-start; background: #fff; color: #1e2233; border: 1px solid #eef0f5; border-bottom-left-radius: 4px; }
.ai-msg-user { align-self: flex-end; background: linear-gradient(135deg, #12127A, #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; 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, #F28119, #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; } }
.festival-card-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 14px; z-index: 2; }
.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; }