`public/css/community.css`

80 lines
/* PawCircles community + marketplace styles */
.narrow{max-width:680px}
.user-pill{margin-left:.7em}
.user-pill a{color:#0f4d3a;font-weight:600;background:#e6efe9;padding:.35em .8em;border-radius:999px;font-size:.9em}
.login-link{margin-left:.5em;color:#475569;font-size:.95em}

.auth-form{background:#fff;border:1px solid #e6e1d6;border-radius:12px;padding:1.5em 2em;margin:1em 0}
.auth-form label{display:block;margin:.7em 0;font-weight:500}
.auth-form input,.auth-form select,.auth-form textarea{width:100%;padding:.55em .7em;border:1px solid #e6e1d6;border-radius:6px;font:inherit;background:#fff}
.auth-form button{background:#0f4d3a;color:#fff;padding:.85em 1.5em;border:0;border-radius:8px;font-weight:600;font-size:1em;cursor:pointer;margin-top:1em}
.auth-form button:hover{background:#0a3a2c}
.auth-form fieldset{border:1px solid #e6e1d6;border-radius:8px;padding:.7em 1em;margin:.7em 0}
.auth-form fieldset legend{padding:0 .4em;color:#6b6b6b;font-size:.9em}
.auth-form .ck{display:inline-flex;align-items:center;gap:.4em;font-weight:400;margin:.2em 1em .2em 0}
.auth-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:1em}
@media(max-width:520px){.auth-form .row2{grid-template-columns:1fr}}

.lst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1em;margin-top:1.5em}
.lst-card{display:block;background:#fff;border:1px solid #e6e1d6;border-radius:10px;padding:1em 1.2em;color:#1a1a1a}
.lst-card:hover{border-color:#0f4d3a;text-decoration:none;box-shadow:0 4px 14px rgba(15,77,58,.07)}
.lst-card h3{margin:.3em 0 .5em;font-size:1.1em;line-height:1.3}
.lst-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4em}
.lst-type{display:inline-block;background:#e6efe9;color:#0f4d3a;font-size:.8em;padding:.15em .55em;border-radius:4px;font-weight:600}
.lst-loc{color:#6b6b6b;font-size:.8em}
.lst-body{color:#475569;font-size:.92em;margin:.4em 0 .6em}
.lst-foot{display:flex;align-items:center;gap:.7em;font-size:.85em;color:#6b6b6b;margin-top:.6em;flex-wrap:wrap}
.lst-price{color:#c97a3e;font-size:1.05em}
.lst-author{margin-left:auto}

.listing-detail{background:#fff;border:1px solid #e6e1d6;border-radius:12px;padding:2em;margin:1em 0}
.listing-detail h1{margin:.4em 0}
.listing-detail .big-price{color:#c97a3e;font-size:2em;font-weight:700;margin:.3em 0}
.lst-body-full{margin-top:1em;line-height:1.7}
.contact-card{background:#fffaf3;border:1px solid #c97a3e;border-radius:8px;padding:1em 1.25em;margin-top:1.5em}

.comments{margin-top:2em}
.comment{background:#fff;border:1px solid #e6e1d6;border-radius:8px;padding:1em 1.2em;margin-bottom:.8em}
.comment p{margin:.3em 0 0}
.comment-form textarea{width:100%;padding:.6em;border:1px solid #e6e1d6;border-radius:6px;font:inherit}
.comment-form button{background:#0f4d3a;color:#fff;padding:.6em 1.2em;border:0;border-radius:6px;font-weight:600;cursor:pointer;margin-top:.5em}

.circle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1em;margin:1em 0 2em}
.circle-card{display:block;background:#fff;border:1px solid #e6e1d6;border-radius:8px;padding:1em 1.2em;color:#1a1a1a}
.circle-card:hover{border-color:#0f4d3a;text-decoration:none}
.circle-card strong{display:block;margin-bottom:.2em}
.circle-card small{color:#6b6b6b;font-size:.85em}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1em;margin:1.5em 0 2em}
.stats > div{background:#fff;border:1px solid #e6e1d6;border-radius:10px;padding:1.2em;text-align:center}
.stats > div strong{display:block;font-size:1.8em;color:#0f4d3a}
.stats > div span{color:#6b6b6b;font-size:.9em}

.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1em;margin:1em 0 2em}
.tier{background:#fff;border:1px solid #e6e1d6;border-radius:10px;padding:1.5em;text-align:center}
.tier strong{display:block;font-size:2em;color:#0f4d3a}
.tier span{display:block;color:#1a1a1a;font-weight:600;margin:.2em 0 .6em}
.tier p{color:#6b6b6b;font-size:.92em;margin:0}
.tier.featured{border:2px solid #c97a3e;background:#fffaf3}
.tier.featured strong{color:#c97a3e}

p.ok{background:#e6efe9;color:#0f4d3a;padding:1em;border-radius:8px}
p.empty{padding:2em;text-align:center;color:#6b6b6b;background:#fff;border:1px dashed #e6e1d6;border-radius:8px}

.match-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1em;margin-top:1em}
.match-card{background:#fff;border:1px solid #e6e1d6;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.match-img{height:180px;background-size:cover;background-position:center;background-color:#e6efe9}
.match-img-empty{display:flex;align-items:center;justify-content:center;font-size:4em;color:#0f4d3a;opacity:.4;font-weight:900}
.match-body{padding:1em 1.2em;flex:1;display:flex;flex-direction:column;gap:.4em}
.match-head{display:flex;align-items:center;justify-content:space-between}
.match-pct{font-size:.85em;font-weight:700;padding:.15em .55em;border-radius:4px}
.match-pct-top{background:#0f4d3a;color:#fff}
.match-pct-mid{background:#c97a3e;color:#fff}
.match-pct-low{background:#e6e1d6;color:#666}
.reasons{list-style:none;padding:0;margin:.4em 0;font-size:.85em;color:#475569}
.reasons li{padding:.15em 0}
.btn-friend{margin-top:auto;background:#0f4d3a;color:#fff;border:0;padding:.7em 1em;border-radius:8px;font-weight:600;font-size:.9em;cursor:pointer}
.btn-friend:hover{background:#0a3a2c}
.btn-friend:disabled{opacity:.6;cursor:default}
.muted.small{font-size:.85em}