/* Likely — "warm editorial dark" design system. Fraunces serif display · warm ink-black · vermilion accent · mono meta. */ :root { --bg: #14110f; /* warm ink-black */ --bg-2: #1b1714; --surface: #1f1a16; /* cards */ --surface-2: #2a231d; --ink: #f3ebdf; /* warm paper-white */ --ink-soft: #d8cdbd; --muted: #9a8b78; /* warm grey */ --line: #352c24; /* hairlines */ --accent: #ff5a36; /* vermilion */ --accent-ink:#1a0e09; --need: #ff5a36; /* a NEED — hot, seeking (vermilion) */ --need-ink: #1a0e09; --have: #e7b24a; /* an OFFER — warm, giving (gold) */ --have-ink: #241702; --match: #6fe6a0; /* "it's a match" green */ --bg-glow: #241a13; /* radial warmth at top */ --card-shadow: 0 24px 50px -20px rgba(0,0,0,.7); --radius: 14px; --maxw: 56rem; --sans: "DM Sans", ui-sans-serif, system-ui, sans-serif; } /* Light theme — opt-in via (persisted in localStorage). */ html[data-theme="light"] { --bg: #f5efe3; --bg-2: #ece4d4; --surface: #fcf8f0; --surface-2: #f0e8d9; --ink: #1d1813; --ink-soft: #433a30; --muted: #7c715f; --line: #ddd1bd; --accent: #e0431d; --accent-ink:#fff8f2; --need: #e0431d; --need-ink: #fff8f2; --have: #a9760d; --have-ink: #fff8ec; --match: #1f9d57; --bg-glow: #fffaf0; --card-shadow: 0 18px 40px -22px rgba(60,40,20,.25); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: radial-gradient(120% 80% at 50% -10%, var(--bg-glow) 0%, var(--bg) 55%) no-repeat, var(--bg); background-attachment: fixed; color: var(--ink); font-family: "Fraunces", Georgia, "Times New Roman", serif; font-optical-sizing: auto; font-weight: 400; line-height: 1.55; letter-spacing: .005em; min-height: 100vh; -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 1.25rem 1.25rem 6rem; } /* ---- type ---- */ h1, h2, h3 { font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 .5rem; } h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); } h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); } h3 { font-size: 1.3rem; font-weight: 700; } p { margin: 0 0 1rem; } a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; } a:hover { color: var(--accent); } em { color: var(--ink); font-style: italic; } .muted { color: var(--muted); } .meta { font-family: "DM Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* ---- header ---- */ .masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .25rem 0 1.5rem; flex-wrap: wrap; } .brand { font-weight: 900; font-size: 1.7rem; letter-spacing: -0.03em; text-decoration: none; color: var(--ink); } .masthead-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; } #signout { margin: 0; } .brand .so { color: var(--accent); } .nav { display: flex; gap: 1.1rem; font-family: "DM Mono", monospace; font-size: .8rem; letter-spacing: .04em; } .nav a { color: var(--muted); text-decoration: none; } .nav a:hover { color: var(--ink); } /* ---- tags / pills ---- */ .tag { display: inline-block; font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: var(--bg-2); } .tag.is-match { border-color: var(--match); color: var(--match); } /* ---- need / have flags ---- a loud, color-coded pill so you can tell at a glance whether a card is a NEED (hot, seeking) or an OFFER (warm, giving). */ .flag { display: inline-flex; align-items: center; gap: .4em; font-family: "DM Mono", monospace; font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: .3rem .7rem .28rem; border-radius: 999px; white-space: nowrap; } .flag::before { font-size: .9em; line-height: 1; } .flag-need { background: var(--need); color: var(--need-ink); } .flag-offer { background: var(--have); color: var(--have-ink); } .flag-need::before { content: "↘"; } /* something coming TO you */ .flag-offer::before { content: "↗"; } /* something going OUT */ /* ---- state badge (a post's match-state) ---- */ .state-badge { font-family: "DM Mono", monospace; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; padding: .22rem .55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; } .state-badge.state-matched { border-color: var(--match); color: var(--match); } .state-badge.state-partial { border-color: var(--accent); color: var(--accent); } /* ---- home controls (filter chips + cards/list toggle) ---- */ .controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin: 1.4rem 0 .2rem; } .filters { display: flex; gap: .4rem; } .controls-right { display: flex; gap: 1rem; align-items: center; } .chip { font-family: "DM Mono", monospace; font-size: .76rem; letter-spacing: .04em; text-decoration: none; color: var(--muted); padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--line); } .chip:hover { color: var(--ink); border-color: var(--muted); } .chip.on { color: var(--ink); border-color: var(--ink-soft); background: var(--surface-2); } .likely-chip { color: var(--accent); border-color: var(--accent); } .likely-chip:hover, .likely-chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .view-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .view-toggle:hover { color: var(--ink); border-color: var(--muted); } .view-toggle .icon { margin: 0; width: 1.15em; height: 1.15em; } .deck-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; } .deck-head .hero-kicker { margin-bottom: 0; } /* ---- mode banner (the drill-in: "you've switched into browsing a post's matches") — makes the context change unmistakable. ---- */ .modebar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.4rem; padding: .95rem 1.2rem; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); } .modebar-eyebrow { display: block; margin-bottom: .25rem; font-family: "DM Mono", monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .modebar-eyebrow .flag { letter-spacing: .14em; } .modebar-title strong { font-size: 1.15rem; } /* ---- per-post hub: open conversations ("in progress") ---- */ .convo-list { margin: .4rem 0 1.2rem; } .convo-row { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--ink); border-left: 4px solid var(--match); } .convo-row:hover { border-color: var(--match); background: var(--surface-2); } .convo-title { flex: 1 1 auto; min-width: 0; font-size: 1.1rem; } .convo-go { flex: none; font-family: "DM Mono", monospace; font-size: .8rem; color: var(--match); } /* ---- inline matches (revealed UNDER the post card on the home view) ---- */ .post-matches:not(:empty) { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px dashed var(--line); } /* matches "Deck" view — its own carousel (distinct hooks from the posts deck) */ .deck.mdeck { max-width: none; } /* as wide as the post — it's a post from someone else */ #match-deck { position: relative; z-index: 1; } #match-deck > .card:not(:first-child) { display: none; } /* no flash before JS; carousel sets 'flex' */ .mdeck-arrow { position: absolute; top: 46%; transform: translateY(-50%); z-index: 4; width: 1.9rem; height: 1.9rem; border-radius: 50%; padding: 0; cursor: pointer; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font-size: 1.2rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .mdeck-prev { left: -1.3rem; } .mdeck-next { right: -1.3rem; } .mdeck-arrow:hover { border-color: var(--muted); color: var(--accent); } /* deck position counter — sits in the card's flag row, right of WANTED, sharing its mono/uppercase type so the two read as one header line. */ /* sits on the flag's colored row, so use the flag ink (dark on dark theme, light on light) like WANTED — not muted grey, which is unreadable there. */ .mdeck-count { position: absolute; top: 0; right: 0; z-index: 4; margin: 0; padding: .5rem 1.3rem; color: var(--need-ink); font-family: "DM Mono", monospace; font-weight: 500; font-size: .72rem; letter-spacing: .14em; pointer-events: none; } /* matches view toggle (Cards / Lines / Deck) */ .mview-toggle { display: flex; justify-content: center; gap: .3rem; margin: 0 0 1.3rem; font-family: "DM Mono", monospace; font-size: .76rem; letter-spacing: .06em; } .mview-toggle button { background: none; border: none; cursor: pointer; color: var(--muted); padding: .25rem .7rem; font: inherit; border-bottom: 2px solid transparent; } .mview-toggle button:hover { color: var(--ink); } .mview-toggle button.on { color: var(--ink); border-bottom-color: var(--accent); } /* one-line match rows ("Lines" view) */ .match-line { display: flex; align-items: center; gap: .8rem; margin: .45rem 0; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--ink); } a.match-line:hover { border-color: var(--muted); background: var(--surface-2); } .match-line .flag { flex: none; } /* line-view kind: a colored left edge + a bare directional glyph (no pill) — the match's kind is the complement of your post, so it needs no spelling-out. */ /* the kind rides a colored side-board on the left of the line (a mini rail), the glyph reversed out in the board's ink color */ .match-line { position: relative; overflow: hidden; padding-left: 2.9rem; } .flag-ico { position: absolute; left: 0; top: 0; bottom: 0; width: 2.1rem; display: grid; place-items: center; } .flag-ico.k-need { background: var(--need); --i: url(/icons/wanted.svg); } .flag-ico.k-offer { background: var(--have); --i: url(/icons/offer.svg); } .flag-ico::before { content: ""; width: 1.15rem; height: 1.15rem; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .flag-ico.k-need::before { background: var(--need-ink); } .flag-ico.k-offer::before { background: var(--have-ink); } .match-line-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .match-line-info { flex: none; font-family: "DM Mono", monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .match-line-go { flex: none; font-family: "DM Mono", monospace; font-size: .78rem; color: var(--match); } .match-line-btn { flex: none; padding: .35rem .75rem; display: inline-flex; align-items: center; } .match-line-btn .icon { margin: 0; width: 1.05em; height: 1.05em; } /* lines expand to the full card in place (accordion); click a line to open it */ .line-item > .match-line { cursor: pointer; } .line-item > .card.line-card { display: none; } /* beat .card.match-mini's display:flex */ .line-item.open > .match-line { display: none; } /* expanded line = the wide deck-style card, not a narrow grid card */ .line-item.open > .card.line-card { display: flex; max-width: none; margin: .5rem 0 .9rem; cursor: pointer; } /* the expanded card collapses back to a line on click — say so */ .line-item.open > .card.line-card::after { content: "▴ tap to collapse"; text-align: center; padding: .45rem; font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); } .sift-cta { text-align: center; margin: 0 0 1.4rem; } .show-more { text-align: center; margin: 1.8rem 0 .6rem; } .sift-note { text-align: center; color: var(--muted); font-family: var(--sans); font-size: .88rem; line-height: 1.45; max-width: 40rem; margin: -.9rem auto 1.4rem; } .sift-stale, .sift-aging { text-align: center; color: var(--ink-soft); font-family: var(--sans); font-size: .9rem; line-height: 1.45; max-width: 28rem; margin: 0 auto 1rem; padding: .7rem 1rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; } .sift-stale { border-left: 3px solid var(--accent); } /* a stop */ .sift-aging { border-left: 3px solid var(--muted); } /* a heads-up */ /* aging picks stay visible but are marked stale + dimmed, so nothing vanishes */ .inline-matches.aging .ai-pick::after { content: " · stale"; color: var(--muted); font-weight: 400; } .inline-matches.aging .ai-card { border-style: dashed; opacity: .92; } .sift-verified { color: var(--match); font-family: "DM Mono", monospace; font-size: .82rem; letter-spacing: .06em; } .sift-running .sift-cta { color: var(--accent); } .sift-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; max-width: 22rem; margin: .5rem auto 0; } .sift-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; } .form-note { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: .8rem 1rem; margin: 0 0 1.3rem; color: var(--ink-soft); font-family: var(--sans); font-size: .95rem; line-height: 1.5; } .sift-cta .btn-ghost { color: var(--accent); border-color: var(--accent); } .sift-cta .btn-ghost:hover { background: var(--accent); color: var(--accent-ink); } .inline-matches .hero-kicker { margin: .8rem 0 .8rem; text-align: center; } .inline-matches .match-grid + .hero-kicker { margin-top: 2.2rem; } /* separate sections */ .match-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .match-grid > .match-mini { flex: 1 1 16rem; max-width: 20rem; } /* centered, single card centers too */ .card.match-mini { cursor: default; padding: 0; overflow: hidden; display: flex; flex-direction: column; } .match-flag { display: flex; align-items: center; gap: .45em; padding: .5rem 1.3rem; font-family: "DM Mono", monospace; font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; } .match-flag::before { font-size: .9em; line-height: 1; } .match-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1 1 auto; } /* match-card type tracks the post card: title = h2 scale, body = .post-body, the price/distance line = .card-meta */ .match-body h3 { margin: .3rem 0; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; } .match-body p:not(.meta) { font-family: var(--sans); font-size: 1.05rem; line-height: 1.55; } .match-body p.meta { font-size: .92rem; letter-spacing: .04em; text-transform: none; } .match-body > .btn { margin-top: auto; align-self: flex-end; } /* single button: lower-right, not full width */ .match-actions { margin-top: auto; display: flex; gap: .5rem; justify-content: center; } /* two-button row, pinned bottom */ .match-actions .btn { flex: 0 0 auto; min-width: 5.5rem; display: flex; flex-direction: column; align-items: center; gap: .15rem; } /* content-sized, equal width, not stretched */ .match-actions .btn .icon { margin: 0; } .convo-card { border-color: var(--match); } .matched-label { color: var(--match); } /* AI Sift display: approved picks (accent edge + ✦ label + quoted reason), rejects in the Set-aside drawer */ .ai-card { border-color: var(--accent); } .ai-pick { color: var(--accent); } .match-line-info.ai-pick { color: var(--accent); } .ai-reason { font-style: italic; color: var(--ink-soft); font-family: var(--sans); font-size: .98rem; line-height: 1.4; margin: .1rem 0 .5rem; } .ai-reject { color: var(--muted); } .muted-label { color: var(--muted); } .score { color: var(--muted); opacity: .7; margin-left: .4em; } /* faint fine-print composite score */ .interested-note { margin-top: auto; color: var(--match); } /* pinned bottom, like the button it replaces */ /* click-away "Dismissed" history */ .dismissed-wrap { margin-top: 2.4rem; } .dismissed-wrap > summary { cursor: pointer; list-style: none; display: inline-block; font-family: "DM Mono", monospace; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .dismissed-wrap > summary::-webkit-details-marker { display: none; } .dismissed-wrap > summary::after { content: " ▾"; } .dismissed-wrap[open] > summary::after { content: " ▴"; } .dismissed-wrap[open] > summary { margin-bottom: 1rem; } .dismissed-wrap > summary:hover { color: var(--ink); } .dismissed-card { opacity: .72; } /* ---- post card (your post, on the home deck) ---- Canonical card: KIND is carried by the flag; STATE lives on the edge (only a match earns a colored edge) and a small badge — both peripheral, not central. */ .post-card { border-top: 4px solid var(--line); position: relative; overflow: hidden; } .card.post-card { padding: 1.4rem 1.9rem 1.5rem 3.3rem; } /* tighter top/bottom; left clears the rail */ .post-card.state-matched { border-top-color: var(--match); } /* top edge = STATE; a match graduates it to green */ /* KIND rides a vertical colored rail embedded in the left edge of the card */ .card-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 2rem; writing-mode: vertical-rl; /* vertical-rl flips the flex axes: justify-content is now the VERTICAL axis (flex-start = top), align-items the horizontal (center the strip). */ display: flex; align-items: center; justify-content: flex-start; padding-top: .95rem; font-family: "DM Mono", monospace; font-weight: 500; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; } /* edit pencil parked top-right, level with the eyebrow (not the title) */ .card-edit { position: absolute; top: 1rem; right: 1.4rem; z-index: 2; } .card-rail.k-need { background: var(--need); color: var(--need-ink); } .card-rail.k-offer { background: var(--have); color: var(--have-ink); } .card-head { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .4rem; } .card-head .card-title { flex: 1 1 auto; min-width: 0; } /* title left; description aligns under it */ .card-head-side { display: flex; align-items: center; gap: .5rem; flex: none; margin-top: .3rem; } /* flag + edit, right of the title */ .card-meta { font-family: "DM Mono", ui-monospace, monospace; font-size: .92rem; letter-spacing: .04em; color: var(--muted); margin: .55rem 0; } .card-title { margin: 0; } .card-title a { color: inherit; text-decoration: none; } .post-card { cursor: pointer; } .post-card:hover { background: var(--surface-2); } .post-card:hover .card-title a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .05em; text-underline-offset: .1em; } .post-body { color: var(--ink-soft); font-family: var(--sans); font-size: 1.05rem; line-height: 1.55; } .deck-title { text-align: center; margin: 1.6rem 0 .4rem; font-weight: 500; } .state-line { font-weight: 700; font-size: 1.08rem; color: var(--ink-soft); margin: .7rem 0 0; } .state-line.shout { color: var(--accent); } .post-card.state-matched .state-line, .post-row.state-matched .state-line { color: var(--match); } /* the state line, relocated above the title as a colored eyebrow */ .card-eyebrow { margin: 0 0 .55rem; font-weight: 600; font-size: 1.05rem; } .post-card.state-partial .card-eyebrow, .post-row.state-partial .card-eyebrow { color: var(--accent); } .post-card.state-quiet .card-eyebrow, .post-row.state-quiet .card-eyebrow { color: var(--muted); } /* ---- post list (the list-mode rows) ---- */ .post-list { margin-top: 1rem; } .post-row { display: flex; align-items: flex-start; gap: 1rem; border-left: 4px solid var(--line); } .post-row > .flag { margin-top: .15rem; } .post-row.kind-need { border-left-color: var(--need); } .post-row.kind-offer { border-left-color: var(--have); } .post-row.state-matched { border-left-color: var(--match); } .post-row-main { flex: 1; min-width: 0; } .post-row-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; } .post-row-head h3 { margin: 0; } .post-row-body { color: var(--ink-soft); font-size: 1.05rem; margin: .25rem 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .post-row-main .meta { margin: .15rem 0; } .post-row-foot { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; margin-top: .6rem; } .post-row-foot .state-line { margin: 0; } .post-row-actions { display: flex; align-items: center; gap: .5rem; flex: none; } .post-row .flag, .post-row .state-badge { flex: none; } /* ---- buttons ---- */ .btn { display: inline-block; text-align: center; text-decoration: none; font-family: inherit; font-size: 1rem; font-weight: 600; padding: .7rem 1.3rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); transition: transform .12s ease, background .15s ease, border-color .15s ease; } .btn:hover { color: var(--ink); } .btn-accent:hover { color: var(--accent-ink); } .btn:hover { transform: translateY(-1px); border-color: var(--muted); } .btn:active { transform: translateY(0); } .btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; } .btn-accent:hover { background: #ff6f50; border-color: #ff6f50; } .btn-ghost { background: none; border-color: var(--line); color: var(--ink-soft); } .btn-sm { padding: .45rem 1rem; font-size: .9rem; } /* ---- forms ---- */ label { display: block; margin: 0 0 .9rem; color: var(--ink-soft); } input, textarea, select { font-family: inherit; font-size: 1.05rem; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: .65rem .8rem; width: 100%; max-width: 30rem; margin-top: .35rem; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); } input[type="checkbox"] { width: auto; accent-color: var(--accent); } /* ---- post form (label on top of each field) ---- */ .form-page { max-width: 33rem; margin: 0 auto; } /* center the whole form column */ .post-form { max-width: none; margin-top: 1.5rem; } .delete-form { margin-top: 1.5rem; } .btn-danger { color: var(--accent); } .btn-danger:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .post-form .field { margin-bottom: 1.15rem; } .post-form .field label { display: block; margin: 0 0 .4rem; font-family: "DM Mono", monospace; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); } .post-form .field label .muted { text-transform: none; letter-spacing: 0; } .post-form input, .post-form textarea { width: 100%; max-width: none; margin-top: 0; } .post-form .check { display: flex; align-items: center; gap: .55rem; color: var(--ink-soft); margin: .2rem 0 1.3rem; } .post-form .check input { width: auto; } .post-form .field-hint { margin: .4rem 0 0; font-family: var(--sans); font-size: .82rem; line-height: 1.4; color: var(--muted); } /* ---- hero (rotating phrases) ---- */ .hero { padding: 2.5rem 0 1.5rem; display: grid; grid-template-columns: 1fr 1fr; } .hero-kicker { font-family: "DM Mono", monospace; font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; } .hero-cta { text-decoration: none; color: var(--ink); text-align: center; font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; font-size: clamp(1.8rem, 5vw, 3.6rem); padding: 1.1rem 1.1rem; min-height: 3.8em; /* stable height as the phrase rotates */ } .hero-cta:first-child { border-right: 1px solid var(--line); padding-left: 0; } .hero-cta:last-child { padding-right: 0; } /* lead is no longer faded — the whole CTA is bold ink */ .hero-cta:hover .rotor { color: var(--accent); } .rotor { /* inline so it wraps word-by-word with the lead; underline breaks per line */ transition: opacity .25s ease; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .06em; text-underline-offset: .12em; } .rotor.rotor-out { opacity: 0; } .hero-foot { margin-top: 2rem; color: var(--muted); } .signin-inline { display: flex; gap: .6rem; flex-wrap: wrap; margin: .4rem 0 .6rem; } .signin-inline input { flex: 1; min-width: 14rem; max-width: 22rem; margin-top: 0; } .signin-label { color: var(--accent); font-weight: 800; letter-spacing: -0.01em; font-size: clamp(1.4rem, 4vw, 2rem); margin: 1.5rem 0 .6rem; } /* huge front-door brand (logged-out home only) */ .bigbrand { font-weight: 900; letter-spacing: -0.04em; line-height: .9; font-size: clamp(3.2rem, 15vw, 8rem); margin: .5rem 0 1.5rem; } .bigbrand .so { color: var(--accent); } body.front .masthead .brand { display: none; } /* avoid duplicate brand on the front door */ .hero.compact { padding: .25rem 0 1rem; } .hero.compact .hero-cta { font-size: clamp(1.35rem, 4vw, 2.1rem); padding: .8rem 1.1rem; } .hero.compact .hero-cta:first-child { padding-left: 0; } /* ---- card stack (the deck) ---- */ .deck { position: relative; margin: 1.5rem auto; max-width: none; } .deck-arrow { position: absolute; top: 46%; transform: translateY(-50%); z-index: 4; width: 1.9rem; height: 1.9rem; border-radius: 50%; padding: 0; cursor: pointer; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font-size: 1.2rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .deck-prev { left: -1.3rem; } /* nudged just off the edge: near the card, off its content */ .deck-next { right: -1.3rem; } .deck-arrow:hover { border-color: var(--muted); color: var(--accent); } /* carousel: only one card shown at a time; JS toggles inline display, the first is visible by default (no flash before JS runs). */ .deck-top > .card:first-child ~ .card { display: none; } .deck-count { text-align: center; margin-top: .6rem; } /* List view = the same deck card, shown all at once (accordion). No carousel: un-hide every card, stack them, and each card owns a matches panel below it. */ .deck.as-list { margin: 1rem auto; } .deck.as-list .deck-top > .card { display: block; margin: 0 0 1.1rem; } /* gap below each card */ .deck.as-list .acc-panel:not(:empty) { margin-top: -.4rem; margin-bottom: 1.1rem; } /* matches tuck under their card */ .deck.as-list .post-card { cursor: pointer; } /* OPEN ITEM "POP": the selected post + its matches scale up a touch so the pair literally stands out from the compact closed cards. The card grows from its top edge and the panel from its bottom, so they bulge toward each other (reading as one unit) without shoving the neighbours above/below. A lift shadow adds depth. */ .deck.as-list .post-card.open { transform: scale(1.04); transform-origin: center center; z-index: 3; box-shadow: 0 16px 42px -16px rgba(0, 0, 0, .65); } .deck.as-list .post-card.open + .acc-panel:not(:empty) { transform: scale(1.04); transform-origin: center center; position: relative; z-index: 3; } /* masthead nav (shown when signed in) */ .masthead-nav { display: flex; gap: 1rem; font-family: "DM Mono", monospace; font-size: .8rem; letter-spacing: .03em; } .masthead-nav a { color: var(--muted); text-decoration: none; } .masthead-nav a:hover { color: var(--ink); } /* Inline-able icons: mask an SVG from /icons so it inherits currentColor (and thus the theme). Usage: */ .icon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em; margin-right: .35em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .deck-back { position: absolute; inset: 0; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); z-index: 0; } .deck-back.b1 { transform: translateY(10px) rotate(2.2deg); opacity: .55; } .deck-back.b2 { transform: translateY(18px) rotate(-2.6deg); opacity: .3; } .deck-top { position: relative; z-index: 1; } .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.9rem; box-shadow: var(--card-shadow); touch-action: pan-y; /* let JS own horizontal drag; keep vertical scroll */ animation: deal-in .32s cubic-bezier(.2,.8,.2,1) both; } .card.swiping { animation: none; cursor: grabbing; } @keyframes deal-in { from { opacity: 0; transform: translateY(16px) scale(.97) rotate(-1deg); } to { opacity: 1; transform: none; } } /* theme toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; padding: 0; width: 2rem; height: 2rem; border-radius: 999px; cursor: pointer; background: none; border: 1px solid var(--line); color: var(--muted); } .theme-toggle:hover { color: var(--ink); border-color: var(--muted); } .theme-toggle .icon { margin: 0; width: 1.05em; height: 1.05em; } /* show the theme you'll switch TO: sun while dark, moon while light */ .theme-toggle .ti-dark { display: none; } html[data-theme="light"] .theme-toggle .ti-light { display: none; } html[data-theme="light"] .theme-toggle .ti-dark { display: inline-block; } .avatar-link { display: inline-flex; line-height: 0; } .avatar { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; } .avatar-link:hover .avatar { border-color: var(--muted); } /* ---- map page ---- */ .map { height: 68vh; min-height: 360px; margin-top: 1.2rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); } .map-legend { font-family: "DM Mono", monospace; font-size: .78rem; color: var(--muted); margin: .8rem 0 0; } .map-key { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: -.05em; } .map-remote { margin-top: 1rem; font-family: "DM Mono", monospace; font-size: .8rem; } .map-pin-dot { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #1a0e09; font-family: "DM Mono", monospace; font-weight: 500; font-size: .82rem; box-shadow: 0 2px 8px rgba(0,0,0,.55); border: 2px solid rgba(0,0,0,.25); } .map-pin-mine { display: block; width: 18px; height: 18px; border-radius: 50%; border: 4px solid currentColor; background: var(--bg); box-shadow: 0 2px 5px rgba(0,0,0,.4); cursor: pointer; } .map-key-ring { background: transparent; border: 2px solid var(--ink); } /* dark-theme Leaflet chrome */ .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--ink); } .leaflet-popup-content { font-family: inherit; } .leaflet-bar a { background: var(--surface); color: var(--ink); border-color: var(--line); } .leaflet-bar a:hover { background: var(--surface-2); } .leaflet-container { background: var(--bg-2); } /* ---- stats page ---- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; margin-top: 1.6rem; } /* the dedicated /stats page: a balanced 3×2 grid of larger tiles (no awkward 5-then-1 wrap), since the page is otherwise empty. */ .stats-grid.spacious { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 46rem; } .stats-grid.spacious .stat { padding: 2.4rem 1.2rem; } @media (max-width: 700px) { .stats-grid.spacious { grid-template-columns: repeat(2, 1fr); } } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.2rem; text-align: center; } .stat-num { display: block; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-size: clamp(2.2rem, 6vw, 3rem); } .stat-label { display: block; margin-top: .55rem; font-family: "DM Mono", monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } /* admin system-status row — bus + embed backlog at a glance */ .sys-status { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1.2rem 0 .4rem; font-family: "DM Mono", monospace; font-size: .82rem; color: var(--ink-soft); } .sys-item { display: inline-flex; align-items: center; gap: .5rem; } .sys-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; } .sys-dot.ok { background: var(--match); } .sys-dot.down { background: var(--accent); } /* legal documents (Terms / Privacy) — readable column, clear section rhythm */ .legal-doc { max-width: 44rem; } .legal-doc h2 { font-size: 1.4rem; margin: 2rem 0 .6rem; } .legal-doc p, .legal-doc li { font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--ink-soft); } .legal-doc ul { margin: .4rem 0 .4rem 1.1rem; padding: 0; } .legal-doc li { margin: .3rem 0; } .legal-doc a { color: var(--accent); } /* credits: tier buttons in a wrapping row (clean on a phone, no ragged margins) */ .credit-tiers { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 1.2rem; } .credit-tiers form { margin: 0; } .stat.need .stat-num { color: var(--need); } .stat.offer .stat-num { color: var(--have); } .stat.match .stat-num { color: var(--match); } /* ---- admin monitor: sift drift calibration ---- */ .admin-prose { max-width: 46rem; line-height: 1.55; } .cal-thresholds { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.2rem 0 1.6rem; } .cal-th { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.2rem; display: flex; flex-direction: column; gap: .25rem; min-width: 12rem; } .cal-th-label { font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .cal-th-now { font-family: "DM Mono", monospace; font-size: 1.4rem; font-weight: 500; } .cal-th-sug { font-family: "DM Mono", monospace; font-size: .74rem; color: var(--accent); } .cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cal-table { width: 100%; border-collapse: collapse; font-family: "DM Mono", monospace; font-size: .82rem; } .cal-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: .5rem .7rem; border-bottom: 1px solid var(--line); } .cal-table th.num, .cal-table td.num { text-align: right; } .cal-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; } .cal-row.soft { background: color-mix(in srgb, var(--muted) 12%, transparent); } .cal-row.hard { background: color-mix(in srgb, var(--accent) 14%, transparent); } .cal-range { white-space: nowrap; } .cal-churn { display: flex; align-items: center; gap: .6rem; min-width: 11rem; } .cal-bar { flex: 1 1 auto; height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; } .cal-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .cal-churn-n { flex: none; width: 2.6rem; text-align: right; } /* sift-economics rate form + margin */ .rate-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin: 1.2rem 0 .4rem; } .rate-field { display: flex; flex-direction: column; gap: .3rem; font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .rate-field input { width: 9rem; margin: 0; } .cost-neg { color: var(--accent); } /* ---- site footer ---- */ .sitefoot { margin-top: 4.5rem; font-family: "DM Mono", monospace; font-size: .76rem; letter-spacing: .04em; color: var(--muted); text-align: center; } .sitefoot a { color: var(--muted); text-decoration: none; } .sitefoot a:hover { color: var(--ink); } .foot-theme { margin-top: .9rem; } /* account page theme picker */ .theme-choice { display: flex; gap: .5rem; margin-top: .5rem; } .theme-choice button.on { border-color: var(--accent); color: var(--accent); } .credit-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 .45rem; border-radius: 999px; border: 1px solid var(--line); color: var(--match); text-decoration: none; font-family: "DM Mono", monospace; font-size: .8rem; } .credit-badge:hover { border-color: var(--match); } .card .likelihood { color: var(--accent); } .card h2, .card h3 { margin: .4rem 0; } .card-actions { display: flex; gap: .7rem; margin-top: 1.4rem; } .card-actions .btn { flex: 1; } /* Calm, peripheral footer for the canonical post card: the state action stays compact and tucked bottom-right; Edit is a small pencil. */ .card-foot { display: flex; align-items: center; justify-content: space-between; gap: .9rem; margin-top: 1.3rem; } .card-foot .state-line { margin: 0; } .foot-actions { display: flex; align-items: center; gap: .6rem; flex: none; margin-left: auto; } /* always hug the right, even when it's the foot's only child */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 999px; text-decoration: none; border: 1px solid var(--line); color: var(--muted); } .icon-btn:hover { color: var(--ink); border-color: var(--muted); } .icon-btn .icon { margin: 0; width: 1.05em; height: 1.05em; } /* "it's a match" + sift + misc panels */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.3rem; margin: .6rem 0; } .panel.is-match { border-color: var(--match); text-align: center; } .panel.is-match h2 { color: var(--match); } .reason { font-style: italic; color: var(--ink-soft); } /* connections / thread */ .row { border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; margin: .5rem 0; background: var(--surface); } .bubble { display: inline-block; padding: .5rem .8rem; border-radius: 14px; background: var(--bg-2); } .bubble.mine { background: var(--surface-2); } .msg { margin: .4rem 0; } .msg.mine { text-align: right; } hr, .rule { border: none; border-top: 1px solid var(--line); margin: 1.5rem 0; } /* ---- mobile ---- the layout is fluid; these are the spots that need help on a phone. Single breakpoint keeps it simple. */ @media (max-width: 560px) { .wrap { padding: 1rem 1rem 5rem; } /* hero CTAs stack — side-by-side is too cramped to read/tap at phone width */ .hero { grid-template-columns: 1fr; padding: 1.5rem 0 1rem; } .hero-cta { min-height: 0; padding: 1.15rem 0; font-size: clamp(1.7rem, 8.5vw, 2.4rem); } .hero-cta:first-child { border-right: none; border-bottom: 1px solid var(--line); padding-left: 0; } .hero-cta:last-child { padding-right: 0; } .hero.compact .hero-cta { font-size: clamp(1.4rem, 7vw, 1.9rem); } /* masthead: the controls row is too wide for a phone — let it wrap instead of overflowing the viewport, and keep button text from breaking mid-word */ .masthead { gap: .6rem; } .masthead-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: .5rem; } .masthead-nav { gap: .8rem; } #signout button, .masthead-actions .btn { white-space: nowrap; } /* deck arrows sit tighter so they don't poke past the viewport edge */ .deck-prev { left: -.9rem; } .deck-next { right: -.9rem; } }