/* ── Theme ──────────────────────────────────────────────────────────────── Only the palette changes between light and dark; every rule below uses the variables, so there is exactly one place to edit a colour. Resolution order (theme.js stamps data-theme on before first paint): 1. data-theme="light" | "dark" — explicit user choice 2. prefers-color-scheme — when the user hasn't chosen 3. dark — default ------------------------------------------------------------------------ */ :root{ --bg:#14121a; --panel:#1e1b26; --panel2:#262231; --line:#352f42; --ink:#ece9f2; --muted:#a49db5; --accent:#c2557a; --accent2:#8a6bd1; --ok:#4a9d6e; --warn:#c9963f; --bad:#c05555; --flash-ok-bg:#1c3327; --flash-ok-line:#2f6047; --flash-ok-ink:#bfe6cf; --flash-err-bg:#3a2020; --flash-err-line:#6d3535; --flash-err-ink:#f0c9c9; --flash-info-bg:#1f2740; --flash-info-line:#39466e; --flash-info-ink:#c9d6f5; --pill-want-bg:#282040; --pill-want-line:#5a4a80; --pill-want-ink:#d6c9f5; --pill-pend-bg:#332c1a; --pill-pend-line:#6b5a2c; --pill-pend-ink:#e8d7a8; --msg-mine:#3a2a3d; --shadow:none; --radius:10px; color-scheme:dark; } /* Follow the OS when the visitor hasn't picked a theme. */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#f4f2f7; --panel:#ffffff; --panel2:#f0edf5; --line:#ddd7e6; --ink:#1d1a24; --muted:#65607a; --accent:#a83c62; --accent2:#6b4fbb; --ok:#2f7d55; --warn:#9a6f1e; --bad:#a83c3c; --flash-ok-bg:#e4f4ea; --flash-ok-line:#a8d8bc; --flash-ok-ink:#1c5237; --flash-err-bg:#fbe6e6; --flash-err-line:#e0aeae; --flash-err-ink:#7c2626; --flash-info-bg:#e7ecfa; --flash-info-line:#b3c2e8; --flash-info-ink:#27386b; --pill-want-bg:#ece6fa; --pill-want-line:#c3b2ec; --pill-want-ink:#432d78; --pill-pend-bg:#fbf1d9; --pill-pend-line:#e0c98a; --pill-pend-ink:#6b5116; --msg-mine:#f6e3ee; --shadow:0 1px 2px rgba(25,20,40,.07); color-scheme:light; } } /* Explicit choice always wins, in both directions. */ :root[data-theme="light"]{ --bg:#f4f2f7; --panel:#ffffff; --panel2:#f0edf5; --line:#ddd7e6; --ink:#1d1a24; --muted:#65607a; --accent:#a83c62; --accent2:#6b4fbb; --ok:#2f7d55; --warn:#9a6f1e; --bad:#a83c3c; --flash-ok-bg:#e4f4ea; --flash-ok-line:#a8d8bc; --flash-ok-ink:#1c5237; --flash-err-bg:#fbe6e6; --flash-err-line:#e0aeae; --flash-err-ink:#7c2626; --flash-info-bg:#e7ecfa; --flash-info-line:#b3c2e8; --flash-info-ink:#27386b; --pill-want-bg:#ece6fa; --pill-want-line:#c3b2ec; --pill-want-ink:#432d78; --pill-pend-bg:#fbf1d9; --pill-pend-line:#e0c98a; --pill-pend-ink:#6b5116; --msg-mine:#f6e3ee; --shadow:0 1px 2px rgba(25,20,40,.07); color-scheme:light; } :root[data-theme="dark"]{ --bg:#14121a; --panel:#1e1b26; --panel2:#262231; --line:#352f42; --ink:#ece9f2; --muted:#a49db5; --accent:#c2557a; --accent2:#8a6bd1; --ok:#4a9d6e; --warn:#c9963f; --bad:#c05555; --flash-ok-bg:#1c3327; --flash-ok-line:#2f6047; --flash-ok-ink:#bfe6cf; --flash-err-bg:#3a2020; --flash-err-line:#6d3535; --flash-err-ink:#f0c9c9; --flash-info-bg:#1f2740; --flash-info-line:#39466e; --flash-info-ink:#c9d6f5; --pill-want-bg:#282040; --pill-want-line:#5a4a80; --pill-want-ink:#d6c9f5; --pill-pend-bg:#332c1a; --pill-pend-line:#6b5a2c; --pill-pend-ink:#e8d7a8; --msg-mine:#3a2a3d; --shadow:none; color-scheme:dark; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink); font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} main{max-width:1000px;margin:0 auto;padding:1.5rem 1rem 3rem} /* header / footer */ header.site{display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.85rem 1.25rem;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap} .brand{font-size:1.3rem;font-weight:700;color:var(--ink)} .brand span{color:var(--accent)} header.site nav{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap} header.site nav a{color:var(--muted);font-size:.95rem} header.site nav a:hover{color:var(--ink)} footer.site{border-top:1px solid var(--line);padding:1.5rem;text-align:center; color:var(--muted);font-size:.9rem;display:grid;gap:.4rem} .badge{background:var(--accent);color:#fff;border-radius:999px;padding:0 .4rem; font-size:.75rem;font-weight:700} /* blocks */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); padding:1.25rem;margin-bottom:1.25rem;box-shadow:var(--shadow)} .card h1,.card h2{margin-top:0} .muted{color:var(--muted)} .grid{display:grid;gap:1rem} .grid.cols2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid.cols3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} hr{border:0;border-top:1px solid var(--line);margin:1.25rem 0} /* forms */ label{display:block;margin:.85rem 0 .3rem;font-size:.9rem;color:var(--muted)} input[type=text],input[type=email],input[type=search],input[type=number], select,textarea{width:100%;padding:.6rem .7rem;background:var(--panel2); color:var(--ink);border:1px solid var(--line);border-radius:8px;font:inherit} input:focus,select:focus,textarea:focus{outline:2px solid var(--accent2);outline-offset:1px} textarea{min-height:8rem;resize:vertical} .btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:8px; padding:.6rem 1.1rem;font:inherit;font-weight:600;cursor:pointer} .btn:hover{filter:brightness(1.1);text-decoration:none} .btn.small{padding:.35rem .8rem;font-size:.9rem} .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)} .btn.ok{background:var(--ok)} .btn.bad{background:var(--bad)} .linkbtn{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;padding:0} .linkbtn:hover{color:var(--ink);text-decoration:underline} form.inline{display:inline} .row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center} /* flashes + pills */ .flash{padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;border:1px solid} .flash.ok{background:var(--flash-ok-bg);border-color:var(--flash-ok-line);color:var(--flash-ok-ink)} .flash.error{background:var(--flash-err-bg);border-color:var(--flash-err-line);color:var(--flash-err-ink)} .flash.info{background:var(--flash-info-bg);border-color:var(--flash-info-line);color:var(--flash-info-ink)} .pill{display:inline-block;padding:.12rem .6rem;border-radius:999px;font-size:.78rem; border:1px solid var(--line);background:var(--panel2);color:var(--muted)} .pill.offered{border-color:var(--flash-ok-line);background:var(--flash-ok-bg);color:var(--flash-ok-ink)} .pill.wanted{border-color:var(--pill-want-line);background:var(--pill-want-bg);color:var(--pill-want-ink)} .pill.pending{border-color:var(--pill-pend-line);background:var(--pill-pend-bg);color:var(--pill-pend-ink)} .pill.approved{border-color:var(--flash-ok-line);background:var(--flash-ok-bg);color:var(--flash-ok-ink)} .pill.rejected{border-color:var(--flash-err-line);background:var(--flash-err-bg);color:var(--flash-err-ink)} /* profiles + photos */ .profile-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;display:flex;flex-direction:column} .profile-card .thumb{aspect-ratio:4/3;background:var(--panel2);display:block; object-fit:cover;width:100%} .profile-card .body{padding:.85rem} .profile-card h3{margin:0 0 .25rem;font-size:1.05rem} .photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem} .photo-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px; border:1px solid var(--line);background:var(--panel2)} .photo-item{position:relative} .photo-item .pill{position:absolute;top:.4rem;left:.4rem} /* messages */ .thread-list{display:grid;gap:.6rem} .thread-row{display:flex;justify-content:space-between;gap:1rem;padding:.85rem; background:var(--panel2);border:1px solid var(--line);border-radius:8px} .msg{padding:.7rem .9rem;border-radius:10px;margin-bottom:.6rem;max-width:75%} .msg.mine{background:var(--msg-mine);margin-left:auto} .msg.theirs{background:var(--panel2)} .msg .meta{font-size:.75rem;color:var(--muted);margin-top:.3rem} /* tables */ table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:.55rem .5rem;border-bottom:1px solid var(--line);font-size:.93rem} th{color:var(--muted);font-weight:600} .notice{background:var(--panel2);border-left:3px solid var(--accent2); padding:.8rem 1rem;border-radius:0 8px 8px 0;margin:1rem 0} .stat{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:1rem;text-align:center} .stat b{display:block;font-size:1.8rem;line-height:1.1} /* theme toggle in the header */ .theme-btn{background:transparent;border:1px solid var(--line);color:var(--muted); border-radius:999px;padding:.28rem .75rem;font:inherit;font-size:.85rem;cursor:pointer; line-height:1.2;white-space:nowrap} .theme-btn:hover{color:var(--ink);border-color:var(--accent)} /* collapsible category sections (
/) */ details.cat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); margin-bottom:.75rem;box-shadow:var(--shadow)} details.cat > summary{cursor:pointer;padding:.9rem 1.15rem;font-weight:600;font-size:1.05rem; list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem; border-radius:var(--radius)} details.cat > summary::-webkit-details-marker{display:none} details.cat > summary::after{content:"\25BE";color:var(--muted);transition:transform .15s ease; font-size:.85rem} details.cat[open] > summary::after{transform:rotate(180deg)} details.cat > summary:hover{color:var(--accent)} details.cat > summary:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px} details.cat .cat-body{padding:0 1.15rem 1.1rem} details.cat .cat-count{font-weight:400;font-size:.82rem;color:var(--muted)}