/* Self-hosted Inter variable font — no third-party CDN dependency. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/InterVariable.woff2") format("woff2-variations"), url("/assets/fonts/InterVariable.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2-variations"), url("/assets/fonts/InterVariable-Italic.woff2") format("woff2"); } :root { color-scheme: light; /* Light theme (default) */ --bg: #e3e5ed; --bg-grad-1: #dcdae8; --bg-grad-2: #e1dde8; --bg-grad-3: #d6d9e6; /* Soft lavender-tinted frame distinct from pure-white cards inside — mirrors dark mode's "slightly lighter than page bg, slightly darker than cards" layering. */ --frame: rgba(228, 220, 248, 0.72); --frame-border: rgba(255, 255, 255, 0.8); --frame-stroke: rgba(120, 100, 180, 0.22); --frame-shadow: 0 18px 48px rgba(120, 90, 200, 0.16), 0 4px 12px rgba(120, 90, 200, 0.08); --card: #ffffff; --card-border: rgba(255, 255, 255, 0.7); --card-stroke: rgba(120, 100, 180, 0.22); --card-hover: #ffffff; --pill: rgba(255, 255, 255, 0.75); --pill-border: rgba(255, 255, 255, 0.85); --pill-stroke: rgba(120, 100, 180, 0.18); --pill-active: #1a1530; --pill-active-ink: #ffffff; --surface-strong: rgba(255, 255, 255, 0.92); --surface-inset: rgba(255, 255, 255, 0.72); --menu-bg: rgba(255, 255, 255, 0.94); --logo-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 240, 255, 0.7) 100%); --logo-border: rgba(120, 100, 180, 0.22); --ink: #1a1530; --ink-soft: #3d3654; --muted: #6c6485; --line: rgba(120, 100, 180, 0.18); --line-soft: rgba(120, 100, 180, 0.1); --accent: #7b5cff; --accent-soft: #b9a8ff; --accent-glow: rgba(140, 100, 255, 0.35); --pink: #ff9ad6; --blue: #8ec5ff; --orange: #f7931a; --red: #d4365b; --green: #2fb09e; --radius-lg: 28px; --radius-md: 18px; --radius-sm: 12px; --radius-pill: 999px; --shadow-card: 0 4px 14px rgba(120, 90, 200, 0.10), 0 1px 2px rgba(120, 90, 200, 0.06); --shadow-hero: 0 18px 48px rgba(140, 110, 220, 0.18), 0 4px 12px rgba(140, 110, 220, 0.08); } /* Dark theme — toggled with */ [data-theme="dark"] { color-scheme: dark; --bg: #090812; --bg-grad-1: #171333; --bg-grad-2: #24123f; --bg-grad-3: #101b2d; --frame: rgba(22, 18, 42, 0.68); --frame-border: rgba(185, 168, 255, 0.16); --frame-stroke: rgba(185, 168, 255, 0.18); --frame-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); --card: rgba(30, 26, 54, 0.72); --card-border: rgba(185, 168, 255, 0.16); --card-stroke: rgba(185, 168, 255, 0.16); --card-hover: rgba(45, 38, 78, 0.86); --pill: rgba(30, 26, 54, 0.72); --pill-border: rgba(185, 168, 255, 0.2); --pill-stroke: rgba(185, 168, 255, 0.18); --pill-active: #ffffff; --pill-active-ink: #1a1530; --surface-strong: rgba(33, 28, 58, 0.94); --surface-inset: rgba(18, 15, 32, 0.7); --menu-bg: rgba(22, 18, 42, 0.96); --logo-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(235, 228, 255, 0.82) 100%); --logo-border: rgba(255, 255, 255, 0.28); --ink: #f1edff; --ink-soft: #cfc6ee; --muted: #9c92bb; --line: rgba(160, 130, 220, 0.18); --line-soft: rgba(160, 130, 220, 0.08); --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.18); --shadow-hero: 0 40px 100px rgba(0, 0, 0, 0.36); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; min-width: 320px; background: var(--bg); background-image: radial-gradient(60% 50% at 15% 20%, var(--bg-grad-1) 0%, transparent 60%), radial-gradient(50% 50% at 85% 30%, var(--bg-grad-2) 0%, transparent 65%), radial-gradient(70% 60% at 50% 100%, var(--bg-grad-3) 0%, transparent 70%); background-attachment: fixed; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-feature-settings: "ss01", "cv11"; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; } .page { width: min(1320px, 100%); margin: 0 auto; padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 44px) clamp(40px, 6vw, 80px); } html, body { overflow-x: hidden; } /* Keyboard-only skip link — invisible until focused, then sits at the top-left so a tab user can jump straight past the topbar to content. */ .skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--ink); color: #fff; font-weight: 700; font-size: 0.9rem; text-decoration: none; transform: translateY(-200%); transition: transform 0.15s ease; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--accent); outline-offset: 2px; } /* ------- Glass frame ------- */ .glass-frame { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--frame-stroke); background: var(--frame); backdrop-filter: blur(22px) saturate(1.05); -webkit-backdrop-filter: blur(22px) saturate(1.05); box-shadow: var(--frame-shadow), inset 0 1px 0 var(--frame-border); padding: clamp(18px, 3vw, 32px); overflow: hidden; } .glass-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 35%), linear-gradient(315deg, rgba(180, 150, 255, 0.18) 0%, rgba(255, 255, 255, 0) 50%); pointer-events: none; } [data-theme="dark"] .glass-frame::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 35%), linear-gradient(315deg, rgba(123, 92, 255, 0.14) 0%, rgba(255, 255, 255, 0) 50%); } /* ------- Top bar: brand + pill nav + search ------- */ .topbar { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(12px, 2vw, 24px); align-items: center; z-index: 2; } .brand { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: var(--radius-sm); background: var(--pill); border: 1px solid var(--pill-stroke); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.95rem; white-space: nowrap; } .pill-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pill-nav button, .pill-nav a { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--pill); border: 1px solid var(--pill-stroke); color: var(--ink-soft); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .pill-nav button:hover, .pill-nav a:hover, .pill-nav button:focus-visible, .pill-nav a:focus-visible { background: var(--card-hover); border-color: rgba(123, 92, 255, 0.32); color: var(--ink); box-shadow: 0 6px 18px rgba(120, 90, 200, 0.14); outline: none; } .brand { transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .brand:hover, .brand:focus-visible { background: var(--card-hover); border-color: rgba(123, 92, 255, 0.32); box-shadow: 0 6px 18px rgba(120, 90, 200, 0.14); outline: none; } .search { transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .search:hover, .search:focus-within { border-color: rgba(123, 92, 255, 0.32); box-shadow: 0 6px 18px rgba(120, 90, 200, 0.14); } .pill-nav button[aria-pressed="true"], .pill-nav a[aria-pressed="true"] { background: var(--pill-active); border-color: var(--pill-active); color: var(--pill-active-ink); } .topbar-actions { display: flex; align-items: center; gap: 8px; min-width: 0; } .search { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--pill); border: 1px solid var(--pill-stroke); min-width: 220px; max-width: 320px; } .theme-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--radius-sm); background: var(--pill); border: 1px solid var(--pill-stroke); color: var(--ink); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .theme-toggle:hover, .theme-toggle:focus-visible { background: var(--card-hover); border-color: rgba(123, 92, 255, 0.32); box-shadow: 0 6px 18px rgba(120, 90, 200, 0.14); transform: translateY(-1px); outline: none; } .theme-toggle-icon { position: relative; width: 17px; height: 17px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(123, 92, 255, 0.12); } .theme-toggle-icon::after { content: ""; position: absolute; top: -3px; left: 5px; width: 17px; height: 17px; border-radius: 50%; background: var(--pill); transition: transform 0.15s ease, opacity 0.15s ease; } [data-theme="dark"] .theme-toggle-icon::after { transform: translate(9px, -2px); opacity: 0; } .search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.9rem; outline: none; } .search input::placeholder { color: var(--muted); } .search-icon { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; } /* ------- Hero block ------- */ .hero-shell { margin-top: clamp(20px, 3vw, 32px); } .hero { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: clamp(18px, 2vw, 28px); align-items: stretch; width: 100%; min-width: 0; min-height: 420px; } .hero > * { min-width: 0; } .hero-copy { display: flex; min-width: 0; align-self: stretch; } /* Hero panel — solid white card matching the rail-card aesthetic, floats on the page background with real lift. Content stacks from top; the logo strip uses auto margins to center itself in any free vertical space, and the CTA anchors to the bottom. */ .hero-panel { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius-md); border: 1px solid var(--card-stroke); background: var(--card); box-shadow: var(--shadow-card); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill); background: rgba(123, 92, 255, 0.12); border: 1px solid rgba(123, 92, 255, 0.22); color: var(--accent); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; width: fit-content; } .hero-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.85rem; font-weight: 500; } .hero-meta .sep { width: 14px; height: 1px; background: var(--muted); opacity: 0.5; } .hero h1 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; color: var(--ink); } .hero .post-summary { width: 100%; min-width: 0; max-width: min(100%, 62ch); overflow-wrap: anywhere; word-break: break-word; /* Cap the hero summary so a long news+releases block doesn't push the hero panel past the rail's natural height. Full summary still renders on the detail page (.post-card .post-summary). */ display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .hero .post-summary span { display: block; min-width: 0; margin-top: 6px; overflow-wrap: anywhere; word-break: break-word; } .hero .post-summary span:first-child { margin-top: 0; } .hero .post-summary strong { color: var(--ink); font-weight: 700; } .hero-signals { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin-top: 18px; } .hero-signal { display: inline-flex; align-items: baseline; gap: 6px; min-height: 34px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(123, 92, 255, 0.18); background: rgba(123, 92, 255, 0.06); color: var(--muted); font-size: 0.76rem; font-weight: 700; } .hero-signal strong { color: var(--ink); font-size: 0.92rem; font-weight: 850; } [data-theme="dark"] .hero-signal { border-color: rgba(185, 168, 255, 0.18); background: rgba(255, 255, 255, 0.06); } /* Horizontal marquee of project logos shown on brief previews — slow auto-scroll right-to-left, "what's in this brief" at a glance. Auto margins center it in the empty space between summary and CTA. Vertical padding gives room for the logo drop shadows to render without getting clipped by overflow: hidden. */ .hero-logo-strip { position: relative; min-width: 0; width: 100%; margin: auto 0; /* Tight vertical padding so the strip doesn't blow the hero panel past a 13"-laptop screen height. Browser title= tooltip still gives the project name on hover; we don't need a custom label row underneath. */ padding: 6px 0; overflow: hidden; } /* The track is what scrolls — the fade mask is applied here so it doesn't clip the label below. */ .hero-logo-strip-track { position: relative; display: flex; flex-wrap: nowrap; gap: 12px; width: max-content; animation: hero-logo-marquee 45s linear infinite; will-change: transform; mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); } .hero-logo-strip:hover .hero-logo-strip-track, .hero-logo-strip:focus-within .hero-logo-strip-track { animation-play-state: paused; } .hero-logo-strip .logo { flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 8px 18px rgba(120, 90, 200, 0.26), 0 2px 6px rgba(120, 90, 200, 0.18), 0 1px 0 rgba(255, 255, 255, 0.5) inset; } /* Desktop bumps the marquee logos +25% for more presence on wider canvases. */ @media (min-width: 980px) { .hero-logo-strip .logo { width: 65px; height: 65px; border-radius: 15px; } .hero-logo-strip-track { gap: 14px; } } [data-theme="dark"] .hero-logo-strip .logo { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.06) inset; } .hero-logo-strip .logo img { pointer-events: none; } /* Loop one full copy of the list — since the track contains the logos twice end-to-end, translating by -50% means the second copy lines up exactly where the first started. No visible jump. */ @keyframes hero-logo-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .hero-logo-strip-track { animation: none; } } .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-width: 0; margin-top: 18px; } .hero-source-note { color: var(--muted); font-size: 0.8rem; font-weight: 650; overflow-wrap: anywhere; } .hero-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: transparent; color: var(--muted); font-size: 0.78rem; font-weight: 600; } .tag.solid { background: var(--pill); border: 1px solid var(--pill-stroke); } .cta { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px 0 24px; border-radius: var(--radius-md); background: var(--surface-strong); border: 1px solid var(--pill-stroke); color: var(--ink); font: inherit; font-weight: 700; font-size: 0.95rem; text-decoration: none; cursor: pointer; width: fit-content; box-shadow: 0 6px 24px rgba(120, 90, 200, 0.18); transition: transform 0.15s ease, box-shadow 0.15s ease; } .cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(120, 90, 200, 0.28); } .cta-arrow { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.7rem; } /* Orb removed — hero now uses the same glass-card aesthetic as the rail. */ /* ------- Right rail: Recommended ------- */ .rail { position: relative; z-index: 2; align-self: stretch; display: flex; flex-direction: column; gap: 14px; min-width: 0; isolation: isolate; /* Give the rail the same card-surface treatment as .hero-panel so both visible "boxes" read as equal-height containers regardless of how much content each one has inside. Grid align-items:stretch already equalises the heights; this just makes that equality visible. */ padding: clamp(18px, 2.2vw, 24px); border-radius: var(--radius-md); border: 1px solid var(--card-stroke); background: var(--card); box-shadow: var(--shadow-card); } .rail-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; } .rail-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); } .rail-head a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.82rem; font-weight: 600; text-decoration: none; } .rail-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; } .rail-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--card-stroke); background: var(--card); box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink); cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .rail-card-body { min-width: 0; } .rail-card:hover, .rail-card:focus-visible { background: var(--card-hover); border-color: rgba(123, 92, 255, 0.32); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(120, 90, 200, 0.16); outline: none; } .rail-card-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--muted); font-size: 0.74rem; font-weight: 600; } .rail-card-meta .sep { width: 10px; height: 1px; background: var(--muted); opacity: 0.4; } .rail-card h4 { margin: 0; font-size: 0.95rem; line-height: 1.25; font-weight: 700; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; /* Always reserve 2 lines so every rail-card has the same height. */ min-height: calc(2 * 1.25em); } .rail-thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent-soft) 0%, var(--pink) 100%); position: relative; overflow: hidden; flex-shrink: 0; } .rail-thumb[data-tone="security"] { background: linear-gradient(135deg, #ff8a9d 0%, #c45cff 100%); } .rail-thumb[data-tone="release"] { background: linear-gradient(135deg, #8ec5ff 0%, #b9a8ff 100%); } .rail-thumb[data-tone="privacy"] { background: linear-gradient(135deg, #6b4dff 0%, #8ec5ff 100%); } .rail-thumb[data-tone="lightning"] { background: linear-gradient(135deg, #ffd28a 0%, #ff9ad6 100%); } .rail-thumb[data-tone="nostr"] { background: linear-gradient(135deg, #b9a8ff 0%, #ff9ad6 100%); } .rail-thumb[data-tone="ai"] { background: linear-gradient(135deg, #2fe0c4 0%, #8ec5ff 100%); } .rail-thumb[data-tone="research"] { background: linear-gradient(135deg, #8ec5ff 0%, #7b5cff 100%); } .rail-thumb[data-tone="guide"] { background: linear-gradient(135deg, #b9a8ff 0%, #8ec5ff 100%); } .rail-thumb::after { content: ""; position: absolute; inset: -10%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7) 0%, transparent 35%), radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.25) 0%, transparent 45%); } /* ------- Chronological feed ------- */ .feed { margin-top: clamp(28px, 4vw, 48px); } .feed-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; padding: 0 6px; } .feed-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ink); } .feed-head .feed-count { color: var(--muted); font-size: 0.85rem; font-weight: 500; } .feed-see-all { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: var(--radius-sm); background: rgba(123, 92, 255, 0.08); border: 1px solid rgba(123, 92, 255, 0.18); color: var(--accent); font-size: 0.82rem; font-weight: 700; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .feed-see-all:hover { background: rgba(123, 92, 255, 0.18); border-color: rgba(123, 92, 255, 0.32); } .feed-see-all[hidden] { display: none; } .post-nav-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .post-nav-row .post-back { margin-bottom: 0; } .post-nav-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: auto; } .archive-header { position: relative; z-index: 1; padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-md); border: 1px solid var(--card-stroke); background: var(--card); box-shadow: var(--shadow-card); } .archive-title-row { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; } .archive-title-row h1 { margin: 0; font-size: clamp(1.85rem, 3.4vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; overflow-wrap: anywhere; } .archive-count { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--radius-pill); background: rgba(123, 92, 255, 0.1); border: 1px solid rgba(123, 92, 255, 0.18); color: var(--accent); font-size: 0.78rem; font-weight: 800; } .archive-header .post-summary { max-width: 760px; margin: 12px 0 0; } .date-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 6px 14px; } .date-filters button { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--radius-sm); background: var(--pill); border: 1px solid var(--pill-stroke); color: var(--ink-soft); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .date-filters button:hover, .date-filters button:focus-visible { background: var(--card-hover); border-color: rgba(123, 92, 255, 0.32); color: var(--ink); box-shadow: 0 6px 18px rgba(120, 90, 200, 0.14); outline: none; } .date-filters button[aria-pressed="true"] { background: var(--pill-active); border-color: var(--pill-active); color: var(--pill-active-ink); } .feed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .feed-more { display: flex; justify-content: center; margin-top: 24px; } .feed-more[hidden] { display: none; } .feed-more button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 24px; border-radius: var(--radius-sm); background: var(--pill); border: 1px solid var(--pill-stroke); color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .feed-more button:hover, .feed-more button:focus-visible { background: var(--card-hover); border-color: rgba(123, 92, 255, 0.32); box-shadow: 0 8px 22px rgba(120, 90, 200, 0.16); transform: translateY(-1px); outline: none; } .feed-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px 20px 22px; border-radius: var(--radius-md); border: 1px solid var(--card-stroke); background: var(--card); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; text-align: left; font: inherit; } .feed-card:hover, .feed-card:focus-visible { transform: translateY(-2px); background: var(--card-hover); border-color: rgba(123, 92, 255, 0.32); box-shadow: 0 8px 22px rgba(120, 90, 200, 0.16); outline: none; } .feed-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; } .feed-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; color: var(--muted); font-size: 0.78rem; font-weight: 600; } .feed-card-meta span { min-width: 0; overflow-wrap: anywhere; } .feed-card-meta .sep { width: 12px; height: 1px; background: var(--muted); opacity: 0.4; } .feed-card h3 { margin: 4px 0 0; font-size: 1.1rem; line-height: 1.22; font-weight: 700; overflow-wrap: anywhere; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .feed-card p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .feed-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; } .feed-card-tags .tag { font-size: 0.72rem; height: 24px; padding: 0 10px; } .feed-card-tags .tag-link { cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .feed-card-tags .tag-link:hover { background: rgba(123, 92, 255, 0.16); color: var(--accent); } .archive-card h3 { font-size: clamp(1rem, 1.6vw, 1.08rem); line-height: 1.24; hyphens: auto; } .archive-card p { -webkit-line-clamp: 3; } .empty-state { grid-column: 1 / -1; padding: 40px; border-radius: var(--radius-md); border: 1px dashed var(--line); background: var(--card); color: var(--muted); text-align: center; font-weight: 500; } /* ------- Logos ------- */ .logo { display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden; border: 1px solid var(--logo-border); background: var(--logo-bg); box-shadow: 0 2px 8px rgba(120, 90, 200, 0.12); color: var(--ink); font-weight: 800; letter-spacing: -0.02em; line-height: 1; } .logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .logo-sm { width: 40px; height: 40px; border-radius: 10px; font-size: 1rem; } .logo-md { width: 52px; height: 52px; border-radius: 12px; font-size: 1.3rem; } .logo-lg { width: 72px; height: 72px; border-radius: 16px; font-size: 1.8rem; } /* Hero logos get a soft drop shadow so they read as a distinct surface above the hero glass panel. */ .hero-headline .logo { box-shadow: 0 8px 20px rgba(120, 90, 200, 0.16), 0 1px 0 rgba(255, 255, 255, 0.7) inset; } /* Fallback tone backgrounds — gradients tinted by beat */ .logo-fallback[data-tone="security"] { background: linear-gradient(135deg, #ff8a9d 0%, #c45cff 100%); color: #fff; border-color: rgba(255,255,255,0.7); } .logo-fallback[data-tone="release"] { background: linear-gradient(135deg, #8ec5ff 0%, #b9a8ff 100%); color: #1a1530; } .logo-fallback[data-tone="privacy"] { background: linear-gradient(135deg, #6b4dff 0%, #8ec5ff 100%); color: #fff; } .logo-fallback[data-tone="lightning"] { background: linear-gradient(135deg, #ffd28a 0%, #ff9ad6 100%); color: #4a1f2c; } .logo-fallback[data-tone="nostr"] { background: linear-gradient(135deg, #b9a8ff 0%, #ff9ad6 100%); color: #2a1430; } .logo-fallback[data-tone="ai"] { background: linear-gradient(135deg, #2fe0c4 0%, #8ec5ff 100%); color: #0c2933; } .logo-fallback[data-tone="research"] { background: linear-gradient(135deg, #b9a8ff 0%, #8ec5ff 100%); color: #1a1530; } .logo-fallback[data-tone="guide"] { background: linear-gradient(135deg, #b9a8ff 0%, #8ec5ff 100%); color: #1a1530; } /* The brief hero logo is the brand sphere PNG — let it fill the rounded rectangle edge-to-edge, no extra padding. */ .logo img[src$="_brief.png"] { background: transparent; } /* ------- Hero headline (logo + meta + title row) ------- */ .hero-headline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 20px; } .hero-headline > div { min-width: 0; } .hero-headline .hero-meta { margin: 4px 0 8px; } /* ------- Footer ------- */ .footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(28px, 4vw, 48px); padding: 0 6px; color: var(--muted); font-size: 0.85rem; } .footer a { color: var(--muted); text-decoration: none; font-weight: 600; } .footer a:hover { color: var(--ink); } .footer-stats { margin-left: auto; margin-right: 16px; font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--muted); opacity: 0.85; } .footer-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .footer-links a { font-size: 0.85rem; } /* Editor's-pick badge — shown on feed cards in `editorPicks` from config/editorial-overrides.json. Subtle accent ring + chip. */ .editor-pick-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: var(--radius-pill); background: rgba(123, 92, 255, 0.14); color: var(--accent); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .feed-card-pick { border-color: rgba(123, 92, 255, 0.32); box-shadow: var(--shadow-card), 0 0 0 2px rgba(123, 92, 255, 0.12); } /* /sources/ — public, browsable list of every feed the pipeline pulls from. Grouped by beat, sorted by tier within each beat. */ .source-actions { margin-top: 18px; } .source-section { margin-top: 32px; } .source-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .source-section-head h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; } .source-count { font-size: 0.78rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .source-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: stretch; } .source-list > li { display: flex; height: 100%; } .source-card { display: flex; flex-direction: column; width: 100%; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--card-stroke); background: var(--card); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } a.source-card:hover, a.source-card:focus-visible { transform: translateY(-1px); border-color: var(--accent-soft, rgba(123, 92, 255, 0.4)); box-shadow: var(--shadow-card-hover, 0 8px 24px rgba(20, 14, 50, 0.12)); outline: none; } a.source-card:hover .source-name, a.source-card:focus-visible .source-name { color: var(--accent); } .source-card-head { display: flex; align-items: center; gap: 12px; } .source-card-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .source-name { font-size: 0.95rem; font-weight: 700; color: var(--ink); transition: color 120ms ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .source-tier { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .source-tier-core { background: rgba(47, 224, 196, 0.18); color: #1e7d6c; border: 1px solid rgba(47, 224, 196, 0.4); } [data-theme="dark"] .source-tier-core { color: #6be5cf; } .source-tier-important { background: rgba(123, 92, 255, 0.12); color: var(--accent); border: 1px solid rgba(123, 92, 255, 0.28); } .source-tier-watch { background: rgba(120, 100, 180, 0.10); color: var(--muted); border: 1px solid var(--pill-stroke); } .source-card-meta { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 600; color: var(--muted); } .source-card-meta .sep { width: 10px; height: 1px; background: var(--muted); opacity: 0.4; } .source-description { margin: 10px 0 0; font-size: 0.86rem; line-height: 1.45; color: var(--ink-soft); } /* /admin/#editorial (formerly /edit/) — local-only editorial overrides editor. Generates a JSON snippet for `config/editorial-overrides.json`. */ .edit-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; } .edit-summary { margin: 18px 0; border: 1px solid var(--card-stroke); border-radius: var(--radius-sm); padding: 10px 14px; } .edit-summary summary { cursor: pointer; font-size: 0.86rem; font-weight: 700; color: var(--ink); } .edit-summary pre { margin: 10px 0 0; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-inset); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; line-height: 1.4; overflow-x: auto; white-space: pre; } .edit-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 0.88rem; } .edit-table th, .edit-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .edit-table th { text-align: left; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .edit-col-action { text-align: center; width: 96px; } .edit-col-title { width: 32%; } .edit-col-title input { width: 100%; height: 32px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--pill-stroke); background: var(--pill); color: var(--ink); font: inherit; font-size: 0.86rem; } .edit-row-hidden td { opacity: 0.45; } .edit-row-meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; } .edit-table input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; } /* /admin/#analytics (formerly /stats/) — auth-gated visitor counter table. */ .stats-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .stats-table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 0.9rem; } .stats-table th, .stats-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; } .stats-table th { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .stats-table td a { color: var(--ink); text-decoration: none; font-weight: 600; } .stats-table td a:hover { color: var(--accent); } .stats-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; } .stats-table tfoot td { border-top: 2px solid var(--card-stroke); border-bottom: 0; font-size: 0.92rem; } /* Mobile filter drawer — bottom sheet that opens when the "Filter" button in the mobile nav is tapped. Hidden on desktop. */ .filter-drawer { position: fixed; inset: 0; z-index: 100; } .filter-drawer[hidden] { display: none; } .filter-drawer-backdrop { position: absolute; inset: 0; background: rgba(20, 17, 40, 0.55); opacity: 0; transition: opacity 0.22s ease; } .filter-drawer.open .filter-drawer-backdrop { opacity: 1; } .filter-drawer-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; padding: 18px 18px calc(28px + env(safe-area-inset-bottom, 0px)); border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); background: var(--card); border-top: 1px solid var(--card-stroke); box-shadow: 0 -16px 40px rgba(120, 90, 200, 0.18); transform: translateY(100%); transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); } .filter-drawer.open .filter-drawer-sheet { transform: translateY(0); } .filter-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .filter-drawer-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--ink); } .filter-drawer-close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--pill-stroke); background: var(--pill); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; } .filter-drawer-section { margin-top: 12px; } .filter-drawer-section h3 { margin: 0 0 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .filter-drawer-options { display: flex; flex-direction: column; gap: 4px; } .filter-drawer-option { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--pill-stroke); background: var(--pill); color: var(--ink); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-align: left; } .filter-drawer-option[aria-checked="true"] { background: var(--pill-active); border-color: var(--pill-active); color: var(--pill-active-ink); } .filter-drawer-check { font-weight: 800; } /* Mobile-only sticky quick-action bar — hidden on desktop. iOS safe-area inset so it sits cleanly above the home-bar. */ /* .scroll-top — floating "back to top" FAB. Replaces the old 4-tab mobile bottom bar (it consumed too much viewport real estate for the value). Hidden by default via the `hidden` attribute; JS removes that after the user scrolls past 400px. Mobile-only via media query — desktop never shows it. */ .scroll-top { display: none; } @media (max-width: 640px) { .scroll-top { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 16px; z-index: 50; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--card-stroke); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); color: var(--accent); box-shadow: 0 6px 18px rgba(120, 90, 200, 0.22); cursor: pointer; -webkit-tap-highlight-color: transparent; opacity: 0; transform: translateY(8px); transition: opacity 160ms ease, transform 160ms ease; align-items: center; justify-content: center; } .scroll-top:not([hidden]) { display: flex; } .scroll-top.is-visible { opacity: 1; transform: translateY(0); } [data-theme="dark"] .scroll-top { background: rgba(22, 18, 42, 0.92); border-color: rgba(185, 168, 255, 0.22); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42); } .scroll-top:active { transform: scale(0.95); } } /* ------- Per-post page ------- */ .post-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); padding: 0; } .post-article { max-width: 760px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px); } /* Main article content sits on its own card surface, matching the tip-jar and primary-sources styling — keeps the visual hierarchy consistent. */ .post-card { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-md); border: 1px solid var(--card-stroke); background: var(--card); box-shadow: var(--shadow-card); } .post-card .hero-headline { margin-top: 0; } .post-card .post-summary { margin-bottom: 28px; } .post-card .post-body :last-child { margin-bottom: 0; } /* "Filed under" — discoverability row at the foot of a release post. Compact beat + tag chips that link into the matching archive pages. */ .filed-under { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-soft); } .filed-under-label { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .filed-under-chips { display: flex; flex-wrap: wrap; gap: 6px; } .filed-under-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--pill-stroke); background: var(--pill); color: var(--ink-soft); text-decoration: none; font-size: 0.78rem; font-weight: 600; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .filed-under-chip:hover, .filed-under-chip:focus-visible { background: var(--card-hover); border-color: rgba(123, 92, 255, 0.32); color: var(--ink); outline: none; } .filed-under-chip-beat { color: var(--accent); background: rgba(123, 92, 255, 0.10); border-color: rgba(123, 92, 255, 0.22); font-weight: 700; } .filed-under-chip-beat:hover, .filed-under-chip-beat:focus-visible { background: rgba(123, 92, 255, 0.18); border-color: rgba(123, 92, 255, 0.36); color: var(--accent); } .filed-under-chip-project { font-weight: 700; } /* "Read next" — related posts widget at the foot of a release/advisory detail page. 1-3 sibling cards drawn from same product or beat. */ .related { display: flex; flex-direction: column; gap: 14px; } .related-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; } .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; } @media (min-width: 720px) { .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .related-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--card-stroke); background: var(--card); box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .related-card:hover, .related-card:focus-visible { transform: translateY(-1px); border-color: rgba(123, 92, 255, 0.32); box-shadow: 0 8px 22px rgba(120, 90, 200, 0.16); outline: none; } .related-card .logo { width: 48px; height: 48px; } .related-card-body { min-width: 0; } .related-card-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.72rem; font-weight: 600; margin-bottom: 4px; } .related-card-meta .sep { width: 10px; height: 1px; background: var(--muted); opacity: 0.4; } .related-card h3 { margin: 0; font-size: 0.92rem; line-height: 1.25; font-weight: 700; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .post-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 8px 14px 8px 10px; border-radius: var(--radius-sm); background: var(--pill); border: 1px solid var(--pill-stroke); color: var(--ink-soft); text-decoration: none; font-size: 0.85rem; font-weight: 600; } .post-back:hover { background: var(--card-hover); color: var(--ink); } .post-article h1 { margin: 14px 0 18px; font-size: clamp(1.85rem, 3.4vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; overflow-wrap: anywhere; } .hero h1 { overflow-wrap: anywhere; } .post-summary { margin: 0 0 28px; color: var(--ink-soft); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.55; } .post-body { color: var(--ink-soft); font-size: 1rem; line-height: 1.65; } .post-body h2 { margin: 36px 0 14px; font-size: 1.45rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .post-body h3 { margin: 28px 0 10px; font-size: 1.15rem; font-weight: 700; color: var(--ink); } .post-body p { margin: 0 0 16px; } .post-body ul { margin: 0 0 20px; padding: 0 0 0 20px; } .post-body li { margin: 6px 0; } .post-body ol { margin: 0 0 20px; padding: 0 0 0 22px; } .post-body code { padding: 0.12em 0.38em; border-radius: 6px; border: 1px solid var(--line-soft); background: var(--pill); color: var(--ink); font-family: "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace; font-size: 0.9em; } .post-body pre { margin: 18px 0 22px; padding: 16px; border-radius: var(--radius-sm); border: 1px solid var(--card-stroke); background: var(--pill); color: var(--ink); overflow-x: auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .post-body pre code { display: block; padding: 0; border: 0; background: transparent; font-size: 0.88rem; line-height: 1.6; white-space: pre; } .post-body blockquote { margin: 18px 0 22px; padding: 12px 16px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--pill); color: var(--ink-soft); } .post-body blockquote p { margin: 0; } .post-body a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(123, 92, 255, 0.3); overflow-wrap: anywhere; } .post-body a:hover { border-bottom-color: var(--accent); } .post-sources { padding: 24px 26px; border-radius: var(--radius-md); border: 1px solid var(--card-stroke); background: var(--card); box-shadow: var(--shadow-card); } .post-sources h2 { margin: 0 0 14px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .post-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .post-sources li { padding-top: 10px; border-top: 1px solid var(--line-soft); } .post-sources li:first-child { border-top: 0; padding-top: 0; } .post-sources a { color: var(--ink); font-size: 0.92rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; } .post-sources a:hover { color: var(--accent); } /* ------- Share + tip on per-post pages ------- */ .share-control { position: relative; display: inline-block; } .share-primary { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--pill-stroke); background: var(--pill); color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .share-primary:hover, .share-primary:focus-visible { background: var(--card-hover); border-color: rgba(123, 92, 255, 0.32); box-shadow: 0 6px 18px rgba(120, 90, 200, 0.14); transform: translateY(-1px); outline: none; } .share-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; display: grid; min-width: 200px; padding: 6px; gap: 2px; border-radius: var(--radius-md); border: 1px solid var(--card-stroke); background: var(--menu-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 14px 32px rgba(120, 90, 200, 0.22); } .share-menu[hidden] { display: none; } .share-menu-item { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 600; text-decoration: none; cursor: pointer; width: 100%; text-align: left; transition: background 0.12s ease; } .share-menu-item:hover, .share-menu-item:focus-visible { background: var(--card-hover); outline: none; } .tip-jar { display: grid; gap: 12px; padding: 22px 24px; border-radius: var(--radius-md); border: 1px solid var(--card-stroke); background: var(--card); box-shadow: var(--shadow-card); } .tip-jar header h2 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--ink); } .tip-jar header p { margin: 0 0 4px; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.45; } .tip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tip-row-value { flex: 1; min-width: 0; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--pill-stroke); background: var(--surface-inset); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; color: var(--ink); overflow-x: auto; white-space: nowrap; } .tip-hint { margin: 4px 0 0; font-size: 0.8rem; color: var(--muted); } .tip-copy, .tip-link { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--pill-stroke); background: var(--pill); color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .tip-copy:hover, .tip-link:hover { background: var(--card-hover); border-color: rgba(123, 92, 255, 0.32); } /* ------- Responsive ------- */ @media (max-width: 980px) { .hero { grid-template-columns: 1fr; min-height: auto; } .rail { border-top: 1px solid var(--line-soft); padding-top: 18px; } .rail::before { inset: 8px 0 0; } .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topbar { grid-template-columns: 1fr; } .topbar-actions { width: 100%; } .search { flex: 1; max-width: none; min-width: 0; } .pill-nav { overflow-x: auto; flex-wrap: nowrap; margin: 0 -16px; padding: 2px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* Soft right-edge fade hint that more pills exist off-screen. */ mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); } .pill-nav button, .pill-nav a { flex-shrink: 0; } .pill-nav::-webkit-scrollbar { display: none; } } @media (max-width: 640px) { .glass-frame { padding: clamp(14px, 4vw, 22px); } .feed-grid { grid-template-columns: 1fr; } .hero { gap: 16px; } .hero-copy { gap: 18px; padding: 0; } .hero-panel { width: 100%; max-width: 100%; padding: 14px; overflow: hidden; } /* Hero headline reflow — logo top-right, title block left. The default mobile layout stacked the logo above the title block which wasted vertical space and pushed the headline below the fold on phones. This puts both in a single row, logo small + right-anchored, title block taking the rest. */ .hero-headline { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; margin-top: 14px; } .hero-headline > div { flex: 1; min-width: 0; order: 0; } .hero-headline .logo { order: 1; flex-shrink: 0; } .hero-headline .logo.logo-lg { width: 48px; height: 48px; border-radius: 12px; font-size: 1.3rem; } .hero-headline .hero-meta { margin-top: 0; } .hero h1 { font-size: 1.48rem; line-height: 1.1; } .hero .post-summary { font-size: 0.95rem; width: auto; max-width: none; white-space: normal; } .hero .post-summary span { width: auto; max-width: 100%; white-space: normal; } .hero-signals { gap: 6px; margin-top: 14px; } .hero-signal { flex: 1 1 100%; justify-content: flex-start; min-width: 0; } .hero-actions { align-items: flex-start; margin-top: 14px; } .hero-source-note { width: 100%; } .cta { height: 44px; padding: 0 18px 0 20px; font-size: 0.9rem; } .feed-head { gap: 8px; } .rail-list { flex-direction: row; gap: 10px; margin: 0 -8px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rail-list::-webkit-scrollbar { display: none; } .rail-list li { flex: 0 0 min(86%, 300px); scroll-snap-align: start; } .rail-card { height: 100%; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 10px 12px; } /* Shrink the thumb so the meta + title have room on a narrow snap card. */ .rail-card .rail-thumb, .rail-card .logo { width: 48px; height: 48px; } /* Meta in the carousel cards was breaking text word-by-word; stack it vertically so each line truncates cleanly. */ .rail-card-meta { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; font-size: 0.72rem; } .rail-card-meta > span:not(.sep) { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-card-meta .sep { display: none; } .rail-card h4 { font-size: 0.9rem; } /* Post page — tighten the meta strip so the dash separators don't wrap mid-line. */ .post-page { padding: 0; } .post-article h1 { font-size: 1.5rem; } .hero-headline .logo.logo-md, .post-article .hero-headline .logo { width: 48px; height: 48px; border-radius: 12px; } .hero-meta { flex-wrap: wrap; gap: 6px 10px; font-size: 0.78rem; } .hero-meta .sep { display: none; } .post-summary { font-size: 0.98rem; } .post-body { font-size: 0.96rem; } .post-sources { padding: 18px 18px; } /* Tip jar — make the address row stack so the email never gets clipped. */ .tip-jar { padding: 18px 18px; } .tip-row { gap: 8px; } .tip-row-value { flex: 1 1 100%; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; } .tip-link, .tip-copy { flex: 1 1 calc(50% - 4px); justify-content: center; } .footer { flex-direction: column; align-items: flex-start; gap: 8px; } .footer-stats { margin-left: 0; margin-right: 0; } /* Archive header inside a glass frame should not feel cramped. */ .post-page .post-summary { margin-bottom: 18px; } } @media (max-width: 480px) { .post-article .hero-headline { grid-template-columns: 1fr; gap: 12px; } .post-article .hero-headline .logo { justify-self: start; } .post-article .hero-headline .hero-meta { margin-top: 0; } } /* .editorial-lead — paragraph generated by scripts/editor.mjs that frames what today's brief is about. Renders between the post summary and the markdown body on brief detail pages. Visually distinct (italic, accent- tinted left border) so readers can tell the editorial layer apart from the source-driven summary line above. */ .editorial-lead { margin-top: 18px; padding: 14px 18px; border-left: 3px solid var(--accent); background: linear-gradient(90deg, rgba(123, 92, 255, 0.06), rgba(46, 224, 196, 0.0)); border-radius: 4px; } .editorial-lead p { margin: 0; font-size: 1.02rem; line-height: 1.55; font-style: italic; color: var(--ink); } /* Operator's notes inside the brief body — rendered as markdown blockquotes by scripts/research.mjs (each story bullet gets a "> note" line beneath). Style as a subdued inline annotation, distinct from regular blockquotes on other post pages. */ .post-body blockquote { margin: 6px 0 14px; padding: 6px 0 6px 14px; border-left: 2px solid var(--accent-soft, rgba(123, 92, 255, 0.4)); color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; font-style: italic; } .post-body blockquote p { margin: 0; } /* .nostr-discuss — "Discuss on Nostr" callout on published brief pages. Surfaces a clear path off the static page into the user's preferred Nostr client so replies and zaps land on the protocol, not the site. */ .nostr-discuss { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--pill-stroke); background: linear-gradient(135deg, rgba(123, 92, 255, 0.06), rgba(46, 224, 196, 0.06)); color: var(--ink); } .nostr-discuss > svg { color: var(--accent); } .nostr-discuss strong { display: block; font-size: 0.95rem; font-weight: 800; color: var(--ink); } .nostr-discuss p { margin: 2px 0 0; font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); } .nostr-discuss .cta { white-space: nowrap; height: 38px; font-size: 0.85rem; } @media (max-width: 560px) { .nostr-discuss { grid-template-columns: auto 1fr; } .nostr-discuss .cta { grid-column: 1 / -1; justify-self: stretch; } } /* /admin/ — unified admin dashboard. Tabs, stat cards, panel layout. */ .admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding: 4px; background: var(--pill-bg); border: 1px solid var(--pill-stroke); border-radius: var(--radius-pill); } .admin-tab { appearance: none; background: transparent; border: 0; color: var(--muted); font-family: inherit; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em; padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .admin-tab:hover { color: var(--ink); } .admin-tab.is-active { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(20, 14, 50, 0.08); } .admin-panel { margin-top: 18px; } .admin-panel h2 { font-size: 1.15rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; } .admin-panel h3 { font-size: 0.95rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; } .admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; } .admin-stat { padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--card-stroke); background: var(--card); box-shadow: var(--shadow-card); } .admin-stat-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .admin-stat-value { margin-top: 4px; font-size: 1.6rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .admin-stat-sub { margin-top: 4px; font-size: 0.8rem; font-weight: 600; color: var(--muted); } #admin-login .stats-controls { margin-top: 18px; } /* ---- Mobile responsive fixes (batched) -------------------------------- */ /* Default: long form of back-link / project-link is visible, short form hidden. Flip below 700px so the nav row never wraps onto two lines. */ .post-back-short { display: none; } .post-back-long { display: inline; } @media (max-width: 700px) { .post-back-long { display: none; } .post-back-short { display: inline; } /* Tighten the back chip padding and reduce its margin so the nav row fits the available width even when both back + project links + share + theme toggle are visible. */ .post-back { padding: 6px 12px 6px 10px; font-size: 0.85rem; gap: 6px; } .post-nav-row { gap: 8px; } .post-nav-actions { gap: 8px; } } /* Related-card grid — auto-fit was letting two narrow cards squeeze side- by-side on phones, which clipped the badge + date meta row. Force a single column below 720px. */ @media (max-width: 720px) { .related-grid { grid-template-columns: 1fr; } } /* Long URLs (e.g. release changelog links to github.com/.../compare/v0.23.x) need to wrap, not overflow the post-body column on narrow screens. */ .post-body { overflow-wrap: anywhere; word-break: break-word; } .post-body a { overflow-wrap: anywhere; word-break: break-word; } /* Force long inline code (URLs, hashes) to wrap on mobile too. */ @media (max-width: 640px) { .post-body code, .post-body pre { overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; } }