/* Brand colors alias the shared tokens in css/design-system.css (linked in ) so there's one source of truth. --br and --bg have no exact match there (--bg here is #f5f0e8 vs design-system's --c-bg #fdf0e0 — a genuinely different shade, not just a naming difference) so they stay as local values rather than an invented mapping that would shift color. */ :root { --or:var(--c-saffron); --gold:var(--c-gold); --gilt:var(--c-gold-light); --ink:var(--c-ivory-900); --cream:var(--c-cream); --warm:var(--c-warm); --br:#6b3010; --lbr:var(--c-maroon-400); --green:var(--c-success); --wa:var(--c-whatsapp); --red:var(--c-error); --bg:#f5f0e8; --shadow:0 4px 24px rgba(26,8,0,.1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;display:flex;flex-direction:column} /* ── Hide legacy portal nav when nav-component.js is active ── */ body:has(#psots-nav) > nav:not(#psots-nav) { display: none !important; } /* ── Login: four equal sign-in methods, segmented-tab pattern (revamped July 2026 — replaced the old "Google recommended + others hidden in a drawer" hierarchy, which existed to steer people away from OTP costs. WhatsApp/SMS/Email OTP quota is generous and rechargeable now, so all four methods get identical visual weight — no badge, no default drawer, no cost framing. Order (Google, Email, WhatsApp, SMS) is just a fixed reading order, not a recommendation. ── */ @keyframes psgFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .psg-signin-card{border:1.5px solid #f0d5b8;border-radius:18px;padding:1.2rem 1.1rem 1.1rem; background:#fff8f0;box-shadow:0 6px 20px rgba(26,8,0,.06);animation:psgFade .4s ease} .psg-card-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:rgba(160,88,40,.6);text-align:center;margin-bottom:.75rem} /* 2x2 grid of equal-weight tabs — every method gets the same card size, icon treatment, and label prominence. */ .psg-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.55rem} .psg-method-btn{display:flex;align-items:center;gap:.6rem;width:100%;min-height:52px;padding:.6rem .65rem; border:1.5px solid #f0d5b8;border-radius:12px;background:#fff;cursor:pointer; text-align:left;font-family:'DM Sans',sans-serif;transition:border-color .2s,background .2s,box-shadow .2s} .psg-method-btn:hover{border-color:#e3bd8c} .psg-method-btn:focus-visible{outline:2.5px solid var(--psg-accent,#e85c00);outline-offset:2px} .psg-method-btn[aria-selected="true"]{border-color:var(--psg-accent);background:#fff8f0; box-shadow:0 2px 10px rgba(26,8,0,.08)} .psg-method-btn-icon{width:32px;height:32px;border-radius:50%;background:#fff8f0;display:flex; align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;overflow:hidden} .psg-method-btn-icon img{width:18px;height:18px;display:block} .psg-method-btn-label{font-size:.85rem;font-weight:700;color:#3a2008;line-height:1.25} /* Single content area below the grid — crossfades to whichever method's form/button is active. Only one panel is ever .open at a time. */ .psg-method-panels{margin-top:.9rem} .psg-method-form{max-height:0;opacity:0;overflow:hidden; transition:max-height .35s ease,opacity .25s ease;padding:0 .15rem} .psg-method-form.open{max-height:480px;opacity:1;padding-top:.15rem;animation:psgFade .3s ease} .psg-method-note{font-size:.78rem;color:#8a6a4a;line-height:1.55;text-align:center;margin-top:.5rem} /* ── Portal hero action pills (sign-out + admin link) ── */ .ph-signout-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: rgba(255,220,120,.75); border-radius: 50px; padding: .28rem .8rem; font-size: .68rem; font-weight: 600; cursor: pointer; display: none; font-family: 'DM Sans', sans-serif; transition: background .25s ease, border-color .25s ease, transform .25s ease; flex-shrink: 0; } .ph-signout-btn:hover { background: rgba(255,255,255,.15); border-color: rgba(255,194,0,.35); transform: translateY(-1px); } .ph-signout-btn:active { transform: translateY(0) scale(.97); } .ph-admin-link { background: linear-gradient(135deg, #e85c00, #c93800); color: #fff; border: none; border-radius: 50px; padding: .28rem .85rem; font-size: .66rem; font-weight: 700; text-decoration: none; box-shadow: 0 2px 10px rgba(232,92,0,.35); transition: transform .25s ease, box-shadow .25s ease; } .ph-admin-link:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(232,92,0,.5); } .ph-admin-link:active { transform: translateY(0) scale(.97); } /* ── Dark-card CTA pills (status card "Pay Now" / "Download Receipt") ── */ .ph-cta { border-radius: 10px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 700; transition: transform .25s var(--ease-out, ease), box-shadow .25s ease, background .25s ease, border-color .25s ease; } .ph-cta:hover { transform: translateY(-2px); } .ph-cta:active { transform: translateY(0) scale(.97); } .ph-cta:focus-visible { outline: 2px solid rgba(255,194,0,.7); outline-offset: 2px; } .ph-cta-primary { background: linear-gradient(135deg, #e85c00, #c93800); color: #fff; border: none; padding: .55rem 1.1rem; font-size: .82rem; box-shadow: 0 3px 14px rgba(232,92,0,.35); } .ph-cta-primary:hover { box-shadow: 0 6px 22px rgba(232,92,0,.5); } .ph-cta-gold { background: rgba(255,194,0,.12); color: rgba(255,220,100,.9); border: 1px solid rgba(255,194,0,.3); padding: .5rem 1rem; font-size: .78rem; font-weight: 600; } .ph-cta-gold:hover { background: rgba(255,194,0,.2); border-color: rgba(255,194,0,.5); box-shadow: 0 0 16px rgba(255,194,0,.15); } /* ── NAV (legacy — nav-component.js's #psots-nav replaces this when active; must stay excluded here too, matching the :not(#psots-nav) visibility rule above, or this bare element selector's display:flex + justify-content:space-between leaks onto #psots-nav itself (it's a