body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#19222b;background:#fff}.brand-logo{width:38px;height:38px;object-fit:contain}.btn-oasis{background:var(--oasis-primary);border-color:var(--oasis-primary);color:#fff}.btn-oasis:hover{filter:brightness(.92);color:#fff}.btn-outline-oasis{border:1px solid var(--oasis-primary);color:var(--oasis-primary)}.btn-outline-oasis:hover{background:var(--oasis-primary);color:#fff}/* .hero has 3 background layers (first listed = frontmost): a tint that
lightens the left (text) side for readability and fades out by the time
it reaches the coin; a heavily zoomed-in sliver of hero-splash.jpg's own
left edge (all sparkle/droplets there, no coin face — see the crop notes
above) stretched behind the text so it reads as gold "splash" texture
rather than a flat colour; and the same file again, full size, anchored
right, showing the whole coin untouched exactly as before. */
.hero{position:relative;background-color:#382512;background-image:url(/images/hero-splash.jpg);background-repeat:no-repeat;background-position:right center;background-size:auto 100%;color:#fff}.hero>.container{position:relative;z-index:1;padding-top:3rem;padding-bottom:3rem}.hero-texture{position:absolute;top:0;left:0;height:100%;width:60%;z-index:0;pointer-events:none;background-image:linear-gradient(90deg,rgba(196,160,104,.62) 0%,rgba(196,160,104,.48) 45%,rgba(196,160,104,.15) 100%),url(/images/hero-splash.jpg);background-repeat:no-repeat,no-repeat;background-position:left center,left center;background-size:cover,650% auto}.hero h1,.hero .eyebrow,.hero .lead{text-shadow:0 2px 16px rgba(0,0,0,.6)}@media(max-width:991.98px){.hero{background-position:center bottom;background-size:100% auto}.hero>.container{padding-bottom:335px}.hero-texture{width:100%;height:520px;background-image:linear-gradient(180deg,rgba(196,160,104,.62) 0%,rgba(196,160,104,.48) 55%,rgba(196,160,104,.15) 100%),url(/images/hero-splash.jpg);background-position:center top,left top;background-size:cover,650% auto}.hero h1,.hero .eyebrow,.hero .lead{text-shadow:0 2px 10px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.9)}}.min-vh-50{min-height:60vh}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-size:.78rem;color:var(--oasis-primary)}.hero-card,.service-card,.dashboard-card,.settings-card,.login-card,.check-card{background:#fff;border:1px solid #e6e9ed;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:24px}.hero-card{border-top:5px solid var(--oasis-accent)}.service-number{font-weight:800;color:var(--oasis-accent);margin-bottom:25px}.section-soft{background:var(--oasis-secondary)}.section-dark,.footer{background:var(--oasis-primary);color:white}.portal-bg{background:#f5f7f9}/* .sidebar is shared by the Admin and Member Portal layouts, and on both
it's an offcanvas (see layouts/admin.ejs, layouts/member.ejs) that's a
normal, always-visible column at >=576px (the width below is what's used
there) and a hidden, hamburger-toggled slide-in drawer only below that
(where --bs-offcanvas-width, not width, is what Bootstrap's offcanvas CSS
actually sizes the drawer with). A member/admin on a phone gets the full
nav at full size once opened, rather than a permanently-cramped rail
eating into the already-narrow content column — the earlier approach,
replaced here after checking the whole site on real phone widths. The
breakpoint itself was later narrowed from Bootstrap's -md (768px) down to
its narrowest, -sm (576px), after -md turned out to also hide the sidebar
on an ordinary desktop browser window under 768px wide (e.g. a half-split
screen) — real phones are comfortably under 576px in portrait, so this
doesn't change the phone experience at all. flex-shrink:0 is required once
the sidebar is back in normal flow (>=576px): without it, a narrow-ish
desktop window (checked: 700px) squeezed the sidebar itself down to ~160px
instead of leaving it at its set width and letting .portal-content (which
already has min-width:0 for exactly this) absorb the space instead. */
/* Bootstrap's own offcanvas CSS forces background-color:transparent!important
on both the offcanvas element and its .offcanvas-body once it resets to
the always-visible desktop state (its reset assumes you'll supply your
own background, since a slide-in drawer's backdrop styling doesn't apply
once it's back in normal flow) - that silently beat this rule's own
background, leaving white sidebar text on a transparent/white page with
nothing to read it against. Both spots need their own !important to win. */
.sidebar,.sidebar .offcanvas-body{background:var(--oasis-primary)!important}
.sidebar{width:250px;flex-shrink:0;--bs-offcanvas-width:280px;color:white}.sidebar .nav-link{color:rgba(255,255,255,.82);border-radius:8px;margin-bottom:4px}.sidebar .nav-link:hover{background:rgba(255,255,255,.1);color:#fff}.sidebar .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:.75rem}.login-card{max-width:480px}.settings-card{max-width:1000px}@media(max-width:767px){.display-4{font-size:2.5rem}}
.admin-logo{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:7px;padding:2px}.sidebar-brand{display:flex;align-items:center;min-height:40px}.portal-content{min-width:0}.table thead th{white-space:nowrap;background:#f8f9fa}.table td{vertical-align:middle}.audit-json{max-width:520px;max-height:220px;overflow:auto;background:#f6f8fa;border-radius:8px;padding:10px;font-size:.75rem}.form-label{font-weight:600}.settings-card h4{margin-bottom:1rem}.dashboard-card{transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease}.dashboard-card:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 16px 36px rgba(0,0,0,.14)}
/* Vibrant gradient stat tiles — each .tile-* sets a two-tone gradient and
switches the card's own text to white (readable on every gradient below;
the plain body{color:...} dark text this overrides only applies while a
tile has no .tile-* class, e.g. the unstyled "Total Savings" tile, which
is untouched). !important on the color rules because they're overriding
Bootstrap's own !important text-muted/link utilities, not for cascade
safety in general. Still not !important on `background` itself, so the
existing `@media print{...dashboard-card{background:transparent!important}}`
rule keeps working unchanged on printed pages. */
.dashboard-card[class*="tile-"]{color:#fff;position:relative;overflow:hidden;border:none}
.dashboard-card[class*="tile-"] .text-muted{color:rgba(255,255,255,.82)!important}
.dashboard-card[class*="tile-"] small{color:rgba(255,255,255,.82)}
.dashboard-card[class*="tile-"] a{color:#fff;text-decoration:underline;opacity:.92}
.dashboard-card[class*="tile-"] a:hover{opacity:1;color:#fff}
/* A large, soft decorative ring bleeding off the top-right corner — purely
abstract (not a literal pictogram, so it never looks "wrong" for a tile's
meaning) that drifts and grows slightly on hover for the "interactive"
feel. Pointer-events:none so it never blocks the tile's own link/click. */
.dashboard-card[class*="tile-"]::after{content:"";position:absolute;top:-38px;right:-38px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.16);pointer-events:none;transition:transform .35s cubic-bezier(.22,1,.36,1),background .35s ease}
.dashboard-card[class*="tile-"]:hover::after{transform:scale(1.35) translate(-6px,6px);background:rgba(255,255,255,.22)}
.tile-blue{background:linear-gradient(135deg,#5b8bff,#2451e0)}
.tile-teal{background:linear-gradient(135deg,#2dd4bf,#0d9488)}
.tile-green{background:linear-gradient(135deg,#34d399,#059669)}
.tile-rose{background:linear-gradient(135deg,#fb7185,#dc2626)}
.tile-violet{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.tile-indigo{background:linear-gradient(135deg,#818cf8,#4338ca)}
.tile-amber{background:linear-gradient(135deg,#fbbf24,#d97706)}
.tile-gold{background:linear-gradient(135deg,#f4d477,#b45309)}
.tile-cyan{background:linear-gradient(135deg,#38bdf8,#0369a1)}
.tile-peach{background:linear-gradient(135deg,#fb923c,#ea580c)}
@media(max-width:575px){.portal-content main{padding:1rem!important}.portal-content header.border-bottom{padding:.75rem 1rem!important}}
/* Messages / chat room */
.chat-card{max-width:900px;overflow:hidden}
.chat-window{height:60vh;min-height:320px;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.6rem;background:#f5f7f9}
.chat-bubble-row{display:flex}
.chat-bubble-row.me{justify-content:flex-end}
.chat-bubble-row.them{justify-content:flex-start}
.chat-bubble{max-width:72%;border-radius:14px;padding:.55rem .8rem;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.chat-bubble-row.me .chat-bubble{background:var(--oasis-primary);color:#fff;border-bottom-right-radius:4px}
.chat-bubble-row.them .chat-bubble{background:#fff;border:1px solid #e6e9ed;border-bottom-left-radius:4px}
.chat-bubble-row.broadcast .chat-bubble{border:1px solid var(--oasis-accent)}
.chat-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.92rem;line-height:1.4}
.chat-meta{font-size:.7rem;opacity:.72;margin-top:.3rem}
.chat-bubble-row.me .chat-meta{color:rgba(255,255,255,.88)}
.chat-broadcast-tag{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem;color:var(--oasis-accent)}
.chat-bubble-row.me .chat-broadcast-tag{color:#fff}
.chat-compose-input{resize:none}
#admin-msg-badge,#member-msg-badge{vertical-align:middle;font-size:.68rem}
/* Financial statement print view */
.print-logo{width:44px;height:44px;object-fit:contain}
@media print{.sidebar,.no-print,header form,header .small{display:none!important}.admin-content main{padding:0!important}.card{box-shadow:none!important;border:1px solid #ddd!important}}
/* Faint logo watermark behind printable page content. A real ![]()
(not a
CSS background-image) so it still prints even when the browser's print
dialog has "Background graphics" turned off. .watermark-page isolates
stacking so the watermark's negative z-index only reaches behind its own
siblings, never anything else on the page — absolute + centered, so it
sits behind whatever content it wraps (works as-is for the one-card
Receipt). The account/loan/transaction cards on the Financial Statement
have their own opaque white background (needed on screen, to visually
separate them) which would otherwise paint over the watermark and hide
it completely — so print mode specifically makes those transparent,
since the printed page is white anyway and the watermark should show
through everywhere, not just in the gaps between cards. .watermark-repeat
additionally switches to fixed positioning while printing, so a long
multi-page statement gets the watermark repeated on every page instead
of centered once on the whole document. */
.watermark-page{position:relative;isolation:isolate}
@media print{.watermark-page .card,.watermark-page .dashboard-card{background:transparent!important}.watermark-page .dashboard-card[class*="tile-"]{color:#19222b!important;border:1px solid #ddd!important}.watermark-page .dashboard-card[class*="tile-"] .text-muted,.watermark-page .dashboard-card[class*="tile-"] small{color:#6c757d!important}.watermark-page .dashboard-card[class*="tile-"]::after{display:none!important}}
.watermark-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:55%;max-width:340px;opacity:.07;z-index:-1;pointer-events:none}
@media print{.watermark-repeat .watermark-img{position:fixed}}
/* Public homepage hero banner. .hero itself shows ONE thing only: the full,
untouched hero-splash.jpg (coin+splash+reflection crop) at full/near-full
size, pinned to the right (desktop) / bottom (mobile) — so the cowry
shell and its inscription always render completely, uncropped and
unobscured. The source banner's own baked-in nav, headline, buttons and
footer strips are deliberately cropped out of hero-splash.jpg since this
site already has real, working versions of all of them in
layouts/public.ejs and this section; a second, unclickable copy of them
would be confusing.
The lightened "sparkle texture behind the text" effect is a SEPARATE,
physically boxed .hero-texture div (see below) sized to only the text
side of the hero (60% wide desktop / top 56% tall mobile) with its own
two-layer background — a warm light-caramel wash (rgba(196,160,104)) for
legibility over a 650%-zoomed sliver of the same photo for texture. It
is a real, width/height-constrained box rather than a 3rd background
layer on .hero itself specifically so it can never visually bleed onto
or cover any part of the coin, no matter how the numbers are tuned —
an earlier version tried to do this purely with background-position/
-size math on .hero and that let the zoomed texture layer quietly cover
the ENTIRE hero (including the coin, hiding it completely) since 650%
of the full hero width is far wider than the hero itself. .hero needs
position:relative and .hero>.container needs z-index:1 so the real text
content still stacks above this absolutely-positioned texture box.
The "One secure portal" card used to sit on top of the coin and was
moved into the text column below the buttons instead, so nothing ever
covers it. Everything below just re-tints the hero's existing
text/card/button elements for this background — none of it is new
content. */
.hero .eyebrow{color:var(--oasis-accent)}
.hero .lead{color:rgba(255,255,255,.86)}
.hero .hero-card{background:rgba(13,10,5,.55);border:1px solid rgba(212,167,44,.4);box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.hero .hero-card h3{color:var(--oasis-accent)}
.hero .hero-card p{color:rgba(255,255,255,.86);margin-bottom:0}
.hero .btn-outline-oasis{border-color:rgba(255,255,255,.65);color:#fff}
.hero .btn-outline-oasis:hover{background:rgba(255,255,255,.15);color:#fff;border-color:#fff}
/* Public homepage gallery, admin-uploaded from Site Settings. Renders as
Bootstrap's own .carousel component (auto-advancing, data-bs-ride) using
the bootstrap.bundle.min.js already loaded in layouts/public.ejs, rather
than a new JS library — indicators/controls are only rendered server-side
when there's more than one picture, since cycling a single slide is
pointless. */
.gallery-carousel .carousel-item img{width:100%;height:420px;object-fit:cover;display:block}
.gallery-carousel .carousel-inner{box-shadow:0 10px 30px rgba(0,0,0,.12)}
.gallery-carousel .carousel-caption{left:0;right:0;bottom:0;text-align:left;padding:2.5rem 1.25rem .9rem;background:linear-gradient(0deg,rgba(0,0,0,.68),rgba(0,0,0,0))}
.gallery-carousel .carousel-control-prev,.gallery-carousel .carousel-control-next{width:12%}
.gallery-carousel .carousel-control-prev{background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,0))}
.gallery-carousel .carousel-control-next{background:linear-gradient(270deg,rgba(0,0,0,.25),rgba(0,0,0,0))}
.gallery-carousel .carousel-indicators [data-bs-target]{background-color:var(--oasis-accent)}
@media(max-width:767px){.gallery-carousel .carousel-item img{height:240px}.gallery-carousel .carousel-caption{padding:1.5rem .9rem .6rem;font-size:.85rem}}
/* Printable Member ID Card (admin/members/id-card.ejs and member/id-card.ejs
share this markup/CSS unchanged — only the photo/back-link URLs differ
per view). Portrait CR80 (2.125in x 3.375in — the same standard
credit-card size as before, just turned upright), modelled on a
school-ID-card PDF Adegoke supplied as a template: logo+name+tagline
header, big centered photo, name, a QR (with a tiny embedded logo) on
the front; a details table, Terms & Conditions, a signature box, and a
Code128 barcode of the membership number on the back. The template's
own "Session"/"Valid Until" fields don't exist for a cooperative
membership (it doesn't expire on a schedule the way a school year does)
so they're left out rather than filled with invented dates, and the
back's header drops the tagline (.id-card-head-sm, no .id-card-tagline)
purely to leave room for the denser back content — the tagline's brand
job is already done once, on the front.
Built with real physical CSS units (in) rather than pixels so it prints
at true size on any printer, as long as the browser's print dialog is
left at 100%/"Actual Size" — the same "no @page override, tell the user
to print at actual size" approach already used by every other print view
in this file (.watermark-page above never touches @page either). The
dashed border doubles as a cut line, deliberately kept in the print
output too. em-based measurements are avoided throughout so nothing here
drifts if a parent font-size ever changes. box-sizing:border-box is set
explicitly (not just inherited from Bootstrap's Reboot) so the
dimensions below are the card's true printed size, padding and border
included, even on a page where Bootstrap's CSS hasn't loaded for some
reason — a real gap found and fixed while building the first, landscape
version of this card.
.id-card uses min-height, not a fixed height, and nothing on it clips or
ellipsis-truncates real text (name, company name, tagline, table values)
— an earlier version fixed a genuine overflow bug by clipping the
overflow, which quietly cut off real content once Adegoke's actual
(longer) company name and member names were on the card instead of the
short test values used while building it. Every text field that can
run long now has a size-down class (.id-card-fit-sm/.id-card-fit-xs,
picked server-side in the view from the real string's length) so normal
real-world values still fit at a readable size without wrapping, and
anything unexpectedly long is left to wrap onto a second line rather
than being hidden — the card simply grows a little taller than the
3.375in standard in that rare case instead of ever losing text. */
.id-card-outer{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1rem 0 2rem}
.id-card-face-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8a929b;margin-top:.6rem}
.id-card-face-label:first-child{margin-top:0}
.id-card,.id-card *{box-sizing:border-box}
.id-card{width:2.125in;min-height:3.375in;border:1px dashed #98a2ad;border-radius:.09in;padding:.13in;display:flex;flex-direction:column;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.14);font-family:inherit;color:#19222b;flex-shrink:0}
.id-card-bar{height:.04in;border-radius:.02in;background:var(--oasis-primary);margin-bottom:.06in;flex-shrink:0}
.id-card-head{display:flex;align-items:center;gap:.07in;flex-shrink:0}
.id-card-head img{width:.28in;height:.28in;object-fit:contain;flex-shrink:0}
.id-card-head strong{font-size:.12in;line-height:1.2;font-weight:800;color:var(--oasis-primary)}
.id-card-head strong.id-card-fit-sm{font-size:.1in}
.id-card-head strong.id-card-fit-xs{font-size:.085in}
.id-card-head-sm strong{font-size:.11in}
.id-card-head-sm img{width:.22in;height:.22in}
.id-card-tagline{font-size:.07in;font-weight:700;color:var(--oasis-accent);text-align:center;margin:.04in 0 .06in;line-height:1.25}
.id-card-tagline.id-card-fit-sm{font-size:.06in}
.id-card-tagline.id-card-fit-xs{font-size:.053in}
.id-card-photo-wrap{display:flex;justify-content:center;margin:.02in 0;flex-shrink:0}
.id-card-photo{width:1.05in;height:1.05in;object-fit:cover;border-radius:.07in;border:2px solid var(--oasis-primary);background:#f5f7f9;flex-shrink:0}
.id-card-photo-placeholder{display:flex;align-items:center;justify-content:center;font-size:.09in;color:#8a929b;text-align:center}
.id-card-name{font-weight:800;font-size:.135in;line-height:1.2;margin-top:.06in;text-align:center;word-break:break-word}
.id-card-name.id-card-fit-sm{font-size:.11in}
.id-card-name.id-card-fit-xs{font-size:.095in}
.id-card-subtitle{font-size:.075in;color:#8a929b;text-transform:uppercase;letter-spacing:.04em;text-align:center;margin-top:.015in;flex-shrink:0}
.id-card-details{text-align:center;margin-top:.06in;font-size:.082in;line-height:1.45;flex-shrink:0}
.id-card-details strong{color:var(--oasis-primary)}
.id-card-qr-row{display:flex;align-items:center;gap:.1in;margin-top:.08in;flex-shrink:0}
.id-card-qr-row img{width:.56in;height:.56in;border:1px solid #e6e9ed;border-radius:.04in;background:#fff;flex-shrink:0}
.id-card-qr-caption{display:flex;flex-direction:column;gap:.02in;min-width:0}
.id-card-qr-caption strong{font-size:.08in;color:#4a5158}
.id-card-qr-caption span{font-size:.065in;color:#8a929b;line-height:1.25}
.id-card-footer-caption{margin-top:auto;padding-top:.05in;text-align:center;font-size:.068in;font-weight:800;color:var(--oasis-accent);text-transform:uppercase;letter-spacing:.03em;flex-shrink:0}
.id-card-table{width:100%;border-collapse:collapse;font-size:.08in;margin-top:.02in}
.id-card-table td{padding:.025in 0;vertical-align:top}
.id-card-table td:first-child{font-weight:700;color:var(--oasis-primary);width:38%;padding-right:.06in;white-space:nowrap}
.id-card-table td:last-child{color:#19222b;word-break:break-word}
.id-card-divider{height:1px;background:#d7dce1;margin:.08in 0}
.id-card-terms strong{font-size:.085in;color:#19222b}
.id-card-terms p{font-size:.068in;margin:.03in 0;line-height:1.35;color:#3a4149}
.id-card-terms ul{margin:0;padding-left:.16in;font-size:.068in;line-height:1.4;color:#3a4149}
.id-card-sig-box{border:1px solid #c7ccd1;border-radius:.05in;height:.4in;margin-top:.1in;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.04in;font-size:.065in;color:#8a929b}
.id-card-barcode-wrap{margin-top:auto;padding-top:.1in;text-align:center}
.id-card-barcode-wrap img{width:100%;max-height:.4in;object-fit:contain}
.id-card-barcode-no{font-size:.09in;font-weight:800;color:#19222b;margin-top:.02in}
.id-card-footer-note{text-align:center;font-size:.065in;font-weight:700;color:var(--oasis-accent);margin-top:.08in}
@media print{.id-card{box-shadow:none}}
/* Live Meetings — the join room (src/views/member/meeting-room.ejs) is a
standalone layout:false page, not wrapped in layouts/member.ejs, so it
needs its own full-viewport rules rather than reusing .portal-content.
body.meeting-room-page gets real height here; the view's own inline