/* ========================================================================= Rotary Club of Chengalpattu — custom styles Mirrors the original globals.css + parts of tailwind.config.ts that the Play CDN config doesn't cover, plus vanilla-JS animation helpers that stand in for Framer Motion. ========================================================================= */ :root { --font-poppins: "Poppins", system-ui, sans-serif; --font-inter: "Inter", system-ui, sans-serif; --rotary-blue: #005DAA; --rotary-blue-dark: #00437A; --rotary-blue-light: #1A78C2; --rotary-gold: #F7A81B; --rotary-gold-dark: #D98E0A; --rotary-gold-light: #FBC55E; --rotary-sky: #EAF3FB; --rotary-cloud: #F5F7FA; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } * { border-color: hsl(214 32% 91%); } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { background: #ffffff; color: #0F2233; font-family: var(--font-inter); text-rendering: optimizeLegibility; min-height: 100vh; } .font-heading { font-family: var(--font-poppins); } .font-sans { font-family: var(--font-inter); } ::selection { background: rgba(247, 168, 27, 0.3); color: var(--rotary-blue-dark); } /* Custom scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { border-radius: 9999px; background: rgba(0, 93, 170, 0.4); } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 93, 170, 0.6); } /* Section spacing helper (matches @layer components .section) */ .section { padding-top: 5rem; padding-bottom: 5rem; } @media (min-width: 640px) { .section { padding-top: 6rem; padding-bottom: 6rem; } } .text-balance { text-wrap: balance; } /* NOTE: gradients (bg-hero-gradient, bg-blue-gradient, bg-gold-gradient) and shadows (shadow-soft, shadow-soft-lg, shadow-gold, shadow-card) are defined in the Tailwind config in each page's so that hover:/responsive variants work. */ /* Masonry via CSS columns (gallery) */ .masonry { column-gap: 1rem; } .masonry > * { break-inside: avoid; margin-bottom: 1rem; } /* -------- Line clamp helper -------- */ .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================================= Animation helpers (Framer Motion stand-ins) ========================================================================= */ /* Scroll reveal: element starts hidden, .in-view is added by IntersectionObserver */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); will-change: opacity, transform; } .reveal.in-view { opacity: 1; transform: translateY(0); } /* Staggered children: parent .stagger, children animate with incremental delay */ .stagger > .stagger-item { opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .stagger.in-view > .stagger-item { opacity: 1; transform: translateY(0); } .stagger.in-view > .stagger-item:nth-child(1) { transition-delay: 0.05s; } .stagger.in-view > .stagger-item:nth-child(2) { transition-delay: 0.17s; } .stagger.in-view > .stagger-item:nth-child(3) { transition-delay: 0.29s; } .stagger.in-view > .stagger-item:nth-child(4) { transition-delay: 0.41s; } .stagger.in-view > .stagger-item:nth-child(5) { transition-delay: 0.53s; } .stagger.in-view > .stagger-item:nth-child(6) { transition-delay: 0.65s; } .stagger.in-view > .stagger-item:nth-child(7) { transition-delay: 0.77s; } .stagger.in-view > .stagger-item:nth-child(8) { transition-delay: 0.89s; } .stagger.in-view > .stagger-item:nth-child(n+9) { transition-delay: 0.95s; } /* Hero entrance (staggered on load) */ @keyframes fade-up { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes hero-zoom { 0% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes ping-slow { 75%, 100% { transform: scale(2); opacity: 0; } } .hero-bg { animation: hero-zoom 1.6s var(--ease-out) both; } .hero-item { opacity: 0; animation: fade-up 0.7s var(--ease-out) forwards; } .hero-item.d1 { animation-delay: 0.30s; } .hero-item.d2 { animation-delay: 0.44s; } .hero-item.d3 { animation-delay: 0.58s; } .hero-item.d4 { animation-delay: 0.72s; } .hero-wave { opacity: 0; animation: fade-up 1s ease 0.6s forwards; } .animate-float { animation: float 4s ease-in-out infinite; } .animate-ping-slow { animation: ping-slow 1s cubic-bezier(0,0,0.2,1) infinite; } /* Page loader */ #page-loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #ffffff; transition: opacity 0.5s ease, visibility 0.5s ease; } #page-loader.hidden-loader { opacity: 0; visibility: hidden; } .loader-wheel { animation: spin 1.4s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Scroll progress bar */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 60; background: var(--rotary-gold); transition: width 0.1s linear; } /* Nav active underline */ .nav-underline { position: absolute; left: 0.875rem; right: 0.875rem; bottom: -0.125rem; height: 2px; border-radius: 9999px; background: var(--rotary-gold); } /* Mobile menu collapse */ #mobile-menu { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.3s var(--ease-out), opacity 0.3s var(--ease-out); } #mobile-menu.open { max-height: 640px; opacity: 1; } /* Modal / lightbox fade */ .overlay { animation: overlay-in 0.25s ease both; } @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } .overlay-panel { animation: panel-in 0.25s var(--ease-out) both; } @keyframes panel-in { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Testimonial fade */ .tst-fade { animation: fade-up 0.4s ease both; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal, .stagger > .stagger-item { opacity: 1 !important; transform: none !important; } .hero-item, .hero-wave { opacity: 1 !important; } } /* ═══════════════════════════════════════════════════════════════════ People / photo components Defined here (plain CSS) rather than as Tailwind utilities so the layout can never break if the compiled tailwind.css is stale. Goal: tiles are ALWAYS the same size, and photos are NEVER cropped. Since members' photos have different aspect ratios, the leftover space is filled with a blurred copy of the same photo, which keeps the grid uniform without cutting anyone's head off. ═══════════════════════════════════════════════════════════════════ */ .rc-photo { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 1.5rem; background: #EAF3FB; } .rc-photo__bg { /* blurred fill — purely decorative */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.15); transform: scale(1.25); opacity: .45; } .rc-photo__img { /* the real photo — never cropped */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; } .group:hover .rc-photo__img { transform: scale(1.04); } .rc-photo__initial { position: absolute; inset: 0; display: grid; place-items: center; font-family: Poppins, system-ui, sans-serif; font-size: 2.25rem; font-weight: 700; color: #005DAA; } /* Club Leaders — centred row of equal tiles */ .rc-people { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; } .rc-people__item { width: 220px; } @media (max-width: 639px) { .rc-people__item { width: 44%; } .rc-people { gap: 1rem; } } /* Dignitaries — same centring, wider cards */ .rc-dignitaries { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; } .rc-dignitary { width: 340px; max-width: 100%; } .rc-dignitary .rc-photo { aspect-ratio: 4 / 3; border-radius: 1.5rem 1.5rem 0 0; } /* Small square thumbnail (directory, past presidents) */ .rc-thumb { position: relative; flex: 0 0 auto; width: 72px; height: 72px; overflow: hidden; border-radius: 1rem; background: #EAF3FB; } .rc-thumb .rc-photo__initial { font-size: 1.5rem; } /* Round avatar (testimonials) */ .rc-avatar { position: relative; flex: 0 0 auto; width: 56px; height: 56px; overflow: hidden; border-radius: 9999px; background: #EAF3FB; box-shadow: 0 0 0 2px rgba(247, 168, 27, .4); } .rc-avatar .rc-photo__initial { font-size: 1.25rem; } /* Directors — portrait panel beside the text */ .rc-director-photo { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #EAF3FB; flex-shrink: 0; } @media (min-width: 640px) { .rc-director-photo { width: 40%; aspect-ratio: auto; align-self: stretch; } } /* Past Presidents timeline — dot sits ON the spine, not over the card */ .pp-dot { position: absolute; top: 1.75rem; left: 1rem; z-index: 10; width: 1rem; height: 1rem; transform: translateX(-50%); border-radius: 9999px; border: 4px solid #fff; background: #F7A81B; box-shadow: 0 1px 4px rgba(15, 34, 51, .2); } @media (min-width: 640px) { /* left-hand card: dot on its RIGHT edge (the centre spine) */ .pp-item--left .pp-dot { left: auto; right: 0; transform: translateX(50%); } /* right-hand card: dot on its LEFT edge (the centre spine) */ .pp-item--right .pp-dot { left: 0; right: auto; transform: translateX(-50%); } }