/* Base styles that must apply before the Tailwind CDN finishes compiling (avoids a flash of unstyled content). Kept in the "base" cascade layer so Tailwind utilities (e.g. bg-brand-950 on ) always override them. */ @layer base { html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: #fff; color: #13221a; font-family: "Plus Jakarta Sans", "Noto Sans Devanagari", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video, iframe { max-width: 100%; } img { height: auto; } } [hidden] { display: none !important; } .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; border-radius: .75rem; background: #1d3d1f; color: #fff; font-weight: 600; transition: top .2s; } .skip-link:focus { top: 1rem; } /* Header states */ .site-header { transition: box-shadow .25s ease, background-color .25s ease; } .site-header.is-scrolled { box-shadow: 0 6px 24px rgb(16 36 20 / .08); } /* Desktop dropdowns */ .nav-dropdown { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .nav-item.is-open > .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } @media (hover: hover) and (min-width: 1024px) { .nav-item:hover > .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } } .nav-item.is-open > button .nav-chevron { transform: rotate(180deg); } .nav-chevron { transition: transform .2s ease; } /* Mobile menu */ .mobile-panel { transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); } .mobile-panel.is-open { transform: translateX(0); } .mobile-backdrop { opacity: 0; transition: opacity .3s ease; } .mobile-backdrop.is-open { opacity: 1; } details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } details[open] > summary .nav-chevron { transform: rotate(180deg); } /* Hero decoration */ .hero-grid { background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1px); background-size: 22px 22px; } .orbit { animation: orbit-spin 60s linear infinite; } @keyframes orbit-spin { to { transform: rotate(360deg); } } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgb(8 20 10 / .92); padding: 1rem; } .lightbox img { max-height: 82vh; max-width: min(92vw, 1200px); border-radius: .75rem; box-shadow: 0 20px 60px rgb(0 0 0 / .4); } /* Search dialog */ dialog.search-dialog { border: 0; padding: 0; background: transparent; max-width: 100vw; width: 100%; margin: 0; } dialog.search-dialog::backdrop { background: rgb(8 20 10 / .6); backdrop-filter: blur(4px); } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-aos] { opacity: 1 !important; transform: none !important; } } /* Admin settings: "a | b" row fields read better in a monospace font */ .font-mono-rows textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; } /* Admin confirm dialog + toasts */ dialog.confirm-dialog { border: 0; padding: 0; background: transparent; margin: auto; max-width: 100vw; overflow: visible; } dialog.confirm-dialog::backdrop { background: rgb(8 20 10 / .55); backdrop-filter: blur(3px); } dialog.confirm-dialog[open] .confirm-panel { animation: confirm-in .2s cubic-bezier(.2,.9,.3,1.2); } dialog.confirm-dialog[open]::backdrop { animation: backdrop-in .2s ease-out; } dialog.confirm-dialog.is-closing .confirm-panel { animation: confirm-out .15s ease-in forwards; } dialog.confirm-dialog.is-closing::backdrop { animation: backdrop-out .15s ease-in forwards; } @keyframes confirm-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes confirm-out { to { opacity: 0; transform: translateY(4px) scale(.97); } } @keyframes backdrop-in { from { opacity: 0; } } @keyframes backdrop-out { to { opacity: 0; } } .toast { animation: toast-in .25s cubic-bezier(.2,.9,.3,1.2); } .toast.is-leaving { animation: toast-out .2s ease-in forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } } @keyframes toast-out { to { opacity: 0; transform: translateY(6px); } } /* Where We Work map pins (Leaflet divIcon) */ .work-pin { background: none; border: 0; } .work-pin__dot { position: relative; display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #30652c; border: 2px solid #fff; box-shadow: 0 4px 10px rgb(15 36 18 / .35); color: #fff; font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif; transition: transform .15s ease, background-color .15s ease; } .work-pin:hover .work-pin__dot, .work-pin:focus .work-pin__dot, .leaflet-marker-icon:focus-visible .work-pin__dot { background: #b9740c; transform: rotate(-45deg) scale(1.12); } .work-pin__dot > * { transform: rotate(45deg); } .work-map .leaflet-container { font-family: "Plus Jakarta Sans", system-ui, sans-serif; background: #f1f9f0; } .work-map .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 12px 30px rgb(15 36 18 / .18); } .work-map .leaflet-popup-content { margin: 14px 16px; min-width: 190px; } .work-popup__title { margin: 0; font-weight: 800; color: #13221a; font-size: 14px; } .work-popup__meta { margin: 2px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #3a8034; } .work-popup__note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #52625a; } .work-popup__link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: #30652c; } .work-map .leaflet-control-attribution { font-size: 10px; } .work-popup__links { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; } .work-popup__links .work-popup__link { margin-top: 0; } /* GSAP hero: each headline sentence is a masked line that slides up into view */ .hero-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; } .hero-line > span { display: inline-block; } /* While GSAP starts (max 2.5 s, see home.blade.php) hide what the entrance timeline will reveal */ .motion-pending [data-hero="badge"], .motion-pending [data-hero="text"], .motion-pending [data-hero="actions"], .motion-pending [data-hero="visual"], .motion-pending [data-hero-line] { visibility: hidden; } /* "Copied!" tooltip on copy buttons (Donate page) */ .copy-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 20; transform: translate(-50%, 4px); white-space: nowrap; pointer-events: none; padding: 5px 10px; border-radius: 8px; background: #13221a; color: #fff; font: 600 12px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: 0; box-shadow: 0 6px 16px rgb(15 36 18 / .25); opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease, visibility .15s; } .copy-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #13221a; } .copy-tip.is-error { background: #b91c1c; } .copy-tip.is-error::after { border-top-color: #b91c1c; } .copy-btn.is-copied .copy-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .copy-btn.is-copied { background: #f1f9f0; }