/* Notes Hub — Legora-style theme, ported unchanged from the Streamlit app. */ * { box-sizing: border-box; margin: 0; } :root { --ink: #16150f; --paper: #f7f5f0; --card: #fdfcf9; --line: #e7e3d8; --muted: #8b8778; --body: #5d594c; } html, body { background: var(--paper); color: var(--ink); font-family: 'Inter', -apple-system, sans-serif; } /* ---------- top header (same as the splash header) ---------- */ .top { position: sticky; top: 0; z-index: 50; height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 38px; background: var(--paper); border-bottom: 1px solid var(--line); } .brand { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 21px; color: var(--ink); letter-spacing: -0.3px; text-decoration: none; } .topnav a { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); text-decoration: none; margin-left: 26px; } .topnav a.active, .topnav a:hover { color: var(--ink); } .topright { display: flex; align-items: center; gap: 14px; } .asof { font-size: 11.5px; color: var(--muted); } .btn { display: inline-block; padding: 15px 28px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; background: var(--ink); color: var(--card); border: none; cursor: pointer; transition: background .15s ease; } .btn:hover { background: #3a3830; } .btn.small { padding: 9px 16px; font-size: 10.5px; } main { max-width: 1400px; margin: 0 auto; padding: 40px 38px 90px 38px; } /* ---------- typography ---------- */ .eyebrow { font-size: 11px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .hero { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 58px; line-height: 1.04; letter-spacing: -0.5px; margin: 0 0 18px 0; } .sub { font-size: 17px; color: var(--body); max-width: 560px; line-height: 1.55; margin-bottom: 8px; } .h2 { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 30px; margin: 8px 0 4px 0; } .caption { font-size: 12.5px; color: var(--muted); margin: 6px 0 14px 0; } .rule { border: none; border-top: 1px solid var(--line); margin: 34px 0 26px 0; } /* ---------- home ---------- */ .hero-video { width: 100%; height: 64vh; object-fit: cover; border-radius: 18px; margin: 22px 0 6px 0; display: block; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat-num { font-family: 'Newsreader', Georgia, serif; font-size: 46px; font-weight: 500; line-height: 1; } .stat-label { font-size: 12.5px; color: var(--muted); margin-top: 6px; max-width: 200px; } .ms-section { display: flex; align-items: center; gap: 64px; margin: 96px 0; } .ms-section.reverse { flex-direction: row-reverse; } .ms-text { flex: 1; } .ms-text h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 42px; line-height: 1.08; letter-spacing: -0.4px; margin: 0 0 20px 0; } .ms-text p { font-size: 15.5px; color: var(--body); line-height: 1.7; margin: 0 0 30px 0; max-width: 470px; } .ms-img { flex: 1.15; } .ms-img img { width: 100%; border-radius: 10px; display: block; box-shadow: 0 12px 34px rgba(22,21,15,.10); } /* ---------- cards ---------- */ .cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .cardlink { text-decoration: none; display: block; height: 100%; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 22px 18px 22px; height: 100%; transition: transform .18s ease, box-shadow .18s ease; } .cardlink:hover .card { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 34px rgba(22,21,15,.14); } .card.selected { outline: 2px solid var(--ink); } .card h4 { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 21px; margin: 0 0 8px 0; color: var(--ink); } .card p { font-size: 13.5px; color: var(--body); line-height: 1.5; margin: 0 0 10px 0; } .more { font-size: 13px; color: var(--ink); font-weight: 600; } .card-sage { background: #e9eedf; border-color: #d5ddc3; } .card-sand { background: #f4ecd9; border-color: #e6d8b8; } .card-clay { background: #f4e2d5; border-color: #e6c9b4; } .card-slate { background: #e3e9ee; border-color: #c9d5de; } .card-lilac { background: #eae5f0; border-color: #d5cce0; } /* ---------- filters + note list ---------- */ .filters { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 18px 0; } .filters input[type="text"], .filters select { font-family: 'Inter', sans-serif; font-size: 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); min-width: 240px; } .filters label.chk { font-size: 13px; color: var(--body); display: flex; gap: 7px; align-items: center; cursor: pointer; } details.note { background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; } details.note summary { list-style: none; cursor: pointer; padding: 14px 18px; font-size: 14.5px; display: flex; align-items: center; gap: 8px; } details.note summary::-webkit-details-marker { display: none; } details.note summary::before { content: "›"; color: var(--muted); transition: transform .15s ease; } details.note[open] summary::before { transform: rotate(90deg); } details.note .body { padding: 4px 18px 16px 34px; font-size: 13.5px; line-height: 1.6; color: #3d3a30; border-top: 1px solid #f0ede4; } .note-co { font-weight: 600; } .note-dim { color: var(--muted); font-size: 12.5px; } .note-block h5 { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px 0; } .note-block .txt { white-space: pre-wrap; } .pgp { display: inline-block; border-radius: 999px; padding: 2px 11px; margin-left: 6px; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; } .pgp-25 { background: #5d82ad; } .pgp-90 { background: #cf7f2e; } .pgp-won { background: #3d8b5e; } .pgp-lost { background: #bf5d4e; } .pager { display: flex; gap: 14px; align-items: center; margin: 18px 0; } .pager .btn { padding: 9px 16px; font-size: 10.5px; } .pager .btn:disabled { background: #c9c4b6; cursor: default; } /* ---------- splash (loading) ---------- */ .splash { position: fixed; inset: 0; z-index: 999; background: var(--paper); } .splash.hidden { display: none; } .splash-videowrap { position: absolute; top: 62px; left: 0; right: 0; bottom: 0; overflow: hidden; background: var(--ink); } .splash-videowrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; } .splash-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .splash-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.8); margin-bottom: 14px; } .splash-title { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 62px; line-height: 1.05; color: #fff; letter-spacing: -0.5px; } .splash-sub { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85); margin-top: 16px; animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: .45 } 50% { opacity: 1 } } /* ---------- notebook (weekly notes) ---------- */ .stage { display: flex; flex-direction: column; align-items: center; } .book-wrap { perspective: 2400px; width: 100%; max-width: 1060px; } .book { position: relative; width: 100%; height: 580px; transform-style: preserve-3d; } .spine { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; background: #cfc8b8; transform: translateX(-1px); } .deskL, .deskR { position: absolute; top: 0; bottom: 0; width: 50%; border-radius: 12px; background: #efe9db; box-shadow: inset 0 0 40px rgba(22,21,15,.06); } .deskL { left: 0; } .deskR { right: 0; } .sheet { position: absolute; right: 0; top: 0; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.4,.05,.2,1); } .sheet.flipped { transform: rotateY(-180deg); } .face { position: absolute; inset: 0; backface-visibility: hidden; background: linear-gradient(90deg, rgba(22,21,15,.045), transparent 26px), repeating-linear-gradient(#fdfcf6 0 27px, #e4e9ee 27px 28px); border: 1px solid #e2dccb; padding: 26px 30px 26px 46px; overflow-y: auto; border-radius: 0 12px 12px 0; box-shadow: 0 6px 22px rgba(22,21,15,.10); } .face::before { content: ""; position: absolute; top: 0; bottom: 0; left: 34px; width: 1px; background: #e5b8b0; } .face.back { transform: rotateY(180deg); border-radius: 12px 0 0 12px; padding: 26px 46px 26px 30px; } .face.back::before { left: auto; right: 34px; } .wk-cover { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #2c4a6e; margin: -26px -30px -26px -46px; padding: 30px; border-radius: 0 12px 12px 0; } .wk-cover-eyebrow { font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 18px; } .wk-cover-title { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 46px; line-height: 1.1; color: #fdfcf9; } .wk-cover-year { font-family: 'Caveat', cursive; font-size: 34px; color: #e8c987; margin-top: 20px; } .wk-page-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid #2c4a6e; padding-bottom: 6px; margin-bottom: 12px; } .wk-member { font-family: 'Caveat', cursive; font-weight: 700; font-size: 34px; color: #2c4a6e; } .wk-count { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); } .wk-note { margin-bottom: 14px; } .wk-co { font-weight: 600; font-size: 13.5px; } .wk-meta { font-weight: 500; font-size: 11px; color: var(--muted); margin-left: 8px; } .wk-txt { font-size: 13px; line-height: 1.55; color: #3d3a30; white-space: pre-wrap; } .wk-empty, .wk-end { font-family: 'Caveat', cursive; font-size: 26px; color: #b3ada0; text-align: center; margin-top: 40%; } .controls { display: flex; gap: 14px; align-items: center; margin-top: 18px; } .pcount { font-size: 12px; color: var(--muted); min-width: 100px; text-align: center; } @media (max-width: 900px) { .stats, .cards { grid-template-columns: repeat(2, 1fr); } .ms-section, .ms-section.reverse { flex-direction: column; gap: 24px; margin: 48px 0; } .hero { font-size: 40px; } .topnav a { margin-left: 12px; letter-spacing: 1px; } } /* ================= dark theme (additive — light theme untouched) ========= */ .theme-btn { background: none; border: 1px solid var(--line); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 15px; line-height: 1; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; } .theme-btn:hover { background: var(--line); } html[data-theme="light"] .theme-ico-light { display: none; } html[data-theme="dark"] .theme-ico-dark { display: none; } html[data-theme="dark"] { --ink: #f0ede4; --paper: #171612; --card: #201f1a; --line: #35332b; --muted: #96917f; --body: #b5b0a1; } html[data-theme="dark"] body { background: var(--paper); } html[data-theme="dark"] .btn { color: #171612; } html[data-theme="dark"] .btn:hover { background: #d8d4c6; } html[data-theme="dark"] .pager .btn:disabled { background: #4a4639; color: #96917f; } html[data-theme="dark"] details.note .body { color: #c9c4b4; border-top-color: #2b2922; } html[data-theme="dark"] .cardlink:hover .card, html[data-theme="dark"] .ms-img img { box-shadow: 0 16px 34px rgba(0,0,0,.5); } /* card accents: same hues, dimmed for dark */ html[data-theme="dark"] .card-sage { background: #262b1e; border-color: #3a422c; } html[data-theme="dark"] .card-sand { background: #2c2718; border-color: #453c22; } html[data-theme="dark"] .card-clay { background: #2c211a; border-color: #463327; } html[data-theme="dark"] .card-slate { background: #1e242a; border-color: #2e3a44; } html[data-theme="dark"] .card-lilac { background: #252029; border-color: #3a3244; } /* the notebook stays paper — like a real notebook on a dark desk */ html[data-theme="dark"] .face { color: #16150f; } html[data-theme="dark"] .deskL, html[data-theme="dark"] .deskR { background: #221f19; box-shadow: inset 0 0 40px rgba(0,0,0,.4); } html[data-theme="dark"] .spine { background: #4a4639; } /* ================= tables + member chips (additive) ====================== */ .member-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px 0; } .member-chips label { font-size: 12px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; color: var(--body); display: inline-flex; gap: 7px; align-items: center; user-select: none; transition: background .12s ease, color .12s ease; } .member-chips input { accent-color: var(--ink); margin: 0; } .member-chips label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); } .tbl-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; } table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th { text-align: left; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); padding: 13px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } .tbl td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--body); line-height: 1.55; } .tbl tbody tr:last-child td { border-bottom: none; } .tbl tbody tr:hover td { background: rgba(22,21,15,.03); } html[data-theme="dark"] .tbl tbody tr:hover td { background: rgba(255,255,255,.035); } .tbl .co { font-weight: 600; color: var(--ink); } .tbl .dim { color: var(--muted); font-size: 12px; } .tbl td.notes { min-width: 300px; max-width: 480px; white-space: pre-wrap; } /* ================= table polish: fine lines + colorful header ============ */ .tbl thead tr { background: linear-gradient(90deg, #e9eedf 0%, #f4ecd9 25%, #f4e2d5 50%, #e3e9ee 75%, #eae5f0 100%); } .tbl th { color: #55524a; border-bottom: 1px solid #dcd6c6; } .tbl th + th, .tbl td + td { border-left: 1px solid #f0ede4; } .tbl td { border-bottom: 1px solid #f0ede4; } .tbl th:first-child { border-top-left-radius: 11px; } .tbl th:last-child { border-top-right-radius: 11px; } html[data-theme="dark"] .tbl thead tr { background: linear-gradient(90deg, #262b1e 0%, #2c2718 25%, #2c211a 50%, #1e242a 75%, #252029 100%); } html[data-theme="dark"] .tbl th { color: #c9c4b4; border-bottom-color: #3a3830; } html[data-theme="dark"] .tbl th + th, html[data-theme="dark"] .tbl td + td { border-left-color: #2b2922; } html[data-theme="dark"] .tbl td { border-bottom-color: #2b2922; } /* ================= table pop: stronger contrast, richer color ============ */ table.tbl { font-size: 13.5px; } .tbl td { color: var(--ink); } .tbl td.notes { color: #33302a; } .tbl tbody tr:nth-child(even) td { background: #f8f5ec; } .tbl tbody tr:hover td { background: #f1ecdd; } .tbl .co { font-size: 14.5px; color: #2c4a6e; } .tbl thead tr { background: #2c4a6e; } .tbl th { color: #fdfcf9; font-weight: 700; border-bottom: none; } .tbl th + th { border-left-color: rgba(255,255,255,0.18); } .mbadge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap; } .mb-0 { background: #5d82ad; } .mb-1 { background: #3d8b5e; } .mb-2 { background: #c8853c; } .mb-3 { background: #8f7bab; } .mb-4 { background: #bf5d4e; } .ipill { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .ip-very { background: #3d8b5e; color: #fff; } .ip-yes { background: #5d82ad; color: #fff; } .ip-no { background: #edece6; color: #55524a; border: 1px solid #dcd6c6; } html[data-theme="dark"] .tbl td.notes { color: #cfc9b8; } html[data-theme="dark"] .tbl tbody tr:nth-child(even) td { background: #1d1c16; } html[data-theme="dark"] .tbl tbody tr:hover td { background: #26241c; } html[data-theme="dark"] .tbl .co { color: #9db8d9; } html[data-theme="dark"] .tbl th { color: #f0ede4; border-bottom: none; } html[data-theme="dark"] .tbl thead tr { background: #23374e; } html[data-theme="dark"] .tbl th + th { border-left-color: rgba(255,255,255,0.12); } html[data-theme="dark"] .ip-no { background: #2b2922; color: #96917f; border-color: #3a3830; } /* ================= member cards: professional accent treatment =========== */ .card.card-sage, .card.card-sand, .card.card-clay, .card.card-slate, .card.card-lilac { background: var(--card); border: 1px solid var(--line); border-top-width: 4px; border-top-style: solid; box-shadow: 0 1px 3px rgba(22,21,15,.05); } .card.card-sage { border-top-color: #3d8b5e; } .card.card-sand { border-top-color: #c8853c; } .card.card-clay { border-top-color: #bf5d4e; } .card.card-slate { border-top-color: #5d82ad; } .card.card-lilac { border-top-color: #8f7bab; } .card p { color: var(--muted); font-size: 12.5px; letter-spacing: .2px; } html[data-theme="dark"] .card.card-sage, html[data-theme="dark"] .card.card-sand, html[data-theme="dark"] .card.card-clay, html[data-theme="dark"] .card.card-slate, html[data-theme="dark"] .card.card-lilac { background: var(--card); border-color: var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.35); } html[data-theme="dark"] .card.card-sage { border-top-color: #3d8b5e; } html[data-theme="dark"] .card.card-sand { border-top-color: #c8853c; } html[data-theme="dark"] .card.card-clay { border-top-color: #bf5d4e; } html[data-theme="dark"] .card.card-slate { border-top-color: #5d82ad; } html[data-theme="dark"] .card.card-lilac { border-top-color: #8f7bab; } /* ================= member cards v2 + survey overview ===================== */ .mcard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .mono { width: 40px; height: 40px; border-radius: 12px; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 20px; } .mcard-count { font-family: 'Newsreader', Georgia, serif; font-size: 36px; font-weight: 700; color: var(--ink); line-height: 1; } .glance { margin-top: 8px; } .dist-row { display: flex; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); } .dist-row:last-child { border-bottom: none; } .dist-name { width: 170px; font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 16px; color: var(--ink); } .dist-bar { flex: 1; height: 12px; border-radius: 999px; background: #edece6; overflow: hidden; display: flex; } .dist-bar span { height: 100%; } .d-very { background: #3d8b5e; } .d-yes { background: #5d82ad; } .d-not { background: #cbc6b8; } .dist-total { width: 60px; text-align: right; font-size: 13px; font-weight: 600; color: var(--ink); } .legend { display: flex; gap: 20px; margin: 14px 0 6px 0; font-size: 12px; color: var(--body); align-items: center; } .legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 6px; } html[data-theme="dark"] .dist-bar { background: #2b2922; } html[data-theme="dark"] .d-not { background: #4a4639; } /* ================= navy chips + Excel-style header filters =============== */ .member-chips label:has(input:checked) { background: #2c4a6e; color: #fdfcf9; border-color: #2c4a6e; } .tbl th { position: relative; overflow: visible; } .tbl th.has-f { padding-right: 38px; } .fbtn { background: none; border: none; color: rgba(255,255,255,.65); cursor: pointer; padding: 4px 6px; border-radius: 5px; line-height: 0; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); } .fbtn:hover { background: rgba(255,255,255,.18); color: #fff; } .fbtn.on { color: #fff; background: rgba(255,255,255,.25); } .fdrop { position: absolute; top: calc(100% + 4px); left: 8px; z-index: 60; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px rgba(22,21,15,.20); padding: 10px; min-width: 200px; max-height: 280px; overflow-y: auto; text-transform: none; letter-spacing: 0; font-weight: 400; } .tbl th:last-child .fdrop, .tbl th:nth-last-child(2) .fdrop { left: auto; right: 8px; } .fdrop label { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--ink); padding: 5px 4px; cursor: pointer; border-radius: 6px; } .fdrop label:hover { background: var(--paper); } .fdrop input { accent-color: #2c4a6e; margin-top: 2px; } .fdrop-actions { display: flex; gap: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); padding-bottom: 8px; } .fdrop-actions button { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); cursor: pointer; } .fdrop-actions button:hover { background: var(--line); } /* filter dropdown value search */ .f-search { width: 100%; font-family: 'Inter', sans-serif; font-size: 12.5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); margin-bottom: 8px; } .f-vals { max-height: 190px; overflow-y: auto; } /* ================= notebook: professional typography ===================== */ .wk-member { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 23px; letter-spacing: -0.2px; color: #2c4a6e; } .wk-count { font-family: 'Inter', sans-serif; } .wk-cover-year { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: #e8c987; margin-top: 22px; } .wk-empty, .wk-end { font-family: 'Inter', sans-serif; font-size: 14px; font-style: italic; color: #b3ada0; } .wk-co { font-size: 13.5px; } .wk-txt { font-size: 13.5px; color: #2e2b22; line-height: 1.62; } /* ================= notebook side navigation buttons ====================== */ .book-wrap { position: relative; } .wk-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 300; width: 48px; height: 48px; border-radius: 999px; border: none; cursor: pointer; background: var(--ink); color: #fdfcf9; font-size: 19px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(22,21,15,.22); transition: background .15s ease; } .wk-nav:hover { background: #3a3830; } .wk-nav.prev { left: -22px; } .wk-nav.next { right: -22px; } .wk-nav:disabled { background: #c9c4b6; cursor: default; box-shadow: none; } html[data-theme="dark"] .wk-nav { color: #171612; } html[data-theme="dark"] .wk-nav:disabled { background: #4a4639; color: #96917f; } /* ================= notebook continuous flow ============================== */ .wk-mtitle { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 18px 0 4px 0; } .wk-mtitle span:first-child { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 18.5px; color: #2c4a6e; line-height: 1.25; } .wk-mdate { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #8b8778; white-space: nowrap; } .wk-para { font-size: 13.5px; line-height: 1.62; color: #2e2b22; margin: 7px 0; white-space: pre-wrap; } /* offscreen measurer used to pack content into pages */ .face.measure { position: absolute; inset: auto; left: -9999px; top: 0; height: auto; visibility: hidden; box-shadow: none; border: none; padding: 0; overflow: visible; border-radius: 0; } /* notebook: note subheadings + lines */ .wk-sub { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; color: #16150f; margin: 13px 0 4px 0; } .wk-line { font-size: 13px; line-height: 1.55; color: #2e2b22; margin: 2.5px 0; } /* notebook nav: small hand buttons */ .wk-nav { width: 32px; height: 32px; font-size: 15px; background: var(--card); border: 1px solid var(--line); color: inherit; box-shadow: 0 3px 10px rgba(22,21,15,.14); } .wk-nav:hover { background: var(--paper); } .wk-nav.prev { left: -14px; } .wk-nav.next { right: -14px; } .wk-nav:disabled { background: var(--paper); opacity: .35; box-shadow: none; } html[data-theme="dark"] .wk-nav { background: var(--card); color: inherit; } html[data-theme="dark"] .wk-nav:disabled { background: var(--card); opacity: .3; } /* notebook nav: clean chevron buttons */ .wk-nav { width: 38px; height: 38px; font-size: 0; color: var(--ink); } .wk-nav.prev { left: -18px; } .wk-nav.next { right: -18px; } /* notebook nav: original dark round style, smaller */ .wk-nav { width: 38px; height: 38px; background: var(--ink); color: #fdfcf9; border: none; box-shadow: 0 5px 14px rgba(22,21,15,.22); } .wk-nav:hover { background: #3a3830; } .wk-nav:disabled { background: #c9c4b6; opacity: 1; box-shadow: none; } html[data-theme="dark"] .wk-nav { background: var(--ink); color: #171612; } html[data-theme="dark"] .wk-nav:disabled { background: #4a4639; color: #96917f; } /* notebook contents page */ .toc-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid #e4e9ee; } .toc-date { width: 92px; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #8b8778; white-space: nowrap; } .toc-title { flex: 1; font-size: 13.5px; font-weight: 600; color: #16150f; } .toc-go { background: none; border: 1px solid #2c4a6e; color: #2c4a6e; border-radius: 999px; padding: 4px 14px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .12s ease, color .12s ease; } .toc-go:hover { background: #2c4a6e; color: #fdfcf9; } /* cover rendered on a LEFT page (back face): mirror its bleed + corners */ .face.back .wk-cover { margin: -26px -46px -26px -30px; border-radius: 12px 0 0 12px; } /* ================= notebook: clean pages (no ruled lines) ================ */ .face { background: #fdfcf6; } .face::before { display: none; } /* contents table inside the notebook */ .toc-tbl { margin-top: 10px; } .toc-tbl th { padding: 10px 12px; font-size: 10px; } .toc-tbl td { padding: 11px 12px; font-size: 13px; } .toc-tbl td .toc-go { margin: 0; } /* ================= weekly member cards: notebook covers ================== */ .card.wk-card { background: var(--card); border: 1px solid var(--line); border-top: 1px solid var(--line); border-left-width: 9px; border-left-style: solid; border-radius: 5px 14px 14px 5px; box-shadow: 3px 3px 0 -1px var(--card), 3px 3px 0 0 var(--line), 6px 6px 0 -2px var(--card), 6px 6px 0 0 var(--line); } .cardlink:hover .card.wk-card { transform: translateY(-6px) scale(1.02); box-shadow: 3px 3px 0 -1px var(--card), 3px 3px 0 0 var(--line), 6px 6px 0 -2px var(--card), 6px 6px 0 0 var(--line), 0 16px 34px rgba(22,21,15,.14); } .wk-card.card-sage { border-left-color: #3d8b5e; } .wk-card.card-sand { border-left-color: #c8853c; } .wk-card.card-clay { border-left-color: #bf5d4e; } .wk-card.card-slate { border-left-color: #5d82ad; } .wk-card.card-lilac { border-left-color: #8f7bab; } html[data-theme="dark"] .card.wk-card { box-shadow: 3px 3px 0 -1px var(--card), 3px 3px 0 0 var(--line), 6px 6px 0 -2px var(--card), 6px 6px 0 0 var(--line); } /* ================= contents table: compact + clean ======================= */ .toc-tbl th { padding: 8px 12px; font-size: 9.5px; letter-spacing: 1.3px; } .toc-tbl td { padding: 9px 12px; font-size: 12.5px; line-height: 1.45; } .toc-tbl td.dim { white-space: nowrap; width: 104px; font-size: 11.5px; } .toc-tbl td.co { font-size: 13px; } .toc-tbl .toc-go { padding: 3px 12px; font-size: 10px; } .toc-tbl .fbtn svg { width: 10px; height: 10px; } /* ================= weekly member cards: neat notebook covers ============= */ .card.wk-card { border: 1px solid var(--line); border-left-width: 5px; border-left-style: solid; border-radius: 10px; box-shadow: 0 2px 0 -1px var(--card), 0 2px 0 0 var(--line), 0 5px 0 -3px var(--card), 0 5px 0 -2px var(--line); padding: 20px 20px 16px 20px; } .card.wk-card h4 { font-size: 19px; margin-bottom: 6px; } .card.wk-card p { font-size: 12px; color: var(--muted); } .cardlink:hover .card.wk-card { transform: translateY(-4px); box-shadow: 0 2px 0 -1px var(--card), 0 2px 0 0 var(--line), 0 5px 0 -3px var(--card), 0 5px 0 -2px var(--line), 0 14px 28px rgba(22,21,15,.12); } html[data-theme="dark"] .card.wk-card { box-shadow: 0 2px 0 -1px var(--card), 0 2px 0 0 var(--line), 0 5px 0 -3px var(--card), 0 5px 0 -2px var(--line); } /* thin ruled lines on NOTES pages only (cover + contents stay clean) */ .face:has(> .wk-lined) { background: linear-gradient(90deg, rgba(22,21,15,.028), transparent 24px), repeating-linear-gradient(#fdfcf6 0 27px, #e9edf0 27px 28px); } /* ================= weekly member cards: real notebook covers ============= */ .card.wk-card { position: relative; overflow: visible; border: 1px solid var(--line); border-left: none; border-radius: 6px 12px 12px 6px; padding: 20px 30px 16px 30px; box-shadow: 0 2px 0 -1px var(--card), 0 2px 0 0 var(--line), 0 5px 0 -3px var(--card), 0 5px 0 -2px var(--line); } /* spine */ .card.wk-card::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 11px; border-radius: 6px 0 0 6px; background: var(--wkc, #5d82ad); box-shadow: inset -2px 0 0 rgba(0,0,0,.18); } /* elastic closure band */ .card.wk-card::after { content: ""; position: absolute; right: 20px; top: -1px; bottom: -1px; width: 7px; background: var(--wkc, #5d82ad); opacity: .8; box-shadow: 0 1px 3px rgba(22,21,15,.25); } .card.wk-card h4 { color: var(--ink); } .card.wk-card .more { color: var(--wkc, #5d82ad); } .wk-card.card-sage { --wkc: #3d8b5e; background: #f2f6eb; border-color: #dbe2ca; } .wk-card.card-sand { --wkc: #c8853c; background: #f9f2e1; border-color: #e8dbb9; } .wk-card.card-clay { --wkc: #bf5d4e; background: #f9ece5; border-color: #e8cdc0; } .wk-card.card-slate { --wkc: #5d82ad; background: #edf3f8; border-color: #cfdde8; } .wk-card.card-lilac { --wkc: #8f7bab; background: #f2eef6; border-color: #dcd2e6; } html[data-theme="dark"] .wk-card.card-sage { background: #262b1e; border-color: #3a422c; } html[data-theme="dark"] .wk-card.card-sand { background: #2c2718; border-color: #453c22; } html[data-theme="dark"] .wk-card.card-clay { background: #2c211a; border-color: #463327; } html[data-theme="dark"] .wk-card.card-slate { background: #1e242a; border-color: #2e3a44; } html[data-theme="dark"] .wk-card.card-lilac { background: #252029; border-color: #3a3244; } /* ================= weekly member cards: mini diaries ===================== */ .card.wk-card { background: var(--wkc, #2c4a6e); border: none; min-height: 185px; display: flex; flex-direction: column; padding: 18px 28px 14px 26px; color: #fdfcf9; box-shadow: 0 2px 0 -1px #fdfcf6, 0 2px 0 0 rgba(22,21,15,.25), 0 5px 0 -3px #fdfcf6, 0 5px 0 -2px rgba(22,21,15,.2), 0 8px 20px rgba(22,21,15,.16); } .card.wk-card::before { background: rgba(0,0,0,.24); width: 12px; box-shadow: inset -1px 0 0 rgba(255,255,255,.12); } .card.wk-card::after { background: rgba(0,0,0,.28); opacity: 1; } .card.wk-card h4 { color: #fdfcf9; font-size: 19px; margin: 12px 0 4px 0; } .card.wk-card p { color: rgba(255,255,255,.72); font-size: 11.5px; margin-bottom: 8px; } .card.wk-card .more { color: #fdfcf9; margin-top: auto; font-size: 12px; } .wk-logo { width: 44px; height: 44px; border-radius: 10px; background: #fdfcf9; padding: 6px; object-fit: contain; display: block; box-shadow: 0 2px 6px rgba(0,0,0,.3); } /* diary cover palette */ .wk-card.card-sage, html[data-theme="dark"] .wk-card.card-sage { --wkc: #35684e; background: #35684e; border: none; } .wk-card.card-sand, html[data-theme="dark"] .wk-card.card-sand { --wkc: #a8712c; background: #a8712c; border: none; } .wk-card.card-clay, html[data-theme="dark"] .wk-card.card-clay { --wkc: #9c4a3b; background: #9c4a3b; border: none; } .wk-card.card-slate, html[data-theme="dark"] .wk-card.card-slate { --wkc: #2c4a6e; background: #2c4a6e; border: none; } .wk-card.card-lilac, html[data-theme="dark"] .wk-card.card-lilac { --wkc: #6f5a8e; background: #6f5a8e; border: none; } /* ================= mini diaries: bright pastels, 10 unique colors ======== */ .card.wk-card { color: var(--ink); background: var(--wkc, #cfe3f5); box-shadow: 0 2px 0 -1px #fdfcf6, 0 2px 0 0 rgba(22,21,15,.14), 0 5px 0 -3px #fdfcf6, 0 5px 0 -2px rgba(22,21,15,.10), 0 8px 18px rgba(22,21,15,.10); } .card.wk-card::before { background: color-mix(in srgb, var(--wkc), #16150f 22%); box-shadow: none; } .card.wk-card::after { background: color-mix(in srgb, var(--wkc), #16150f 32%); opacity: 1; } .card.wk-card h4 { color: var(--ink); } .card.wk-card p { color: rgba(22,21,15,.55); } .card.wk-card .more { color: var(--ink); } .wk-card.wkc-0 { --wkc: #d5ecdb; } /* mint */ .wk-card.wkc-1 { --wkc: #fbe7b4; } /* butter */ .wk-card.wkc-2 { --wkc: #fcd9c4; } /* peach */ .wk-card.wkc-3 { --wkc: #cfe3f5; } /* sky */ .wk-card.wkc-4 { --wkc: #e3d7f3; } /* lavender */ .wk-card.wkc-5 { --wkc: #f9d3d9; } /* rose */ .wk-card.wkc-6 { --wkc: #cdeceb; } /* aqua */ .wk-card.wkc-7 { --wkc: #e4f0c2; } /* lime */ .wk-card.wkc-8 { --wkc: #d8def9; } /* periwinkle */ .wk-card.wkc-9 { --wkc: #f7d8ec; } /* blush */ html[data-theme="dark"] .card.wk-card { color: #16150f; } html[data-theme="dark"] .card.wk-card h4 { color: #16150f; } /* ================= mini diaries: website-standard colors ================= */ .card.wk-card { background: var(--card); border: 1px solid var(--line); border-left: none; color: var(--ink); box-shadow: 0 2px 0 -1px var(--card), 0 2px 0 0 var(--line), 0 5px 0 -3px var(--card), 0 5px 0 -2px var(--line); } .card.wk-card::before { background: var(--wkc); box-shadow: inset -2px 0 0 rgba(0,0,0,.15); } .card.wk-card::after { background: var(--wkc); opacity: .35; } .card.wk-card h4 { color: var(--ink); } .card.wk-card p { color: var(--muted); } .card.wk-card .more { color: var(--wkc); } .wk-card.wkc-0 { --wkc: #2c4a6e; } /* navy */ .wk-card.wkc-1 { --wkc: #3d8b5e; } /* green */ .wk-card.wkc-2 { --wkc: #c8853c; } /* amber */ .wk-card.wkc-3 { --wkc: #bf5d4e; } /* clay */ .wk-card.wkc-4 { --wkc: #8f7bab; } /* violet */ .wk-card.wkc-5 { --wkc: #48709c; } /* steel */ .wk-card.wkc-6 { --wkc: #6b8e4e; } /* olive */ .wk-card.wkc-7 { --wkc: #a86b8f; } /* mauve */ .wk-card.wkc-8 { --wkc: #4e8f89; } /* teal */ .wk-card.wkc-9 { --wkc: #7d6a54; } /* taupe */ html[data-theme="dark"] .card.wk-card { background: var(--card); border-color: var(--line); color: var(--ink); } html[data-theme="dark"] .card.wk-card h4 { color: var(--ink); } /* mini diaries: no elastic band on the right */ .card.wk-card::after { display: none; } .card.wk-card { padding-right: 22px; } /* ================= mini diaries: final polish ============================ */ .card.wk-card { padding: 20px 22px 14px 26px; } .wk-logo { width: 42px; height: 42px; border-radius: 9px; background: #ffffff; border: 1px solid var(--line); padding: 5px; object-fit: contain; display: block; box-shadow: none; margin-bottom: 2px; } .card.wk-card h4 { margin-top: 12px; letter-spacing: -0.2px; } .card.wk-card p { letter-spacing: .2px; } .card.wk-card .more { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; font-size: 12px; letter-spacing: .3px; } .cardlink:hover .card.wk-card { transform: translateY(-4px); box-shadow: 0 2px 0 -1px var(--card), 0 2px 0 0 var(--line), 0 5px 0 -3px var(--card), 0 5px 0 -2px var(--line), 0 14px 26px rgba(22,21,15,.10); } /* mini diaries: larger, more visible logos (card size unchanged) */ .wk-logo { width: 64px; height: 64px; border-radius: 11px; padding: 7px; } .card.wk-card h4 { margin-top: 10px; } /* notebook cover: member logo tile */ .wk-cover-logo { width: 88px; height: 88px; border-radius: 18px; background: #fff; padding: 11px; object-fit: contain; display: block; margin: 0 auto 28px auto; box-shadow: 0 6px 18px rgba(0,0,0,.3); } /* logos without the box: plain marks on the card */ .wk-logo { border: none; border-radius: 0; background: transparent; padding: 0; box-shadow: none; width: 64px; height: 52px; object-fit: contain; object-position: left center; } /* card logos carry the name; bigger marks, name only beside Legora's mark */ .wk-logo-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px 0; min-height: 62px; } .wk-logo-row h4 { margin: 0 !important; } .wk-logo { width: 118px; height: 62px; object-fit: contain; object-position: left center; } /* logo box hugs the mark's real width, so text beside it sits close */ .wk-logo { width: auto; max-width: 118px; height: 62px; } /* tighter name-next-to-logo; larger LegalBillReview mark */ .wk-logo-row { gap: 6px; } .wk-logo[alt="LegalBillReview"] { height: 74px; max-width: 150px; } /* bigger notebook; contents titles on one row, data not bold (headers stay) */ .book-wrap { max-width: 1300px; } .book { height: 680px; } .toc-tbl td { font-weight: 400; } .toc-tbl td.co { font-weight: 400; white-space: nowrap; } /* ================= Notes Intelligence (chat) ============================= */ .intel { display: grid; grid-template-columns: 280px 1fr; gap: 22px; margin-top: 10px; height: calc(100vh - 290px); min-height: 520px; } .intel-side { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; overflow-y: auto; } .side-h { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 16px 0 8px 0; display: flex; justify-content: space-between; align-items: center; } .side-h:first-child { margin-top: 0; } .side-item { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--ink); padding: 5px 2px; cursor: pointer; } .side-item input { accent-color: #2c4a6e; margin: 0; } .side-hint { font-size: 11px; color: var(--muted); margin-bottom: 4px; } .side-x { border: 1px solid var(--line); border-radius: 6px; font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; padding: 3px 9px; cursor: pointer; color: var(--ink); background: var(--paper); } .side-x:hover { background: var(--line); } .side-search { width: 100%; font-family: 'Inter', sans-serif; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); margin: 4px 0 8px 0; } .co-list { max-height: 230px; overflow-y: auto; } .intel-chat { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .chat-log { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; } .msg { max-width: 78%; padding: 13px 17px; border-radius: 14px; font-size: 14px; line-height: 1.62; } .msg.user { align-self: flex-end; background: #2c4a6e; color: #fdfcf9; border-bottom-right-radius: 4px; white-space: pre-wrap; } .msg.assistant { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; } .msg.thinking { color: var(--muted); font-style: italic; animation: pulse 2s ease-in-out infinite; } .chat-suggest { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 22px 10px 22px; } .sugg { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--body); padding: 7px 14px; cursor: pointer; } .sugg:hover { border-color: #2c4a6e; color: #2c4a6e; } .chat-input { display: flex; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); } .chat-input textarea { flex: 1; resize: none; font-family: 'Inter', sans-serif; font-size: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); } .chat-input .btn { align-self: stretch; } @media (max-width: 900px) { .intel { grid-template-columns: 1fr; height: auto; } } /* chat bubbles: tighter vertical padding */ .msg { padding: 9px 15px; } .msg.user { padding: 9px 15px; } /* bubbles hug their text — no stretched empty space */ .msg { width: fit-content; } .msg.user { text-align: left; } /* chat bubbles: compact grey pill for the user, like the reference */ .msg { padding: 10px 14px; border-radius: 12px; width: fit-content; } .msg.user { background: #ecebe3; color: var(--ink); border: none; padding: 10px 14px; border-radius: 12px; max-width: 70%; } html[data-theme="dark"] .msg.user { background: #2b2922; color: var(--ink); } /* round icon send button + definitively compact user bubble */ .chat-send { width: 44px; height: 44px; border-radius: 999px; border: none; background: var(--ink); color: #fdfcf9; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; align-self: flex-end; transition: background .15s ease; } .chat-send:hover { background: #3a3830; } html[data-theme="dark"] .chat-send { color: #171612; } .msg.user { padding: 8px 14px !important; line-height: 1.5 !important; border-radius: 12px !important; width: fit-content !important; max-width: 70% !important; } .chat-input textarea { min-height: 44px; } /* send button vertically centered with the input */ .chat-input { align-items: center; } .chat-send { align-self: center; } /* ================= intelligence: compact header, 3 columns, recents ====== */ main:has(.intel) { padding-top: 16px; padding-bottom: 20px; max-width: 1560px; } .intel-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin: 0 0 12px 0; } .intel-title { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 24px; color: var(--ink); } .intel.intel-3 { grid-template-columns: 248px 1fr 232px; height: calc(100vh - 168px); min-height: 560px; margin-top: 0; } .msg { font-size: 14.5px; } /* recent chats list */ .chat-list { overflow-y: auto; } .chat-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 9px; border-radius: 8px; cursor: pointer; color: var(--body); font-size: 12.5px; } .chat-item:hover { background: var(--paper); color: var(--ink); } .chat-item.active { background: var(--paper); color: var(--ink); outline: 1px solid var(--line); } .chat-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .chat-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; visibility: hidden; } .chat-item:hover .chat-del { visibility: visible; } .chat-del:hover { color: #bf5d4e; } @media (max-width: 1100px) { .intel.intel-3 { grid-template-columns: 1fr; height: auto; } } /* home hero: subline sits to the right of the headline */ .hero-row { display: flex; align-items: center; justify-content: space-between; gap: 56px; flex-wrap: wrap; } .hero-row .hero { margin: 0; } .hero-side { max-width: 520px; margin: 0; } @media (max-width: 900px) { .hero-row { flex-direction: column; align-items: flex-start; gap: 18px; } } /* Conflux wordmark: continuous golden light sweeping left to right */ .brand { background: linear-gradient(90deg, #7a5c19 0%, #8c6a1f 30%, #eec665 50%, #8c6a1f 70%, #7a5c19 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: brand-shine 3s linear infinite; } @keyframes brand-shine { to { background-position: -200% 0; } } /* recents: "+" button with a "New chat" hover tooltip */ .new-chat { position: relative; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .new-chat:hover { background: var(--line); } .new-chat:hover::after { content: "New chat"; position: absolute; top: calc(100% + 6px); right: 0; background: var(--ink); color: #fdfcf9; padding: 5px 10px; border-radius: 7px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .3px; white-space: nowrap; text-transform: none; z-index: 30; box-shadow: 0 4px 12px rgba(22,21,15,.2); } html[data-theme="dark"] .new-chat:hover::after { color: #171612; } /* clear-all-filters button (red x) */ .clear-f { width: 32px; height: 32px; border-radius: 999px; border: 1px solid #e3b7ae; background: #fbeeea; color: #bf5d4e; font-size: 17px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; } .clear-f:hover { background: #bf5d4e; border-color: #bf5d4e; color: #fdfcf9; } html[data-theme="dark"] .clear-f { background: #33231f; border-color: #5a3a33; } html[data-theme="dark"] .clear-f:hover { background: #bf5d4e; color: #fdfcf9; } /* per-page selector in the pager */ .pg-size { font-family: 'Inter', sans-serif; font-size: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); cursor: pointer; } /* pager right-aligned; sort icon button pushed to the right with the x */ .pager { justify-content: flex-end; } .sort-btn { margin-left: auto; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; } .sort-btn:hover { background: var(--line); } .sort-btn.za { background: #2c4a6e; border-color: #2c4a6e; color: #fdfcf9; } /* keep the last column's funnel fully visible (table was overflowing a bit) */ .tbl td.notes { min-width: 240px; } .tbl th:last-child.has-f { padding-right: 46px; } .tbl th:last-child .fbtn { right: 14px; } /* contents table always fits its page: fixed layout, titles truncate */ .toc-tbl { table-layout: fixed; width: 100%; } .toc-tbl th:nth-child(1), .toc-tbl td:nth-child(1) { width: 106px; } .toc-tbl th:nth-child(3), .toc-tbl td:nth-child(3) { width: 148px; } .toc-tbl td.co { overflow: hidden; text-overflow: ellipsis; } .toc-tbl .toc-go { padding: 3px 10px; font-size: 9.5px; } /* multiple status pills per cell wrap cleanly */ .tbl td .pgp { margin: 0 4px 4px 0; } /* filter dropdown: Select all checkbox on top, tiny Done button below */ .f-selall { display: flex; gap: 9px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--ink); padding: 3px 4px 9px 4px; border-bottom: 1px solid var(--line); margin-bottom: 7px; cursor: pointer; } .f-selall input { accent-color: #2c4a6e; margin: 0; } .f-done { width: 100%; margin-top: 9px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 7px 0; border: none; border-radius: 7px; background: var(--ink); color: #fdfcf9; cursor: pointer; } .f-done:hover { background: #3a3830; } html[data-theme="dark"] .f-done { color: #171612; } /* empty-state row when filters exclude everything */ .tbl-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 34px 20px !important; } /* member badges: no red (red stays reserved for Lost status) — teal instead */ .mb-4 { background: #4e8f89; } /* filter value lists scroll a bit taller now that the search bar is gone */ .f-vals { max-height: 260px; } /* ============ dark theme: notebook pages always stay light =============== */ /* The notebook paper is cream even in dark mode, so its Contents table and filter dropdowns must keep the light-theme look. */ html[data-theme="dark"] .face .tbl thead tr { background: #2c4a6e; } html[data-theme="dark"] .face .tbl th { color: #fdfcf9; border-bottom: none; } html[data-theme="dark"] .face .tbl th + th { border-left-color: rgba(255,255,255,0.18); } html[data-theme="dark"] .face .tbl td { color: #16150f; border-bottom-color: #f0ede4; background: transparent; } html[data-theme="dark"] .face .tbl td + td { border-left-color: #f0ede4; } html[data-theme="dark"] .face .tbl tbody tr:nth-child(even) td { background: #f8f5ec; } html[data-theme="dark"] .face .tbl tbody tr:hover td { background: #f1ecdd; } html[data-theme="dark"] .face .tbl .co { color: #16150f; } html[data-theme="dark"] .face .tbl .dim { color: #55524a; } html[data-theme="dark"] .face .fdrop { background: #fdfcf9; border-color: #dcd6c6; } html[data-theme="dark"] .face .fdrop label { color: #16150f; } html[data-theme="dark"] .face .fdrop label:hover { background: #f8f5ec; } html[data-theme="dark"] .face .f-search { background: #f8f5ec; border-color: #dcd6c6; color: #16150f; } html[data-theme="dark"] .face .fdrop-actions { border-bottom-color: #dcd6c6; } html[data-theme="dark"] .face .toc-go { border-color: #2c4a6e; color: #2c4a6e; } html[data-theme="dark"] .face .toc-go:hover { background: #2c4a6e; color: #fdfcf9; } /* ===== dark theme: dedicated dark logo variants ========================== */ /* Each card carries two imgs: .logo-light (original file) and .logo-dark (transparent background, dark marks lifted). The theme decides which one shows — no plates, no boxes, light theme completely untouched. */ .wk-logo.logo-dark { display: none; } html[data-theme="dark"] .wk-logo.logo-light { display: none; } html[data-theme="dark"] .wk-logo.logo-dark { display: block; } /* ===== equal-sized logos on weekly cards ================================= */ /* Logo files are pre-normalized to equal ink area on identical 420x120 canvases, so one fixed display box makes every card look the same. */ .wk-logo { width: 158px; max-width: 158px; height: 45px; object-fit: contain; object-position: left center; } .wk-logo[alt="LegalBillReview"] { /* cancel old oversize rule */ width: 158px; max-width: 158px; height: 45px; } .wk-logo[alt="Legora"] { /* tight square star + name */ width: auto; max-width: 45px; height: 45px; } /* Internal Owner / Key Contacts columns on the Nexl table */ .tbl td.contacts { min-width: 150px; max-width: 220px; } /* Nexl / Calendar Notes + Survey follow the Notes Intelligence margins, so the wide tables get the same breathing room (1560px, compact top) */ main:has(#list) { max-width: 1560px; padding-top: 16px; } /* Weekly Notes: only the open notebook gets the wide margins — the member-cards page keeps the original layout */ main:has(.book-wrap) { max-width: 1560px; padding-top: 16px; } /* ==================== Snapshots page — exact briefing cards =============== */ /* Colors, sizes and type are lifted verbatim from the briefing generator (generate_briefing_html.py) so the cards match the daily briefing 1:1. Cards keep their light paper look in BOTH themes, like the notebook. */ .snapwrap { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #1a1a1a; font-size: 12px; line-height: 1.45; } .snapwrap { display: grid; grid-template-columns: 1fr; gap: 16px; } .snap-card { display: grid; grid-template-columns: 90px 40fr 46fr; align-content: start; background: #ffffff; border-radius: 8px; overflow: hidden; border: 1px solid #ece5d3; position: relative; box-shadow: 0 4px 18px rgba(11,31,58,0.10); padding: 16px 18px 15px 10px; transition: box-shadow .18s ease, transform .18s ease; } .snap-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #0b1f3a 0%, #244875 55%, #c9a96e 100%); } .snap-card:hover { box-shadow: 0 10px 28px rgba(11,31,58,0.16); transform: translateY(-2px); } .snap-col-logo { text-align: center; padding-top: 2px; } .snapwrap .logo-tile { width: 44px; height: 44px; border-radius: 6px; background: #ffffff; border: 1px solid #ece5d3; overflow: hidden; text-align: center; line-height: 44px; margin: 0 auto; } .snapwrap .logo-tile img { max-width: 90%; max-height: 90%; vertical-align: middle; } .snapwrap .monogram { width: 44px; height: 44px; border-radius: 6px; background: linear-gradient(135deg, #c9a96e 0%, #b88d3f 100%); color: #0b1f3a; font-weight: 700; font-size: 13px; letter-spacing: 0.8px; line-height: 44px; text-align: center; margin: 0 auto; } .snapwrap .monogram.corp { background: linear-gradient(135deg, #244875 0%, #0b1f3a 100%); color: #c9a96e; } .snap-col-main { padding: 0 8px 4px; min-width: 0; } .snapwrap .org-name { font-size: 14px; font-weight: 700; color: #0b1f3a; line-height: 1.25; margin-bottom: 4px; } .snapwrap .org-pills { margin-bottom: 4px; } .snapwrap .pill { display: inline-block; padding: 2px 6px; border-radius: 9px; font-size: 8px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin-right: 3px; } .snapwrap .pill-rank { background: #244875; color: #ffffff; } .snapwrap .pill-norank { background: #8a94a4; } .snapwrap .rank-dots { display: inline-block; vertical-align: middle; } .snapwrap .rank-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.25); display: inline-block; margin: 0 1px; } .snapwrap .pill-stat { background: #f0eadb; color: #5a4a2a; border: 1px solid #d4c8a8; } .snapwrap .pill-stat .num { color: #b88d3f; font-weight: 800; } .snapwrap .last-interacted { font-size: 10px; color: #6b6b6b; font-style: italic; margin: 4px 0 8px; } .snapwrap .last-interacted b { color: #0b1f3a; font-style: normal; font-weight: 700; } .snapwrap .section-label { font-size: 8.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #b88d3f; font-weight: 700; margin-bottom: 6px; margin-top: 4px; } .snapwrap .org-blurb { font-size: 10px; color: #5a5a5a; font-style: italic; margin-bottom: 5px; line-height: 1.4; padding: 4px 8px; background: #fdfbf6; border-left: 2px solid #c9a96e; border-radius: 0 3px 3px 0; } .snap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .snap-grid .snap-full { grid-column: 1 / -1; } .snapwrap .snap-mini { background: linear-gradient(135deg, #ffffff 0%, #faf7f0 100%); border: 1px solid #ece5d3; border-radius: 4px; padding: 4px 6px; } .snapwrap .snap-mini .lbl { font-size: 7.5px; letter-spacing: 1px; text-transform: uppercase; color: #8a7a5a; font-weight: 700; margin-bottom: 1px; } .snapwrap .snap-mini .val { font-size: 10.5px; color: #0b1f3a; font-weight: 600; line-height: 1.3; } .snapwrap .snap-mini .val-sm { font-size: 9.5px; color: #2a2a2a; font-weight: 400; line-height: 1.35; } .snapwrap .snap-dash { color: #b0a890; font-style: italic; font-weight: 500; } .snap-col-right { padding: 0 0 4px 10px; min-width: 0; } .snapwrap .opp-block { background: linear-gradient(135deg, #ffffff 0%, #faf7f0 100%); border: 1px solid #ece5d3; border-radius: 4px; padding: 10px 12px; margin-bottom: 8px; } .snapwrap .opp-header { margin-bottom: 8px; overflow: hidden; } .snapwrap .opp-label { font-size: 7.5px; letter-spacing: 1px; text-transform: uppercase; color: #8a7a5a; font-weight: 700; } .snapwrap .opp-count { font-size: 11px; color: #0b1f3a; font-weight: 700; float: right; } .snapwrap .opp-count .total { font-size: 8px; color: #8a7a5a; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-left: 3px; } .snap-card .opp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .snapwrap .member-row { margin-bottom: 5px; white-space: nowrap; } .snapwrap .member-name { font-weight: 700; color: #244875; font-size: 10px; letter-spacing: 0.2px; display: inline-block; min-width: 90px; margin-right: 6px; vertical-align: middle; } .snapwrap .member-name.off { color: #a8a08c; } .snapwrap .mp-dash { font-size: 9px; color: #b0a890; } .snapwrap .mini-pill { font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 6px; letter-spacing: 0.2px; color: #fff; display: inline-block; margin-right: 2px; vertical-align: middle; } .snapwrap .mini-pill .mp-num { background: rgba(255,255,255,0.32); padding: 0 4px; border-radius: 4px; font-weight: 800; margin-left: 2px; } .snapwrap .mini-10 { background: #8aa3c4; } .snapwrap .mini-25 { background: #5a7ba8; } .snapwrap .mini-50 { background: #7860a8; } .snapwrap .mini-75 { background: #c9a96e; color: #0b1f3a; } .snapwrap .mini-75 .mp-num { background: rgba(11,31,58,0.15); color: #0b1f3a; } .snapwrap .mini-90 { background: #d97737; } .snapwrap .mini-won { background: #1f6b4a; } .snapwrap .mini-lost { background: #c25450; } .snapwrap .stakeholder { background: #ffffff; border: 1px solid #ece5d3; border-radius: 5px; margin-bottom: 4px; padding: 10px 12px; } .snapwrap .snap-stk2 { display: flex; justify-content: space-between; gap: 12px; } .snapwrap .stk-left { display: flex; gap: 8px; align-items: flex-start; min-width: 0; } .snapwrap .avatar { width: 26px; height: 26px; border-radius: 50%; color: #ffffff; font-weight: 700; font-size: 9px; letter-spacing: 0.3px; text-align: center; line-height: 26px; display: inline-block; flex: none; } .snapwrap .avatar.bb { background: linear-gradient(135deg, #0b1f3a 0%, #244875 100%); } .snapwrap .avatar.client { background: linear-gradient(135deg, #c9a96e 0%, #b88d3f 100%); color: #0b1f3a; } .snapwrap .avatar.has-photo { background: #fff; border: 1px solid #ece5d3; overflow: hidden; line-height: 0; } .snapwrap .avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; } .snapwrap .stk-name { font-weight: 700; color: #0b1f3a; font-size: 10.5px; line-height: 1.25; } .snapwrap .stk-role { font-size: 9px; color: #6b6b6b; line-height: 1.2; } .snapwrap .stk-meta { font-size: 9px; color: #8a7a5a; line-height: 1.2; margin-top: 1px; } .snapwrap .stk-owner { border-left: 1px solid #ece5d3; padding-left: 12px; text-align: right; flex: none; } .snapwrap .stk-owner-label { font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #b88d3f; margin-bottom: 3px; } .snapwrap .stk-owner-row { display: flex; gap: 7px; text-align: left; } .snapwrap .stk-placeholder { font-size: 9.5px; color: #8a7a5a; font-style: italic; padding: 8px 6px; background: #fdfbf6; border: 1px dashed #d4c8a8; border-radius: 4px; text-align: center; } /* snapshots page chrome (filters row additions) */ .snap-meta { font-size: 12px; color: var(--muted); } .snap-meta b { color: var(--ink); } .snap-stale { color: #bf5d4e; font-weight: 700; } .snap-refresh { margin-left: auto; } main:has(.snapwrap) { max-width: 1560px; padding-top: 16px; } /* ==================== notification bell =================================== */ .bell-wrap { position: relative; } .bell-btn { background: none; border: 1px solid var(--line); cursor: pointer; width: 34px; height: 34px; border-radius: 999px; color: var(--ink); display: flex; align-items: center; justify-content: center; } .bell-btn:hover { background: var(--card); } .bell-badge { position: absolute; top: -4px; right: -4px; background: #bf5d4e; color: #fff; font-size: 9.5px; font-weight: 800; min-width: 16px; height: 16px; line-height: 16px; border-radius: 999px; text-align: center; padding: 0 3px; font-family: 'Inter', sans-serif; } .bell-badge.hidden { display: none; } .bell-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 380px; max-height: 480px; overflow-y: auto; z-index: 200; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(22,21,15,.22); padding: 10px; } .bell-panel.hidden { display: none; } .bell-item { padding: 10px 10px 8px; border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--line); background: var(--paper); } .bell-item.unread { border-left: 3px solid #2c4a6e; } .bell-item.bk-stale { border-left: 3px solid #bf5d4e; background: #f9efec; } html[data-theme="dark"] .bell-item.bk-stale { background: #2c211d; } .bell-title { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; } .bell-line { font-size: 11.5px; color: var(--body); line-height: 1.45; } .bell-line.dim { color: var(--muted); font-style: italic; } .bell-at { font-size: 10px; color: var(--muted); margin-top: 5px; } .bell-empty { font-size: 12.5px; color: var(--muted); text-align: center; padding: 18px 0; } /* snapshots toolbar: circular live-Nexl refresh + discreet admin action */ .snap-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .nexl-refresh { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink); color: #fdfcf9; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .4s ease, background .15s ease; } .nexl-refresh:hover { background: #3a3830; transform: rotate(180deg); } html[data-theme="dark"] .nexl-refresh { color: #171612; } .snap-admin { background: none; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); text-decoration: underline dotted; padding: 4px 0; } .snap-admin:hover { color: var(--ink); } /* ==================== snapshots: dark theme (briefing navy) =============== */ html[data-theme="dark"] .snap-card { background: linear-gradient(160deg, #102440 0%, #0b1f3a 100%); border-color: #24406b; box-shadow: 0 6px 22px rgba(0,0,0,.45); } html[data-theme="dark"] .snapwrap { color: #dfe6f0; } html[data-theme="dark"] .snapwrap .org-name { color: #f5f2e9; } html[data-theme="dark"] .snapwrap .org-blurb { background: rgba(255,255,255,.05); color: #c3cddd; border-left-color: #c9a96e; } html[data-theme="dark"] .snapwrap .section-label { color: #d8b573; } html[data-theme="dark"] .snapwrap .snap-mini { background: rgba(255,255,255,.045); border-color: #24406b; } html[data-theme="dark"] .snapwrap .snap-mini .lbl { color: #b9a06b; } html[data-theme="dark"] .snapwrap .snap-mini .val { color: #f0ede4; } html[data-theme="dark"] .snapwrap .snap-mini .val-sm { color: #cdd6e3; } html[data-theme="dark"] .snapwrap .snap-dash { color: #6b7a94; } html[data-theme="dark"] .snapwrap .last-interacted { color: #9aa7ba; } html[data-theme="dark"] .snapwrap .last-interacted b { color: #f0ede4; } html[data-theme="dark"] .snapwrap .pill-stat { background: rgba(201,169,110,.12); color: #d8c9a3; border-color: #6b5a35; } html[data-theme="dark"] .snapwrap .pill-norank { background: #3a4a61; } html[data-theme="dark"] .snapwrap .opp-block { background: rgba(255,255,255,.04); border-color: #24406b; } html[data-theme="dark"] .snapwrap .opp-label { color: #b9a06b; } html[data-theme="dark"] .snapwrap .opp-count { color: #f0ede4; } html[data-theme="dark"] .snapwrap .opp-count .total { color: #9aa7ba; } html[data-theme="dark"] .snapwrap .member-name { color: #9db8d9; } html[data-theme="dark"] .snapwrap .member-name.off { color: #5d6b80; } html[data-theme="dark"] .snapwrap .mp-dash { color: #5d6b80; } html[data-theme="dark"] .snapwrap .stakeholder { background: rgba(255,255,255,.04); border-color: #24406b; } html[data-theme="dark"] .snapwrap .stk-name { color: #f0ede4; } html[data-theme="dark"] .snapwrap .stk-role { color: #9aa7ba; } html[data-theme="dark"] .snapwrap .stk-meta { color: #b9a06b; } html[data-theme="dark"] .snapwrap .stk-owner { border-left-color: #24406b; } html[data-theme="dark"] .snapwrap .stk-owner-label { color: #d8b573; } html[data-theme="dark"] .snapwrap .stk-placeholder { background: rgba(255,255,255,.03); border-color: #3a4a61; color: #8b97a9; } html[data-theme="dark"] .snapwrap .logo-tile { border-color: #24406b; } /* dark theme card polish: gold-forward strip + soft glow on hover */ html[data-theme="dark"] .snap-card::before { background: linear-gradient(90deg, #c9a96e 0%, #b88d3f 40%, #244875 100%); } html[data-theme="dark"] .snap-card:hover { border-color: #35548a; box-shadow: 0 12px 32px rgba(0,0,0,.55); } /* eyebrow moved out of page headers into a site footer */ .h2-page { margin-top: 0; } .site-footer { text-align: center; font-size: 11px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--muted); padding: 26px 0 34px; border-top: 1px solid var(--line); margin-top: 30px; } /* ==================== settings window ===================================== */ .set-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(22,21,15,.45); display: flex; align-items: center; justify-content: center; } .set-overlay.hidden { display: none; } .set-window { position: relative; width: min(860px, 92vw); height: min(560px, 86vh); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 200px 1fr; box-shadow: 0 30px 80px rgba(0,0,0,.35); } .set-side { background: var(--card); border-right: 1px solid var(--line); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; } .set-side-title { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 20px; color: var(--ink); margin: 0 8px 14px; } .set-nav { text-align: left; background: none; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--body); padding: 10px 12px; border-radius: 8px; } .set-nav:hover { background: var(--paper); color: var(--ink); } .set-nav.active { background: #2c4a6e; color: #fdfcf9; } .set-main { padding: 24px 26px; overflow-y: auto; } .set-close { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 17px; cursor: pointer; line-height: 1; } .set-close:hover { background: var(--line); } .set-h { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 22px; color: var(--ink); margin-bottom: 16px; } .set-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; } .set-card-t { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 5px; } .set-card-d { font-size: 12.5px; color: var(--body); line-height: 1.55; margin-bottom: 12px; } .set-card-d b { color: var(--ink); } .set-tabs { display: flex; gap: 8px; margin-bottom: 14px; } .set-tab { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--body); cursor: pointer; } .set-tab.on { background: #2c4a6e; border-color: #2c4a6e; color: #fdfcf9; } .set-notifs .bell-item { margin-bottom: 8px; } /* notification item actions (bell + settings) */ .bell-item { position: relative; } .bell-actions { position: absolute; top: 7px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s ease; } .bell-item:hover .bell-actions { opacity: 1; } .n-act { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; padding: 0; } .n-act:hover { color: var(--ink); background: var(--line); } .n-del:hover { color: #fff; background: #bf5d4e; border-color: #bf5d4e; } .bell-item .bell-title { padding-right: 54px; } /* ============= snapshots: navy shell, narrower cards, 2-per-view ========= */ .snap-shell { background: linear-gradient(135deg, #0b1f3a 0%, #1a3556 100%); border-radius: 12px; border-bottom: 4px solid #c9a96e; padding: 18px; box-shadow: 0 14px 40px rgba(11,31,58,.28); } .snap-scroll { max-height: calc(100vh - 300px); min-height: 420px; overflow-y: auto; padding-right: 6px; } .snap-scroll::-webkit-scrollbar { width: 9px; } .snap-scroll::-webkit-scrollbar-thumb { background: rgba(201,169,110,.45); border-radius: 6px; } .snap-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 6px; } .snapwrap .snap-card { max-width: 1150px; margin: 0 auto; } html[data-theme="dark"] .snap-shell { background: #0a1526; border: 1px solid #24406b; border-bottom: 4px solid #c9a96e; } /* Postilize signal block — verbatim briefing styling */ .snap-signal { grid-column: 1 / -1; padding: 12px 4px 0; } .snapwrap .pz-label { font-size: 8.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #b88d3f; font-weight: 700; margin: 0 0 6px; } .snapwrap .pz-none { border: 1px solid #f0d4d4; border-left: 4px solid #d98a8a; border-radius: 6px; background: #fdf5f5; padding: 11px 14px; color: #a85757; font-size: 10px; font-style: italic; } .snapwrap .pz-box { border: 1px solid #e6dcc2; border-left: 4px solid #b88d3f; border-radius: 6px; background: #fdfbf4; padding: 11px 14px; } .snapwrap .pz-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; } .snapwrap .pz-type { display: inline-block; color: #ffffff; font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 2px 8px; border-radius: 9px; } .snapwrap .pz-dots { color: rgba(255,255,255,0.55); letter-spacing: 2px; } .snapwrap .pz-date { color: #6b6b6b; font-size: 9px; } .snapwrap .pz-loc { margin-left: auto; color: #6b6b6b; font-size: 9px; white-space: nowrap; } .snapwrap .pz-loc span { color: #b88d3f; } .snapwrap .pz-overview { font-size: 10.5px; color: #2a2a2a; line-height: 1.5; margin-bottom: 7px; } .snapwrap .pz-k { font-size: 8px; letter-spacing: 0.5px; text-transform: uppercase; color: #8a7a5a; font-weight: 700; margin-right: 6px; } .snapwrap .pz-chips { margin-bottom: 8px; } .snapwrap .pz-chip { display: inline-block; background: #eef1f6; color: #244875; font-size: 9px; padding: 2px 7px; border-radius: 8px; margin: 0 4px 3px 0; } .snapwrap .pz-rel { font-size: 10px; color: #3a3a3a; line-height: 1.45; margin-bottom: 8px; } .snapwrap .pz-action { font-size: 10px; color: #0b1f3a; line-height: 1.45; background: #ffffff; border: 1px dashed #d4c8a8; border-radius: 5px; padding: 8px 10px; margin-bottom: 8px; } .snapwrap .pz-action b { color: #b88d3f; font-weight: 700; } .snapwrap .pz-src { font-size: 9px; color: #6b6b6b; } .snapwrap .pz-src a { color: #244875; text-decoration: none; } /* signal block dark theme */ html[data-theme="dark"] .snapwrap .pz-box { background: rgba(255,255,255,.04); border-color: #24406b; border-left-color: #b88d3f; } html[data-theme="dark"] .snapwrap .pz-none { background: rgba(217,138,138,.08); border-color: #5a3a3a; border-left-color: #d98a8a; color: #d0908d; } html[data-theme="dark"] .snapwrap .pz-overview { color: #d5dce8; } html[data-theme="dark"] .snapwrap .pz-rel { color: #b9c3d4; } html[data-theme="dark"] .snapwrap .pz-date, html[data-theme="dark"] .snapwrap .pz-loc, html[data-theme="dark"] .snapwrap .pz-src { color: #9aa7ba; } html[data-theme="dark"] .snapwrap .pz-action { background: rgba(255,255,255,.05); color: #e8e3d5; border-color: #6b5a35; } html[data-theme="dark"] .snapwrap .pz-chip { background: rgba(157,184,217,.12); color: #9db8d9; } html[data-theme="dark"] .snapwrap .pz-src a { color: #9db8d9; } /* ============= snapshots as a briefing-style DOCUMENT ==================== */ /* One white document with the navy masthead + gold rule, exactly like the daily briefing; company cards become clean rows inside it. */ .snap-doc { max-width: 1180px; margin: 0 auto; background: #ffffff; border-radius: 10px; overflow: hidden; position: relative; border: 1px solid #ece5d3; box-shadow: 0 14px 44px rgba(11,31,58,.12); } .snap-doc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; background: linear-gradient(90deg, #0b1f3a 0%, #244875 55%, #c9a96e 100%); } .snap-doc-head { background: linear-gradient(135deg, #0b1f3a 0%, #1a3556 100%); border-bottom: 4px solid #c9a96e; padding: 18px 26px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .sd-eyebrow { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; letter-spacing: 2.8px; text-transform: uppercase; color: #c9a96e; font-weight: 700; margin-bottom: 4px; } .sd-eyebrow .sd-sep { color: #ffffff; } .sd-title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; font-size: 19px; font-weight: 500; letter-spacing: 0.3px; color: #ffffff; } .sd-right { display: flex; align-items: center; gap: 12px; flex: none; } .sd-pill { background: #2a3a55; color: #f0d9a8; padding: 5px 12px; border-radius: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .sd-asof { font-size: 10.5px; color: #b8c4d6; white-space: nowrap; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* cards become document rows */ .snap-doc .snap-scroll { max-height: calc(100vh - 270px); min-height: 420px; overflow-y: auto; padding-right: 0; } .snap-doc .snap-scroll::-webkit-scrollbar-thumb { background: #d4c8a8; } .snap-doc .snap-scroll::-webkit-scrollbar-track { background: #f4f1ec; } .snap-doc .snap-card { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; border-bottom: 5px solid #f4f1ec; padding: 18px 24px 16px 14px; transform: none; } .snap-doc .snap-card::before { display: none; } .snap-doc .snap-card:hover { transform: none; box-shadow: none; background: #fdfbf6; } .snap-doc .snap-card:last-child { border-bottom: none; } /* dark theme: navy document, same masthead */ html[data-theme="dark"] .snap-doc { background: #0e2138; border: 1px solid #24406b; box-shadow: 0 16px 54px rgba(0,0,0,.5); } html[data-theme="dark"] .snap-doc .snap-card { background: transparent; border-bottom-color: #0a1526; } html[data-theme="dark"] .snap-doc .snap-card:hover { background: #102845; } html[data-theme="dark"] .snap-doc .snap-scroll::-webkit-scrollbar-thumb { background: rgba(201,169,110,.4); } html[data-theme="dark"] .snap-doc .snap-scroll::-webkit-scrollbar-track { background: #0a1526; } /* snapshot masthead controls (search / group / clear live in the header) */ .snap-doc-head { padding: 16px 22px 15px; } .sd-left { min-width: 0; } .sd-right { flex-wrap: wrap; justify-content: flex-end; } .sd-search { font-family: 'Inter', sans-serif; font-size: 12.5px; padding: 8px 12px; width: 210px; border-radius: 8px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: #ffffff; outline: none; } .sd-search::placeholder { color: #b8c4d6; } .sd-search:focus { border-color: #c9a96e; background: rgba(255,255,255,.14); } .sd-select { font-family: 'Inter', sans-serif; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: #ffffff; cursor: pointer; } .sd-select option { color: #16150f; background: #fdfcf9; } .sd-clear { width: 30px; height: 30px; border-radius: 999px; border: none; background: rgba(191,93,78,.9); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; } .sd-clear:hover { background: #bf5d4e; } /* footer pinned to the bottom of the viewport on short pages, slimmer */ body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; width: 100%; } .site-footer { margin-top: 0; padding: 13px 0 16px; font-size: 10px; letter-spacing: 2.2px; } /* count pill sits beside the masthead title */ .sd-title-row { display: flex; align-items: center; gap: 12px; } /* professional pager: equal heights, tidy alignment */ .pager { justify-content: flex-end; gap: 10px; align-items: center; } .pager .caption { margin: 0 6px 0 0 !important; } .pager .btn { min-width: 86px; height: 36px; padding: 0 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 1.4px; } .pg-size { height: 36px; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; padding: 0 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; } /* one button style everywhere — same as the pagination buttons */ .btn.small { height: 36px; padding: 0 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 1.4px; font-size: 10.5px; } .btn.small:disabled { background: #c9c4b6; cursor: default; } /* locked button: looks disabled but still shows its explanatory tooltip */ .btn.btn-locked { background: #c9c4b6; color: #6f6a5c; cursor: not-allowed; } .btn.btn-locked:hover { background: #c9c4b6; } html[data-theme="dark"] .btn.btn-locked { background: #4a4639; color: #96917f; } /* instant tooltip for the locked snapshots button (no browser delay) */ .btn-locked { position: relative; } .btn-locked::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 0; width: 330px; z-index: 80; background: var(--ink); color: var(--paper); font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.5; text-align: left; padding: 10px 13px; border-radius: 9px; box-shadow: 0 10px 28px rgba(22,21,15,.28); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .1s ease, transform .1s ease; pointer-events: none; white-space: normal; } .btn-locked::before { content: ""; position: absolute; bottom: calc(100% + 4px); left: 22px; border: 6px solid transparent; border-top-color: var(--ink); z-index: 80; opacity: 0; visibility: hidden; transition: opacity .1s ease; pointer-events: none; } .btn-locked:hover::after, .btn-locked:hover::before { opacity: 1; visibility: visible; transform: translateY(0); } /* home page CTAs share the exact pagination button style */ .btn { height: 36px; padding: 0 18px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 1.4px; font-size: 10.5px; } /* arrow on home CTAs, nudges right on hover */ .btn-arr { margin-left: 9px; font-size: 13px; line-height: 1; transition: transform .15s ease; display: inline-block; } .btn:hover .btn-arr { transform: translateX(4px); } /* hero subline breathes wider so it sits in three lines */ .hero + .sub { max-width: 720px; } /* dollar cursor — Settings > General ("dollar" or "dollar-pop") */ html[data-cursor^="dollar"], html[data-cursor^="dollar"] * { cursor: url("/assets/cursor-dollar.png") 3 3, auto !important; } /* $ pops out of every click and floats away */ .dollar-pop { position: fixed; z-index: 9999; pointer-events: none; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: #c9a96e; text-shadow: 0 1px 0 #0b1f3a, 0 0 3px rgba(11,31,58,.5); transform: translate(-50%, -50%); animation: dollar-pop .65s ease-out forwards; } @keyframes dollar-pop { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.7); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--drift, 0px)), -46px) scale(1.3); } } /* settings choice buttons: active solid, inactive ghost */ .set-choice { display: flex; gap: 10px; } .btn.btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); } .btn.btn-ghost:hover { background: var(--line); } /* iOS-style toggle pills for settings */ .tgl-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 0; border-top: 1px solid var(--line); } .tgl-row:first-of-type { border-top: none; } .tgl-row.tgl-off { opacity: .45; } .tgl-label { font-size: 13px; font-weight: 600; color: var(--ink); } .tgl-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .tgl { position: relative; width: 48px; height: 28px; flex: none; border: none; border-radius: 999px; background: #b6b1a3; cursor: pointer; padding: 0; transition: background .18s ease; } .tgl .tgl-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,.28); transition: left .18s ease; } .tgl.on { background: #2c4a6e; } .tgl.on .tgl-knob { left: 23px; } .tgl:disabled { cursor: not-allowed; } html[data-theme="dark"] .tgl { background: #4a4639; } html[data-theme="dark"] .tgl.on { background: #5d82ad; } /* ==================== Companies page ===================================== */ .co-tag { display: inline-block; background: #e3e9ee; color: #2c4a6e; font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; margin: 0 4px 3px 0; } html[data-theme="dark"] .co-tag { background: #1e2a38; color: #9db8d9; } .co-open { background: none; border: 1px solid var(--line); color: #2c4a6e; width: 24px; height: 24px; border-radius: 7px; cursor: pointer; margin-left: 8px; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; } .co-open:hover { background: #2c4a6e; color: #fdfcf9; border-color: #2c4a6e; } html[data-theme="dark"] .co-open { color: #9db8d9; } .co-link { color: #2c4a6e; text-decoration: none; } .co-link:hover { text-decoration: underline; } html[data-theme="dark"] .co-link { color: #9db8d9; } .co-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .co-head { display: flex; justify-content: space-between; gap: 24px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); } .co-name { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 26px; color: var(--ink); margin-bottom: 4px; } .co-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; } .co-tags { } .co-partner { text-align: right; flex: none; } .co-partner-l { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; } .co-partner-n { font-size: 15px; font-weight: 700; color: var(--ink); } .co-card .tbl-wrap { border: none; border-radius: 0; } main:has(.co-card), main:has(#coQ) { max-width: 1560px; padding-top: 16px; } /* Nexl nav dropdown (Opps & Notes / Companies) */ .nav-drop { position: relative; display: inline-block; margin-left: 26px; } .nav-drop-t { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); cursor: pointer; } .nav-drop-t.active, .nav-drop:hover .nav-drop-t { color: var(--ink); } .nav-drop-menu { position: absolute; top: 100%; left: -14px; padding-top: 10px; display: none; z-index: 120; } .nav-drop:hover .nav-drop-menu { display: block; } .nav-drop-menu a { display: block; margin: 0; padding: 10px 18px; background: var(--card); border: 1px solid var(--line); border-top: none; white-space: nowrap; } .nav-drop-menu a:first-child { border-top: 1px solid var(--line); border-radius: 10px 10px 0 0; } .nav-drop-menu a:last-child { border-radius: 0 0 10px 10px; } .nav-drop-menu a:hover { background: var(--paper); } /* companies toolbar: sort + clear pinned right */ .co-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } /* key contacts strip above the company contacts table */ .co-keys { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 24px; } .co-keys-l { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-right: 6px; } .co-key-chip { background: #e9eedf; border: 1px solid #d5ddc3; color: #2f4a2e; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; } .co-key-chip .co-key-t { font-weight: 400; color: #5d594c; } html[data-theme="dark"] .co-key-chip { background: #262b1e; border-color: #3a422c; color: #a8c69a; } html[data-theme="dark"] .co-key-chip .co-key-t { color: #96917f; } /* relationship partner chip (navy family, above key contacts) */ .co-key-chip.co-rp-chip { background: #e3e9ee; border-color: #c9d5de; color: #2c4a6e; } html[data-theme="dark"] .co-key-chip.co-rp-chip { background: #1e2a38; border-color: #2e3a44; color: #9db8d9; } /* internal-owner cell in the top-10 contacts table */ .co-owner-n { font-weight: 700; color: var(--ink); font-size: 12.5px; } .co-owner-t { font-size: 11px; color: var(--muted); } .co-owner-m { font-size: 10.5px; color: #b88d3f; margin-top: 1px; } /* per-column sort toggle in table headers */ .colsort { background: none; border: none; color: rgba(255,255,255,.6); cursor: pointer; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 5px; margin-left: 6px; vertical-align: middle; } .colsort:hover { background: rgba(255,255,255,.18); color: #fff; } .colsort.on { color: #fff; background: rgba(255,255,255,.25); } .tbl th.has-f .colsort { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); margin: 0; } /* the table always fills its card — no blank space past the last column */ .tbl { width: 100%; min-width: 100%; } .tbl-wrap > .tbl { width: max(100%, max-content); } /* unbreakable runs (dotted lines, long URLs) must wrap inside their cell — otherwise they paint past the table and leave a phantom white strip */ .tbl td { overflow-wrap: anywhere; } /* home page uses the same width and top spacing as the inner pages (companies, snapshots, notes intelligence, weekly notes) */ main:has(.hero-video) { max-width: 1560px; padding-top: 16px; } /* ---- Relationship Intelligence: inline bar charts in chat replies ---- */ .ri-chart { --s0:#2a78d6; --s1:#eb6834; --s2:#1baf7a; --s3:#eda100; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 11px; margin: 10px 0 6px; max-width: 560px; } html[data-theme="dark"] .ri-chart { --s0:#3987e5; --s1:#d95926; --s2:#199e70; --s3:#c98500; } .ri-ctitle { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 10px; } .ri-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -2px 0 10px; } .ri-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--body); } .ri-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; } .ri-swatch.s0, .ri-bar.s0 { background: var(--s0); } .ri-swatch.s1, .ri-bar.s1 { background: var(--s1); } .ri-swatch.s2, .ri-bar.s2 { background: var(--s2); } .ri-swatch.s3, .ri-bar.s3 { background: var(--s3); } .ri-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; } .ri-row:last-child { margin-bottom: 2px; } .ri-lab { width: 128px; flex: none; text-align: right; font-size: 11.5px; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 1px; line-height: 15px; } .ri-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ri-track { display: flex; align-items: center; gap: 7px; cursor: default; } .ri-bar { height: 13px; flex: none; min-width: 3px; border-radius: 0 4px 4px 0; transition: filter .12s ease; } .ri-track:hover .ri-bar { filter: brightness(1.12); } .ri-val { font-size: 11px; color: var(--ink); line-height: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; } .ri-unit { margin-top: 9px; font-size: 10.5px; color: var(--muted); } @media (max-width: 700px) { .ri-lab { width: 88px; } } /* ---- Survey member cards: same per-member colors as the Weekly Notes diaries (member order is identical on both pages, so colors match) ---- */ .card.svc { background: var(--card); border: 1px solid var(--line); border-top-width: 4px; border-top-style: solid; border-top-color: var(--svc); box-shadow: 0 1px 3px rgba(22,21,15,.05); } .card.svc .more { color: var(--svc); } .svc-0 { --svc: #2c4a6e; } /* navy */ .svc-1 { --svc: #3d8b5e; } /* green */ .svc-2 { --svc: #c8853c; } /* amber */ .svc-3 { --svc: #bf5d4e; } /* clay */ .svc-4 { --svc: #8f7bab; } /* violet */ .svc-5 { --svc: #48709c; } /* steel */ .svc-6 { --svc: #6b8e4e; } /* olive */ .svc-7 { --svc: #a86b8f; } /* mauve */ .svc-8 { --svc: #4e8f89; } /* teal */ .svc-9 { --svc: #7d6a54; } /* taupe */ /* ---- Notifications: Clear all ---- */ .bell-head { display: flex; align-items: center; justify-content: space-between; padding: 3px 4px 9px; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .bell-head-t { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); } .bell-clear, .set-clear { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--body); cursor: pointer; transition: background .12s ease, color .12s ease; } .bell-clear:hover, .set-clear:hover { background: var(--line); color: var(--ink); } .set-tabs .set-clear { margin-left: auto; }