:root { --primary: #0F3D56; --secondary: #16A085; --background: #F8FAFC; --text: #1E293B; --scrollbar-track: #e2e8f0; --scrollbar-thumb: rgba(15, 61, 86, 0.6); --scrollbar-thumb-hover: rgba(15, 61, 86, 0.8); } /* Dark mode overrides for the legacy CSS variables above. The `dark` class is toggled on by assets/js/theme.js. */ html.dark { --background: #0f172a; --text: #e2e8f0; --scrollbar-track: #0f172a; --scrollbar-thumb: rgba(148, 163, 184, 0.7); --scrollbar-thumb-hover: rgba(148, 163, 184, 0.9); } html { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-width: thin; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 10px; height: 10px; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: var(--scrollbar-track); } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 2px solid var(--scrollbar-track); border-radius: 999px; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Small custom styles that sit on top of Tailwind utility classes. */ html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--background); color: var(--text); transition: background-color 0.3s ease, color 0.3s ease; } /* Accessible skip link, hidden until focused */ .skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 100; } .skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.75rem 1.25rem; background: var(--primary); color: #fff; border-radius: 0.75rem; font-weight: 600; font-size: 0.875rem; } /* Mobile menu open state, toggled by main.js */ body.mobile-menu-open { overflow: hidden; } #mobile-menu-overlay.is-open { opacity: 1; pointer-events: auto; } #mobile-menu-panel.is-open { transform: translateX(0); } /* Soft scroll-reveal animation for sections and cards */ .reveal-on-scroll { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* Respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal-on-scroll { opacity: 1; transform: none; transition: none; } } /* Subtle dotted background used behind the hero */ .dot-grid-bg { background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 18px 18px; } html.dark .dot-grid-bg { background-image: radial-gradient(currentColor 1px, transparent 1px); } /* FAQ chevron rotation fallback for browsers without group-open support */ details[open] > summary .fa-chevron-down { transform: rotate(180deg); } /* Focus outlines that stay visible for keyboard users */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; } /* Small interaction cues for links and content cards. */ .active-nav-link { box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.12), 0 0 14px rgba(99, 102, 241, 0.2); } .dark .active-nav-link { box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.18), 0 0 16px rgba(99, 102, 241, 0.3); } .site-logo { transform: translateZ(0); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), filter 0.35s ease; } a:hover .site-logo, a:focus-visible .site-logo { transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 5px 10px rgba(22, 160, 133, 0.28)); } .dark a:hover .site-logo, .dark a:focus-visible .site-logo { filter: drop-shadow(0 5px 12px rgba(56, 191, 164, 0.38)); } .icon-button .icon-shake { display: inline-block; transform-origin: 50% 70%; } .icon-button:hover .icon-shake, .icon-button:focus-visible .icon-shake { animation: icon-shake 0.55s ease-in-out both; } @keyframes icon-shake { 0%, 100% { transform: rotate(0deg) translateX(0); } 20% { transform: rotate(-10deg) translateX(-1px); } 40% { transform: rotate(8deg) translateX(1px); } 60% { transform: rotate(-5deg) translateX(-1px); } 80% { transform: rotate(3deg) translateX(0); } } .feature-card-icon { transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-card:hover .feature-card-icon { transform: translateY(-2px) rotate(-4deg); box-shadow: 0 8px 18px rgba(15, 61, 86, 0.2); } .hero-showcase { transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), box-shadow 0.45s ease; } .hero-showcase:hover { transform: translateY(-3px); box-shadow: 0 22px 42px rgba(15, 61, 86, 0.14); } .hero-carousel { position: relative; aspect-ratio: 16 / 9; isolation: isolate; background: #dce7ec; } .hero-carousel::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(135deg, rgba(15, 61, 86, 0.08), transparent 42%, rgba(22, 160, 133, 0.1)); mix-blend-mode: multiply; } .dark .hero-carousel { background: #1e293b; } .hero-slide { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; transform: scale(1.06); animation: hero-carousel-slide 25s ease-in-out infinite; } .hero-slide:nth-child(1) { animation-delay: 0s; } .hero-slide:nth-child(2) { animation-delay: -5s; } .hero-slide:nth-child(3) { animation-delay: -10s; } .hero-slide:nth-child(4) { animation-delay: -15s; } .hero-slide:nth-child(5) { animation-delay: -20s; } .hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-carousel-progress { position: absolute; z-index: 3; right: 1.25rem; bottom: 1.25rem; display: flex; gap: 0.4rem; padding: 0.45rem 0.6rem; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: rgba(15, 23, 42, 0.34); backdrop-filter: blur(8px); } .hero-carousel-progress span { display: block; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.58); animation: hero-carousel-dot 25s ease-in-out infinite; } .hero-carousel-progress span:nth-child(1) { animation-delay: 0s; } .hero-carousel-progress span:nth-child(2) { animation-delay: -5s; } .hero-carousel-progress span:nth-child(3) { animation-delay: -10s; } .hero-carousel-progress span:nth-child(4) { animation-delay: -15s; } .hero-carousel-progress span:nth-child(5) { animation-delay: -20s; } .hero-carousel:hover .hero-slide, .hero-carousel:hover .hero-carousel-progress span { animation-play-state: paused; } @keyframes hero-carousel-slide { 0%, 4% { opacity: 0; transform: scale(1.06); } 10%, 22% { opacity: 1; transform: scale(1); } 28%, 100% { opacity: 0; transform: scale(0.99); } } @keyframes hero-carousel-dot { 0%, 4% { width: 0.4rem; background: rgba(255, 255, 255, 0.58); } 10%, 22% { width: 1.35rem; background: #ffffff; } 28%, 100% { width: 0.4rem; background: rgba(255, 255, 255, 0.58); } } /* A calm colour sweep gives the hero promise a little focus without competing with the primary call-to-action. */ .hero-title { animation: hero-title-in 0.8s cubic-bezier(.2, .8, .2, 1) both; } .hero-highlight { position: relative; display: inline-block; background: linear-gradient( 110deg, currentColor 0%, currentColor 38%, #38bfa4 50%, currentColor 62%, currentColor 100% ); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: hero-highlight-sweep 4.5s ease-in-out 0.7s infinite; } .hero-highlight::after { content: ''; position: absolute; left: 0.08em; right: 0.08em; bottom: 0.06em; height: 0.08em; border-radius: 999px; background: #16a085; transform: scaleX(0); transform-origin: left center; animation: hero-highlight-underline 0.8s cubic-bezier(.2, .8, .2, 1) 1.1s forwards; } @keyframes hero-title-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-highlight-sweep { 0%, 35% { background-position: 100% 0; } 65%, 100% { background-position: -100% 0; } } @keyframes hero-highlight-underline { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .icon-button:hover .icon-shake, .icon-button:focus-visible .icon-shake, a:hover .site-logo, a:focus-visible .site-logo, .feature-card:hover .feature-card-icon, .hero-showcase:hover, .hero-title, .hero-highlight, .hero-highlight::after, .site-logo, .hero-slide, .hero-carousel-progress span { animation: none; transform: none; transition: none; } .hero-title, .hero-highlight { opacity: 1; } .hero-highlight { background: none; -webkit-text-fill-color: currentColor; } .hero-highlight::after { transform: scaleX(1); } .hero-slide { opacity: 0; } .hero-slide:first-child { opacity: 1; } .hero-carousel-progress span:first-child { width: 1.35rem; background: #ffffff; } }