/* ============================================================ NMC MASJID PROJECT — Donate Modal Mobile-first, full-screen on small screens, dialog on >=680px. All selectors scoped under `.donate-modal-root` to avoid collision with the donate section in css/styles.css. Tokens (var(--…)) come from css/styles.css :root. ============================================================ */ /* Lock body when modal open (set on by JS) */ body.donate-open { overflow: hidden; } /* ---------------- Root ---------------- */ .donate-modal-root { position: fixed; top: var(--donate-viewport-top, 0px); right: 0; bottom: auto; left: 0; height: 100vh; height: 100svh; height: var(--donate-viewport-height, 100dvh); z-index: 200; display: flex; align-items: stretch; justify-content: center; } .donate-modal-root[hidden] { display: none; } /* ---------------- Backdrop ---------------- */ .donate-modal-root .donate-backdrop { position: absolute; inset: 0; background: rgba(6, 36, 26, 0.62); backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); animation: donate-fade 0.32s var(--ease) both; } /* ---------------- Panel ---------------- */ .donate-modal-root .donate-modal-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 480px; height: 100%; max-height: 100%; margin: 0 auto; background: var(--paper); border-radius: 0; box-shadow: var(--shadow-lg); overflow: hidden; animation: donate-rise 0.42s var(--ease) both; -webkit-overflow-scrolling: touch; } @keyframes donate-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes donate-rise { from { opacity: 0; transform: translateY(28px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes donate-slide-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } @keyframes donate-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .donate-modal-root .donate-backdrop, .donate-modal-root .donate-modal-panel, .donate-modal-root .donate-step, .donate-modal-root .donate-spinner { animation: none !important; transition: none !important; } } /* Desktop / tablet — only use a centred dialog when height is also ample. */ @media (min-width: 680px) and (min-height: 600px) { .donate-modal-root { padding: 2rem max(2rem, env(safe-area-inset-right)) 2rem max(2rem, env(safe-area-inset-left)); align-items: center; } .donate-modal-root .donate-modal-panel { border-radius: var(--r-xl); height: auto; max-height: min(92%, 760px); margin: auto; } } /* ---------------- Header ---------------- */ .donate-modal-root .donate-header { padding-top: calc(clamp(1.5rem, 5vw, 2.2rem) + env(safe-area-inset-top)); padding-right: max(clamp(1.25rem, 5vw, 2.2rem), calc(env(safe-area-inset-right) + 1rem)); padding-bottom: 1.1rem; padding-left: max(clamp(1.25rem, 5vw, 2.2rem), calc(env(safe-area-inset-left) + 1rem)); background: linear-gradient( 150deg, var(--emerald-800) 0%, var(--emerald-700) 55%, var(--emerald-600) 100% ); color: var(--cream); position: relative; flex-shrink: 0; } .donate-modal-root .donate-header::before { content: ""; position: absolute; inset: 0; opacity: 0.45; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23ecd39a' stroke-opacity='.14'%3E%3Cpath d='M70 14l13 43 43 13-43 13-13 43-13-43-43-13 43-13z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .donate-modal-root .donate-eyebrow, .donate-modal-root .donate-title { position: relative; } .donate-modal-root .donate-eyebrow { font-family: var(--sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 0.4rem; } .donate-modal-root .donate-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.45rem, 4.2vw, 1.85rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--cream); } /* Step indicator */ .donate-modal-root .donate-steps { display: flex; gap: 0.5rem; margin-top: 1.1rem; position: relative; list-style: none; padding: 0; } .donate-modal-root .donate-steps li { flex: 1; height: 3px; border-radius: 3px; background: rgba(247, 243, 234, 0.18); transition: background 0.35s var(--ease); } .donate-modal-root .donate-steps li.done { background: var(--gold-400); } .donate-modal-root .donate-steps li.current { background: linear-gradient(90deg, var(--gold-300), var(--gold-500)); } /* ---------------- Close ---------------- */ .donate-modal-root .donate-close { position: absolute; top: calc(0.7rem + env(safe-area-inset-top)); right: max(0.7rem, calc(env(safe-area-inset-right) + 0.5rem)); width: 44px; height: 44px; border-radius: 50%; background: rgba(247, 243, 234, 0.16); color: var(--cream); font-size: 1.6rem; line-height: 1; display: grid; place-items: center; z-index: 2; transition: background 0.25s, transform 0.25s; cursor: pointer; } .donate-modal-root .donate-close:hover { background: rgba(247, 243, 234, 0.3); } .donate-modal-root .donate-close:active { transform: scale(0.94); } .donate-modal-root .donate-close:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; } /* ---------------- Body ---------------- */ .donate-modal-root .donate-body { padding-top: clamp(1.4rem, 5vw, 2.2rem); padding-right: max(clamp(1.4rem, 5vw, 2.2rem), calc(env(safe-area-inset-right) + 1rem)); padding-bottom: clamp(1.4rem, 5vw, 2.2rem); padding-left: max(clamp(1.4rem, 5vw, 2.2rem), calc(env(safe-area-inset-left) + 1rem)); overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; scroll-padding-block: 1rem; -webkit-overflow-scrolling: touch; } .donate-modal-root .donate-step { animation: donate-slide-in 0.32s var(--ease) both; } .donate-modal-root .donate-step[hidden] { display: none; } .donate-modal-root .donate-prompt { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; color: var(--emerald-700); margin-bottom: 1.1rem; } .donate-modal-root .donate-foot { margin-top: 1.4rem; font-size: 0.86rem; color: var(--ink-soft); font-style: italic; font-family: var(--serif); text-align: center; } /* ---------------- Step 1: type cards ---------------- */ .donate-modal-root .donate-type-grid { display: grid; grid-template-columns: 1fr; gap: 0.85rem; } @media (min-width: 440px) { .donate-modal-root .donate-type-grid { grid-template-columns: 1fr 1fr; } } .donate-modal-root .donate-type { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 1.2rem 1.1rem; background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--r); text-align: left; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); min-height: 96px; cursor: pointer; } .donate-modal-root .donate-type:hover { border-color: var(--gold-400); transform: translateY(-2px); box-shadow: var(--shadow); } .donate-modal-root .donate-type:active { transform: translateY(0); } .donate-modal-root .donate-type:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; box-shadow: 0 0 0 5px var(--emerald-700); border-color: var(--gold-500); } .donate-modal-root .donate-type-title { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--emerald-700); } .donate-modal-root .donate-type-body { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.45; } .donate-modal-root .donate-type-tag { margin-top: 0.2rem; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-700); font-weight: 600; } /* ---------------- Step 2: amount ---------------- */ .donate-modal-root .donate-amounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; list-style: none; margin: 0; padding: 0; } .donate-modal-root .donate-amount { display: flex; flex-direction: column; gap: 0.18rem; padding: 1.05rem 0.9rem; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm); text-align: center; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); min-height: 76px; position: relative; cursor: pointer; } .donate-modal-root .donate-amount.featured::before { content: "Most loved"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; width: max-content; background: linear-gradient(180deg, var(--gold-200), var(--gold-500)); color: #2a1c04; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; box-shadow: 0 4px 12px -4px rgba(176, 127, 46, 0.6); } .donate-modal-root .donate-amount:hover { border-color: var(--gold-400); transform: translateY(-1px); } .donate-modal-root .donate-amount.selected { border-color: var(--emerald-500); background: var(--tint); box-shadow: 0 0 0 1px var(--emerald-500) inset; } .donate-modal-root .donate-amount.selected .donate-amount-name, .donate-modal-root .donate-amount.selected .donate-amount-sub { color: var(--emerald-700); } .donate-modal-root .donate-amount:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; box-shadow: 0 0 0 5px var(--emerald-700); } .donate-modal-root .donate-amount-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--emerald-700); } .donate-modal-root .donate-amount-sub { font-size: 0.82rem; font-weight: 500; color: var(--gold-700); } /* Custom amount input */ .donate-modal-root .donate-custom { display: block; margin-top: 1.2rem; } .donate-modal-root .donate-custom > span { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 0.4rem; } .donate-modal-root .donate-input-wrap { position: relative; display: flex; align-items: center; } .donate-modal-root .donate-prefix { position: absolute; left: 0.95rem; font-weight: 700; color: var(--ink-soft); pointer-events: none; } .donate-modal-root .donate-input-wrap input { width: 100%; padding: 0.95rem 1rem 0.95rem 2.2rem; font-size: 1.25rem; font-weight: 600; color: var(--emerald-700); background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); font-family: var(--sans); -moz-appearance: textfield; } .donate-modal-root .donate-input-wrap input::-webkit-outer-spin-button, .donate-modal-root .donate-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .donate-modal-root .donate-input-wrap input:focus { outline: none; border-color: var(--emerald-500); box-shadow: 0 0 0 3px rgba(15, 99, 71, 0.15); } .donate-modal-root .donate-hint { margin-top: 0.45rem; font-size: 0.78rem; color: var(--ink-faint); } /* ---------------- Step 3: details ---------------- */ .donate-modal-root .donate-summary { background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.9rem 1rem; margin-bottom: 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; } .donate-modal-root .donate-summary-amount { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .donate-modal-root .donate-summary-amount strong { font-family: var(--serif); font-weight: 700; font-size: 1.55rem; color: var(--emerald-700); } .donate-modal-root .donate-summary-amount span { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-700); } .donate-modal-root .donate-summary-day { font-size: 0.84rem; color: var(--ink-soft); } .donate-modal-root .donate-field { display: block; margin-bottom: 1rem; } .donate-modal-root .donate-field span { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.4rem; } .donate-modal-root .donate-field span em { font-style: normal; font-weight: 400; color: var(--ink-faint); } .donate-modal-root .donate-field input { width: 100%; padding: 0.95rem 1rem; font-size: 1rem; color: var(--ink); background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); font-family: var(--sans); } .donate-modal-root .donate-field input:focus { outline: none; border-color: var(--emerald-500); box-shadow: 0 0 0 3px rgba(15, 99, 71, 0.15); } .donate-modal-root input[aria-invalid="true"] { border-color: #a02b1d; box-shadow: 0 0 0 3px rgba(160, 43, 29, 0.14); } .donate-modal-root .donate-terms { margin-top: 1rem; padding: 0.85rem 1rem; background: var(--cream); border-radius: var(--r-sm); font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft); } /* Turnstile is normally invisible. This responsive host gives a Managed, interaction-only challenge a centred place to appear when a higher-risk visitor needs to interact. Widget internals remain under Cloudflare's control so their accessibility and anti-tampering behaviour stays intact. */ .donate-modal-root .donate-bot-check { display: flex; width: 100%; min-width: 0; justify-content: center; align-items: center; margin-top: 0; } .donate-modal-root .donate-bot-check:not(:empty) { margin-top: 0.8rem; } @media (max-width: 344px) { .donate-modal-root .donate-bot-check { width: calc(100% + 2.8rem); margin-right: -1.4rem; margin-left: -1.4rem; } } /* ---------------- Status (errors) ---------------- */ .donate-modal-root .donate-status { flex-shrink: 0; padding-top: 0.4rem; padding-right: max(clamp(1.4rem, 5vw, 2.2rem), calc(env(safe-area-inset-right) + 1rem)); padding-bottom: 0; padding-left: max(clamp(1.4rem, 5vw, 2.2rem), calc(env(safe-area-inset-left) + 1rem)); font-size: 0.86rem; font-weight: 500; color: #a02b1d; min-height: 0; transition: min-height 0.2s; } .donate-modal-root .donate-status:not(:empty) { min-height: 1.6rem; } .donate-modal-root.is-busy .donate-status { color: var(--ink-soft); } /* ---------------- Footer / actions ---------------- */ .donate-modal-root .donate-modal-actions { flex-shrink: 0; display: flex; gap: 0.7rem; padding-top: 0.7rem; padding-right: max(clamp(1.4rem, 5vw, 2.2rem), calc(env(safe-area-inset-right) + 1rem)); padding-bottom: 1.3rem; padding-left: max(clamp(1.4rem, 5vw, 2.2rem), calc(env(safe-area-inset-left) + 1rem)); background: var(--paper); border-top: 1px solid var(--line); list-style: none; margin: 0; } .donate-modal-root .donate-next, .donate-modal-root .donate-back { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.02rem 1.4rem; font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.015em; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.25s, color 0.25s, border-color 0.25s, opacity 0.2s; min-height: 52px; } .donate-modal-root .donate-back[hidden] { display: none !important; } .donate-modal-root .donate-back { flex: 0 0 auto; padding-inline: 1.3rem; background: transparent; color: var(--emerald-700); border-color: var(--line-strong); } .donate-modal-root .donate-back:hover { background: var(--cream); } .donate-modal-root .donate-next { background: linear-gradient(180deg, var(--gold-200), var(--gold-500)); color: #2a1c04; box-shadow: var(--shadow-gold); } .donate-modal-root .donate-next:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 26px 55px -20px rgba(176, 127, 46, 0.7); } .donate-modal-root .donate-next:active:not(:disabled) { transform: translateY(0); } .donate-modal-root .donate-next:focus-visible, .donate-modal-root .donate-back:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; box-shadow: 0 0 0 5px var(--emerald-700); } .donate-modal-root .donate-next:disabled { opacity: 0.6; cursor: wait; } /* Secure note */ .donate-modal-root .donate-secure { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0 max(1.4rem, calc(env(safe-area-inset-right) + 1rem)) calc(1rem + env(safe-area-inset-bottom)) max(1.4rem, calc(env(safe-area-inset-left) + 1rem)); font-size: 0.76rem; color: var(--ink-faint); letter-spacing: 0.01em; margin: 0; } .donate-modal-root .donate-secure svg { color: var(--emerald-500); } /* ---------------- Spinner ---------------- */ .donate-modal-root .donate-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(42, 28, 4, 0.25); border-top-color: #2a1c04; border-radius: 50%; animation: donate-spin 0.7s linear infinite; } /* Short viewports include landscape phones and an open software keyboard. */ @media (max-height: 599px) { .donate-modal-root .donate-header { padding-top: calc(0.9rem + env(safe-area-inset-top)); padding-bottom: 0.65rem; } .donate-modal-root .donate-eyebrow { margin-bottom: 0.15rem; } .donate-modal-root .donate-title { font-size: 1.3rem; } .donate-modal-root .donate-steps { margin-top: 0.65rem; } .donate-modal-root .donate-close { top: calc(0.35rem + env(safe-area-inset-top)); } .donate-modal-root .donate-body { padding-top: 1rem; padding-bottom: 1rem; } .donate-modal-root .donate-modal-actions { padding-top: 0.55rem; padding-bottom: 0.7rem; } .donate-modal-root .donate-next, .donate-modal-root .donate-back { min-height: 48px; padding-block: 0.75rem; } .donate-modal-root .donate-secure { padding-bottom: calc(0.55rem + env(safe-area-inset-bottom)); } } /* When a landscape keyboard leaves almost no vertical room, preserve a full input row and both navigation actions; the trust note returns with the keyboard closed. */ .donate-modal-root.donate-viewport-compact .donate-header { padding-top: calc(0.45rem + env(safe-area-inset-top)); padding-bottom: 0.35rem; } .donate-modal-root.donate-viewport-compact .donate-eyebrow { display: none; } .donate-modal-root.donate-viewport-compact .donate-title { font-size: 1.05rem; padding-right: 2.75rem; } .donate-modal-root.donate-viewport-compact .donate-steps { margin-top: 0.35rem; } .donate-modal-root.donate-viewport-compact .donate-close { top: calc(0.15rem + env(safe-area-inset-top)); } .donate-modal-root.donate-viewport-compact .donate-body { padding-top: 0.6rem; padding-bottom: 0.6rem; } .donate-modal-root.donate-viewport-compact .donate-modal-actions { padding-top: 0.35rem; padding-bottom: 0.4rem; } .donate-modal-root.donate-viewport-compact .donate-next, .donate-modal-root.donate-viewport-compact .donate-back { min-height: 44px; padding-block: 0.55rem; } .donate-modal-root.donate-viewport-compact .donate-secure { display: none; } /* ---------------- Donate section tiers now clickable ---------------- */ .pledge-tiers li[data-donate] { cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease); -webkit-tap-highlight-color: rgba(217, 185, 120, 0.18); } @media (hover: hover) { .pledge-tiers li[data-donate]:hover { background: rgba(217, 185, 120, 0.1); transform: translateX(2px); } } .pledge-tiers li[data-donate]:active { background: rgba(217, 185, 120, 0.18); } .pledge-tiers li[data-donate]:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; box-shadow: 0 0 0 5px var(--emerald-700); }