/* Tradely — black / white / neon green */ :root { --bg: #09090b; --surface: #121215; --surface-2: #1a1a1f; --border: #26262c; --text: #f4f4f6; --muted: #8b8b94; /* One accent, used for both text and fills: at 7.7:1 on --bg it needs no lighter sibling, and a second near-identical green would only invite drift. Everything tinted runs through these four, so re-declaring them on recolours the entire page — which is how the losing state turns red. */ --accent-rgb: 83, 181, 89; --accent: #53B559; --accent-hover: #63c869; --accent-soft: rgba(83, 181, 89, 0.14); --accent-line: rgba(83, 181, 89, 0.4); --on-accent: #08150a; /* text ON the accent — white would be 2.6:1 */ --radius: 12px; } /* A losing trade repaints the whole accent red. --accent-soft and --accent-line are spelled out rather than derived, because a custom property that references another one resolves against the element it is DECLARED on (:root) and would not pick up this override. */ body.glow-lose { --accent-rgb: 242, 85, 90; --accent: #F2555A; --accent-hover: #ff6f74; --accent-soft: rgba(242, 85, 90, 0.14); --accent-line: rgba(242, 85, 90, 0.4); --on-accent: #1b0406; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* the page colour lives on so the win-glow layer (z-index:-1) can sit between it and the content — see .page-glow */ html { background: var(--bg); } body { background: transparent; color: var(--text); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; min-height: 100vh; } /* --- win glow --------------------------------------------------------- A winning trade lights the whole page from the edges. It sits BEHIND all content (z-index:-1), so cards, slots and item art keep their own dark surfaces and only the surrounding page glows. */ .page-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.55s ease; background: radial-gradient(120% 70% at 50% 0%, rgba(var(--accent-rgb), 0.20), transparent 62%), radial-gradient(120% 65% at 50% 100%, rgba(var(--accent-rgb), 0.16), transparent 60%), radial-gradient(70% 100% at 0% 50%, rgba(var(--accent-rgb), 0.13), transparent 55%), radial-gradient(70% 100% at 100% 50%, rgba(var(--accent-rgb), 0.13), transparent 55%), rgba(var(--accent-rgb), 0.05); } body.glow-win .page-glow, body.glow-lose .page-glow { opacity: 1; } /* a soft halo on the verdict card itself, so the result reads as the source */ body.glow-win .verdict, body.glow-lose .verdict { box-shadow: 0 0 60px rgba(var(--accent-rgb), 0.22); border-color: var(--accent-line); } .verdict { transition: box-shadow 0.55s ease, border-color 0.55s ease; } @media (prefers-reduced-motion: reduce) { .page-glow, .verdict { transition: none; } } a { color: inherit; text-decoration: none; } /* buttons/inputs do NOT inherit colour from body by default — without this they fall back to the UA default (black) and vanish on our dark background. */ button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } ::placeholder { color: var(--muted); opacity: 1; } .wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; } /* the admin is a work surface, not a reading page — let the values table use the screen instead of being squeezed into the public site's column */ .wrap.wide { max-width: 1600px; } /* header */ header { border-bottom: 1px solid var(--border); background: rgba(9, 9, 11, 0.85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 40; } .nav { display: flex; align-items: center; gap: 22px; height: 60px; } .logo { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; } .logo span { color: var(--accent); } .nav a.link { color: var(--muted); font-weight: 500; padding: 6px 2px; } .nav a.link:hover, .nav a.link.active { color: var(--text); } .nav .spacer { flex: 1; } .game-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; } .game-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); padding: 9px 16px; font-weight: 600; transition: 0.15s; } .btn:hover { border-color: var(--accent); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn.ghost { background: transparent; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } /* hero */ .hero { text-align: center; padding: 72px 0 48px; } .hero h1 { font-size: 44px; letter-spacing: -0.03em; margin: 0 0 12px; } .hero h1 em { font-style: normal; color: var(--accent); } .hero p { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 auto 28px; } .hero .cta { display: flex; gap: 12px; justify-content: center; } /* cards / grids */ .grid { display: grid; gap: 14px; } .games-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding-bottom: 56px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; } .game-card { display: block; transition: 0.15s; position: relative; } .game-card:hover { border-color: var(--accent); transform: translateY(-2px); } .game-card.soon { opacity: 0.55; pointer-events: none; } .game-thumb { width: 56px; height: 56px; border-radius: 14px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 12px; } .game-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .game-thumb.ph { background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 24px; } .game-card h3 { margin: 0 0 4px; font-size: 17px; } .game-card p { margin: 0; color: var(--muted); font-size: 13px; } .badge-soon { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; } .badge-live { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; } .section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 34px 0 14px; } /* --- calculator: two 3x3 boards with the swap control between them --- */ .trade-layout { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: start; margin-top: 24px; } @media (max-width: 880px) { .trade-layout { grid-template-columns: 1fr; gap: 16px; } } .side-head { text-align: center; font-weight: 800; font-size: 16px; margin-bottom: 12px; } .slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px; } .slot { position: relative; aspect-ratio: 1; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px; overflow: hidden; color: var(--text); font: inherit; text-align: center; transition: 0.14s; } .slot.empty { border-style: dashed; opacity: 0.45; } .slot.add { border-style: dashed; cursor: pointer; color: var(--muted); } .slot.add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .slot.add .plus { font-size: 34px; font-weight: 300; line-height: 1; } .slot.filled { cursor: pointer; } .slot.filled:hover { border-color: var(--accent); } /* A filled slot rests as artwork plus two small badges. Name and value slide in only under the pointer, so a nine-item board reads as a shelf of items rather than a wall of text. */ .slot .ico { width: 100%; height: 100%; border-radius: 9px; background: transparent; } .slot .ico.ph { background: var(--accent-soft); font-size: 34px; } .slot .s-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 5px 6px; background: linear-gradient(to top, rgba(9, 9, 11, 0.95) 45%, transparent); opacity: 0; transform: translateY(6px); transition: opacity 0.16s, transform 0.16s; } .slot:hover .s-meta, .slot:focus-within .s-meta { opacity: 1; transform: none; } .slot .s-name { font-size: 11px; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slot .s-val { font-size: 12px; font-weight: 800; color: var(--accent); margin-top: 1px; } /* the ✕ takes over the variant badge's corner on hover */ .slot .s-x { position: absolute; top: 4px; right: 4px; background: rgba(9, 9, 11, 0.8); border: none; color: var(--text); font-size: 11px; line-height: 1; padding: 4px 5px; border-radius: 7px; opacity: 0; transition: opacity 0.16s; } .slot:hover .s-x, .slot:focus-within .s-x { opacity: 1; } .slot .s-x:hover { background: var(--accent); color: var(--on-accent); } .slot .s-qty { position: absolute; top: 5px; left: 5px; background: rgba(9, 9, 11, 0.8); color: var(--text); border-radius: 7px; font-size: 11px; font-weight: 800; padding: 2px 7px; line-height: 1.35; } .slot .s-var { position: absolute; top: 5px; right: 5px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); border-radius: 999px; width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; transition: opacity 0.16s; } .slot:hover .s-var, .slot:focus-within .s-var { opacity: 0; } /* --- per-side value + demand, between the heading and the board --- */ .side-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; } .side-stats .stat { display: flex; align-items: center; gap: 10px; min-width: 0; } .side-stats .stat-ico { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--accent-soft); color: var(--accent); } .side-stats .k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .side-stats .v { font-size: 17px; font-weight: 800; line-height: 1.2; } .side-stats .v.accent { color: var(--accent); } .trade-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 120px; } @media (max-width: 880px) { .trade-mid { flex-direction: row; justify-content: center; padding-top: 0; } } .trade-mid .lbl { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: var(--muted); } .swap-round { width: 52px; height: 52px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); transition: 0.15s; } .swap-round:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .swap-round svg { width: 22px; height: 22px; } .side-panel { min-height: 220px; } .side-panel h2 { margin: 0 0 2px; font-size: 16px; } .side-panel .sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; } .swap-col { display: flex; align-items: center; justify-content: center; padding-top: 90px; } .swap-btn { width: 40px; height: 40px; border-radius: 50%; padding: 0; font-size: 17px; } .item-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; } .item-row .name { font-weight: 600; font-size: 14px; } .item-row .meta { font-size: 12px; color: var(--muted); } .item-row .grow { flex: 1; min-width: 0; } .item-row .val { font-weight: 700; font-size: 14px; color: var(--accent); white-space: nowrap; } .perm-toggle { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); } .perm-toggle.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } .qty { display: inline-flex; align-items: center; gap: 6px; } .qty button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text); padding: 0; line-height: 1; } .qty span { min-width: 14px; text-align: center; font-weight: 700; font-size: 13px; } .rm { background: none; border: none; color: var(--muted); font-size: 16px; padding: 2px 6px; } .rm:hover { color: #fff; } .add-slot { width: 100%; border: 1px dashed var(--border); background: transparent; color: var(--muted); border-radius: 10px; padding: 12px; font-weight: 600; } .add-slot:hover { border-color: var(--accent); color: var(--accent); } .side-total { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); } .side-total b { color: var(--text); font-size: 16px; } /* verdict */ .verdict { margin-top: 18px; text-align: center; padding: 22px; } .verdict .word { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; } /* WIN and LOSE both use the accent — which is green or red depending on which one it is. Only the neutral FAIR verdict stays plain white. */ .verdict.win .word, .verdict.lose .word { color: var(--accent); } .verdict.fair .word { color: var(--text); } .verdict .detail { color: var(--muted); margin-top: 4px; font-size: 14px; } /* the profit/loss line under the word follows the verdict; the empty-state instruction ("Add items to both sides") is a .fair verdict, so it stays muted */ .verdict.win .detail, .verdict.lose .detail { color: var(--accent); } .verdict .bar { height: 8px; border-radius: 999px; background: var(--surface-2); margin: 16px auto 0; max-width: 420px; overflow: hidden; display: flex; } .verdict .bar .fill { background: var(--accent); transition: width 0.3s; } .verdict .bar .rest { background: #3a3a42; flex: 1; } /* picker overlay */ .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 60; display: none; align-items: flex-start; justify-content: center; padding: 60px 16px; } .overlay.open { display: flex; } .picker { width: 100%; max-width: 880px; max-height: 82vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; } .picker-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: center; } .picker-head input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 9px 12px; font: inherit; outline: none; } .picker-head input:focus { border-color: var(--accent); } .chips { display: flex; gap: 8px; padding: 10px 16px 4px; flex-wrap: wrap; } .chip { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); } .chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } .chip b { font-weight: 800; opacity: 0.75; margin-left: 3px; } .picker-list { overflow-y: auto; padding: 12px 16px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; } /* Picker cards: artwork first, name and item type underneath. The art is set a little smaller here than in a calculator slot, so an item visibly "grows" into its slot once added. */ .pick-item { text-align: left; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 10px; transition: 0.12s; display: flex; flex-direction: column; gap: 2px; } .pick-item:hover { border-color: var(--accent); transform: translateY(-2px); } .pick-item .pi-art { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; margin-bottom: 6px; } .pick-item .pi-art .ico { width: 72%; height: 72%; background: transparent; border-radius: 10px; } .pick-item .pi-art .ico.ph { background: var(--accent-soft); font-size: 30px; } .pick-item .pi-name { font-weight: 700; font-size: 13.5px; line-height: 1.25; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pick-item .pi-cat { font-size: 11.5px; color: var(--muted); } /* --- picker step 2: configure the chosen item --- */ /* One panel, two views: .configuring swaps the list out for the config form. */ .cfg { display: none; padding: 16px; flex-direction: column; gap: 6px; } .overlay.configuring .picker-list, .overlay.configuring .chips { display: none; } .overlay.configuring .cfg { display: flex; } .overlay.configuring .picker-head input { pointer-events: none; opacity: 0.55; } .cfg-back { align-self: flex-start; background: none; border: none; color: var(--muted); font-weight: 600; font-size: 13.5px; padding: 2px 0 10px; } .cfg-back:hover { color: var(--text); } .cfg-item { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; } .cfg-item .ci-name { font-weight: 700; font-size: 17px; } .cfg-item .ci-meta { color: var(--muted); font-size: 13px; margin-top: 2px; } .cfg-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 16px 0 7px; } .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; } .seg-opt { border: none; background: transparent; color: var(--muted); padding: 11px 8px; border-radius: 9px; font-weight: 700; font-size: 14.5px; transition: 0.14s; } .seg-opt:hover:not(:disabled):not(.on) { color: var(--text); } .seg-opt.on { background: var(--accent); color: var(--on-accent); } .seg-opt:disabled { opacity: 0.32; cursor: not-allowed; } .stepper { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .stepper button { background: transparent; border: none; color: var(--text); font-size: 21px; line-height: 1; padding: 13px 0; transition: 0.14s; } .stepper button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); } .stepper button:disabled { opacity: 0.3; cursor: not-allowed; } .stepper span { text-align: center; font-weight: 800; font-size: 18px; } .cfg-add { width: 100%; margin-top: 22px; padding: 14px; font-size: 15px; } /* item thumbnails (uploaded image, or the item's initial as a fallback) */ .ico { --ico: 30px; width: var(--ico); height: var(--ico); flex: none; border-radius: 8px; overflow: hidden; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; } .ico img { width: 100%; height: 100%; object-fit: contain; display: block; } .ico.ph { background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: calc(var(--ico) * 0.44); line-height: 1; } .icell { display: flex; align-items: center; gap: 11px; } .icell .itext { min-width: 0; } .x-btn { background: none; border: none; color: var(--muted); font-size: 20px; padding: 4px 8px; } /* trade ads */ .trades-head { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 16px; flex-wrap: wrap; gap: 12px; } .trades-head h1 { margin: 0; font-size: 26px; letter-spacing: -0.02em; } .ad-card { margin-bottom: 12px; } .ad-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; } .ad-top .who { font-weight: 700; font-size: 14px; } .ad-top .when { color: var(--muted); font-size: 12px; } .ad-top .fair-badge { margin-left: auto; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); } .fair-badge.deal { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } .ad-sides { display: grid; grid-template-columns: 1fr 26px 1fr; gap: 10px; align-items: center; } @media (max-width: 640px) { .ad-sides { grid-template-columns: 1fr; } .ad-arrow { transform: rotate(90deg); } } .ad-side { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-height: 62px; } .ad-side .lab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 7px; } .ad-arrow { text-align: center; color: var(--accent); font-size: 17px; } .ad-item-chip { display: inline-flex; align-items: center; gap: 5px; margin: 0 6px 6px 0; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; font-size: 12.5px; font-weight: 600; } .ad-item-chip .p { color: var(--accent); font-size: 10.5px; font-weight: 800; } .ad-side .tot { margin-top: 4px; font-size: 12.5px; color: var(--muted); } .ad-side .tot b { color: var(--accent); } .ad-note { margin-top: 10px; color: var(--muted); font-size: 13px; border-left: 2px solid var(--border); padding-left: 10px; } /* create ad form */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } } .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--muted); } .field input, .field textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 9px 12px; font: inherit; outline: none; } .field input:focus, .field textarea:focus { border-color: var(--accent); } .form-msg { font-size: 13px; margin-top: 10px; min-height: 18px; } .form-msg.err { color: #f0a5a5; } .form-msg.ok { color: var(--accent); } .empty { text-align: center; color: var(--muted); padding: 40px 0; } footer { border-top: 1px solid var(--border); margin-top: 70px; padding: 26px 0; color: var(--muted); font-size: 13px; text-align: center; } footer b { color: var(--text); } /* game switcher */ .switcher { position: relative; } .switch-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 7px 12px; } .switch-btn:hover { border-color: var(--accent); } .g-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none; overflow: hidden; } .g-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .g-avatar.ph { background: var(--accent-soft); color: var(--accent); } .switch-txt { text-align: left; line-height: 1.15; } .switch-txt b { display: block; font-size: 14px; } .switch-txt small { color: var(--muted); font-size: 11.5px; } .switch-btn .caret { color: var(--muted); font-size: 11px; } .switch-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; min-width: 270px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.5); } .switch-menu.open { display: block; } .switch-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 8px 10px 6px; } .switch-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; line-height: 1.15; } .switch-item:hover { background: var(--surface-2); } .switch-item.on { background: var(--surface-2); } .switch-item b { display: block; font-size: 14.5px; } .switch-item small { color: var(--muted); font-size: 12px; } .switch-item .tick { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; } .links { display: flex; align-items: center; gap: 18px; } .link .wl { color: var(--accent); font-weight: 800; } @media (max-width: 760px) { /* the four section links do not fit beside the logo and switcher on a phone, so let the header wrap and give them their own centred row */ .nav { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 12px; } .links { gap: 14px; font-size: 13.5px; width: 100%; justify-content: center; } .switch-txt small { display: none; } } /* values table */ .values-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .values-tools input { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 8px 12px; font: inherit; outline: none; min-width: 220px; } .values-tools input:focus { border-color: var(--accent); } .vtable { width: 100%; border-collapse: collapse; } .vtable th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); } .vtable td { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 14px; } .vtable tr:hover td { background: var(--surface); } .vtable .iname { font-weight: 700; } .vtable .irar { color: var(--muted); font-size: 12px; } .vtable .ival { font-weight: 700; color: var(--accent); } .vtable .num { text-align: right; white-space: nowrap; } .pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); } .pill.hi { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } /* giveaways */ .gv-card { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .gv-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); flex: none; display: flex; align-items: center; justify-content: center; font-size: 20px; } .gv-card h3 { margin: 0 0 2px; font-size: 16px; } .gv-card .gv-meta { color: var(--muted); font-size: 13px; } .gv-card .grow { flex: 1; min-width: 0; } .gv-right { text-align: right; flex: none; } .gv-status { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; } .gv-status.active { background: var(--accent-soft); color: var(--accent); } .gv-status.ended { border: 1px solid var(--border); color: var(--muted); } .gv-count { color: var(--muted); font-size: 12px; margin-top: 5px; } /* admin */ .admin-tabs { display: flex; gap: 8px; margin: 22px 0 16px; flex-wrap: wrap; } .atable input, .atable select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 13px; outline: none; width: 100%; } .atable input:focus, .atable select:focus { border-color: var(--accent); } .atable td { padding: 6px 6px; } .atable .num input { text-align: right; } /* Column sizing: the item NAME gets whatever is left over, everything else is only as wide as its content needs. Previously every column shared the width equally, so long names were clipped to "Drago…" beside half-empty cells. */ .atable { table-layout: fixed; width: 100%; } .atable col.c-img { width: 74px; } .atable col.c-name { width: 210px; } .atable col.c-cat, .atable col.c-rarity { width: 130px; } .atable col.c-val, .atable col.c-perm, .atable col.c-beli { width: 120px; } .atable col.c-allow { width: 86px; } .atable col.c-demand { width: 118px; } .atable col.c-note { width: auto; } .atable col.c-act { width: 150px; } .atable th, .atable td { overflow: hidden; } .atable input, .atable select { min-width: 0; } .mini { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; } .login-box { max-width: 380px; margin: 90px auto; text-align: center; } .login-box input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 11px 14px; font: inherit; outline: none; margin: 14px 0; } .login-box input:focus { border-color: var(--accent); } .saved-flash { color: var(--accent); font-size: 12.5px; } /* admin: image cell */ .img-cell { display: flex; align-items: center; gap: 6px; } .img-drop { width: 40px; height: 40px; border-radius: 9px; border: 1px dashed var(--border); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: var(--surface-2); color: var(--muted); font-size: 11px; overflow: hidden; flex: none; } .img-drop:hover { border-color: var(--accent); color: var(--accent); } .img-drop img { width: 100%; height: 100%; object-fit: contain; } .img-drop input { display: none; } .img-x { background: none; border: none; color: var(--muted); font-size: 13px; padding: 2px 4px; } .img-x:hover { color: #fff; } /* --- in-game trade restriction banner (Beli), separate from the W/L verdict --- */ .restrict { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; font-weight: 600; } .restrict .r-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; } .restrict .r-text { flex: 1; min-width: 200px; } .restrict .r-bar { width: 160px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; flex: none; } .restrict .r-fill { display: block; height: 100%; background: var(--muted); transition: width 0.25s; } /* idle / unknown stay neutral — we only colour when we actually know */ .restrict.idle, .restrict.unknown { color: var(--muted); } /* Nothing to report: the strip is only still here to hold the Fix button, so the status dot and the empty text column stop taking up room. */ .restrict.quiet { justify-content: flex-end; } .restrict.quiet .r-dot, .restrict.quiet .r-text { display: none; } .restrict.exempt { color: var(--text); } .restrict.exempt .r-dot { background: var(--text); } .restrict.ok { color: #53B559; border-color: rgba(83, 181, 89, 0.4); } .restrict.ok .r-dot, .restrict.ok .r-fill { background: #53B559; } .restrict.blocked { color: #F2555A; border-color: rgba(242, 85, 90, 0.4); } .restrict.blocked .r-dot, .restrict.blocked .r-fill { background: #F2555A; } /* --- fix an impossible trade --- */ .fix-panel { margin-top: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--radius); } .fix-head { font-weight: 700; font-size: 14px; margin-bottom: 10px; } .fix-why { color: var(--muted); font-size: 13.5px; } .fix-opt { display: block; width: 100%; text-align: left; margin-bottom: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--text); transition: 0.14s; } .fix-opt:hover { border-color: var(--accent); } .fix-opt:last-child { margin-bottom: 0; } .fix-items { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-bottom: 2px; } /* Separates what comes off from what goes on in a swap. It carries the whole meaning of the row, so it is given air on both sides rather than tucked in. */ .fix-arrow { padding: 0 9px; color: var(--muted); font-weight: 700; } .fix-meta { color: var(--muted); font-size: 12.5px; } /* --- trading tips, tucked into the corner --- */ .tips { position: fixed; right: 18px; bottom: 18px; width: 300px; max-width: calc(100vw - 36px); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); z-index: 30; overflow: hidden; } .tips-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .tips-x { background: none; border: none; color: var(--muted); font-size: 12px; padding: 2px 4px; } .tips-x:hover { color: var(--text); } .tips-body { max-height: 46vh; overflow-y: auto; padding: 6px; } .tip { display: flex; gap: 10px; align-items: flex-start; padding: 8px; } .tip b { display: block; font-size: 13px; } .tip .t-note { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; } /* on a phone it stops floating and simply sits at the end of the page */ @media (max-width: 700px) { .tips { position: static; width: auto; margin: 18px 20px 0; box-shadow: none; } } /* ---------- who is trading: header chip, sign-in panel, locked ads ---------- */ .face { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); border: 1px solid var(--border); } .face.ph { display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px; } .face.big { width: 74px; height: 74px; font-size: 28px; } .who-slot { flex: none; margin-left: 4px; } .who-btn { padding: 7px 14px; font-size: 13px; } .who-me { position: relative; } .who-chip { display: flex; align-items: center; gap: 9px; background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px 4px 4px; color: var(--text); cursor: pointer; max-width: 190px; } .who-chip:hover { border-color: var(--accent); } .who-chip-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; overflow: hidden; } .who-chip-txt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .who-chip-txt small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 860px) { .who-chip-txt { display: none; } .who-chip { padding: 4px; } } .who-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); } .who-menu.open { display: block; } .who-menu-item { display: block; width: 100%; text-align: left; padding: 9px 11px; border-radius: 8px; background: none; border: none; color: var(--text); font-size: 13px; cursor: pointer; } .who-menu-item:hover { background: var(--surface-2); color: var(--accent); } .who-box { position: relative; width: 100%; max-width: 420px; padding: 26px 24px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; } .who-box .x-btn { position: absolute; top: 10px; right: 10px; } .who-box h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.01em; } .who-sub { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; } .who-box input { width: 100%; padding: 11px 13px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font-size: 15px; } .who-box input:focus { outline: none; border-color: var(--accent); } .who-go { width: 100%; margin-top: 14px; } .who-msg { min-height: 18px; font-size: 12.5px; color: var(--muted); margin-top: 8px; } .who-msg.err { color: #F2555A; } .who-msg.ok { color: var(--accent); } .who-step + .who-step, .overlay.confirming .who-step:first-of-type { display: none; } .overlay.confirming .who-step + .who-step { display: block; } .who-card { display: flex; align-items: center; gap: 14px; margin: 4px 0 2px; padding: 14px; background: var(--surface-2); border: 1px solid var(--accent-line); border-radius: 12px; } .who-names { display: flex; flex-direction: column; gap: 3px; overflow: hidden; } .who-names b { font-size: 17px; } .who-names small { color: var(--muted); font-size: 13px; } .who-actions { display: flex; gap: 10px; margin-top: 6px; } .who-actions .btn { flex: 1; } .who-fine { margin: 14px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; } .posting-as { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; color: var(--muted); } .posting-as b { color: var(--text); } .posting-as small { color: var(--muted); } .posting-as:empty { display: none; } .ad-top .avatar { overflow: hidden; } .ad-top .avatar img { width: 100%; height: 100%; object-fit: cover; } .ad-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .btn.sm { padding: 7px 14px; font-size: 13px; } .send-msg { font-size: 12.5px; color: var(--muted); } /* A locked card holds no data at all — these boxes are empty by construction. */ .ad-card.locked { filter: blur(5px); opacity: 0.5; pointer-events: none; user-select: none; } .ad-card.locked .avatar, .ad-card.locked .who, .ad-card.locked .when, .ad-card.locked .fair-badge, .ad-card.locked .ad-item-chip, .ad-card.locked .tot { background: var(--surface-2); border-radius: 6px; color: transparent; } .ad-card.locked .who { width: 120px; height: 13px; } .ad-card.locked .when { width: 70px; height: 11px; margin-top: 5px; } .ad-card.locked .fair-badge { width: 90px; height: 22px; border-color: transparent; } .ad-card.locked .ad-item-chip { display: inline-block; width: 92px; height: 26px; margin-right: 6px; } .ad-card.locked .tot { width: 74px; height: 12px; margin-top: 8px; } .card.gate { text-align: center; padding: 22px; border-color: var(--accent-line); } .card.gate b { display: block; font-size: 16px; margin-bottom: 6px; } .card.gate p { margin: 0 auto 16px; max-width: 430px; color: var(--muted); font-size: 13.5px; line-height: 1.6; } /* ---------- messages, offers, ad actions ---------- */ .badge { display: none; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; } .badge.on { display: inline-block; } /* every Roblox face is a link to that profile */ a.avatar { text-decoration: none; overflow: hidden; transition: box-shadow 0.15s, transform 0.15s; } a.avatar:hover { box-shadow: 0 0 0 2px var(--accent); transform: translateY(-1px); } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar .ph-letter { font-weight: 800; } .avatar.sm { width: 30px; height: 30px; font-size: 12px; } .ad-card.closed { opacity: 0.72; } .traded { font-size: 13px; font-weight: 700; color: var(--accent); } .msg-layout { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; margin-bottom: 30px; } @media (max-width: 820px) { .msg-layout { grid-template-columns: 1fr; } } .convo-list { display: flex; flex-direction: column; gap: 8px; } .convo-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-align: left; } .convo-row:hover { border-color: var(--accent-line); } .convo-row.on { border-color: var(--accent); background: var(--surface-2); } .convo-txt { display: flex; flex-direction: column; gap: 2px; overflow: hidden; flex: 1; } .convo-txt b { font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .convo-txt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .convo-row.unread .convo-txt small { color: var(--text); } .pill { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; } .pill.done { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .thread { padding: 0; display: flex; flex-direction: column; min-height: 460px; } .thread-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .th-who { display: flex; flex-direction: column; gap: 2px; } .th-who b { font-size: 15px; } .th-who a.at { color: var(--muted); font-size: 12.5px; } .th-who a.at:hover { color: var(--accent); } .th-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } .thread-ad { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .thread-ad .lab { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); } .ad-mini { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 7px 0 4px; } .ad-mini .k { font-size: 11px; color: var(--muted); margin-right: 6px; } .ad-mini .arrow { color: var(--accent); } .ad-item-chip.mini { font-size: 11.5px; padding: 3px 8px; } .ad-jump { font-size: 12px; color: var(--muted); } .ad-jump:hover { color: var(--accent); } .msgs { flex: 1; overflow-y: auto; max-height: 46vh; padding: 16px; display: flex; flex-direction: column; gap: 9px; } .bubble { max-width: 74%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; word-break: break-word; } .bubble .b-text { display: block; } .bubble .b-when { display: block; font-size: 10.5px; opacity: 0.65; margin-top: 3px; } .bubble.mine { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; } .bubble.theirs { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .sys { align-self: center; text-align: center; font-size: 12px; color: var(--muted); padding: 4px 12px; max-width: 82%; } .thread-empty { margin: auto; padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13.5px; } .composer { display: flex; gap: 9px; padding: 12px 14px; border-top: 1px solid var(--border); } .composer input { flex: 1; padding: 10px 13px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font-size: 14px; } .composer input:focus { outline: none; border-color: var(--accent); } .card.empty.sm { padding: 18px; font-size: 13px; } /* ---------- value list: category tabs, mode, filters, cards ---------- */ .cat-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 26px 0 18px; } .cat-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-weight: 700; font-size: 14px; } .cat-tab:hover { color: var(--text); border-color: var(--accent-line); } .cat-tab.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .tab-n { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--surface-2); color: var(--muted); } .cat-tab.on .tab-n { background: rgba(0, 0, 0, 0.22); color: var(--on-accent); } .mode-card { text-align: center; padding: 20px 18px; margin-bottom: 16px; } .mode-title { font-size: 15.5px; font-weight: 700; margin-bottom: 12px; } .mode-seg { max-width: 270px; margin: 0 auto; } .mode-hint { margin: 12px auto 0; max-width: 480px; color: var(--muted); font-size: 12.5px; line-height: 1.6; } .mode-hint .k-reg { color: var(--text); font-weight: 600; } .mode-hint .k-perm { color: var(--accent); font-weight: 600; } .v-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .v-search { position: relative; flex: 1; min-width: 240px; } .v-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; } .v-search input { width: 100%; padding: 13px 14px 13px 42px; font: inherit; font-size: 14.5px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; outline: none; } .v-search input:focus { border-color: var(--accent); } .v-clear, .v-filter { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14px; } .v-clear svg, .v-filter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .v-filter-wrap { position: relative; } .filter-panel { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 250px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); } .filter-panel.open { display: block; } .fp-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 0 0 8px; } .fp-title + select { margin-bottom: 2px; } .fp-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; } .fp-opt { display: flex; align-items: center; gap: 9px; padding: 6px 4px; font-size: 13.5px; cursor: pointer; border-radius: 7px; } .fp-opt:hover { background: var(--surface-2); } .fp-opt input { accent-color: var(--accent); width: 15px; height: 15px; } .rar-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); } .filter-panel select { width: 100%; padding: 9px 10px; font: inherit; font-size: 13.5px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 9px; } .v-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .v-chips:empty { display: none; } .v-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; cursor: pointer; background: transparent; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 12.5px; } .v-chip:hover { border-color: var(--accent); } .v-chip .x { color: var(--muted); font-size: 11px; } .value-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; margin-bottom: 30px; } .vcard { display: flex; flex-direction: column; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; } .vcard:hover { border-color: var(--accent-line); } .vc-art { position: relative; display: flex; align-items: center; justify-content: center; height: 128px; margin-bottom: 10px; } .vc-art .ico { background: transparent; border-radius: 0; } .rar-badge { position: absolute; top: 0; right: 0; padding: 3px 9px; border-radius: 7px; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; color: #fff; background: #52525B; /* common / gamepass / anything unlabelled */ } .rar-badge.mythical { background: #C62828; } .rar-badge.legendary { background: #9A5B00; } .rar-badge.rare { background: #1D4ED8; } .rar-badge.uncommon { background: #15803D; } .rar-badge.limited { background: #0E7490; } /* Grow A Garden tiers sit above Mythical: Divine, then Prismatic. Epic is a Legendary-adjacent band a few pets carry. */ .rar-badge.divine { background: #6D28D9; } .rar-badge.prismatic { background: #BE185D; } .rar-badge.epic { background: #7C3AED; } .rar-dot.mythical { background: #E0575C; } .rar-dot.legendary { background: #D9902B; } .rar-dot.rare { background: #5B8DEF; } .rar-dot.uncommon { background: #43A863; } .rar-dot.common { background: #8B8B94; } .vc-name { margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .vc-seg { grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 9px; margin-bottom: 10px; } .vc-seg .seg-opt { padding: 6px 4px; font-size: 11.5px; border-radius: 7px; } .vc-stats { margin: 0; border: 1px solid var(--border); border-radius: 10px; padding: 4px 11px; } .vc-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; } .vc-stats > div + div { border-top: 1px solid var(--border); } .vc-stats dt { color: var(--muted); font-size: 12.5px; } .vc-stats dd { margin: 0; font-size: 13.5px; font-weight: 800; } .vc-stats .v-num { color: var(--text); } .vc-stats .dem-veryhigh, .vc-stats .dem-high { color: var(--accent); } .vc-stats .dem-medium { color: #E8B341; } .vc-stats .dem-low, .vc-stats .dem-verylow { color: #F2555A; } .vc-foot { margin-top: 10px; color: var(--muted); font-size: 11px; } /* The value grid runs wider than the reading column, so its header and footer have to widen with it or the nav sits visibly narrower than the cards. */ body.wide-page header .wrap, body.wide-page footer .wrap { max-width: 1600px; } /* A chip in a Fix suggestion that is coming OFF a side, not going on. */ .ad-item-chip.drop { border-color: rgba(242, 85, 90, 0.45); color: #F2555A; } .ad-item-chip.drop .nm { text-decoration: line-through; text-decoration-thickness: 1px; } /* Ending a chat is a real consequence, so the control is quiet until hovered. */ .end-btn { padding: 6px 12px; font-size: 12px; color: var(--muted); } .end-btn:hover { color: #F2555A; border-color: rgba(242, 85, 90, 0.5); } .ended-bar { padding: 14px 16px; border-top: 1px solid var(--border); text-align: center; color: var(--muted); font-size: 12.5px; } .ended-bar .btn { margin-left: 10px; padding: 5px 11px; font-size: 12px; } /* ---------- server-rendered SEO surfaces ---------- */ /* The complete value list under the card grid. Three columns of plain links: cheap to ship, easy to scan, and the route a crawler takes to every item. */ .all-values { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 6px; } .all-values > summary { cursor: pointer; list-style: none; padding: 10px 0; } .all-values > summary::-webkit-details-marker { display: none; } .all-values > summary h2 { display: inline; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .all-values > summary::after { content: ' ▾'; color: var(--muted); } .all-values[open] > summary::after { content: ' ▴'; } .av-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 1px 26px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .av-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .av-list a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .av-list a:hover { color: var(--accent); } .av-list span { color: var(--muted); flex: none; } /* A single item's page. No JS runs here — it has to read well on its own. */ .crumbs { font-size: 13px; color: var(--muted); margin: 18px 0 14px; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--accent); } .item-page { padding-bottom: 40px; } .ip-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; } .ip-art { width: 128px; height: 128px; object-fit: contain; flex: none; } .item-page h1 { margin: 0 0 8px; font-size: clamp(22px, 4vw, 32px); letter-spacing: -0.02em; } .ip-lede { margin: 0; color: var(--muted); font-size: 16px; } .ip-lede b { color: var(--accent); font-size: 19px; } .ip-stats { display: grid; gap: 1px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 0 0 20px; } .ip-stats > div { background: var(--surface); padding: 12px 14px; } .ip-stats dt { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .ip-stats dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; } .ip-note { background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 13px 15px; font-size: 14px; margin: 0 0 20px; } .ip-cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 32px; } .ip-cta .btn { text-decoration: none; display: inline-flex; align-items: center; } .ip-near h2, .ip-faq h2 { font-size: 17px; margin: 0 0 12px; } .ip-list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 1px 26px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .ip-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .ip-list a { color: var(--text); text-decoration: none; } .ip-list a:hover { color: var(--accent); } .ip-list span { color: var(--muted); } .ip-faq h3 { font-size: 14.5px; margin: 18px 0 6px; } .ip-faq p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } .ip-faq a { color: var(--accent); } /* Plain prose pages — privacy, about. Narrow measure, nothing clever. */ .prose { max-width: 720px; padding: 10px 0 60px; } .prose h1 { font-size: clamp(24px, 4vw, 34px); margin: 22px 0 6px; letter-spacing: -0.02em; } .prose h2 { font-size: 18px; margin: 30px 0 8px; } .prose p, .prose li { color: var(--muted); font-size: 15px; line-height: 1.7; } .prose ul { padding-left: 20px; } .prose a { color: var(--accent); } .prose .updated { font-size: 13px; } /* Legal and about links have to be reachable from every page — AdSense checks, and so do people. */ footer a { color: var(--muted); text-decoration: none; } footer a:hover { color: var(--accent); text-decoration: underline; } .ip-body { margin: 0 0 28px; } .ip-body h2, .ip-near h2 { font-size: 17px; margin: 0 0 10px; } .ip-body p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0 0 12px; } .ip-body b { color: var(--text); } .ip-sub { color: var(--muted); font-size: 13.5px; margin: -4px 0 12px; line-height: 1.6; } .ip-list.wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .ip-list.wide a { color: var(--accent); }