/* Ghost Funnel V5 — shared door/phone/widget styles. Extracted from journey-gf-v5.html so per-door files share one stylesheet. Pairs with shared/shared.css (design tokens) + shared/doors-init.js (engines). */ /* ════════════════════════════════════════════════════════════════ GHOST FUNNEL V5 — DOORS DECK (embedded via iframe) — wp-k5a0.1 Forked from journey-gf-v4.html. Same editorial aesthetic and phone deck; re-topologized into an ENTRY masthead + THREE STACKED LANES, one per stance door. Each lane is its own horizontal .deck-rail. ════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Self-sufficient dark editorial stage so the deck is legible when opened directly (not only when iframed by storyboard-gf-v5.html). Applied to because the carries an inline background:transparent (for iframe compositing) that would otherwise win over a body-level rule. */ html { background: radial-gradient(ellipse 1200px 800px at 6% 4%, rgba(8,174,184,.10), transparent 55%), radial-gradient(ellipse 900px 600px at 96% 96%, rgba(8,174,184,.06), transparent 60%), repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 96px), repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 96px), linear-gradient(180deg, #050811 0%, #060A12 38%, #04070D 100%); background-attachment: fixed; } html, body { margin: 0; padding: 0; height: 100%; color: #E8E4DE; } /* Body is the horizontal scroll container: the .deck-rail (min-width:fit-content) is wider than the full-width iframe, so the phone row scrolls horizontally INSIDE the iframe. Vertical is hidden (one row tall). */ /* display:block overrides shared.css's `body { display:flex; align-items:center }`, which would otherwise center the rail. As a block, the max-content .deck-rail sits flush left and the body scrolls horizontally. */ body { display: block; font-family: var(--font-body); background: transparent; overflow-x: auto; overflow-y: hidden; } body::-webkit-scrollbar { height: 6px; } body::-webkit-scrollbar-track { background: transparent; } body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; } body::-webkit-scrollbar-thumb:hover { background: rgba(61,196,186,.4); } /* ── Act / lane labels ────────────────────────────────────── */ .act-label { flex-shrink: 0; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 36px; gap: 20px; position: relative; z-index: 2; } .act-label .ord { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; color: rgba(8,174,184,.65); } .act-label .name { font-family: var(--font-serif); font-size: 16px; font-style: italic; color: rgba(232,228,222,.55); writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: .04em; } .act-label .line { width: 1px; height: 64px; background: linear-gradient(180deg, rgba(8,174,184,.65), rgba(8,174,184,0)); } /* ── Deck rail (horizontal scroller of phones) ────────────── */ .deck-rail { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 32px; align-items: flex-start; padding: 32px 56px 64px; width: max-content; /* exact content width, pinned left; body scrolls when it overflows */ z-index: 2; } /* ── V5 STAGE: vertical stack of lanes ────────────────────── */ .v5-stage { position: relative; z-index: 2; display: flex; flex-direction: column; min-width: fit-content; } /* ── V5 LANE divider (per-door header) ────────────────────── */ .v5-lane { position: relative; z-index: 2; } .v5-lane-head { display: flex; align-items: center; gap: 18px; padding: 28px 56px 0; min-width: fit-content; } .v5-lane-ord { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #08aeb8; flex-shrink: 0; } .v5-lane-title { font-family: var(--font-serif); font-size: 26px; font-style: italic; color: rgba(232,228,222,.86); letter-spacing: -.01em; flex-shrink: 0; } .v5-lane-stance { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(232,228,222,.4); border: 1px solid rgba(8,174,184,.3); border-radius: 3px; padding: 4px 9px; flex-shrink: 0; } .v5-lane-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(8,174,184,.5), transparent); min-width: 60px; } .v5-lane-note { padding: 6px 56px 0; min-width: fit-content; font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: rgba(232,228,222,.45); max-width: 720px; } /* ── Phone wrap + label ───────────────────────────────────── */ .pw { display: flex; flex-direction: column; align-items: center; gap: 16px; flex-shrink: 0; position: relative; } .pl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(232,228,222,.42); text-align: center; max-width: 390px; display: flex; align-items: center; gap: 10px; justify-content: center; } .pl::before { content: ''; width: 22px; height: 1px; background: rgba(8,174,184,.45); } .pl::after { content: ''; width: 22px; height: 1px; background: rgba(8,174,184,.45); } .screen-id { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; color: #08aeb8; } /* ── Phone shell — Knox V4 spec, 390 × 844 ─────────────── */ .phone { width: 390px; height: 844px; background: #0b1117; border-radius: 44px; border: 1.5px solid rgba(61,196,186,.18); overflow: hidden; position: relative; flex-shrink: 0; box-shadow: 0 0 0 6px rgba(6,10,16,.96), 0 0 0 7px rgba(61,196,186,.12), 0 32px 80px rgba(0,0,0,.78); } .phone::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 120px; height: 34px; background: #000; border-radius: 20px; z-index: 100; } .pi { width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; flex-direction: column; } /* ── Status bar / home bar ─────────────────────────────────── */ .sb { display: flex; justify-content: space-between; align-items: center; padding: 16px 28px 0; height: 54px; flex-shrink: 0; position: relative; z-index: 10; } .sb-t { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.88); letter-spacing: -.01em; } .sb-i { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.8); } .hbar { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 120px; height: 4px; background: rgba(255,255,255,.2); border-radius: 3px; z-index: 20; } /* ── Animations ─────────────────────────────────────────── */ @keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 24px rgba(61,196,186,.15); } 50% { box-shadow: 0 0 48px rgba(61,196,186,.3); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes dot-breathe { 0%, 100% { opacity: .4; } 50% { opacity: 1; } } @keyframes mirror-enter { to { opacity: 1; transform: translateY(0); } } /* Tab bar */ .tabbar { position: absolute; bottom: 0; left: 0; right: 0; height: 82px; background: rgba(11,17,23,.97); border-top: 1.5px solid rgba(61,196,186,.2); display: flex; justify-content: space-around; align-items: flex-start; padding-top: 10px; z-index: 15; } .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: var(--font-body); font-size: 10px; color: rgba(255,255,255,.3); } .tab.active { color: #3dc4ba; } .tab svg { width: 22px; height: 22px; } /* Homepage feed */ .feed-date { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em; color: rgba(255,255,255,.28); margin-top: 4px; } .feed-greeting { font-family: var(--font-serif); font-size: 28px; font-weight: 400; color: #E8E4DE; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 4px; } /* Overlay back chip */ .overlay-back { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; cursor: pointer; } /* Conversation interactivity */ .conv-selected { opacity: 1 !important; } .conv-selected span { color: #E8E4DE !important; font-weight: 600; } .conv-selected svg path { stroke: #E8E4DE !important; } .conv-dimmed { opacity: 0.12 !important; transition: opacity .4s ease; pointer-events: none; } .conv-beat { opacity: 0; animation: fade-up .6s ease forwards; } [data-conv-content] { padding: 0 28px 40px; } /* Upload conversation surfaces */ .conv-layer { position: absolute; inset: 0; z-index: 30; display: none; flex-direction: column; } .conv-layer.active { display: flex; } .conv-bg { position: absolute; inset: 0; z-index: 1; } .conv-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .35; } .conv-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,17,23,.1) 0%, rgba(11,17,23,.7) 38%, #0b1117 65%); } .conv-dim-tab { position: absolute; inset: 0; z-index: 2; background: rgba(11,17,23,.5); pointer-events: none; } .conv-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 82px; z-index: 3; display: flex; flex-direction: column; } .conv-scroll { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 0 28px 24px; } .conv-scroll::-webkit-scrollbar { display: none; } .notif-bar { margin: 12px 22px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: none; gap: 12px; align-items: flex-start; cursor: pointer; animation: fade-up .5s ease forwards; } .notif-bar.active { display: flex; } .notif-icon { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; background: rgba(61,196,186,.12); border: 1px solid rgba(61,196,186,.2); display: flex; align-items: center; justify-content: center; } /* Restart button (below phone) */ .restart-btn { margin-top: 6px; padding: 6px 14px; border-radius: 8px; border: 1px solid rgba(61,196,186,.3); background: rgba(61,196,186,.08); color: var(--brand); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; cursor: pointer; } /* Unified widget pane: two-mode container */ .twin-pane { position: absolute; top: 0; left: 0; right: 0; bottom: 82px; z-index: 5; display: flex; flex-direction: column; padding: 0; overflow-y: auto; scrollbar-width: none; } .twin-pane::-webkit-scrollbar { display: none; } .twin-mode-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(8,174,184,.7); padding: 4px 22px 6px; display: flex; align-items: center; gap: 10px; } .twin-mode-label::before { content: ''; flex: 0 0 18px; height: 1px; background: rgba(8,174,184,.45); } .twin-divider { margin: 18px 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(8,174,184,.4), transparent); } /* ── V5 hero deck card (Door 2 placeholder) ───────────────── */ .deck-stack { position: absolute; top: 0; left: 0; right: 0; bottom: 82px; z-index: 5; overflow-y: auto; scrollbar-width: none; padding: 0; } .deck-stack::-webkit-scrollbar { display: none; } .hero-card { margin: 14px 18px 0; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid rgba(61,196,186,.2); box-shadow: 0 12px 40px rgba(0,0,0,.5); position: relative; } .hero-card.behind { transform: scale(.94) translateY(10px); opacity: .5; } .hero-card img { width: 100%; height: 150px; object-fit: cover; display: block; opacity: .55; } .hero-card .hc-body { padding: 14px 18px 18px; } .hero-card .hc-lane { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; } .hero-card .hc-title { font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: #E8E4DE; line-height: 1.25; margin-bottom: 6px; } .hero-card .hc-hint { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,.42); line-height: 1.5; } .hero-card .hc-actions { display: flex; gap: 10px; margin-top: 16px; } .hero-card .hc-dismiss { flex: 1; padding: 10px 0; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); text-align: center; font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,.55); } .hero-card .hc-go { flex: 1; padding: 10px 0; border-radius: 10px; background: var(--brand); text-align: center; font-family: var(--font-body); font-size: 13px; color: #0b1117; font-weight: 600; } /* ── V5 sandbox self-serve CTA tiles (Door 3 placeholder) ── */ .sandbox-tiles { padding: 8px 22px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sandbox-tile { border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(61,196,186,.16); padding: 12px 12px 14px; } .sandbox-tile .st-lane { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 5px; } .sandbox-tile .st-title { font-family: var(--font-serif); font-size: 14px; color: #E8E4DE; line-height: 1.25; } .sandbox-tile .st-hint { font-family: var(--font-body); font-size: 11px; color: rgba(255,255,255,.35); line-height: 1.45; margin-top: 4px; } /* Productive-wait header (Door 1) */ .wait-banner { margin: 10px 22px 0; padding: 12px 14px; border-radius: 14px; background: rgba(61,196,186,.07); border: 1px solid rgba(61,196,186,.22); display: flex; gap: 12px; align-items: flex-start; } .wait-banner .wb-owl { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: rgba(61,196,186,.1); border: 1px solid rgba(61,196,186,.25); display: flex; align-items: center; justify-content: center; animation: float 4s ease-in-out infinite; } .wait-banner .wb-txt { font-family: var(--font-body); font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.5; } .wait-banner .wb-txt b { color: #E8E4DE; font-weight: 600; } /* ── First-run entry panes: scroll-snap curiosity hook + stance chooser (ported from V4 pre-home) ── */ @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .mirror-line { opacity: 0; transform: translateY(10px); animation: mirror-enter .6s ease forwards; } .ml-1 { animation-delay: .4s; } .ml-2 { animation-delay: 1.3s; } .ml-3 { animation-delay: 2.3s; } .ml-4 { animation-delay: 3.5s; } .scroll-hint { opacity: 0; animation: mirror-enter .5s ease forwards; animation-delay: 4.7s; } .scroll-wrap { flex: 1; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .scroll-wrap::-webkit-scrollbar { display: none; } .panel { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; position: relative; overflow: hidden; flex-shrink: 0; } .dot-track { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 10; } .dt-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.2); transition: all .3s; } .dt-dot.active { background: var(--brand); height: 14px; border-radius: 2px; } .ob-progress { height: 3px; background: rgba(255,255,255,.06); margin: 6px 28px 0; border-radius: 2px; flex-shrink: 0; position: relative; z-index: 5; } .ob-progress-fill { height: 100%; background: var(--brand); border-radius: 2px; } .ob-step { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; padding-top: 20px; } .ob-screen { flex: 1; display: flex; flex-direction: column; padding: 0 28px; position: relative; z-index: 5; } .ob-title { font-family: var(--font-serif); font-size: 24px; font-weight: 500; color: #E8E4DE; margin-bottom: 6px; line-height: 1.2; } .ob-sub { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,.4); margin-bottom: 24px; line-height: 1.5; } .ob-cta { width: 100%; background: var(--brand); color: #0b1117; border: none; border-radius: 14px; padding: 16px; font-family: var(--font-body); font-size: 16px; font-weight: 600; cursor: pointer; margin-top: auto; margin-bottom: 40px; } .shortcut-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .shortcut-card { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } .shortcut-card.selected { background: rgba(61,196,186,.1); border-color: rgba(61,196,186,.36); box-shadow: 0 0 0 1px rgba(61,196,186,.08), 0 18px 42px rgba(0,0,0,.25); } .shortcut-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: var(--brand); font-family: var(--font-mono); font-size: 18px; } .shortcut-card.selected .shortcut-icon { background: rgba(61,196,186,.16); border-color: rgba(61,196,186,.35); } .shortcut-kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 5px; } .shortcut-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: #E8E4DE; line-height: 1.15; } .shortcut-copy { font-family: var(--font-body); font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.48); margin-top: 6px; } .entry-mark { margin: 0 0 34px; } .entry-mark img { display: block; } .shortcut-note { margin-top: 18px; font-family: var(--font-serif); font-size: 14px; line-height: 1.55; font-style: italic; color: rgba(255,255,255,.42); } .data-safe-link { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: rgba(61,196,186,.78); text-decoration: none; transition: color .15s; } .data-safe-link svg { opacity: .85; } .data-safe-link:hover { color: var(--brand); } .stance-list { display: flex; flex-direction: column; gap: 40px; margin-top: 18px; } .stance-row { display: flex; align-items: center; gap: 18px; padding: 0 2px; text-decoration: none; } .stance-text { flex: 1; min-width: 0; } .stance-title { font-family: var(--font-serif); font-size: 19px; font-weight: 500; color: #E8E4DE; line-height: 1.2; letter-spacing: -.01em; } .stance-sub { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.42); margin-top: 5px; } .stance-chev { color: rgba(61,196,186,.5); flex-shrink: 0; transition: transform .2s, color .2s; } .stance-row:hover .stance-title { color: #fff; } .stance-row:hover .stance-chev { color: var(--brand); transform: translateX(3px); } .hook-next { width: 54px; height: 54px; border-radius: 50%; border: none; background: rgba(61,196,186,.1); color: rgba(61,196,186,.7); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .15s, color .15s; } .hook-next:hover { background: rgba(61,196,186,.18); color: #3dc4ba; transform: translateX(3px); } /* ════════════════════════════════════════════════════════════════ THE FEED — shared card / feed substrate (wp-k5a0.9) Ported from doc/mockups/storyboard-v4/journeys/feed.html and folded into the V5 shared layer so every door reuses the SAME card surface: · post-conversion retention stream (Feed/Saved tabs, Save/Pin) · Cat-2 dismissable deck (.feed-deck — one card, dismiss) · Cat-3 ambient topic/risk cards (.fc-ambient — "Does this affect me?") Tokens rebased onto V5 (var(--brand)); dismiss mechanic is new here. ════════════════════════════════════════════════════════════ */ /* Feed header (wordmark + Athena breathing dot) */ .feed-hdr { display: flex; align-items: center; justify-content: space-between; padding: 6px 22px 2px; flex-shrink: 0; } .feed-wordmark { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: #E8E4DE; letter-spacing: -.02em; } @keyframes feed-breathe { 0%, 100% { opacity: .35; box-shadow: 0 0 0 0 rgba(61,196,186,0); } 50% { opacity: 1; box-shadow: 0 0 6px 2px rgba(61,196,186,.2); } } .athena-status { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: feed-breathe 3.5s ease-in-out infinite; } /* Feed / Saved content tabs */ .feed-tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,.06); padding: 0 22px; flex-shrink: 0; } .feed-tab { padding: 10px 0; margin-right: 22px; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: rgba(255,255,255,.28); cursor: pointer; position: relative; transition: color .15s; } .feed-tab.active { color: #E8E4DE; } .feed-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--brand); border-radius: 1px; } /* Feed scroll area */ .feed-scroll { position: absolute; top: 0; left: 0; right: 0; bottom: 82px; z-index: 5; display: flex; flex-direction: column; } .feed-stream { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 18px 28px; scrollbar-width: none; } .feed-stream::-webkit-scrollbar { display: none; } /* Card base */ .fc { border-radius: 16px; margin-bottom: 16px; position: relative; overflow: hidden; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); } .fc:last-child { margin-bottom: 0; } /* Athena inline mark */ .am { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand); } /* Article / news card — publisher identity */ .fc-pub { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; } .fc-pub-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: rgba(255,255,255,.5); flex-shrink: 0; } .fc-pub-info { flex: 1; min-width: 0; } .fc-pub-name { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #E8E4DE; } .fc-pub-meta { font-family: var(--font-body); font-size: 11px; color: rgba(255,255,255,.25); margin-top: 1px; } /* Athena intro line */ .fc-athena-intro { display: flex; align-items: center; gap: 6px; padding: 10px 16px 0; } .fc-athena-intro-text { font-family: var(--font-body); font-size: 12px; font-style: italic; color: rgba(61,196,186,.6); } /* Body text */ .fc-body { font-family: var(--font-body); font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.55; padding: 10px 16px 0; } .fc-body strong { color: #E8E4DE; font-weight: 600; } .fc-more { color: rgba(255,255,255,.28); font-weight: 500; } /* Image */ .fc-img { margin: 12px 0 0; height: 170px; width: 100%; position: relative; overflow: hidden; } .fc-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .65; filter: saturate(.6); } .fc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,17,23,.2) 0%, rgba(11,17,23,.6) 100%); pointer-events: none; } /* Action bar — Save / Pin / Dismiss */ .fc-actions { display: flex; align-items: center; gap: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.04); position: relative; z-index: 1; } .fc-action { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 0; font-family: var(--font-body); font-size: 11px; font-weight: 500; color: rgba(255,255,255,.3); cursor: pointer; transition: color .15s; } .fc-action:hover { color: rgba(255,255,255,.5); } .fc-action.saved { color: var(--brand); } .fc-action.dismiss:hover { color: rgba(217,106,59,.85); } .fc-action + .fc-action { border-left: 1px solid rgba(255,255,255,.04); } .fc-action svg { flex-shrink: 0; } /* Athena insight card */ .fc-insight { background: #12161F; border-color: rgba(61,196,186,.18); } .fc-insight-inner { padding: 18px 16px; position: relative; z-index: 1; } .fc-insight-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .fc-insight-icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(61,196,186,.08); border: 1px solid rgba(61,196,186,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fc-insight-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); } .fc-insight-topic { font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: rgba(61,196,186,.55); margin-top: 2px; } .fc-insight-body { font-family: var(--font-serif); font-size: 15px; font-weight: 400; color: rgba(255,255,255,.65); line-height: 1.65; letter-spacing: -.01em; margin-bottom: 14px; } .fc-insight-cta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 12px; color: rgba(61,196,186,.65); cursor: pointer; transition: color .15s; } .fc-insight-cta:hover { color: var(--brand); } .fc-insight-cta::after { content: ''; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); } .fc-insight-bg { position: absolute; inset: 0; z-index: 0; } .fc-insight-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .15; filter: saturate(.25) brightness(.8); } .fc-insight-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(170deg, rgba(18,22,31,.2) 0%, rgba(18,22,31,.7) 45%, rgba(18,22,31,.95) 100%); } .fc-insight .fc-actions { border-top-color: rgba(61,196,186,.08); } /* Fact card */ .fc-fact { border-left: 3px solid var(--brand); } .fc-fact-inner { padding: 18px 16px; } .fc-fact-statement { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: #E8E4DE; line-height: 1.35; letter-spacing: -.01em; margin-bottom: 10px; } .fc-fact-supporting { font-family: var(--font-body); font-size: 12.5px; color: rgba(255,255,255,.35); line-height: 1.55; } /* Nudge card */ .fc-nudge { border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; } .fc-nudge-text { font-family: var(--font-body); font-size: 12.5px; color: rgba(255,255,255,.4); flex: 1; line-height: 1.45; } .fc-nudge-cta { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--brand); white-space: nowrap; cursor: pointer; flex-shrink: 0; } /* Saved tab */ .saved-sub { font-family: var(--font-body); font-size: 13px; font-style: italic; color: rgba(255,255,255,.25); padding: 10px 0 6px; } .pin-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(61,196,186,.55); background: rgba(61,196,186,.07); border: 1px solid rgba(61,196,186,.14); border-radius: 20px; padding: 3px 8px; } .fc-top-badge { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding: 14px 14px 0; } /* ── V5 dismiss mechanic ────────────────────────────────────────── Swipe/tap-away on any feed card. In the Cat-2 deck, dismissing the top card promotes the one behind it (handled by shared/feed.js). */ @keyframes fc-dismiss-out { to { opacity: 0; transform: translateX(-46px) scale(.92); margin-bottom: -100%; } } .fc.dismissing { animation: fc-dismiss-out .42s cubic-bezier(.4,0,.2,1) forwards; pointer-events: none; } /* Cat-2 deck deployment: one card on top, the rest peeking behind */ .feed-deck { position: relative; padding: 18px 18px 0; } .feed-deck .fc { margin-bottom: 0; } .feed-deck-kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(8,174,184,.7); padding: 6px 4px 12px; } .feed-deck-peek { position: relative; margin-top: -8px; } .feed-deck-peek .fc { transform: scale(.95) translateY(8px); opacity: .5; } /* Cat-3 ambient topic / risk card: "Does this affect me?" */ .fc-ambient { border-color: rgba(61,196,186,.16); } .fc-ambient-inner { padding: 16px; } .fc-ambient-kicker { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 6px; } .fc-ambient-title { font-family: var(--font-serif); font-size: 15px; color: #E8E4DE; line-height: 1.3; } .fc-ambient-body { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,.4); line-height: 1.5; margin-top: 5px; } .fc-affect-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--brand); cursor: pointer; } .fc-affect-cta::after { content: ''; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }