/* ==========================================================================
WishBazaar — Modern Drop-in Stylesheet (v2 — targets real site markup)
--------------------------------------------------------------------------
HOW TO APPLY
1. Link this file AFTER all existing stylesheets on the page.
2. Add class="wb" to the tag.
HOW TO REVERT
Delete the "wb" class from .
WHAT CHANGED FROM v1
v1 invented its own class names (.wb-card, .wb-amount, .wb-progress-fill)
that don't exist anywhere in WishBazaar's HTML, so almost nothing
rendered except a generic `a { color }` rule.
v2 targets the ACTUAL classes confirmed from a live wish card:
article.loop-item, .loop-item-title, .content-meta, .cause-address,
.article-create, .article-tag, .donate-progress, .donate-progress-bar,
.donate-progress-label, .donate-progress-ed, .donate-progress-go,
.collected, .goal, .loop-item-excerpt, .loop-item-action .btn
Some of these elements (e.g. .collected, .goal currency symbols) carry
INLINE style="color:#3bb23f" attributes in the markup. Inline styles
beat normal CSS specificity, so those overrides below use !important —
the only override method that reaches them. This is the one place in
this file !important is used, and it's used deliberately.
STILL NEEDED
The actual donate button (likely on WishDetail-*.aspx, not this
listing card) hasn't been seen yet. ".loop-item-action .btn-primary"
below is the "Details" link — a navigation action, not donate — so it
stays teal, per the audit's "coral = donate only" rule. Send the
WishDetail page's donate button markup to wire up .wb-btn-donate for
real.
========================================================================== */
body.wb {
--wb-teal-900: #0a4544;
--wb-teal-700: #0f5f5e;
--wb-teal-500: #17807e;
--wb-teal-100: #e3f1f0;
--wb-teal-050: #f2f9f8;
--wb-coral-700: #a8341f;
--wb-coral-600: #c9412a; /* donate actions ONLY */
--wb-coral-100: #fbe6e0;
--wb-green-700: #0b7a42;
--wb-green-600: #0f9d56; /* funded / progress ONLY */
--wb-green-100: #e2f6ea;
--wb-ink-900: #1a2222;
--wb-ink-700: #3d4747;
--wb-ink-500: #6b7676;
--wb-ink-100: #e6eaea;
--wb-white: #ffffff;
--wb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--wb-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono",
Consolas, monospace;
--wb-radius-md: 10px;
--wb-radius-lg: 16px;
--wb-radius-pill: 999px;
--wb-shadow-md: 0 4px 16px rgba(10, 40, 40, 0.10);
}
/* ==========================================================================
WISH / CAMPAIGN CARD (article.loop-item)
========================================================================== */
body.wb article.loop-item {
font-family: var(--wb-font);
border: 1px solid var(--wb-ink-100);
border-radius: var(--wb-radius-lg);
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
background: var(--wb-white);
height: 100%;
display: flex;
flex-direction: column;
}
body.wb article.loop-item:hover {
box-shadow: var(--wb-shadow-md);
transform: translateY(-2px);
}
body.wb .loop-item-content {
padding: 16px 18px;
container-type: inline-size;
container-name: wb-card;
display: flex;
flex-direction: column;
flex: 1;
}
/* Excerpt absorbs any leftover vertical space so cards in the same row
end at the same height, without going back to a fixed pixel height
(that was the earlier clipping problem). Details/Donate button gets
pushed to the bottom of the card either way. */
body.wb .loop-item-excerpt {
flex: 1;
}
body.wb .loop-item-action,
body.wb .loop-item-action-homepage {
margin-top: auto;
}
/* Title */
body.wb .loop-item-title {
margin: 0 0 8px 0;
font-size: 19px;
font-weight: 700;
}
body.wb .loop-item-title a {
color: var(--wb-teal-700);
}
body.wb .loop-item-title a:hover {
color: var(--wb-teal-500);
text-decoration: underline;
}
/* Meta row: author / supporters / tag */
body.wb .content-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 13px;
color: var(--wb-ink-500);
margin-bottom: 12px;
}
body.wb .content-meta i.fa {
color: var(--wb-teal-500);
margin-right: 4px;
}
body.wb .cause-address a {
color: var(--wb-ink-700);
font-weight: 600;
}
body.wb .article-tag a {
color: var(--wb-teal-700);
font-weight: 600;
}
/* ==========================================================================
PROGRESS BAR + COLLECTED/GOAL (donate-progress family)
========================================================================== */
body.wb .donate-progress {
width: 100%;
height: 8px;
background: var(--wb-ink-100);
border-radius: var(--wb-radius-pill);
overflow: hidden;
margin-bottom: 8px;
}
/* Fill — inline width:XX% stays (that's the real percentage data);
we only override the color, and cap it so a bad backend % can't
visually exceed the track. */
body.wb .donate-progress-bar {
height: 100%;
max-width: 100%;
background: var(--wb-green-600) !important;
border-radius: var(--wb-radius-pill);
transition: width 0.3s ease;
}
body.wb .donate-progress-label {
font-size: 15px;
color: var(--wb-ink-700);
}
body.wb .donate-progress-ed,
body.wb .donate-progress-go {
display: flex;
align-items: baseline;
gap: 3px;
}
/* Collected amount: force legible monospace + on-brand green,
overriding the inline style="color:#3bb23f" in the markup. */
body.wb .donate-progress-ed,
body.wb .donate-progress-ed span {
color: var(--wb-green-700) !important;
}
body.wb .collected,
body.wb .goal {
font-family: var(--wb-font-mono);
font-weight: 700;
font-variant-numeric: tabular-nums;
font-size: 18px;
}
/* Goal amount: neutral ink, not green (green means "funded", not "target") */
body.wb .donate-progress-go span {
color: var(--wb-ink-900) !important;
}
/* Currency symbol spans (₨, $, €, etc.) — same weight/family as the
number so mixed symbols are at least visually consistent in size,
even though the backend symbol-lookup bug itself isn't fixed here. */
body.wb .donate-progress-ed > span:first-of-type,
body.wb .donate-progress-go > span:first-of-type {
font-family: var(--wb-font-mono);
font-weight: 700;
}
/* ==========================================================================
EXCERPT + ACTION BUTTON
========================================================================== */
body.wb .loop-item-excerpt p {
font-size: 14px;
line-height: 1.55;
color: var(--wb-ink-700);
margin: 10px 0 14px 0;
}
/* "Details" is navigation, not a donate action — stays teal per the
audit's "coral reserved exclusively for donate" rule.
.loop-item-action = WishList page
.loop-item-action-homepage = Home page (MasterPage4Home2.master) —
same button, different wrapper class per template. */
body.wb .loop-item-action .btn.btn-primary,
body.wb .loop-item-action-homepage .btn.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--wb-teal-700);
color: var(--wb-white) !important;
border: none;
border-radius: var(--wb-radius-md);
padding: 10px 20px;
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
transition: background 0.15s ease;
}
body.wb .loop-item-action .btn.btn-primary:hover,
body.wb .loop-item-action-homepage .btn.btn-primary:hover {
background: var(--wb-teal-900);
text-decoration: none;
}
/* ==========================================================================
"START YOUR FREE WISH OR FUNDRAISER" — top-of-page CTA
--------------------------------------------------------------------------
Real markup:
This is finding C1 from the audit: the href points at makeawish.aspx,
but a separate navigateurl="~/login.aspx" attribute (read by whatever
JS drives the cboxElement iframe popup) sends the click to login
regardless. This CSS only recolors the button — it does not, and
cannot, fix where the click actually goes. That's a markup/JS fix,
not a stylesheet fix.
Targeted via the .start-free-wish wrapper so it can't collide with
any other .btn.btn-primary on the page (Details, Donate).
========================================================================== */
body.wb .start-free-wish a.btn.btn-primary {
background-color: var(--wb-teal-700) !important;
border-color: var(--wb-teal-700) !important;
color: var(--wb-white) !important;
font-weight: 700;
padding: 12px 24px;
transition: background-color 0.15s ease;
}
body.wb .start-free-wish a.btn.btn-primary:hover {
background-color: var(--wb-teal-900) !important;
border-color: var(--wb-teal-900) !important;
}
/* ==========================================================================
DONATE BUTTON (confirmed — WishDetail page)
--------------------------------------------------------------------------
Real markup:
Targeted by tag (button.btn.btn-primary) rather than just .btn-primary,
since the "Details" link elsewhere on the site is an with the same
classes and is intentionally styled teal, not coral.
Every property here is set inline on the live element, so every override
below needs !important to win — that's not stylistic overkill, it's the
only way a linked stylesheet can beat an inline style attribute.
NOTE: this doesn't fix the underlying problem — the button's onclick
still calls ColorBoxPopup('login.aspx'), so donating requires an account
before any payment step. Color/type changes here are cosmetic; the
login gate (finding C1) needs a code/flow fix, not a CSS fix.
========================================================================== */
body.wb button.btn.btn-primary {
background-color: var(--wb-coral-600) !important;
color: var(--wb-white) !important;
width: auto !important;
height: auto !important;
padding: 14px 32px !important;
font-size: 1rem !important;
font-family: var(--wb-font) !important;
font-weight: 700;
border: none;
border-radius: var(--wb-radius-md);
cursor: pointer;
transition: background 0.15s ease;
}
body.wb button.btn.btn-primary:hover {
background-color: var(--wb-coral-700) !important;
}
/* ==========================================================================
HOME PAGE FIX — fixed inline heights (from MasterPage4Home2.master)
overflow once font sizes above are applied.
--------------------------------------------------------------------------
Original markup fixes height:45px (title), height:67px (meta), and
height:194px (excerpt) — sized for the theme's original smaller font.
Targeted via [style*="height"] so this ONLY matches elements that
actually carry that inline height (i.e. Home page cards) and leaves
WishList's identically-named classes — which have no inline height —
completely untouched.
========================================================================== */
body.wb h2.loop-item-title[style*="height"] {
height: auto !important;
min-height: 45px;
}
body.wb .content-meta[style*="height"] {
height: auto !important;
min-height: 67px;
margin-bottom: 16px;
}
body.wb .loop-item-excerpt p[style*="height"] {
height: auto !important;
min-height: 0;
}
/* Narrow-card fix: on wide single-column layouts (WishList), Collected/
Goal always fit on one line at 18px. On narrow grid layouts (Home's
4-column template), the same text sometimes overflows and wraps —
inconsistently, depending on how many digits each wish happens to
have. A container query checks the CARD's actual rendered width
(not the page/viewport), so this self-adjusts correctly regardless
of which template renders it — no per-page guessing needed. */
@container wb-card (max-width: 340px) {
body.wb .collected,
body.wb .goal {
font-size: 14px;
}
body.wb .donate-progress-label {
font-size: 12px;
}
body.wb .donate-progress-ed,
body.wb .donate-progress-go {
white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
body.wb * {
transition: none !important;
}
}