/* ========================================================================== SSIRA Foundation — custom styles Tailwind (via CDN) handles layout/utilities. This file holds the things utilities can't: fonts, textures, hero treatments, motifs and animations. ========================================================================== */ /* ----- Fonts (loaded in via Google Fonts) ----- */ :root { --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Mulish", system-ui, -apple-system, sans-serif; --primary: #0e4d3c; --primary-dark: #0a3b2e; --primary-light: #1c6b4f; --terracotta: #c75b3f; --marigold: #e9a23b; --cream: #faf6ee; --charcoal: #2b2b29; --muted: #5c5c57; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--charcoal); background-color: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .font-display { font-family: var(--font-display); font-optical-sizing: auto; } /* ----- Paper grain overlay: warmth without heaviness ----- */ body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* keep real content above the grain */ header, main, footer { position: relative; z-index: 2; } /* ----- Hand-drawn accent underline for emphasised words ----- */ .underline-brush { position: relative; white-space: nowrap; } .underline-brush::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0.02em; height: 0.38em; z-index: -1; background: var(--marigold); opacity: 0.55; border-radius: 0.3em; transform: rotate(-1.2deg); } /* ----- Hero: photo layered over a teal wash so it degrades gracefully ----- */ .hero { background-color: var(--primary-dark); background-image: linear-gradient(180deg, rgba(10, 59, 46, 0.55) 0%, rgba(10, 59, 46, 0.82) 100%), var(--hero-img, none); background-size: cover; background-position: center; } .hero-sub { background-color: var(--primary); background-image: linear-gradient(180deg, rgba(14, 77, 60, 0.72) 0%, rgba(10, 59, 46, 0.9) 100%), var(--hero-img, none); background-size: cover; background-position: center; } /* ----- Soft organic blob used as a decorative backdrop behind images ----- */ .blob { border-radius: 46% 54% 58% 42% / 48% 44% 56% 52%; } /* ----- Focus-area cards ----- */ .focus-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .focus-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(10, 59, 46, 0.35); border-color: var(--marigold); } .focus-card:hover .focus-icon { background-color: var(--terracotta); color: #fff; } .focus-icon { transition: background-color 0.25s ease, color 0.25s ease; } /* ----- Accessible focus ring across interactive elements ----- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; border-radius: 4px; } /* ----- Header: subtle background once the page is scrolled ----- */ .site-header { transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; } .site-header.scrolled { background-color: rgba(250, 246, 238, 0.92); backdrop-filter: blur(10px); box-shadow: 0 6px 24px -16px rgba(10, 59, 46, 0.5); } /* Desktop nav links: light over the dark hero, switch to dark once the header gains its cream background on scroll (so they stay readable in both states). */ .site-header nav[aria-label="Primary"] > a { color: var(--cream); } .site-header nav[aria-label="Primary"] > a:hover { color: #ffffff; } .site-header.scrolled nav[aria-label="Primary"] > a { color: var(--charcoal); } .site-header.scrolled nav[aria-label="Primary"] > a:hover { color: var(--primary); } .site-header.scrolled nav[aria-label="Primary"] > a[aria-current] { color: var(--primary); } /* The Donate button keeps its white label in both states */ .site-header nav[aria-label="Primary"] > a.bg-terracotta, .site-header.scrolled nav[aria-label="Primary"] > a.bg-terracotta { color: #ffffff; } /* ----- Mobile nav drawer ----- */ .mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .mobile-menu.open { max-height: 460px; } /* ----- Entrance animation: staggered reveal ----- */ @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .reveal.d1 { animation-delay: 0.12s; } .reveal.d2 { animation-delay: 0.24s; } .reveal.d3 { animation-delay: 0.36s; } .reveal.d4 { animation-delay: 0.48s; } /* Scroll-in for sections (toggled by IntersectionObserver in main.js) */ .in-view-init { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .in-view-init.in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal, .in-view-init { animation: none !important; opacity: 1 !important; transform: none !important; } html { scroll-behavior: auto; } } /* ----- Dotted divider motif ----- */ .dot-rule { height: 6px; width: 64px; background-image: radial-gradient(circle, var(--terracotta) 2px, transparent 2.4px); background-size: 14px 6px; }