/* ========================================================================== Homepage redesign — decorative styles & animations (Plain CSS only: Tailwind is loaded via CDN, so no @apply here.) ========================================================================== */ /* ---- Hero ---------------------------------------------------------------- */ .hero__section { position: relative; overflow: hidden; background: radial-gradient(60rem 60rem at 85% -10%, rgba(45, 212, 191, 0.35), transparent 60%), radial-gradient(50rem 50rem at -10% 110%, rgba(13, 148, 136, 0.45), transparent 55%), linear-gradient(135deg, #0f766e 0%, #115e59 45%, #134e4a 100%); } /* soft blurred blobs floating in the hero */ .hero__blob { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: 0.5; pointer-events: none; } .hero__blob--one { width: 22rem; height: 22rem; top: -6rem; right: -4rem; background: rgba(94, 234, 212, 0.5); } .hero__blob--two { width: 18rem; height: 18rem; bottom: -6rem; left: -3rem; background: rgba(20, 184, 166, 0.45); } /* faint dotted grid overlay */ .hero__grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%); mask-image: linear-gradient(to bottom, black, transparent 85%); pointer-events: none; } /* glass card used for the banner slider & NAV widget */ .glass__card { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ---- Section decorations ------------------------------------------------- */ .section__band-tint { background: radial-gradient(40rem 30rem at 100% 0%, rgba(204, 251, 241, 0.6), transparent 60%), #f8fafc; } .title__underline::after { content: ""; display: block; width: 3.5rem; height: 4px; border-radius: 9999px; background: linear-gradient(90deg, #0d9488, #5eead4); margin-top: 0.85rem; } .title__underline--center::after { margin-left: auto; margin-right: auto; } /* framed media (images / videos) */ .media__frame { position: relative; } .media__frame::before { content: ""; position: absolute; inset: -0.75rem -0.75rem auto auto; width: 55%; height: 55%; border: 3px solid rgba(13, 148, 136, 0.25); border-radius: 1rem; z-index: 0; } /* ---- CAGR donut cards ---------------------------------------------------- */ .cagr__card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .cagr__card:hover { transform: translateY(-6px); } /* ---- Newsletter band ----------------------------------------------------- */ .newsletter__band { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(15, 118, 110, 0.92), rgba(17, 78, 74, 0.92)), url("/static/assets/images/officeImg.jpg"); background-size: cover; background-position: center; } /* ---- Entrance animation -------------------------------------------------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeUp { animation: fadeUp 0.7s ease both; } .animate-fadeUp-delay-1 { animation-delay: 0.1s; } .animate-fadeUp-delay-2 { animation-delay: 0.2s; } .animate-fadeUp-delay-3 { animation-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { .animate-fadeUp { animation: none; } } /* ---- Scroll reveal ------------------------------------------------------- */ /* The hidden state is gated behind `.reveal-ready`, which reveal.js adds to on load. Without JS the class never appears, so nothing is hidden. */ .reveal-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; } /* On small/mid screens the columns stack, and a horizontal slide would shift content past the narrow section padding and get clipped by overflow-x-hidden. So left/right fall back to a vertical fade-up; they only slide sideways at lg+ (where the layout is side-by-side and the 80px padding absorbs the shift). */ .reveal-ready .reveal-left, .reveal-ready .reveal-right { transform: translateY(28px); } .reveal-ready .reveal-zoom { transform: scale(0.94); } @media (min-width: 1024px) { .reveal-ready .reveal-left { transform: translateX(-42px); } .reveal-ready .reveal-right { transform: translateX(42px); } } /* staggered entrances via data-reveal-delay="1..4" */ .reveal-ready .reveal[data-reveal-delay="1"] { transition-delay: 0.08s; } .reveal-ready .reveal[data-reveal-delay="2"] { transition-delay: 0.16s; } .reveal-ready .reveal[data-reveal-delay="3"] { transition-delay: 0.24s; } .reveal-ready .reveal[data-reveal-delay="4"] { transition-delay: 0.32s; } /* CAGR cards stagger automatically by position */ .reveal-ready .cagr__card.reveal:nth-child(2) { transition-delay: 0.08s; } .reveal-ready .cagr__card.reveal:nth-child(3) { transition-delay: 0.16s; } .reveal-ready .cagr__card.reveal:nth-child(4) { transition-delay: 0.24s; } .reveal-ready .cagr__card.reveal:nth-child(n+5) { transition-delay: 0.32s; } /* revealed state — declared last so it wins over the variants above */ .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal-ready .reveal { opacity: 1; transform: none; transition: none; } }