/* ── Legal pages (terms, privacy) ── */
html.has-js:not(.page-ready) header,
html.has-js:not(.page-ready) main {
opacity: 0;
transform: translateY(14px);
}
html.has-js.page-ready header,
html.has-js.page-ready main {
opacity: 1;
transform: translateY(0);
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
html.has-js:not(.page-ready) header,
html.has-js:not(.page-ready) main { opacity: 1; transform: none; }
html.has-js.page-ready header,
html.has-js.page-ready main { transition: none; }
}
/* ── Main (index) ── */
html {
scroll-behavior: auto;
scroll-padding-top: 7.25rem;
}
@media (min-width: 1024px) {
html { scroll-padding-top: 8.25rem; }
}
/* Page load: eased entrance (.has-js set in ; .page-ready after init) */
html.has-js:not(.page-ready) #site-nav,
html.has-js:not(.page-ready) main {
opacity: 0;
transform: translateY(18px);
}
html.has-js.page-ready #site-nav,
html.has-js.page-ready main {
opacity: 1;
transform: translateY(0);
transition:
opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
html.has-js:not(.page-ready) #site-nav,
html.has-js:not(.page-ready) main {
opacity: 1;
transform: none;
}
html.has-js.page-ready #site-nav,
html.has-js.page-ready main {
transition: none;
}
}
body {
font-family: 'Manrope', sans-serif;
background-color: #f8fafb;
color: #191c1d;
}
h1, h2, h3, .font-headline {
font-family: 'Plus Jakarta Sans', sans-serif;
}
.glass-nav {
background: rgba(248, 250, 251, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.glass-nav.is-scrolled {
background: rgba(248, 250, 251, 0.94);
box-shadow: 0 12px 40px rgba(25, 28, 29, 0.08);
border-bottom: 1px solid rgba(142, 112, 108, 0.12);
}
/* Safe-area-inset for notched devices in landscape */
@supports (padding: env(safe-area-inset-left)) {
body {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
}
/* In-page nav links: smooth underline */
.nav-anchor {
position: relative;
padding-bottom: 2px;
}
.nav-anchor::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #b2201f, #006a65);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-anchor:hover::after,
.nav-anchor:focus-visible::after {
transform: scaleX(1);
}
/* Mobile menu panel */
.nav-mobile-panel {
opacity: 0;
visibility: hidden;
transform: translateY(-10px) scale(0.98);
transform-origin: top right;
transition: opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
visibility 0.35s;
}
details[open] > .nav-mobile-panel {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
.nav-mobile-panel {
transition: opacity 0.15s ease, visibility 0.15s;
}
}
/* Scroll-triggered reveals */
.reveal-on-scroll {
opacity: 0;
transform: translateY(2rem);
transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-on-scroll.reveal-scale {
transform: translateY(1.75rem) scale(0.97);
}
.reveal-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-on-scroll.reveal-scale.is-visible {
transform: translateY(0) scale(1);
}
.reveal-stagger > .reveal-on-scroll:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger > .reveal-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > .reveal-on-scroll:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger > .reveal-on-scroll:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger > .reveal-on-scroll:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger > .reveal-on-scroll:nth-child(6) { transition-delay: 0.3s; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
.reveal-on-scroll,
.reveal-on-scroll.reveal-scale {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.reveal-stagger > .reveal-on-scroll { transition-delay: 0s !important; }
}
.gradient-btn {
background: linear-gradient(90deg, #b2201f 0%, #d63b35 100%);
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Smooth card hovering (after reveal transform is cleared) */
.feature-card {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-card.is-visible:hover {
transform: translateY(-4px);
}
/* Custom Chat Animations */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@keyframes slideUpFade {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes typing {
0%, 100% { transform: translateY(0); opacity: 0.5; }
50% { transform: translateY(-4px); opacity: 1; }
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.msg-1 { animation: slideUpFade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
.msg-2 { animation: slideUpFade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.8s both; }
.msg-3 { animation: slideUpFade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 3.5s both; }
.msg-4 { animation: slideUpFade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 4.8s both; }
.typing-dot { animation: typing 1.4s infinite ease-in-out both; }
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }
details.faq-item[open] {
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
details.faq-item[open] .faq-chevron {
transform: rotate(180deg);
}