/* ========================================================= DISCOVER FEED (issue #30) Converted to Departure Fever (DESIGN.md names Discover explicitly among the surfaces the system is normative on) — converted whole, per the migration posture rule, not patched piecemeal. Shares this file with #shared-trip-screen/#user-profile-screen (/discover/:code, /u/:username), so those public pages pick up the same conversion for free. ========================================================= */ /* ── Screen shell ──────────────────────────────────────── */ #discover-screen, #shared-trip-screen, #user-profile-screen, #invite-screen, #pending-approval-screen { display: none; flex-direction: column; height: 100dvh; height: 100vh; overflow: hidden; /* Same halftone/wash ground as .home-screen and .app.active — itself stays the retired grey (shared with any still-unconverted screen), so every converted top-level screen paints its own ground. */ background-color: var(--df-ground); background-image: var(--df-halftone), var(--df-wash); background-size: 6px 6px, auto, auto; background-attachment: fixed; color: var(--df-ink); font-family: var(--df-sans); } /* Pinned Field Green, same bar the marketing nav and the in-app tab bar use (DESIGN.md: "a visitor meets the product's chrome before logging in and the landing → app transition has no seam") — not --vn-teal, which flips to mint at night and would be unreadable as a full-bleed plane. */ .discover-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-3xl); height: 60px; background: var(--topbar-bg); flex-shrink: 0; } /* Quiet icon control on a green field (DESIGN.md: "the quiet button becomes pale text at 85% opacity"). Kept at its natural ~24px glyph size but with the same ::before hit-area trick as .discover-like-btn below so the actual tap target still clears --tap-min without inflating the bar's height. */ .discover-back-btn { position: relative; background: none; border: none; cursor: pointer; color: var(--topbar-fg); font-size: 20px; min-width: var(--tap-min); min-height: var(--tap-min); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background var(--dur-feedback) var(--df-ease); } .discover-back-btn:hover { background: rgba(255,255,255,0.14); } .discover-back-btn:active { background: rgba(255,255,255,0.22); } .discover-topbar-title { font-family: var(--df-display); font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; color: var(--topbar-fg); } /* ── Scrollable body ───────────────────────────────────── */ .discover-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--space-3xl); position: relative; } /* ── Masonry grid (CSS columns) ────────────────────────── */ .discover-grid { columns: 2; column-gap: var(--space-2xl); } /* ── Card: the stub ──────────────────────────────────────── Same geometry and press states as .home-trip-card (My Trips) — Cut Stock, 2px ink keyline, 12px radius, hard offset shadow, the stub pressing into its own shadow on tap. A photo-led social card is still a pressable stub here, not the inert "card" component (that one doesn't move). */ .discover-card { position: relative; break-inside: avoid; margin-bottom: var(--space-2xl); background: var(--df-panel); border: 2px solid var(--df-ink); border-radius: var(--df-radius-stub); box-shadow: var(--df-press); overflow: hidden; transition: transform var(--dur-feedback) var(--df-ease), box-shadow var(--dur-feedback) var(--df-ease); } .discover-card:hover { transform: translate(2px, 2px); box-shadow: var(--df-press-hover); } /* :active covers the ad card (a single — the whole pressable element); :has() covers a trip card, where the actual pressable element is the nested .discover-card-open button. */ .discover-card:active, .discover-card:has(.discover-card-open:active) { transform: translate(4px, 4px); box-shadow: var(--df-press-active); } /* A loading skeleton is not pressable — it must not offer the stub's press. */ .discover-card-skeleton:hover, .discover-card-skeleton:active { transform: none; box-shadow: var(--df-press); } /* The card's main action — everything except the like/save row below. A real