/* ============================================================ CRITICAL.CSS - above-the-fold subset of theme.css Generated from public/css/theme.css by tools-extraction (see the build-critical-css.ps1 ranges). Loaded render-blocking in ; the full theme.css is loaded asynchronously. Regenerate this file after any edit to the sections it covers. ============================================================ */ :root { /* --- color: brand --- Went blue for a while (2026-07-29, several passes), then back to green the same day, this time to a specific client-supplied hex: #00B53F. That exact color only has 2.73:1 contrast against white — nowhere near the 4.5:1 normal text needs — and --color-primary doubles as both text-on-white (prices, links, badges) and button/ header/footer backgrounds with white text on top, so using it everywhere as-is would make a lot of the site hard to read. Split two ways instead (client's choice of the options offered): --green-bright is #00B53F exactly, unchanged — used for hover states, highlights, and accents, the same "large text/UI component" tier that already tolerated sub-4.5:1 contrast here (see the nav hover pill below, and --color-primary-hover). --green-deep is a darker green in the same hue (not the #00802D floated in the original options — that was still only 5.1:1 and left the footer's white-text tiers failing; #005C20 clears 8.2:1, matching the headroom the previous blue had closely enough that every existing --footer-* opacity below carries over unchanged). This is what --color-primary and the shared header/footer background actually use. Variable names are kept as `--green-*` on purpose (back to their literal meaning now): they're referenced by var() in ~100+ places across theme.css and inline styles in admin/profile Blade views. */ --green-deep: #005C20; --green-bright: #00B53F; --green-pale: #DCF3E3; --green-pale-faint: #EFFAF2; --coral: #FF6E4A; --gold: #F2B705; /* The header/footer surface color — went through two intermediate values (var(--green-deep) #005C20, then a toned-down #00802C) before landing here at the exact client hex, var(--green-bright) #00B53F, per an explicit "make it brighter" follow-up. #00B53F only holds 2.73:1 against white — well below the usual 4.5:1 AA target — and a dark-ink-text version was tried specifically to fix that, but the client asked to keep white text/icons regardless (found it "fine and visible" in practice), so .site-footer's --footer-* tokens and .nav-links (below) stayed white-based. This is a deliberate, client-directed exception to the normal contrast guideline, not an oversight — see each token's own comment for the actual measured numbers. --green-deep itself is untouched and still used everywhere else that needs the darker, higher-contrast shade (on-white text/ links/badges, category tile fills, etc). */ --footer-bg: var(--green-bright); /* --- color: neutrals --- */ --cream: #FBFBF6; --white: #FFFFFF; --ink: #122720; --ink-soft: #4B5D57; --ink-faint: #6B7D77; --line: #E1E8E2; --line-strong: #C9D4CD; /* --- semantic aliases --- */ --color-bg: var(--cream); --color-surface: var(--white); --color-text: var(--ink); --color-text-muted: var(--ink-soft); --color-border: var(--line); --color-primary: var(--green-deep); --color-primary-hover: var(--green-bright); --color-accent: var(--coral); --color-accent-2: var(--gold); /* Deliberately its own fixed value, not var(--green-bright) or var(--green-deep): brand green and "success" happen to both be green again right now, but they were split apart during the blue rebrand (2026-07-29) specifically so success/approved states (toasts, approved-ad stat, checkmarks) keep meaning "success" on their own terms rather than silently following whatever hue --color-primary is set to. Left decoupled even now that brand is green again, so a future rebrand away from green won't accidentally turn success states along with it. */ --color-success: #12945F; --color-danger: #D9483A; --color-warning: var(--gold); /* --- typography --- */ --font-display: 'Poppins', sans-serif; --font-body: 'Noto Sans', 'Noto Sans Tamil', 'Noto Sans Sinhala', sans-serif; /* --- spacing (use Bootstrap spacing as base) --- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; /* --- shadow --- */ --shadow-sm: 0 4px 12px -6px rgba(0, 92, 32, 0.18); --shadow-md: 0 10px 24px -14px rgba(0, 92, 32, 0.25); --shadow-lg: 0 16px 30px -18px rgba(0, 92, 32, 0.35); /* --- layout --- */ --container-max: 1160px; --nav-height: 70px; --bottom-nav-height: 66px; } /* ------------------------------------------------------------ BASE OVERRIDES (on top of Bootstrap) ------------------------------------------------------------ */ body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--color-text); } a { color: inherit; text-decoration: none; } ::selection { background: var(--green-pale); color: var(--color-primary); } /* Ensure all interactive elements have visible cursor */ input, select, textarea, button, a, [role="button"] { cursor: pointer; } input, select, textarea { color: var(--color-text); } input::placeholder, textarea::placeholder { color: var(--ink-faint); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } ::selection { background: var(--green-pale); color: var(--ink); } ::-moz-selection { background: var(--green-pale); color: var(--ink); } /* ------------------------------------------------------------ CONTAINER ------------------------------------------------------------ */ .container-custom { max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(16px, 5vw, 56px); } /* ------------------------------------------------------------ BUTTONS (Bootstrap overrides + custom) ------------------------------------------------------------ */ .btn-sb-primary { background: var(--color-primary); color: var(--white); border: none; border-radius: var(--radius-pill); font-weight: 600; padding: 10px 24px; transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1); } .btn-sb-primary:hover { background: var(--color-primary-hover); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-sm); } /* Bootstrap's base .btn:disabled rule (background-color: var(--bs-btn-disabled-bg)) has higher specificity than a single custom class like .btn-sb-primary — without this override, disabling the button via JS (e.g. while an async action is in flight) let that Bootstrap rule win and strip the background entirely, leaving the button looking invisible instead of just dimmed. Same fix pattern already existed for .btn-sb-danger/.btn-sb-warn; primary and outline just never needed it until now. */ .btn-sb-primary:disabled { background: var(--color-primary); color: var(--white); opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } .btn-sb-accent { background: var(--color-accent); color: var(--white); border: none; border-radius: var(--radius-pill); font-weight: 600; padding: 10px 24px; transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1); } .btn-sb-accent:hover { filter: brightness(1.06); color: var(--white); transform: translateY(-1px); } .btn-sb-outline { background: transparent; border: 1.5px solid var(--color-primary); color: var(--color-primary); border-radius: var(--radius-pill); font-weight: 600; padding: 10px 24px; transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1); } .btn-sb-outline:hover { background: var(--green-pale); color: var(--color-primary); } .btn-sb-outline:disabled { background: transparent; border-color: var(--line-strong); color: var(--color-text-muted); opacity: .7; cursor: not-allowed; } .btn-sb-ghost { background: transparent; color: var(--color-text); border: none; border-radius: var(--radius-pill); font-weight: 600; padding: 10px 24px; transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1); } .btn-sb-ghost:hover { background: var(--line); } .btn-sb-danger { background: var(--color-danger); color: var(--white); border: none; border-radius: var(--radius-pill); font-weight: 600; padding: 10px 24px; transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .btn-sb-danger:hover:not(:disabled) { background: #B93E30; color: var(--white); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(217, 72, 58, .35); } .btn-sb-danger:disabled { background: #9CA3AF; color: #fff; cursor: not-allowed; transform: none; box-shadow: none; } .btn-sb-warn { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; border: none; border-radius: var(--radius-pill); font-weight: 600; padding: 10px 24px; transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1); } .btn-sb-warn:hover { background: linear-gradient(135deg, #D97706, #B45309); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(180, 83, 9, .3); } .btn-sb-warn:disabled { background: #9CA3AF; color: #fff; cursor: not-allowed; transform: none; box-shadow: none; } .btn-sb-danger-dark { background: #991B1B; color: #fff; border: none; border-radius: var(--radius-pill); font-weight: 600; padding: 10px 24px; transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1); } .btn-sb-danger-dark:hover { background: #7F1D1D; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(153, 27, 27, .3); } /* WhatsApp contact button (ad-show contact card) — brand green, always pill-shaped like every other .btn-sb-* variant. Was previously two copies of inline styles on the page itself, which is how one of them silently drifted to a square corner instead of a pill. */ .btn-whatsapp { background: #25D366; border-color: #25D366; color: #fff; border-radius: var(--radius-pill); font-weight: 600; transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1); } .btn-whatsapp:hover { background: #1EBE5A; border-color: #1EBE5A; color: #fff; transform: translateY(-1px); } /* ------------------------------------------------------------ EYEBROW / BADGES ------------------------------------------------------------ */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--green-pale); color: var(--color-primary); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); } .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); } .badge-sb { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--green-pale); color: var(--color-primary); } .badge-sb-accent { background: #FFE9E2; color: var(--color-accent); } .badge-sb-gold { background: #FDF1CC; color: #8A6800; } .badge-sb-outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); } /* ---- Featured grid (list cards) ---- */ /* ------------------------------------------------------------ AD CARD — horizontal list style (image left, text right) ------------------------------------------------------------ */ .ad-card { display: flex; align-items: stretch; height: 122px; background: var(--color-surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease; cursor: pointer; text-decoration: none; color: inherit; } .ad-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--green-bright); color: inherit; } /* Boosted ads get a premium gold border + tinted background on the card itself instead of a text badge — the styling *is* the signal, so it needs to survive at a glance even in a dense grid. A flat gold line on a flat cream fill read cheap/plasticky, so this uses a soft metallic gradient border (double-background trick: one layer painted into the padding-box for the fill, one into the border-box for the edge) plus a warm, low ambient shadow to give the card real depth at rest. */ .ad-card--boosted { border: 1.5px solid transparent; background: linear-gradient(155deg, #FFFDF6 0%, #FFF6DE 100%) padding-box, linear-gradient(135deg, #F8D568 0%, #E8B408 45%, #B8860B 100%) border-box; box-shadow: 0 10px 24px -16px rgba(184, 134, 11, 0.4), 0 1px 0 rgba(255, 255, 255, 0.6) inset; } .ad-card--boosted:hover { border-color: transparent; box-shadow: 0 20px 36px -16px rgba(184, 134, 11, 0.5), 0 1px 0 rgba(255, 255, 255, 0.6) inset; } .ad-card__media { position: relative; width: 112px; min-width: 112px; background: var(--green-pale); overflow: hidden; } .ad-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.16, 1, .3, 1); } .ad-card:hover .ad-card__media img { transform: scale(1.05); } .ad-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--green-pale); color: var(--color-primary); font-size: 22px; opacity: .4; } /* When a card HAS a photo, the placeholder sits absolutely behind it (see the always-rendered placeholder in components/ad-card.blade.php) — a lazy image still shows the category icon through its transparent frame until the photo loads and covers it. The in-flow image (z-index 1) keeps defining the media box's height; the overlays above (verified badge, like button, condition pill) keep their own higher z-indexes untouched. */ .ad-card__media--has-image .ad-card__placeholder { position: absolute; inset: 0; z-index: 0; } .ad-card__media--has-image img { position: relative; z-index: 1; } .ad-card__overlay { display: none; } /* White pill version of — sized down well below the component's own default .pc-badge/.verified-badge--xs sizing, since it sits in a small corner of the card image rather than a full-width text row. White + backdrop-blur instead of the pale-blue .pc-badge-blue fill matches .ad-card__cat-badge/.ad-card__like, the other two badges already living on this image, so all three read as one consistent "image chrome" family rather than the pill looking like a stray card-body element that wandered onto the photo. This is the only verified-seller badge on the card now — an earlier version also duplicated it as a smaller pill in the meta row below, which was removed as redundant once this one existed. Scoped as ".ad-card__media .ad-card__verified-overlay" rather than a bare class — the rendered element also carries .pc-badge/.pc-badge-blue/ .verified-pill from , all equal-specificity single classes declared later in this file (search "AVATAR / PROFILE"), which would otherwise win the cascade tie on background/color/padding/ font-size/gap by source order alone regardless of which rule "sounds" more specific to this card. Nesting under the always-present .ad-card__media parent settles it on specificity instead, so this doesn't quietly break again if either rule ever moves. */ .ad-card__media .ad-card__verified-overlay { position: absolute; top: 6px; left: 6px; z-index: 3; background: rgba(255, 255, 255, .92); border-color: transparent; color: var(--color-primary); backdrop-filter: blur(4px); font-size: 9px; padding: 3px 7px; gap: 3px; white-space: nowrap; } .ad-card__media .ad-card__verified-overlay .verified-badge--xs { width: 9px; height: 9px; } .ad-card__media .ad-card__verified-overlay .verified-badge--xs .verified-badge__seal { font-size: 9px; } .ad-card__media .ad-card__verified-overlay .verified-badge--xs .verified-badge__check { font-size: 4.5px; } .ad-card__cat-badge { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; font-size: 10px; z-index: 3; transition: transform .25s ease; } .ad-card:hover .ad-card__cat-badge { transform: scale(1.1); } .cat-bg-land { color: var(--green-deep); } .cat-bg-real_estate { color: var(--green-bright); } .cat-bg-vehicles { color: var(--coral); } .cat-bg-pets { color: #8A6800; } .ad-card__like { position: absolute; bottom: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .9); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); border: none; cursor: pointer; z-index: 3; transition: all .2s ease; } .ad-card__like:hover { transform: scale(1.15); color: var(--color-accent); } .ad-card__like.is-saved { color: var(--color-accent); } .ad-card__like i { font-size: 11px; } /* Solid, high-contrast pill overlaid on the card photo, bottom-left — deliberately NOT the white/blurred "image chrome" look shared by .ad-card__verified-overlay/.ad-card__cat-badge/.ad-card__like: a translucent white pill can wash out against a light or busy photo, and this needs to read as a clear, unmissable flag at a glance rather than blend in as one more piece of card furniture. Both states get a real, distinct color rather than black/near-black — New reuses the card's own primary green (a positive, fresh signal); Used gets its own muted slate tone (--ink-soft, not a near-black rgba() over the photo) so it still reads as a deliberate color choice rather than a shadow, and deliberately isn't a "warning" tone since a used listing isn't a lesser one. */ .ad-card__condition-overlay { position: absolute; bottom: 6px; left: 6px; z-index: 3; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 3px 7px; border-radius: var(--radius-pill); white-space: nowrap; color: #fff; } .ad-card__condition-overlay--new { background: var(--color-primary); } .ad-card__condition-overlay--used { background: var(--ink-soft); } .ad-card__body { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .ad-card__top-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; margin-bottom: 2px; } .ad-card__eyebrow { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } .ad-card__title { font-weight: 600; font-size: 12.5px; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; /* Explicit top margin, not just bottom — this is now a real

(was a plain
) for crawler/accessibility semantics, and h2's UA-stylesheet top margin would otherwise push it out of this card's fixed height. */ margin: 0 0 4px; } .ad-card__price-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .ad-card__price { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--color-primary); min-width: 0; } .ad-card__nego { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; /* A darkened one-off, not var(--color-accent) directly — at this size the label is normal text under WCAG (nowhere near the "large text" 18.66px-bold cutoff), so it needs a 4.5:1 ratio against its own #FFE9E2 chip. The raw accent coral only clears ~2.5:1 there; this shade clears ~5.1:1 while staying visibly the same coral family. Scoped to this one chip rather than changing --color-accent, which is used in plenty of other places (larger text, icon fills) where the brighter coral is already fine. */ color: #B23A1D; background: #FFE9E2; padding: 2px 7px; border-radius: var(--radius-pill); flex-shrink: 0; white-space: nowrap; } .ad-card__divider { border-top: 1px solid var(--color-border); margin: 6px 0 6px; } .ad-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ad-card__loc, .ad-card__time { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--color-text-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* .ad-card__loc takes whatever space .ad-card__time (a short, fixed "2 hours ago"-style string) doesn't need, then truncates via its own min-width: 0 + .ad-card__loc-text's ellipsis — .ad-card__meta's justify-content: space-between above is what actually keeps them pinned to opposite ends of the row. (This used to split the space evenly instead, to center a verified-seller pill between them; that pill now lives on the card image only — see .ad-card__verified-overlay — so there's nothing left to center here.) */ .ad-card__loc { flex: 1; } .ad-card__time { flex: 0 0 auto; } .ad-card__loc i, .ad-card__time i { font-size: 10px; flex-shrink: 0; opacity: .7; } /* The location text is the one part of this row allowed to truncate — the pin icon beside it stays fixed-size so it's never squeezed. */ .ad-card__loc-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Small/large phones — a bit more breathing room ---- */ @media (min-width: 420px) { .ad-card { height: 136px; } .ad-card__media { width: 128px; min-width: 128px; } .ad-card__body { padding: 10px 12px; } .ad-card__eyebrow { font-size: 10px; } .ad-card__title { font-size: 13.5px; } .ad-card__price { font-size: 15.5px; } .ad-card__loc, .ad-card__time { font-size: 11px; } } /* ---- Tablet and up — restore the original balanced layout ---- */ @media (min-width: 600px) { .ad-card { height: 150px; } .ad-card__media { width: 200px; min-width: 200px; } .ad-card__placeholder { font-size: 32px; } .ad-card__cat-badge { top: 8px; right: 8px; width: 28px; height: 28px; font-size: 12px; } .ad-card__like { bottom: 8px; right: 8px; width: 30px; height: 30px; } .ad-card__like i { font-size: 13px; } .ad-card__condition-overlay { bottom: 8px; left: 8px; font-size: 10px; padding: 3px 9px; } .ad-card__body { padding: 14px 16px; } .ad-card__eyebrow { font-size: 11px; } .ad-card__title { font-size: 14.5px; } .ad-card__price { font-size: 17px; } .ad-card__nego { font-size: 10px; padding: 2px 8px; } .ad-card__divider { margin: 9px 0 8px; } .ad-card__loc, .ad-card__time { font-size: 12px; } } @media (min-width:901px) { .ad-card { height: 170px; } .ad-card__media { width: 240px; min-width: 240px; } .ad-card__body { padding: 16px 20px; } .ad-card__eyebrow { font-size: 11.5px; } .ad-card__title { font-size: 15.5px; } .ad-card__price { font-size: 18px; } .ad-card__loc, .ad-card__time { font-size: 12.5px; } } /* ------------------------------------------------------------ CATEGORY CARD (market stall style) ------------------------------------------------------------ */ .category-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none; } .category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--color-text); } .category-card .icon-wrap { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; } .category-card .label { font-weight: 600; font-size: 14.5px; color: var(--ink); line-height: 1.3; display: block; } .category-card .ad-count { font-size: 12px; font-weight: 500; color: var(--ink-faint); display: block; margin-top: -4px; } .category-card:nth-of-type(7n+1) .icon-wrap { background: var(--green-deep); } .category-card:nth-of-type(7n+2) .icon-wrap { background: var(--coral); } .category-card:nth-of-type(7n+3) .icon-wrap { background: var(--green-bright); } .category-card:nth-of-type(7n+4) .icon-wrap { background: var(--gold); } /* ------------------------------------------------------------ SITE HEADER ------------------------------------------------------------ */ /* Flat --footer-bg — the same solid, saturated green as .site-footer, by request: no gradient, no decorative star field, header and footer are now literally the same surface color top and bottom of the page. */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(16px, 5vw, 56px); height: 60px; background: var(--footer-bg); position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); } /* .site-logo is shared with the admin panel's TEXT logo (layouts/ admin.blade.php — "SriBazaar" next to a colored .dot, both with their own inline color), so it has to stay usable with no background/card of its own. */ .site-logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--color-text); } .site-logo .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); display: inline-block; } .site-logo .brand-accent { color: var(--color-primary); } /* The header's own image logo mark is dark navy linework (see .footer-logo-badge's comment in the FOOTER section) — same problem here as there, same fix: its own small light card so it doesn't disappear into the dark bar, layered on top of the shared .site-logo above rather than replacing it. */ .site-logo.header-logo-badge { display: inline-flex; background: var(--white); padding: 6px 14px; border-radius: 12px; /* Blue-tinted to match .footer-logo-badge's shadow — same light card, same brand tie-in, top and bottom of the page. */ box-shadow: 0 1px 4px rgba(0, 92, 32, .28); } .site-logo-img { height: 34px; width: auto; display: block; object-fit: contain; } .site-logo-img.footer-logo-img { height: 56px; } .nav-links { display: flex; align-items: center; gap: 24px; font-weight: 500; font-size: 14px; /* White, by explicit request (client wants white nav/footer text on the bright #00B53F bar, not dark ink) — this measures at 2.73:1, below the 4.5:1 AA body-text target, since #00B53F is bright enough that no white opacity clears it. Kept at high opacity anyway for the best legibility available within "must be white." */ color: rgba(255, 255, 255, .95); } .nav-links a:hover, .nav-links button:hover { color: #fff; } .nav-links a.is-active, .nav-links button.is-active { color: #fff; font-weight: 600; } /* The "Post Ad" nav trigger is a