/* ========================================================================== PAHAL — APP LAYER Everything here is scoped under .pwa, which is set on only when the site is running as an installed app. In a browser tab not one rule applies, so the website is completely untouched by this file. The website is editorial: full-bleed photography, Fraunces display type, generous whitespace, cards floating on cream. That reads well on a laptop and reads like a shrunken brochure on a phone. The app inverts those choices — flat surfaces, hairline-separated list rows, dense vertical rhythm, controls sized for a thumb, and one primary action pinned within reach of it. Same brand, different medium. ========================================================================== */ /* ---------- Foundations ---------- */ .pwa { --app-gutter: 16px; --app-row-h: 60px; --app-radius: 14px; --app-hairline: #e8efec; } .pwa body { background: var(--paper); /* flat white, not cream */ font-size: 0.97rem; } .pwa body::after { display: none; } /* the paper grain is an editorial touch */ /* Sections lose their generous website padding */ .pwa .section { padding: 18px 0; } .pwa .section-alt { background: transparent; } .pwa .container { padding-left: var(--app-gutter); padding-right: var(--app-gutter); } /* Display type steps down; app headings are UI, not editorial */ .pwa h1 { font-size: 1.45rem; } .pwa h2 { font-size: 1.2rem; } .pwa h3 { font-size: 1.02rem; } .pwa .section-head { text-align: left; margin-bottom: 12px; } .pwa .section-head h2 { font-size: 1.14rem; letter-spacing: -0.01em; } .pwa .section-head h2::after { display: none; } /* no drawn underline */ .pwa .section-head p { display: none; } /* section blurbs are website copy */ .pwa .kicker { font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-faint); margin-bottom: 2px; } /* the marigold highlighter sweep behind is a website signature */ .pwa .section-head h2 em, .pwa h2 em { background: none; padding: 0; } /* Banners collapse to a compact screen title */ .pwa .page-banner { background: none !important; padding: 6px 0 2px; min-height: 0; text-align: left; } .pwa .page-banner::before, .pwa .page-banner::after { display: none !important; } .pwa .page-banner h1 { color: var(--ink); font-size: 1.5rem; } .pwa .page-banner p, .pwa .page-banner .crumbs { display: none; } /* ---------- Header: a title bar, not a site header ---------- */ .pwa .site-header { border-bottom: 1px solid var(--app-hairline); padding: 6px 0; background: var(--paper); } .pwa .site-header .container { display: flex; align-items: center; gap: 8px; } .pwa .brand-logo { max-height: 32px; } .pwa .brand-name { font-size: 0.98rem; } .pwa .brand-name small { display: none; } .pwa .nav-donate { display: none; } /* Donate is a tab and a sticky bar */ /* ---------- List rows: the app's primary content pattern ---------- */ .pwa .app-list { margin: 0 calc(var(--app-gutter) * -1); } .pwa .app-row { display: flex; align-items: center; gap: 12px; padding: 10px var(--app-gutter); border-bottom: 1px solid var(--app-hairline); text-decoration: none !important; color: inherit; -webkit-tap-highlight-color: transparent; } .pwa .app-row:active { background: var(--primary-soft); } .pwa .app-row-media { flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--primary-soft); } .pwa .app-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pwa .app-row-body { flex: 1; min-width: 0; } .pwa .app-row-body b { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.94rem; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pwa .app-row-body span { display: block; font-size: 0.78rem; color: var(--ink-faint); margin-top: 3px; } .pwa .app-row-go { flex: none; color: var(--ink-faint); } /* ---------- Sticky action bar: one primary action, always in thumb reach --- */ .pwa .app-action-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom)); z-index: 9998; display: flex; align-items: center; gap: 10px; padding: 10px var(--app-gutter); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--app-hairline); max-width: 640px; margin: 0 auto; } .pwa .app-action-bar .btn { flex: 1; justify-content: center; padding: 14px 18px; font-size: 1rem; } .pwa .app-action-note { font-size: 0.75rem; color: var(--ink-faint); } /* ---------- Segmented control (iOS/Android-style toggle) ---------- */ .pwa .seg { display: flex; padding: 3px; gap: 3px; background: var(--line-soft); border-radius: 11px; } .pwa .seg > * { flex: 1; text-align: center; padding: 9px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.18s, color 0.18s, box-shadow 0.18s; } .pwa .seg > .active { background: var(--paper); color: var(--primary-deep); box-shadow: 0 1px 3px rgba(10, 45, 39, 0.14); } /* ---------- Forms sized for thumbs (16px stops iOS zooming on focus) ------- */ .pwa .field label { font-size: 0.82rem; margin-bottom: 5px; } .pwa .field input, .pwa .field select, .pwa .field textarea { font-size: 16px; padding: 13px 14px; border-radius: 11px; } .pwa .form-card { padding: 0; border: 0; background: transparent; box-shadow: none; } .pwa .form-grid { grid-template-columns: 1fr; gap: 12px; } /* Disclosure for optional fields — keeps the first screen short */ .pwa .app-disclosure { border-top: 1px solid var(--app-hairline); margin-top: 14px; } .pwa .app-disclosure > summary { list-style: none; cursor: pointer; padding: 14px 0; font-size: 0.9rem; font-weight: 700; color: var(--primary-deep); display: flex; align-items: center; justify-content: space-between; } .pwa .app-disclosure > summary::-webkit-details-marker { display: none; } .pwa .app-disclosure > summary::after { content: "＋"; font-size: 1.05rem; color: var(--ink-faint); } .pwa .app-disclosure[open] > summary::after { content: "－"; } /* ---------- Cards flatten into panels ---------- */ .pwa .card, .pwa .tm-card, .pwa .ev-card, .pwa .nc-card { box-shadow: none; border-radius: var(--app-radius); border: 1px solid var(--app-hairline); } .pwa .card:hover, .pwa .ev-card:hover, .pwa .nc-card:hover { transform: none; box-shadow: none; } .pwa .grid-2, .pwa .grid-3, .pwa .grid-4 { grid-template-columns: 1fr; gap: 12px; } /* ---------- Pull to refresh ---------- */ .pwa .ptr { position: fixed; top: 0; left: 0; right: 0; z-index: 9997; display: flex; align-items: center; justify-content: center; height: 0; overflow: hidden; pointer-events: none; color: var(--primary-deep); } .pwa .ptr-spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--primary); border-top-color: transparent; transition: transform 0.1s linear; } .pwa .ptr.spinning .ptr-spin { animation: ptrSpin 0.7s linear infinite; } @keyframes ptrSpin { to { transform: rotate(360deg); } } /* ---------- Share button ---------- */ .pwa .app-share { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--paper); color: var(--primary-deep); font-size: 0.86rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } .pwa .app-share:active { background: var(--primary-soft); transform: scale(0.97); } /* ---------- Website-only furniture the app has no use for ---------- */ .pwa .scrolly, .pwa .cta-band, .pwa .partner-strip, .pwa .marquee, .pwa .stats.band-parallax .band-bg, .pwa .nl-form, .pwa .breadcrumbs { display: none; } /* Anything marked web-only is website storytelling: the hero slideshow, the mission and story sections, the stats band, the gallery teaser, testimonials and partners. Left in, the home screen ran 4.1 screens deep and finished on a 25-link legal footer, which is what made the app read as a website in a frame. The app home now ends after the dashboard, upcoming events and latest news — the two things that actually change between opens. Everything hidden here is still one tap away on its own tab or from the website. */ .pwa .web-only { display: none; } /* The footer is 25 legal links and a newsletter box; the app has tabs. Keep the markup for the website and for anything crawling the page. */ .pwa .site-footer { display: none; } /* A reading-progress bar is a web affordance — an app has no scrollbar to echo. */ .pwa .scroll-progress { display: none; } /* ========================================================================== DONATE — the screen that most needed this. On the website it is a two-column form with a sidebar; on a phone that became a wall of nine inputs with the pay button below the fold. Here it is: pick an amount from large targets, everything optional folded away, and the action pinned in thumb reach with the amount written on it. ========================================================================== */ .pwa .donate-layout { display: block; } /* Frequency becomes a segmented control */ .pwa .freq-row { display: flex; padding: 3px; gap: 3px; margin-bottom: 16px; background: var(--line-soft); border-radius: 11px; } .pwa .freq-row .freq { flex: 1; justify-content: center; padding: 10px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; } .pwa .freq-row .freq.active { background: var(--paper); color: var(--primary-deep); box-shadow: 0 1px 3px rgba(10, 45, 39, 0.14); } .pwa .freq-row .freq-badge { display: none; } /* no room, and the toggle says it */ /* Amounts as a 2x2 grid of large targets rather than four cramped chips */ .pwa .amount-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pwa .amount-row .amt { padding: 16px 10px; font-size: 1.08rem; font-weight: 700; border-radius: 13px; border: 1.5px solid var(--line); background: var(--paper); } .pwa .amount-row .amt.active { border-color: var(--marigold); background: var(--marigold-soft); color: var(--marigold-deep); transform: none; } /* The live impact line is the most persuasive thing on the screen — lift it */ .pwa .impact-live { display: block; margin-top: 8px; padding: 11px 13px; background: var(--primary-soft); border-radius: 11px; font-size: 0.87rem; color: var(--primary-deep); font-weight: 600; } /* UPI gets equal billing, not sidebar treatment */ .pwa .impact-card { position: static; margin-top: 18px; } .pwa .upi-card { border: 1px solid var(--app-hairline); border-radius: var(--app-radius); padding: 16px; } /* The inline pay button is replaced by the sticky bar */ .pwa #pay-btn { width: 100%; justify-content: center; } .pwa .donate-inline-pay { display: none; } /* Trust row reads as small print in an app, not as three feature cards */ .pwa .info-card { border: 0; padding: 8px 0; text-align: left !important; } .pwa .info-card h3 { justify-content: flex-start !important; font-size: 0.92rem; } .pwa .info-card p { font-size: 0.84rem; } /* ========================================================================== LISTS — events, news, blogs, stories The website presents these as photo cards in a grid. In the app they become dense rows: thumbnail left, title and meta right, hairline between. You can scan twenty in a screen instead of two. ========================================================================== */ .pwa .grid.grid-3 { display: block; margin: 0 calc(var(--app-gutter) * -1); } .pwa .grid.grid-2 { display: block; } /* Only cards that are genuinely list items become rows. Scoping this to the post/event grids matters: the portal's cards hold forms and tables, and turning those into horizontal rows would wreck them. */ .pwa .grid-3 > .card, .pwa .ev-card { display: flex !important; flex-direction: row; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--app-hairline); border-radius: 0; padding: 10px var(--app-gutter); background: transparent; } .pwa .ev-media, .pwa .grid-3 > .card .card-img-wrap { flex: none; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; aspect-ratio: auto; } .pwa .ev-media img, .pwa .grid-3 > .card .card-img { width: 100%; height: 100%; object-fit: cover; } .pwa .ev-media::after, .pwa .grid-3 > .card .card-img-wrap::after { display: none; } .pwa .grid-3 > .card .card-body { padding: 0; flex: 1; min-width: 0; } .pwa .grid-3 > .card h3, .pwa .ev-card h3 { font-family: var(--font-body); font-size: 0.94rem; font-weight: 700; line-height: 1.3; margin: 0 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pwa .grid-3 > .card p, .pwa .ev-blurb { font-size: 0.8rem; color: var(--ink-faint); margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .pwa .grid-3 > .card .meta, .pwa .ev-where { font-size: 0.75rem; color: var(--ink-faint); } /* the row itself is the link; the explicit "read more" is website furniture */ .pwa .card-more, .pwa .ev-details, .pwa .ev-actions { display: none; } .pwa .ev-done, .pwa .chip-float { display: none; } .pwa .ev-ribbon span { font-size: 0.6rem; padding: 3px 8px; } .pwa .ev-count { font-size: 0.62rem; padding: 2px 7px; } /* Home news carousel stays a carousel — swiping is right on a phone — but sheds its desktop proportions. */ .pwa .news-carousel .nc-slide { flex-basis: 78%; } .pwa .news-carousel .nc-card { display: block !important; border: 1px solid var(--app-hairline); border-radius: var(--app-radius); } .pwa .news-carousel .nc-media { width: auto; height: auto; aspect-ratio: 16/10; border-radius: 0; } .pwa .news-carousel .nc-arrow { display: none; } /* you swipe, you don't click arrows */ .pwa .nc-body { padding: 12px 13px 14px; } .pwa .nc-body h3 { font-family: var(--font-body); font-size: 0.95rem; } .pwa .nc-more { display: none; } /* ---------- Gallery: edge to edge, tight, like a photos app ---------- */ .pwa .gallery-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 calc(var(--app-gutter) * -1); } .pwa .gallery-item { border-radius: 0; margin: 0; box-shadow: none; } .pwa .gallery-item img { aspect-ratio: 1; object-fit: cover; width: 100%; height: 100%; } .pwa .gallery-item figcaption { display: none; } .pwa .gallery-filters { margin: 0 calc(var(--app-gutter) * -1) 12px; padding: 0 var(--app-gutter); } /* ---------- Press wall: two tight columns ---------- */ .pwa .press-grid { column-count: 2; column-gap: 6px; } /* ---------- Account: grouped, settings-style sections ---------- These cards hold forms, tables and buttons, so they keep their block layout and simply lose the floating-card look in favour of hairline groups. */ .pwa .info-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; border-bottom: 1px solid var(--app-hairline); padding: 16px var(--app-gutter); margin: 0 calc(var(--app-gutter) * -1); display: block !important; } /* A full-bleed element inside another full-bleed element pulls the gutter twice. .grid-3 and .info-card each take margin:0 -16px to reach the screen edge, which is right on its own — but an .info-card inside an already-bled .grid-3 ended up 407px wide at left:-16 on a 375px screen, so donate.php and csr.php scrolled sideways. The parent has already reached the edge; the child only needs the padding. */ .pwa .grid.grid-3 > .info-card, .pwa .app-list .info-card, .pwa .grid.grid-3 > .app-list, .pwa .app-list .app-list { margin-left: 0; margin-right: 0; } .pwa .info-card h3 { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; } .pwa .reg-table { font-size: 0.88rem; } .pwa .reg-table td { padding: 9px 0; } .pwa .onboard-steps { gap: 8px; } .pwa .info-card .btn { width: 100%; justify-content: center; margin-top: 6px; } .pwa .info-card .btn + .btn { margin-top: 8px; } /* ========================================================================== APP HOME The website opens on a full-bleed hero with a headline and three CTAs — right for a first-time visitor being persuaded. Someone who installed the app is already persuaded, so it opens on a dashboard instead: a greeting, the four things they might actually want to do, the numbers, then what has just happened. ========================================================================== */ .app-home { display: none; } .pwa .app-home { display: block; padding: 14px 0 4px; } /* website-only storytelling has no place on an app home screen */ .pwa .hero, .pwa #journey, .pwa .stats.band-parallax { display: none; } .pwa .ah-greet { margin-bottom: 16px; } .pwa .ah-hello { font-size: 0.85rem; color: var(--ink-faint); margin: 0 0 2px; } .pwa .ah-line { font-family: var(--font-display); font-size: 1.42rem; font-weight: 600; line-height: 1.22; color: var(--ink); margin: 0; } .pwa .ah-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; } .pwa .ah-action { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 4px 11px; border-radius: var(--app-radius); background: var(--primary-soft); color: var(--primary-deep); font-size: 0.7rem; font-weight: 700; text-align: center; text-decoration: none !important; -webkit-tap-highlight-color: transparent; transition: transform 0.18s ease; } .pwa .ah-action:active { transform: scale(0.95); } .pwa .ah-action .ah-ic { display: grid; place-items: center; } /* giving is the point — colour it accordingly */ .pwa .ah-action.aa-donate { background: var(--marigold); color: #3a2a05; } .pwa .ah-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 13px 0; margin-bottom: 4px; border-top: 1px solid var(--app-hairline); border-bottom: 1px solid var(--app-hairline); text-align: center; } .pwa .ah-stats b { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--primary-deep); line-height: 1.1; } .pwa .ah-stats span { font-size: 0.72rem; color: var(--ink-faint); } /* Notification opt-in row on the app home */ .ah-push { display: none; } .pwa .ah-push[hidden] { display: none; } .pwa .ah-push { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 12px 13px; border: 1px solid var(--app-hairline); border-radius: var(--app-radius); background: var(--cream); } .pwa .ah-push-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-deep); } .pwa .ah-push-txt { flex: 1; min-width: 0; } .pwa .ah-push-txt b { display: block; font-size: 0.88rem; } .pwa .ah-push-txt .pt-state { font-size: 0.75rem; color: var(--ink-faint); } .pwa .ah-push .btn { flex: none; } .pwa .ah-push.is-on { background: var(--primary-soft); border-color: transparent; } /* On the app home the remaining sections are just feeds — trim their chrome */ .pwa .app-home ~ .section .section-head .kicker { display: none; } .pwa .app-home ~ .section > .container > .center { display: none; } /* "view all" buttons */ /* The five pillars are the one bit of "who we are" worth keeping on the app home, but as a scrollable strip of small tiles rather than five tall cards. */ .pwa .pillars-grid { display: grid !important; grid-auto-flow: column; grid-auto-columns: 132px; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 calc(var(--app-gutter) * -1); padding: 2px var(--app-gutter) 8px; scrollbar-width: none; } .pwa .pillars-grid::-webkit-scrollbar { display: none; } .pwa .pillar { scroll-snap-align: start; border: 1px solid var(--app-hairline); border-radius: var(--app-radius); overflow: hidden; box-shadow: none; } .pwa .pillar img { height: 78px; width: 100%; object-fit: cover; } .pwa .pillar-body { padding: 9px 10px 11px; } .pwa .pillar-icon { width: 30px; height: 30px; top: -14px; } .pwa .pillar-body h3 { font-family: var(--font-body); font-size: 0.8rem; line-height: 1.25; } .pwa .pillar-body p { display: none; } /* the title carries it at this size */ /* The story block is website copy; the About screen has it in full */ .pwa .hero-curve, .pwa .hc-k, .pwa .hc-s, .pwa .hc-t { display: none; } /* ---------- Share row under a title (app only) ---------- */ .app-share-row { display: none; } .pwa .app-share-row { display: flex; gap: 8px; margin: 10px 0 4px; } /* Toast for share fallback */ .pwa .app-toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(20px); bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom) + 16px); z-index: 10000; opacity: 0; pointer-events: none; background: var(--ink); color: #fff; font-size: 0.86rem; padding: 10px 16px; border-radius: var(--r-full); transition: opacity 0.25s ease, transform 0.25s ease; } .pwa .app-toast.in { opacity: 1; transform: translateX(-50%) translateY(0); }