/* ========================================================================== Gau Vansh Sewa Dham — main stylesheet Organised: tokens → base/reset → layout → components → sections → utilities Brand values are intentionally kept as the supplied hex tokens. ========================================================================== */ /* ---------------------------------------------------------------- TOKENS -- */ :root { /* Brand colours */ --green-900: #14201a; /* darkest background */ --green-800: #1f3d2e; /* deep forest green */ --green-700: #2a503d; --gold: #e7c87c; /* warm gold accent */ --gold-deep: #cba94f; --cream: #f5f1e8; /* light sections / text on dark */ --cream-200: #ece5d6; --terracotta: #bd6630; /* donate / warmth */ --terracotta-600: #a4521f; --terracotta-700: #8a4318; --ink: #1c1b18; /* body text on light */ --muted: #5f5b50; /* secondary text on light */ --line: #ddd5c4; /* hairlines on light */ --line-dark: #2f4a3b; /* hairlines on dark */ /* Semantic */ --bg: var(--cream); --surface: #ffffff; --surface-raised: #fbf9f3; /* Typography */ --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-hi: "Tiro Devanagari Hindi", "Noto Sans Devanagari", serif; --font-pa: "Tiro Gurmukhi", "Noto Sans Gurmukhi", serif; --fs-300: 0.95rem; --fs-400: 1.0625rem; --fs-500: 1.125rem; --fs-600: clamp(1.25rem, 1rem + 1vw, 1.6rem); --fs-700: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); --fs-800: clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem); --fs-900: clamp(2.6rem, 1.6rem + 4.6vw, 4.4rem); --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.65; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* Radius */ --radius-sm: 0.4rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; --radius-pill: 999px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(20, 32, 26, 0.08); --shadow-md: 0 6px 20px rgba(20, 32, 26, 0.12); --shadow-lg: 0 18px 50px rgba(20, 32, 26, 0.22); /* Motion */ --dur-fast: 150ms; --dur-base: 260ms; --ease: cubic-bezier(0.2, 0, 0, 1); /* Z-index */ --z-header: 100; --z-overlay: 500; /* Layout */ --container: 1180px; --container-pad: clamp(1.1rem, 5vw, 3rem); } /* ----------------------------------------------------------- BASE / RESET -- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: 5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Devanagari and Gurmukhi render visually smaller than Latin at the same size; nudge them up and give headings a little more line room. */ .lang-hi, .lang-pa { font-size: 1.07em; } [data-lang="hi"] :is(h1, h2, h3), [data-lang="pa"] :is(h1, h2, h3) { line-height: 1.3; } body { font-family: var(--font-sans); font-size: var(--fs-400); line-height: var(--lh-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: var(--lh-tight); color: var(--green-800); text-wrap: balance; } p { text-wrap: pretty; } a { color: var(--terracotta-600); text-underline-offset: 0.18em; } a:hover { color: var(--terracotta-700); } ul[role="list"] { list-style: none; padding: 0; } :focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: var(--radius-sm); } /* Language visibility — JS sets data-lang on */ [data-lang="en"] :is(.lang-hi, .lang-pa), [data-lang="hi"] :is(.lang-en, .lang-pa), [data-lang="pa"] :is(.lang-en, .lang-hi) { display: none !important; } .lang-hi { font-family: var(--font-hi); } .lang-pa { font-family: var(--font-pa); } [data-lang="hi"] body, [data-lang="pa"] body { line-height: 1.75; } /* --------------------------------------------------------------- LAYOUT --- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); } .container--narrow { max-width: 760px; } .section { padding-block: clamp(3rem, 7vw, 6rem); } .section--tight { padding-block: clamp(2rem, 5vw, 4rem); } .section--dark { background: var(--green-800); color: var(--cream); } .section--darker { background: var(--green-900); color: var(--cream); } .section--cream { background: var(--surface-raised); } .section--dark :is(h1,h2,h3,h4) { color: var(--cream); } .section__head { max-width: 60ch; margin-inline: auto; text-align: center; margin-block-end: var(--space-7); } .section__head--start { margin-inline: 0; text-align: start; } .skip-link { position: absolute; inset-block-start: -200px; inset-inline-start: var(--space-3); z-index: 9999; padding: var(--space-2) var(--space-4); background: var(--terracotta-600); color: #fff; border-radius: var(--radius-sm); font-weight: 700; } .skip-link:focus { inset-block-start: var(--space-3); color: #fff; } .eyebrow { display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-300); letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta-600); } .section--dark .eyebrow { color: var(--gold); } /* --------------------------------------------------------------- BUTTONS -- */ .btn { --btn-bg: var(--terracotta-600); --btn-fg: #fff; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.8em 1.5em; min-height: 48px; font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-400); line-height: 1.1; text-decoration: none; color: var(--btn-fg); background: var(--btn-bg); border: 2px solid transparent; border-radius: var(--radius-pill); cursor: pointer; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .btn:hover { background: var(--terracotta-700); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); } .btn--lg { padding: 0.95em 1.9em; font-size: var(--fs-500); min-height: 54px; } .btn--gold { --btn-bg: var(--gold); --btn-fg: var(--green-900); } .btn--gold:hover { background: var(--gold-deep); color: var(--green-900); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--cream); border-color: rgba(245, 241, 232, 0.5); } .btn--ghost:hover { background: rgba(245, 241, 232, 0.12); color: var(--cream); border-color: var(--cream); } .btn--outline { --btn-bg: transparent; --btn-fg: var(--terracotta-600); border-color: currentColor; } .btn--outline:hover { background: var(--terracotta-600); color: #fff; } .btn .icon { width: 1.15em; height: 1.15em; } /* Header donate heart: hollow outline (matches hero button), fixed size so it reads clearly, esp. on mobile */ .header-actions .btn--gold .icon { width: 1.4rem; height: 1.4rem; flex: none; } .textlink { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; color: inherit; text-decoration: none; border-block-end: 2px solid transparent; padding-block-end: 2px; } .textlink:hover { color: inherit; border-color: currentColor; } /* Share buttons (donate page "Spread the Word" card) */ .share-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-2); } .share-btn { display: inline-flex; align-items: center; gap: 0.4em; font: inherit; font-weight: 700; font-size: var(--fs-300); color: var(--terracotta-700); background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 0.45em 0.9em; cursor: pointer; text-decoration: none; transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), background var(--dur-base) var(--ease); } .share-btn:hover { border-color: var(--terracotta-600); color: var(--terracotta-700); } .share-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .share-btn .icon { width: 1.05em; height: 1.05em; } .share-btn--native { color: var(--cream); background: var(--terracotta-600); border-color: var(--terracotta-600); } .share-btn--native:hover { background: var(--terracotta-700); border-color: var(--terracotta-700); color: var(--cream); } .share-btn.is-copied { border-color: var(--green-700); color: var(--green-800); } /* ----------------------------------------------------------------- ICONS -- */ .icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ---------------------------------------------------------------- BADGES -- */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--fs-300); font-weight: 700; line-height: 1.25; background: rgba(231, 200, 124, 0.14); border: 1px solid var(--line-dark); border-radius: var(--radius-sm); color: var(--cream); } .badge strong { color: var(--gold); font-weight: 800; } .badge .icon { width: 1.1rem; height: 1.1rem; color: var(--gold); flex: none; } /* ----------------------------------------------------------------- HEADER - */ .site-header { position: sticky; inset-block-start: 0; z-index: var(--z-header); background: var(--green-900); border-block-end: 1px solid var(--line-dark); color: var(--cream); } .site-header__bar { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); } .brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--cream); margin-inline-end: auto; } .brand__mark { height: 42px; width: auto; flex: none; } .brand__name { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-500); line-height: 1.05; color: var(--cream); } .brand__name small { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } .primary-nav { display: none; } .primary-nav ul { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; } .primary-nav a { color: var(--cream); text-decoration: none; font-weight: 600; font-size: var(--fs-400); padding-block: var(--space-2); border-block-end: 2px solid transparent; } .primary-nav a:hover { color: var(--gold); border-color: var(--gold); } .header-actions { display: flex; align-items: center; gap: var(--space-3); } .lang-toggle { display: inline-flex; background: rgba(245,241,232,0.08); border: 1px solid var(--line-dark); border-radius: var(--radius-pill); padding: 3px; } .lang-toggle button { font-family: var(--font-sans); font: inherit; font-weight: 700; font-size: var(--fs-300); color: var(--cream); background: transparent; border: 0; cursor: pointer; /* padding: 0em; min-height: 36px; border-radius: var(--radius-pill); */ padding: 0.2em 0.6em; min-height: 36px; border-radius: var(--radius-pill); } .lang-toggle button[aria-pressed="true"] { background: var(--gold); color: var(--green-900); } .lang-toggle button:nth-child(2) { font-family: var(--font-hi); } .lang-toggle button:nth-child(3) { font-family: var(--font-pa); } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); color: var(--cream); cursor: pointer; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-menu { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } /* Mobile nav panel */ .mobile-nav { display: none; border-block-start: 1px solid var(--line-dark); padding-block: var(--space-3) var(--space-5); } .mobile-nav.js-open { display: block; } .mobile-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .mobile-nav a { display: block; color: var(--cream); text-decoration: none; font-weight: 600; padding: var(--space-3) var(--space-2); border-block-end: 1px solid var(--line-dark); } .mobile-nav a:hover { color: var(--gold); } /* Language toggle lives inside the hamburger menu on mobile */ .mobile-nav__lang { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-2) 0; } .mobile-nav__lang-label { font-weight: 700; font-size: var(--fs-400); color: var(--cream); } /* On mobile the header lang-toggle is hidden (it moves into the menu) */ .header-actions .lang-toggle { display: none; } @media (min-width: 1024px) { .primary-nav { display: block; } .nav-toggle { display: none; } .mobile-nav { display: none !important; } .header-actions .lang-toggle { display: inline-flex; } } /* Full-width header at every screen size (elder-friendly) */ .site-header .container { max-width: 100%; padding-inline: clamp(1.1rem, 4vw, 2.75rem); } /* Mobile-first header sizing: comfortably large but fits small screens */ .brand__mark { height: 44px; width: auto; } .nav-toggle { width: 50px; height: 50px; } .nav-toggle .icon { width: 1.8rem; height: 1.8rem; } .header-actions .btn--gold { min-height: 50px; } .mobile-nav a { font-size: var(--fs-500); padding-block: var(--space-4); } .mobile-nav__lang-label { font-size: var(--fs-500); } /* Very small screens: tighten spacing so nothing clips */ @media (max-width: 420px) { .site-header .container { padding-inline: 0.8rem; } .site-header__bar { gap: 0.6rem; } .header-actions { gap: 0.55rem; } .header-actions .btn--gold { padding: 0.6em 1rem; } .brand__name { font-size: 1.05rem; } .nav-toggle { width: 46px; height: 46px; } } /* Larger header on wider screens, where the bar has room */ @media (min-width: 1024px) { .site-header__bar { padding-block: var(--space-4); gap: var(--space-5); } .brand__mark { height: 50px; width: auto; } .brand__name { font-size: var(--fs-600); } .brand__name small { font-size: 0.74rem; } .primary-nav ul { gap: var(--space-6); } .primary-nav a { font-size: var(--fs-500); white-space: nowrap; } .header-actions { gap: var(--space-4); } .header-actions .btn--gold { font-size: var(--fs-500); padding: 0.7em 1.5em; min-height: 54px; } .lang-toggle button { font-size: var(--fs-400); min-height: 44px; padding: 0.25em 0.8em; } } /* Active nav link (multi-page) */ .primary-nav a[aria-current="page"] { color: var(--gold); border-color: var(--gold); } .mobile-nav a[aria-current="page"] { color: var(--gold); } /* Press clippings (In the News) — masonry of full, readable cuttings */ .press-grid { columns: 2; column-gap: var(--space-4); } @media (min-width: 680px) { .press-grid { columns: 3; } } @media (min-width: 1024px) { .press-grid { columns: 4; } } .press-clip { margin: 0 0 var(--space-4); break-inside: avoid; border-radius: var(--radius-md); overflow: hidden; background: #fff; border: 1px solid rgba(20,32,26,0.12); box-shadow: var(--shadow-sm); } .press-clip a { display: block; cursor: zoom-in; } .press-clip img { width: 100%; height: auto; display: block; transition: transform var(--dur-base) var(--ease); } .press-clip a:hover img { transform: scale(1.03); } .press-clip__cap { padding: var(--space-3); font-size: var(--fs-300); color: var(--ink); line-height: 1.45; } .press-clip__cap strong { color: var(--green-800); } /* Home "Recent coverage" news cards */ .news-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } @media (min-width: 720px) { .news-grid { grid-template-columns: repeat(3, 1fr); } } .news-card { background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .news-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; } .news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease); } .news-card__img:hover img { transform: scale(1.04); } .news-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .news-card__meta { font-size: var(--fs-300); font-weight: 700; color: var(--terracotta-600); text-transform: uppercase; letter-spacing: 0.04em; } /* Lightbox / image viewer */ .moments figure { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(20,32,26,0.94); padding: clamp(1rem, 4vw, 3rem); } .lightbox.is-open { display: flex; } .lightbox__fig { margin: 0; max-width: min(94vw, 1100px); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .lightbox__img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--radius-md); background: #fff; } .lightbox__video { max-width: 100%; max-height: 80vh; border-radius: var(--radius-md); background: #000; } .lightbox__img[hidden], .lightbox__video[hidden] { display: none; } .lightbox__cap { color: var(--cream); font-size: var(--fs-400); max-width: 70ch; text-align: center; } .lightbox__btn { position: absolute; flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(245,241,232,0.16); color: var(--cream); font-size: 2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox__btn:hover { background: rgba(245,241,232,0.32); } .lightbox__close { inset-block-start: 1rem; inset-inline-end: 1rem; } .lightbox__prev { inset-inline-start: clamp(0.4rem, 2vw, 1.5rem); inset-block-start: 50%; transform: translateY(-50%); } .lightbox__next { inset-inline-end: clamp(0.4rem, 2vw, 1.5rem); inset-block-start: 50%; transform: translateY(-50%); } /* Page header band (subpages) */ .page-hero { background: var(--green-900); color: var(--cream); text-align: center; padding-block: clamp(2.5rem, 6vw, 4rem); } .page-hero .eyebrow { color: var(--gold); } .page-hero h1 { color: var(--cream); font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem); max-width: 20ch; margin-inline: auto; } .page-hero p { color: rgba(245,241,232,0.85); max-width: 54ch; margin-inline: auto; margin-block-start: var(--space-3); } /* ------------------------------------------------------------------ HERO -- */ /* Image-centric: a deep-green text panel beside a photo collage — one large captioned feature image plus a 2×2 grid of supporting photos. Mini-stats sit inside the panel (no separate stat dashboard). */ .hero { background: var(--green-900); } .hero__grid { display: grid; grid-template-columns: 1fr; } .hero__panel { background: var(--green-800); color: var(--cream); display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); padding-block: clamp(2.5rem, 6vw, 4.5rem); padding-inline: var(--container-pad); } .hero__kicker { color: var(--gold); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: var(--fs-300); display: inline-flex; align-items: center; gap: var(--space-3); } .hero__kicker::before { content: ""; inline-size: 1.75rem; block-size: 2px; background: var(--gold); } .hero h1 { color: var(--cream); font-size: var(--fs-900); font-weight: 600; max-width: 15ch; } .hero h1 .hl { color: var(--gold); font-style: italic; } .hero__sub { font-size: var(--fs-500); max-width: 46ch; color: rgba(245,241,232,0.93); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; margin-block-start: var(--space-1); } .hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6); margin-block-start: var(--space-2); padding-block-start: var(--space-5); border-block-start: 1px solid var(--line-dark); } .hero__stat { display: flex; flex-direction: column; gap: 2px; } .hero__stat b { font-family: var(--font-serif); font-size: var(--fs-600); font-weight: 600; color: var(--gold); line-height: 1; } .hero__stat span { font-size: var(--fs-300); color: rgba(245,241,232,0.9); font-weight: 600; } .hero__media { order: -1; /* images first on mobile; desktop order restored at >=980px */ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--green-900); } .hero__media figure { margin: 0; position: relative; overflow: hidden; } .hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .hero__feature { grid-column: 1 / -1; aspect-ratio: 16 / 10; } .hero__feature figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-300); font-weight: 600; color: var(--cream); padding: var(--space-6) var(--space-4) var(--space-3); background: linear-gradient(180deg, transparent, rgba(20,32,26,0.82)); } .hero__feature figcaption::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--gold); flex: none; } .hero__thumb { aspect-ratio: 1 / 1; } @media (min-width: 980px) { .hero__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: stretch; } .hero__panel { order: 1; padding-inline-start: clamp(1.75rem, 4.5vw, 4rem); padding-inline-end: clamp(2rem, 4vw, 3.5rem); } .hero__media { order: 2; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .hero__feature { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; } .hero__thumb { aspect-ratio: auto; } } /* ----------------------------------------------------------- TRUST STRIP -- */ /* A quiet band of credentials directly under the hero. */ .trust-strip { background: var(--surface-raised); border-block-end: 1px solid var(--line); } .trust-strip ul { list-style: none; margin: 0; padding-block: var(--space-4); padding-inline: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); } .trust-strip li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-300); font-weight: 700; color: var(--muted); } .trust-strip .icon { width: 1.05rem; height: 1.05rem; color: var(--green-700); flex: none; } .trust-strip strong { color: var(--green-800); } .trust-strip a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--green-700); text-underline-offset: 3px; } .trust-strip a:hover, .trust-strip a:focus-visible { color: var(--green-800); text-decoration-style: solid; } .trust-strip a[data-lb] { cursor: zoom-in; } /* Bank transfer block (Donate, dark section) */ .bank-block { margin-block-start: var(--space-6); } .bank-block > h3 { color: var(--cream); font-size: var(--fs-600); margin-block-end: var(--space-4); } .bank-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .bank-card { background: rgba(245,241,232,0.06); border: 1px solid var(--line-dark); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); } .bank-card h4 { color: var(--gold); font-family: var(--font-sans); font-size: var(--fs-400); margin-block-end: var(--space-3); } .bank-card dl { display: grid; gap: var(--space-2); margin: 0; } .bank-card dt { font-size: var(--fs-300); font-weight: 700; color: rgba(245,241,232,0.75); text-transform: uppercase; letter-spacing: 0.05em; } .bank-card dd { margin: 0; font-weight: 800; font-size: var(--fs-500); color: var(--cream); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .bank-note { margin-block-start: var(--space-4); font-size: var(--fs-400); color: rgba(245,241,232,0.85); max-width: 70ch; } .bank-note strong { color: var(--gold); } /* Certificate thumbnails (About, trust section) */ .cert-row__hint { margin-block-start: var(--space-5); font-size: var(--fs-300); font-weight: 700; color: rgba(245,241,232,0.85); } .cert-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); margin-block-start: var(--space-3); } .cert-card { display: block; background: #fff; border-radius: var(--radius-sm); padding: 5px 5px 0; text-decoration: none; box-shadow: var(--shadow-sm); cursor: zoom-in; } .cert-card img { width: 100%; height: 150px; object-fit: cover; object-position: top; border-radius: 3px; background: #fff; } .cert-card > span { display: block; text-align: center; font-size: var(--fs-300); font-weight: 700; color: var(--green-800); padding: 0.45rem 0.25rem 0.55rem; line-height: 1.3; } /* -------------------------------------------------------------- MISSION --- */ .lede { font-family: var(--font-serif); font-size: var(--fs-600); line-height: 1.4; color: var(--green-800); } .mission__body { display: grid; gap: var(--space-5); } .mission p + p { color: var(--muted); } /* Big centred mission statement (reference style). */ .statement { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.75rem, 1.25rem + 2.4vw, 2.75rem); line-height: 1.3; color: var(--green-800); text-wrap: balance; } .statement em { font-style: italic; color: var(--terracotta-600); } .statement-sub { font-size: var(--fs-500); color: var(--muted); max-width: 60ch; margin-inline: auto; margin-block-start: var(--space-5); } /* -------------------------------------------------------- PROGRAM CARDS --- */ .card-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } @media (min-width: 600px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } /* Photo-led program cards (reference style): image on top, copy below. */ .program-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid #e6ddc9; border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .program-card:hover { transform: translateY(-3px); border-color: var(--gold-deep); } .program-card:hover .program-card__media img { transform: scale(1.05); } .program-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--green-900); } .program-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease); } .program-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); } .program-card h3 { font-size: var(--fs-500); } .program-card p { color: var(--muted); font-size: var(--fs-400); } /* ---------------------------------------------------- FAMILIES / QUOTE ---- */ .families { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 860px) { .families { grid-template-columns: 1fr 1.05fr; } } .families__media img { inline-size: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .families__body { display: grid; gap: var(--space-4); } .families__body h2 { font-size: var(--fs-700); } .families__body p { color: var(--muted); } .quote { margin: var(--space-2) 0 0; font-family: var(--font-serif); font-style: italic; font-size: var(--fs-600); line-height: 1.4; color: var(--green-800); border-inline-start: 4px solid var(--gold); padding-inline-start: var(--space-5); } /* ---------------------------------------------------- MOMENTS / GALLERY --- */ .moments { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .moments { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; } } .moments figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .moments img { inline-size: 100%; block-size: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform var(--dur-base) var(--ease); } .moments figure:hover img { transform: scale(1.05); } .moments figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; font-size: var(--fs-300); font-weight: 600; color: var(--cream); padding: var(--space-5) var(--space-3) var(--space-2); background: linear-gradient(180deg, transparent, rgba(20,32,26,0.8)); } .moments .is-feature { grid-column: span 2; } @media (min-width: 720px) { .moments .is-feature { grid-row: span 2; } .moments .is-feature img { aspect-ratio: auto; } } .moments__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-6); } /* ------------------------------------------------------------ DONATE BAND - */ .give-band { background: var(--terracotta); color: #fff; border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem); display: grid; gap: var(--space-5); align-items: center; background-image: linear-gradient(105deg, var(--terracotta-700), var(--terracotta)); } @media (min-width: 820px) { .give-band { grid-template-columns: 1fr auto; } } .give-band h2 { color: #fff; font-size: var(--fs-700); } .give-band p { color: rgba(255,255,255,0.92); max-width: 52ch; margin-block-start: var(--space-2); } .give-band .btn--gold { white-space: nowrap; } /* --------------------------------------------------------------- DONATE --- */ .donate__grid { display: grid; gap: var(--space-6); } @media (min-width: 920px) { .donate__grid { grid-template-columns: 1.05fr 0.95fr; align-items: start; } } /* Donate page: the Scan & Pay button sits above the impact tiers. */ .donate__lead { text-align: center; margin-block-end: var(--space-6); } .donate__lead .btn { width: 100%; max-width: 22rem; justify-content: center; } .tiers { display: grid; gap: var(--space-4); } .tier { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); align-items: baseline; width: 100%; text-align: start; font: inherit; cursor: pointer; padding: var(--space-4) var(--space-5); background: rgba(245,241,232,0.05); border: 1px solid var(--line-dark); border-radius: var(--radius-md); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .tier:hover { border-color: var(--gold); background: rgba(231,200,124,0.10); } .tier:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .tier__amt { font-family: var(--font-serif); font-size: var(--fs-600); font-weight: 600; color: var(--gold); white-space: nowrap; } .tier__txt { grid-column: 1 / -1; color: rgba(245,241,232,0.9); font-size: var(--fs-400); } @media (min-width: 480px) { .tier__txt { grid-column: 2; } } .give-card { background: var(--cream); color: var(--ink); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-lg); display: grid; gap: var(--space-5); } .give-card h3 { font-size: var(--fs-600); color: var(--green-800); } .qr-block { display: flex; gap: var(--space-3); align-items: center; flex-wrap: nowrap; justify-content: flex-start; } .qr-block img { flex: none; width: 140px; height: 140px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; } .qr-meta { display: grid; gap: var(--space-2); min-width: 0; } .qr-meta dt { font-size: var(--fs-300); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .qr-meta dd { margin: 0; font-weight: 800; font-size: var(--fs-400); color: var(--green-800); font-variant-numeric: tabular-nums; word-break: break-all; } .qr-meta dd a { word-break: break-all; } .qr-meta dd a { color: var(--green-800); text-decoration: none; } /* Quick-amount chips: on mobile they fill the amount box; hidden on desktop. */ .amount-row { display: flex; flex-wrap: nowrap; gap: var(--space-2); } .amount-row a, .amount-row button { font: inherit; text-decoration: none; font-weight: 800; color: var(--green-800); background: transparent; border: 2px solid var(--line); border-radius: var(--radius-pill); padding: 0.55em 0.4em; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; white-space: nowrap; cursor: pointer; } .amount-row a:hover, .amount-row button:hover { border-color: var(--terracotta-600); color: var(--terracotta-700); } @media (min-width: 768px) { .amount-row { display: none; } } /* Custom donation amount -> opens the visitor's UPI app */ .custom-amt { display: grid; gap: var(--space-2); margin-block-start: var(--space-4); } .custom-amt__label { font-weight: 700; font-size: var(--fs-400); color: var(--green-800); } .custom-amt__row { display: flex; align-items: stretch; gap: var(--space-2); flex-wrap: wrap; } .custom-amt__cur { display: inline-flex; align-items: center; font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-600); color: var(--green-800); } .custom-amt__input { flex: 1 1 8rem; min-width: 0; max-width: 100%; min-height: 48px; padding: 0 var(--space-4); font: inherit; font-weight: 700; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: var(--radius-pill); } .custom-amt__input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--terracotta-600); } .custom-amt__input::placeholder { color: var(--muted); opacity: 0.4; font-weight: 500; } .custom-amt__row .btn { flex: none; } .custom-amt__err { color: var(--terracotta-700); font-size: var(--fs-300); font-weight: 700; } /* iOS app-chooser buttons (GPay / PhonePe / Paytm) */ .pay-apps { display: grid; gap: var(--space-2); } .pay-apps__label { font-size: var(--fs-300); font-weight: 700; color: var(--muted); } .pay-apps__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } .pay-app { font: inherit; font-weight: 800; line-height: 1.1; cursor: pointer; min-height: 52px; padding: 0.5em 0.35em; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--green-800); background: #fff; border: 2px solid var(--line); border-radius: var(--radius-md); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .pay-app:hover { border-color: var(--terracotta-600); color: var(--terracotta-700); } .pay-app:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } /* ----------------------------------------------- SCAN & PAY MODAL --------- */ /* Centered popup opened from any Donate button. `.is-open` is added by JS; `:target` is the no-JS fallback (links point to #give). */ .give-modal { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 2rem); } .give-modal.is-open, .give-modal:target { display: flex; } .give-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 32, 26, 0.78); border: 0; } .give-modal__panel { position: relative; width: min(92vw, 420px); max-height: 90vh; overflow-y: auto; display: grid; gap: var(--space-5); background: var(--cream); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(1.4rem, 5vw, 2.25rem); box-shadow: var(--shadow-lg); } .give-modal__close { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(20, 32, 26, 0.08); color: var(--green-800); font-size: 1.7rem; line-height: 1; text-decoration: none; } .give-modal__close:hover { background: rgba(20, 32, 26, 0.16); color: var(--green-900); } .give-modal__title { font-size: var(--fs-600); color: var(--green-800); padding-inline-end: 2.5rem; } .give-modal .qr-block { justify-content: flex-start; } body.give-open { overflow: hidden; } .give-note { font-size: var(--fs-300); color: var(--muted); display: flex; gap: var(--space-2); align-items: flex-start; } .give-note .icon { color: var(--green-700); flex: none; width: 1.1rem; height: 1.1rem; margin-block-start: 2px; } /* The tiers note sits on the dark donate panel, so a green-700 icon would be near-invisible. Use gold there for legible contrast. */ .tiers .give-note .icon { color: var(--gold); } /* ----------------------------------------------------------- STORY BLOCK -- */ .story { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 860px) { .story { grid-template-columns: 0.85fr 1.15fr; } } .story__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; } .story__body { display: grid; gap: var(--space-4); } .story__body h2 { font-size: var(--fs-700); } .story blockquote { margin: 0; font-family: var(--font-serif); font-size: var(--fs-600); line-height: 1.45; color: var(--green-800); border-inline-start: 4px solid var(--gold); padding-inline-start: var(--space-4); } /* -------------------------------------------------------------- GALLERY --- */ /* Masonry of natural-aspect photos: portrait and wide images show in full (no square cropping). Columns keep it mobile-first: 2 up on phones. */ .gallery { columns: 2; column-gap: var(--space-3); } @media (min-width: 720px) { .gallery { columns: 3; } } @media (min-width: 1024px) { .gallery { columns: 4; } } .gallery figure { margin: 0 0 var(--space-3); break-inside: avoid; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); cursor: zoom-in; } .gallery img { width: 100%; height: auto; display: block; transition: transform var(--dur-base) var(--ease); } .gallery figure:hover img { transform: scale(1.05); } /* -------------------------------------------------------- VIDEO GALLERY --- */ .section-intro { max-width: 60ch; margin: 0 0 var(--space-5); } .section-intro h2 { margin: 0 0 var(--space-2); } .section-intro p { margin: 0; } .video-gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .video-gallery { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .video-gallery { grid-template-columns: repeat(4, 1fr); } } .video-item { margin: 0; } .video-thumb { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--green-900); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; aspect-ratio: 4 / 3; } .video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease); } .video-thumb:hover img, .video-thumb:focus-visible img { transform: scale(1.05); } .video-thumb__play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(20,32,26,0.55); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: background var(--dur-base) var(--ease); } .video-thumb:hover .video-thumb__play, .video-thumb:focus-visible .video-thumb__play { background: var(--gold); } .video-thumb__play svg { width: 24px; height: 24px; fill: var(--cream); margin-inline-start: 3px; } .video-thumb:hover .video-thumb__play svg, .video-thumb:focus-visible .video-thumb__play svg { fill: var(--green-900); } .video-thumb:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .video-thumb img { transition: none; } } /* ---------------------------------------------------------------- TRUST --- */ .trust__grid { display: grid; gap: var(--space-6); } @media (min-width: 900px) { .trust__grid { grid-template-columns: 1.1fr 0.9fr; } } .reg-badges { display: grid; gap: var(--space-3); grid-template-columns: 1fr; } @media (min-width: 520px) { .reg-badges { grid-template-columns: 1fr 1fr; } } /* ---------------------------------------------------------------- FOUNDER - */ .founder { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 760px) { .founder { grid-template-columns: 300px 1fr; } } .founder__media img { inline-size: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 4 / 5; object-fit: cover; } .founder__body { display: grid; gap: var(--space-4); } .founder__body h2 { font-size: var(--fs-700); } .founder__body h2 small { display: block; font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-400); color: var(--terracotta-600); margin-block-start: var(--space-1); } .founder__body p { color: var(--muted); } .founder__body .quote { font-size: var(--fs-500); } .map-embed { margin-block-start: var(--space-5); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-dark); } .map-embed iframe { width: 100%; height: 300px; border: 0; display: block; filter: saturate(0.9); } .addr-line { display: flex; gap: var(--space-2); align-items: flex-start; margin-block-start: var(--space-4); color: rgba(245,241,232,0.9); } .addr-line .icon { color: var(--gold); flex: none; } /* -------------------------------------------------------------- INVOLVE --- */ .involve-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } @media (min-width: 600px) { .involve-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .involve-grid { grid-template-columns: repeat(4, 1fr); } } .involve-card { padding: var(--space-5); border: 1px solid #e6ddc9; border-radius: var(--radius-lg); background: var(--surface-raised); display: grid; gap: var(--space-2); transition: border-color var(--dur-base) var(--ease); } .involve-card:hover { border-color: var(--gold-deep); } .involve-card > .icon { color: var(--terracotta-600); width: 2rem; height: 2rem; } .involve-card h3 { font-size: var(--fs-500); } .involve-card p { color: var(--muted); font-size: var(--fs-400); } /* ---------------------------------------------------------- NEWSLETTER --- */ .signup { display: grid; gap: var(--space-5); align-items: center; } @media (min-width: 820px) { .signup { grid-template-columns: 1fr auto; } } .signup-form { display: flex; flex-wrap: wrap; gap: var(--space-3); } .signup-form input[type="email"] { flex: 1 1 16rem; min-height: 50px; padding: 0 var(--space-4); font: inherit; color: var(--ink); background: var(--cream); border: 2px solid transparent; border-radius: var(--radius-pill); } .signup-form input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .socials { display: flex; gap: var(--space-3); } .socials a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-dark); color: var(--cream); } .socials a:hover { background: var(--gold); color: var(--green-900); border-color: var(--gold); } /* --------------------------------------------------------------- FOOTER --- */ .site-footer { background: var(--green-900); color: rgba(245,241,232,0.8); border-block-start: 1px solid var(--line-dark); } .footer-grid { display: grid; gap: var(--space-6); padding-block: var(--space-8) var(--space-6); grid-template-columns: 1fr; } @media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } .footer-col h4 { color: var(--cream); font-family: var(--font-sans); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: 0.1em; margin-block-end: var(--space-3); } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .footer-col a { color: rgba(245,241,232,0.8); text-decoration: none; } .footer-col a:hover { color: var(--gold); } .footer-contact { display: grid; gap: var(--space-2); font-size: var(--fs-400); } .footer-contact strong { color: var(--cream); } /* Contact block reused on a light section needs dark text */ #contact .footer-contact strong { color: var(--green-800); } .footer-regs { font-size: var(--fs-300); color: rgba(245,241,232,0.8); line-height: 1.8; } .footer-bottom { border-block-start: 1px solid var(--line-dark); padding-block: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center; font-size: var(--fs-300); } /* --------------------------------------------------------------- HELPERS -- */ .flow > * + * { margin-block-start: var(--space-4); } /* Icon + text row: icon stays fixed on the first line, text sits beside it and wraps within its own column (never below the icon). */ .cluster { display: flex; gap: var(--space-3); align-items: flex-start; } .cluster > .icon { flex: none; margin-block-start: 0.15em; } .cluster > span { flex: 1; min-width: 0; overflow-wrap: break-word; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .cv-auto { content-visibility: auto; contain-intrinsic-size: auto 600px; } /* ------------------------------------------------ MOBILE DONATE BAR ------- */ /* On phones, Donate leaves the header (shrinking it) and becomes a persistent bar pinned to the bottom of the screen. Restored to the header on desktop. The bar background is the site green (not gold) so iOS Safari tints its bottom toolbar green instead of sampling a gold CTA; the Donate action is a gold pill inside the bar. */ .header-actions .btn--gold { display: none; } .donate-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 0.55rem 1rem; padding-block-end: calc(0.55rem + env(safe-area-inset-bottom, 0px)); background: var(--green-900); text-decoration: none; box-shadow: 0 -4px 18px rgba(20, 32, 26, 0.22); transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); } .donate-bar__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0.5em 1.8em; background: var(--gold); color: var(--green-900); font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-500); line-height: 1; border-radius: var(--radius-pill); } /* Hidden while the donate page's Scan & Pay button is on screen. */ .donate-bar.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; } .donate-bar:hover .donate-bar__btn, .donate-bar:active .donate-bar__btn { background: var(--gold-deep); color: var(--green-900); } .donate-bar .icon { width: 1.4rem; height: 1.4rem; flex: none; } /* Reserve space so the fixed bar never covers page content (e.g. the footer). */ body { padding-block-end: calc(64px + env(safe-area-inset-bottom, 0px)); } @media (min-width: 1024px) { .header-actions .btn--gold { display: inline-flex; } .donate-bar { display: none; } body { padding-block-end: 0; } } /* On phones, show "What We Do" before the mission statement. Desktop keeps the source order (mission first). */ @media (max-width: 767px) { .mob-swap { display: flex; flex-direction: column; } .mob-swap > #programs { order: 1; } .mob-swap > #mission { order: 2; } } /* ---- Donation reassurance row ---- */ .assure-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: center; } .assure-row .assure { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-300); font-weight: 700; color: rgba(245,241,232,0.92); } .assure-row .icon { width: 1.1rem; height: 1.1rem; color: var(--gold); flex: none; } .assure-row--ink .assure { color: var(--muted); } .assure-row--ink .icon { color: var(--green-700); } /* ---- Donation menu heading + monthly note ---- */ .fund-head { margin-block: var(--space-6) var(--space-4); } .fund-head h2 { color: var(--cream); font-size: var(--fs-600); } .fund-head p { color: rgba(245,241,232,0.82); font-size: var(--fs-400); margin-block-start: var(--space-2); } .give-primary { display: flex; flex-wrap: wrap; gap: var(--space-3); } .give-primary .btn { flex: 1 1 auto; justify-content: center; min-width: 12rem; } .monthly-note { display: inline-flex; align-items: center; gap: var(--space-2); font: inherit; font-size: var(--fs-300); font-weight: 700; color: var(--gold); margin-block-start: var(--space-4); background: none; border: 0; padding: 0; cursor: pointer; text-align: start; } .monthly-note span { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .monthly-note:hover span, .monthly-note:focus-visible span { text-decoration-style: solid; } .monthly-note:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-sm); } .monthly-note .icon { width: 1.1rem; height: 1.1rem; flex: none; } /* ---- Donate-page authenticity mini strip (on dark) ---- */ .mini-trust { margin-block-start: var(--space-7); padding-block-start: var(--space-6); border-block-start: 1px solid var(--line-dark); } .mini-trust h3 { font-size: var(--fs-400); color: var(--cream); margin-block-end: var(--space-3); } .mini-trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); } .mini-trust li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-300); font-weight: 700; color: rgba(245,241,232,0.9); } .mini-trust .icon { width: 1.05rem; height: 1.05rem; color: var(--gold); flex: none; } .mini-trust a { color: var(--gold); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .mini-trust a:hover, .mini-trust a:focus-visible { text-decoration-style: solid; } /* ---- Branded UPI-app buttons in the popup (per-brand sizing) ---- */ .pay-app--logo { padding: 0.4em 0.5em; } .pay-app--logo img { height: 22px; width: auto; display: block; } .pay-app[data-pay-app="phonepe"] img { height: 17px; } .pay-app[data-pay-app="paytm"] img { height: 16px; } /* ---- Donate popup tabs ---- */ .give-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); border-block-end: 1px solid var(--line); } .give-tab { font: inherit; font-weight: 800; cursor: pointer; background: none; border: 0; padding: var(--space-2) 0 var(--space-3); color: var(--muted); border-block-end: 2px solid transparent; margin-block-end: -1px; } .give-tab.is-active { color: var(--green-800); border-block-end-color: var(--gold); } .give-tab:hover { color: var(--green-800); } .give-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: var(--radius-sm); } /* Popup: Where-it-goes + Share panels */ .give-panel-lead { font-size: var(--fs-300); color: var(--muted); margin-block-end: var(--space-3); } .give-impact { display: grid; gap: var(--space-2); } .give-impact__tier { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 var(--space-3); width: 100%; text-align: start; font: inherit; cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); } .give-impact__tier:hover { border-color: var(--gold); background: rgba(231,200,124,0.10); } .give-impact__tier:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .give-impact__amt { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-500); color: var(--terracotta-700); white-space: nowrap; } .give-impact__txt { color: var(--green-800); font-size: var(--fs-300); } .give-trust { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; border-block-start: 1px solid var(--line); display: grid; gap: var(--space-2); } .give-trust li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-300); font-weight: 700; color: var(--green-800); } .give-trust li .icon { flex: none; width: 1.05em; height: 1.05em; color: var(--green-700); } .give-trust a { color: inherit; } .give-tabpanel { display: grid; gap: var(--space-5); } .give-tabpanel[hidden] { display: none; } /* ---- Bank details (popup Bank tab) ---- */ .give-bank__body { display: grid; gap: var(--space-3); } .give-bank__acct b { display: block; color: var(--green-800); font-size: var(--fs-400); } .give-bank__acct span { font-size: var(--fs-300); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .give-bank__note { font-size: var(--fs-300); color: var(--muted); } .give-bank__note strong { color: var(--green-800); }