/* Dark theme (default) is the Sama brand's own "Reverse" (dark-background) variant from the official brand book — not an ad-hoc dark-mode hack. Colors, type pairing (Montserrat/Merriweather) and the bracket logo device are all taken directly from that brand book so this dashboard is presentable to the organization, not just a personal tool. Light theme (2026-09, per user request) overrides only the surface tokens below (--bg/--bg-elevated/--bg-hover/--border/--text/--text-dim and the *-bg alpha overlays) via [data-theme="light"] on — the brand accent colors (--coral/--gold/--sage/--maroon) are deliberately NOT overridden, since those are brand-identity colors that should read the same in both themes, not surface colors that invert. Server-rendered via the user's saved theme_preference (see samachar_base.html/login()) — no client-side flash of the wrong theme. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Merriweather:wght@400;700&family=Prata&display=swap'); :root { --bg: #1c1714; --bg-elevated: #2a231e; --bg-hover: #362d26; --border: #877565; --text: #eef6e6; --text-dim: #b9ab9e; --coral: #f26657; --coral-hover: #f5847a; --maroon: #7a1e15; --maroon-light: #914b42; --gold: #f6bd52; --gold-light: #fcd072; --sage: #87a194; --sage-light: #bcdda4; --accent: var(--coral); --accent-hover: var(--coral-hover); --success: var(--sage-light); --success-bg: rgba(188, 221, 164, 0.15); --warning: var(--gold); --warning-bg: rgba(246, 189, 82, 0.15); --danger: #f26657; --danger-bg: rgba(242, 102, 87, 0.15); --radius: 10px; } [data-theme="light"] { --bg: #f7f2e7; --bg-elevated: #efe6d4; --bg-hover: #e4d7bd; --border: #c9b8a0; --text: #221a14; --text-dim: #6e5f50; } * { box-sizing: border-box; } /* Sitewide text-overflow fix (2026-07-16) — long unbroken strings (a long title, a URL, a compound word) were breaking out of their card/box instead of wrapping, since neither the browser default nor most of this file's flex/grid children had wrapping enabled. overflow-wrap covers the text itself; min-width: 0 covers the OTHER half of the bug — a flex or grid child's default min-width is auto (its content's natural width), so it refuses to shrink below that and pushes past its box even with overflow-wrap set on the text inside it. Both are needed together. */ p, h1, h2, h3, h4, span, a, li, label, blockquote { overflow-wrap: break-word; word-break: break-word; } /* Real bug found (2026-09-18): table/th inherited word-break: break-word from the rule above, which — combined with the browser distributing a narrow table's columns based on available space — broke ordinary words like "searxng_discovery" into a single character per line in any column competing against a wide neighbor (e.g. a long error trace). overflow-wrap: break-word alone already prevents a genuinely unbreakable long token from overflowing its cell; it just prefers breaking at spaces first, which is what a normal column of words needs. */ td, th { overflow-wrap: break-word; } .article-body, .article-hero-body, .play-body, .chat-message, .chat-message-text { min-width: 0; } body { font-family: 'Merriweather', Georgia, serif; background: var(--bg); color: var(--text); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } h1, h2, h3, .topnav a, button, a.button, th { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; } .page { max-width: 1100px; margin: 0 auto; padding: 1.5rem; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; background: var(--bg-elevated); color: var(--text); border: 2px solid var(--accent); border-radius: var(--radius); padding: 0.6rem 1rem; } .skip-link:focus { left: 0.75rem; top: 0.75rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Top nav — persistent across every page, so no page is a dead end */ .topnav { background: var(--bg-elevated); border-bottom: 1px solid var(--border); padding: 0.9rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; position: sticky; top: 0; z-index: 10; /* On a narrow screen, wrap the whole row onto a second line rather than squeezing individual labels until they break mid-word. */ flex-wrap: wrap; row-gap: 0.5rem; } .topnav .brand { font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 0.6rem; } /* The top nav's brand mark is Sama's logo alone now (2026-09, per explicit user direction) — the "Samachar" wordmark moved out of the nav bar entirely, staying only in the per-page masthead below it. .soin-wordmark itself is unused now but left defined in case a future page still references the class. */ .soin-wordmark { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.02em; color: var(--gold-light); white-space: nowrap; } /* Sama's bracket-logo device, recreated per the brand book's own construction spec (brackets: Cochin: nearest free equivalent is a standard serif brace; wordmark: Prata, the brand's actual Google Font). */ .sama-logo { font-family: 'Prata', Georgia, serif; letter-spacing: 0.02em; white-space: nowrap; } .sama-logo .bracket { color: var(--maroon-light); } .sama-logo .word { color: var(--coral); font-style: normal; } .sama-logo-sm { font-size: 0.85rem; opacity: 0.85; } .sama-logo-tag { font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); line-height: 1.1; } .hero { background: linear-gradient(135deg, var(--maroon) 0%, var(--bg) 65%); border-bottom: 1px solid var(--border); padding: 2.5rem 1.5rem 2rem; margin: -1.5rem -1.5rem 1.5rem; border-radius: 0 0 var(--radius) var(--radius); } .hero-soin { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 3rem; letter-spacing: 0.03em; color: var(--gold-light); line-height: 1; } .hero-soin-full { font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--text); margin-top: 0.3rem; } .hero-powered-by { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 0.6rem; font-family: 'Montserrat', sans-serif; font-size: 0.8rem; color: var(--text-dim); } .hero-tagline-inline { font-size: 0.72rem; letter-spacing: 0.03em; color: var(--text-dim); } /* Top-right user menu (2026-09) — first-name button that opens a dropdown of account actions, replacing the old plain name/role text + separate Log out button. */ .user-menu { position: relative; margin-left: auto; } .user-menu-trigger { white-space: nowrap; } .user-menu-dropdown { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 20; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); flex-direction: column; min-width: 180px; padding: 0.4rem; } /* Real bug found (2026-09): the unconditional `display: flex` above beat the [hidden] attribute's default display:none (author CSS always wins over the UA stylesheet) — the dropdown was visible on every page load, not just after clicking the trigger. Only apply flex when NOT hidden. */ .user-menu-dropdown:not([hidden]) { display: flex; } .user-menu-dropdown a, .user-menu-dropdown button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 600; padding: 0.55rem 0.7rem; border-radius: calc(var(--radius) - 4px); cursor: pointer; text-decoration: none; } .user-menu-dropdown a:hover, .user-menu-dropdown button:hover { background: var(--bg-hover); } .user-menu-dropdown form { margin: 0; } .user-menu-divider { border-top: 1px solid var(--border); margin: 0.3rem 0.4rem; } .user-menu-danger { color: var(--danger) !important; } .hero-sub { color: var(--text); margin-top: 1rem; font-size: 1rem; max-width: 640px; } .topnav a { color: var(--text-dim); text-decoration: none; font-size: 0.9rem; transition: color 0.15s; } .topnav a:hover, .topnav a.active { color: var(--accent); } h1 { font-size: 1.5rem; margin: 1.5rem 0 0.5rem; font-weight: 600; } h2 { font-size: 1.1rem; margin: 2rem 0 0.75rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; } p.subtitle { color: var(--text-dim); margin-top: 0; } .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 1.1rem; } .input { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.7rem; font-family: inherit; font-size: 0.95rem; } .input:focus { outline: none; border-color: var(--accent); } .label-ui { font-family: 'Montserrat', sans-serif; font-size: 0.85rem; color: var(--text-dim); } .crm-import-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-color: var(--gold); } .crm-import-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } /* CRM Dashboard — KPI cards + a stage funnel, modeled on the fundamentals researched across premium CRM dashboards (Salesforce/HubSpot/Zoho): pipeline value, where it's stuck, what's overdue — deliberately no rep leaderboard, which assumes a team much larger than five. */ .crm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.8rem; margin-bottom: 1.4rem; } .crm-kpi-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; } .crm-kpi-card.crm-kpi-warning { border-color: var(--danger); } .crm-kpi-label { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 0.4rem; } .crm-kpi-value { font-family: 'Merriweather', Georgia, serif; font-size: 1.6rem; color: var(--text); font-variant-numeric: tabular-nums; } .crm-kpi-sub { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.3rem; } .crm-funnel-row { display: grid; grid-template-columns: 8rem 1fr 9rem; align-items: center; gap: 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); } .crm-funnel-row:last-child { border-bottom: none; } .crm-funnel-label { font-size: 0.85rem; color: var(--text); } .crm-funnel-bar-track { background: var(--bg-hover); border-radius: 6px; height: 0.9rem; overflow: hidden; } .crm-funnel-bar { height: 100%; background: linear-gradient(90deg, var(--gold), var(--coral)); border-radius: 6px; transition: width 0.4s ease; } .crm-funnel-figures { font-size: 0.8rem; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; } .crm-integrations { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .crm-integration-pill { font-family: 'Montserrat', sans-serif; font-size: 0.76rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; } .crm-integration-on { background: var(--success-bg); color: var(--success); } .crm-integration-off { background: var(--bg-hover); color: var(--text-dim); } .crm-task-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); } .crm-task-row:last-of-type { border-bottom: none; } .crm-task-check { width: 1.3rem; height: 1.3rem; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--success); font-size: 0.8rem; line-height: 1; cursor: pointer; flex-shrink: 0; } .crm-task-check.crm-task-done { background: var(--success-bg); border-color: var(--success); } .crm-task-title-done { text-decoration: line-through; color: var(--text-dim); } .crm-task-delete { background: none; border: none; color: var(--text-dim); font-size: 1rem; cursor: pointer; padding: 0 0.3rem; } .crm-task-delete:hover { color: var(--danger); } /* Kanban board — per explicit user direction, "the default pipeline interaction... a speed multiplier," with the table view kept as an alternate rather than removed. */ .crm-kanban-toolbar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; } .crm-bulk-bar { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--accent-soft, var(--bg-hover)); border: 1px solid var(--gold); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.85rem; } .crm-kanban-board { display: flex; gap: 0.9rem; overflow-x: auto; padding-bottom: 1rem; /* Real bug found 2026-07-22: on a phone this scrolled sideways with no sense of "one stage at a time" — scroll-snap makes a swipe land cleanly on the next column instead of stopping mid-way through two. */ scroll-snap-type: x proximity; } .crm-kanban-column { flex: 0 0 15rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem; min-height: 8rem; scroll-snap-align: start; } .crm-kanban-col-header { font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); margin-bottom: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .crm-kanban-card { background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.7rem; margin-bottom: 0.6rem; cursor: grab; } .crm-kanban-card:active { cursor: grabbing; } .crm-kanban-card-top { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; } .crm-kanban-company { flex: 1; font-size: 0.86rem; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-kanban-company:hover { color: var(--accent); } .crm-owner-avatar { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--gold); color: #1c1714; font-size: 0.66rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .crm-kanban-value { font-family: 'Merriweather', Georgia, serif; font-size: 0.9rem; color: var(--text); margin-bottom: 0.3rem; font-variant-numeric: tabular-nums; } .crm-kanban-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.4rem; } .crm-kanban-followup { font-size: 0.72rem; color: var(--text-dim); background: var(--bg-elevated); border-radius: 999px; padding: 0.12rem 0.5rem; } .crm-followup-overdue { color: #fff; background: var(--danger); } .crm-inline { cursor: pointer; border-radius: 4px; transition: background 0.15s; } .crm-inline:hover { background: var(--bg-elevated); outline: 1px dashed var(--border); } .crm-inline:focus-visible { background: var(--bg-elevated); outline: 2px solid var(--accent); outline-offset: 1px; } .crm-inline-editor { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--accent); border-radius: 6px; padding: 0.2rem 0.4rem; font: inherit; width: 100%; } .crm-kanban-agreement { display: flex; gap: 0.35rem; } .crm-kanban-move-select { margin-top: 0.5rem; width: 100%; font-size: 0.74rem; padding: 0.25rem 0.4rem; background: var(--bg); color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; } .crm-agreement-icon { font-size: 0.62rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 4px; letter-spacing: 0.03em; } .crm-agreement-none { background: var(--bg-elevated); color: var(--text-dim); } .crm-agreement-pending { background: var(--warning-bg); color: var(--warning); } .crm-agreement-signed { background: var(--success-bg); color: var(--success); } .crm-agreement-unknown { background: var(--bg-elevated); color: var(--text-dim); } /* Command palette — Cmd/Ctrl+K, per explicit user direction: "the team shouldn't click through tabs; they should type and go." */ .crm-palette-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 999; } .crm-palette-box { background: var(--bg-elevated); border: 1px solid var(--gold); border-radius: var(--radius); width: 90%; max-width: 32rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); overflow: hidden; } .crm-palette-box input { width: 100%; border: none; background: transparent; color: var(--text); font-size: 1.05rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); } .crm-palette-box input:focus { outline: none; border-bottom-color: var(--accent); border-bottom-width: 2px; padding-bottom: calc(1rem - 1px); } #crm-palette-results { max-height: 20rem; overflow-y: auto; } .crm-palette-result { padding: 0.7rem 1.2rem; cursor: pointer; font-size: 0.92rem; color: var(--text); } .crm-palette-result:hover, .crm-palette-selected { background: var(--bg-hover); } .crm-palette-type { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-right: 0.5rem; } details.card summary { cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--text); list-style: none; } details.card summary::-webkit-details-marker { display: none; } details.card summary::before { content: "▸ "; color: var(--coral); } details.card[open] summary::before { content: "▾ "; } table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } /* Real bug found 2026-07-22: SOIN's admin tables (Opportunities, PPP, Keywords, Contacts) had no horizontal-scroll container — on a phone the wide multi-column tables spilled off the right edge of the screen with nothing to scroll them into view. Wrap the in a div with this class in the template; the table itself keeps width:100% of THIS wrapper, not the viewport. */ .table-scroll { overflow-x: auto; } th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); } /* Gives a narrow "Source"-style column enough room that the browser's table layout doesn't squeeze it down to nothing when a neighboring column (like a long error message) demands most of the width. */ .source-col { min-width: 9rem; white-space: normal; } /* Collapsed-by-default full error text (2026-09-18) — a raw traceback or a Playwright browser-launch command (50+ flags on one line) used to dump directly into the table, making the row unreadably tall. Only the first line shows by default; the rest is one click away. */ .error-detail-expand { margin-top: 0.3rem; } .error-detail-expand summary { cursor: pointer; color: var(--text-dim); font-size: 0.8rem; } .error-detail-expand pre { white-space: pre-wrap; word-break: break-word; overflow-x: auto; font-size: 0.78rem; background: var(--bg-hover); padding: 0.6rem; border-radius: 6px; margin-top: 0.4rem; } th { color: var(--text-dim); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--bg-hover); } .table-caption { caption-side: top; text-align: left; color: var(--text-dim); font-size: 0.82rem; margin-bottom: 0.4rem; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } .badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } .badge-opportunity { background: rgba(242, 102, 87, 0.15); color: var(--accent); } .badge-lead { background: var(--warning-bg); color: var(--warning); } .badge-industry_news { background: var(--success-bg); color: var(--success); } .badge-institution_activity { background: rgba(177, 212, 213, 0.15); color: var(--sage-light); } .badge-original { background: transparent; border: 1px solid var(--gold); color: var(--gold); } /* Color-intent aliases — for badges whose meaning has nothing to do with the SOIN opportunity categories above, but wants the same coral/gold treatment (CRM document/signal labels). Same values, decoupled name. */ .badge-accent { background: rgba(242, 102, 87, 0.15); color: var(--accent); } .badge-gold { background: var(--warning-bg); color: var(--warning); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .text-overdue { color: var(--danger); } .member-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--bg-hover); border-radius: 999px; padding: 0.2rem 0.6rem; margin: 0.15rem; font-size: 0.8rem; } .member-chip-remove { background: none; border: none; color: var(--danger); padding: 0; margin: 0; font-size: 0.9rem; cursor: pointer; } .member-chip-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; } .error-row td { color: var(--danger); } button, a.button { display: inline-block; background: var(--accent); color: #1c1714; border: none; text-decoration: none; padding: 0.55rem 1.1rem; border-radius: 8px; font-size: 0.88rem; font-weight: 600; cursor: pointer; margin-right: 0.6rem; transition: background 0.15s; /* Real bug found 2026-07-22: "Log out" wrapped to "Log"/"out" on a narrow top bar — the sitewide word-break: break-word rule (see the comment near the top of this file) covers long titles/URLs, but a short, deliberate button label should never break; the top bar's own flex-wrap (added below) is what should give way first. */ white-space: nowrap; } button:hover, a.button:hover { background: var(--accent-hover); } .icon-btn { background: transparent; border: 1px solid var(--border); padding: 0.25rem 0.5rem; margin-right: 0.3rem; font-size: 0.95rem; border-radius: 6px; } .icon-btn:hover { background: var(--bg-hover); } .icon-btn.active-up { border-color: var(--sage-light); background: var(--success-bg); } .feedback-cell form { display: inline; } button.secondary, a.button.secondary { background: var(--bg-hover); color: var(--text); border: 1px solid var(--border); } button.secondary:hover, a.button.secondary:hover { background: #262c36; } form { display: inline; } select { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.6rem; margin-right: 0.5rem; font-size: 0.88rem; } /* Progress page */ .summary { display: flex; gap: 1rem; margin: 1rem 0 2rem; } .stat { flex: 1; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; text-align: center; text-decoration: none; color: var(--text); display: block; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .stat:hover { background: var(--bg-hover); border-color: var(--coral); } .stat.active-filter { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); } .button.active-filter, a.button.active-filter { border-color: var(--coral); } .link-accent { color: var(--accent); } .link-accent:hover { color: var(--accent-hover); } .stat .num { font-size: 1.9rem; font-weight: 700; } .stat.done .num { color: var(--success); } .stat.blocked .num { color: var(--warning); } .stat.not_started .num { color: var(--text-dim); } .bar { height: 8px; background: var(--bg-hover); border-radius: 6px; overflow: hidden; margin: 0.5rem 0 2rem; display: flex; } .bar .done { background: var(--success); } .bar .blocked { background: var(--warning); } .bar .not_started { background: var(--border); } .item { padding: 0.4rem 0; display: flex; align-items: flex-start; gap: 0.6rem; } .note { color: var(--text-dim); font-size: 0.82rem; } /* Login page — full-height centered card, big Sama logo as the focal point (this is the one page every teammate hits before anything else, so it carries more brand weight than an internal working page needs). */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.2rem; background: radial-gradient(circle at 50% 0%, var(--maroon) 0%, var(--bg) 60%); } .login-card { width: 100%; max-width: 26rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.6); padding: 2.6rem 2.4rem 2.2rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); text-align: center; } .login-logo { font-family: 'Prata', Georgia, serif; font-size: 2.6rem; letter-spacing: 0.03em; margin-bottom: 0.3rem; } .login-logo .bracket { color: var(--maroon-light); } .login-logo .word { color: var(--coral); font-style: normal; } .login-tagline { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1.6rem; } .login-product { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--gold-light); margin-bottom: 1.8rem; } .login-card form { text-align: left; } .login-card label { display: block; font-family: 'Montserrat', sans-serif; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.3rem; margin-top: 1rem; } .login-card input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.65rem 0.8rem; font-size: 0.95rem; font-family: 'Merriweather', Georgia, serif; } .login-card input:focus { outline: none; border-color: var(--coral); } .login-card button { width: 100%; margin-top: 1.6rem; padding: 0.7rem; font-size: 0.95rem; border-radius: 8px; } .login-error { background: var(--danger-bg); color: var(--danger); border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.85rem; margin-top: 1.2rem; text-align: left; } .not-relevant select { background: var(--bg-elevated); color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; padding: 0.2rem 0.4rem; font-size: 0.85rem; cursor: pointer; } .not-relevant select:hover { color: var(--text); border-color: var(--accent); } .share-btn { background: var(--bg-elevated); color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; padding: 0.2rem 0.5rem; font-size: 0.85rem; cursor: pointer; margin-left: 0.4rem; } .share-btn:hover { color: var(--text); border-color: var(--accent); } .login-admin-match { background: var(--success-bg); color: var(--success); border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.82rem; font-family: 'Montserrat', sans-serif; margin: 0.6rem 0 0.4rem; text-align: left; } .login-footer { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-family: 'Montserrat', sans-serif; font-size: 0.78rem; color: var(--text-dim); } /* Toast notifications — fixed top-right, survives scroll, every page. See dashboard/templates/_toast.html. */ #toast-container { position: fixed; top: 1.2rem; right: 1.2rem; z-index: 1000; display: flex; flex-direction: column; gap: 0.5rem; max-width: 22rem; pointer-events: none; } .toast { background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 0.65rem 0.9rem; font-family: 'Montserrat', sans-serif; font-size: 0.82rem; color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateX(12px); transition: opacity 0.2s ease, transform 0.2s ease; display: flex; align-items: center; gap: 0.7rem; pointer-events: auto; } .toast-undo { background: none; border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.76rem; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .toast-undo:hover { background: var(--gold); color: #1c1714; } .toast-close { background: none; border: none; color: var(--text-dim); font-size: 1.1rem; line-height: 1; padding: 0; margin-left: 0.2rem; cursor: pointer; flex-shrink: 0; } .toast-close:hover { color: var(--text); } .toast:focus-visible, .toast-close:focus-visible, .toast-undo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .toast-in { opacity: 1; transform: translateX(0); } .toast-success { border-left-color: var(--success); } .toast-error { border-left-color: var(--danger); } .toast-warning { border-left-color: var(--warning); } /* Article cards — Samachar visual redesign Phase 1. Real image if the source has one (see intelligence/image_extractor.py), a generated per-category gradient otherwise (painted client-side, see _toast.html). */ .article-card { display: flex; gap: 1rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem; margin-bottom: 0.8rem; transition: border-color 0.2s ease, transform 0.2s ease; } .article-card:hover { border-color: var(--accent); transform: translateY(-1px); } .article-media { flex: 0 0 128px; height: 96px; border-radius: 10px; overflow: hidden; position: relative; background: var(--bg-hover); border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } .article-media img, .article-media canvas { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .article-card:hover .article-media img, .article-card:hover .article-media canvas { transform: scale(1.06); } .article-media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(246, 189, 82, 0.18); border-radius: inherit; pointer-events: none; } .article-body { flex: 1; min-width: 0; } .article-meta { font-family: 'Montserrat', sans-serif; font-size: 0.74rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.4rem; } .article-source { color: var(--gold); font-weight: 600; } .article-dot { opacity: 0.5; } .article-title { display: block; font-family: 'Merriweather', Georgia, serif; font-size: 1rem; line-height: 1.4; color: var(--text); margin-bottom: 0.4rem; } .article-title:hover { color: var(--accent); } .article-dek { color: var(--text-dim); font-size: 0.82rem; line-height: 1.4; margin: 0 0 0.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-actions { margin-top: 0.3rem; } /* Judgment copy — a real button, not a badge pill, per explicit user direction ("should reflect as a button... posted on the right-hand side"). On the list card it's a third flex column so it sits at the card's right edge regardless of body text length; on the hero it's right-justified within the body column via .judgment-copy-row. */ .article-copy-action { flex: 0 0 auto; display: flex; align-items: center; } .judgment-copy-row { display: flex; justify-content: flex-end; margin-top: 0.6rem; } .judgment-copy-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 700; color: #1c1714; background: var(--gold); text-decoration: none; padding: 0.55rem 1rem; border-radius: 8px; white-space: nowrap; transition: background 0.2s ease, transform 0.2s ease; } .judgment-copy-btn::before { content: "\2913"; font-size: 0.9rem; } .judgment-copy-btn:hover { background: var(--gold-light); transform: translateY(-1px); } /* Newspaper masthead + hero — Samachar redesign Phase 2 */ .masthead { text-align: center; padding: 1.2rem 0 1rem; border-bottom: 3px solid var(--text); margin-bottom: 1.4rem; } .masthead-kicker { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 0.4rem; } .masthead-title { font-family: 'Prata', Georgia, serif; font-size: 2.2rem; letter-spacing: 0.01em; color: var(--text); } .masthead-title em { color: var(--coral); font-style: normal; } .masthead-date { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-dim); margin-top: 0.5rem; } .article-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 1.4rem; } .article-hero-media { border-radius: 12px; overflow: hidden; min-height: 220px; position: relative; background: var(--bg-hover); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .article-hero-media img, .article-hero-media canvas { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; transition: transform 0.5s ease; } .article-hero:hover .article-hero-media img, .article-hero:hover .article-hero-media canvas { transform: scale(1.04); } .article-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 23, 20, 0.35), transparent 50%); } .article-hero-body { display: flex; flex-direction: column; justify-content: center; } .article-hero-tag { background: var(--gold); color: #1c1714; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 4px; font-size: 0.68rem; } .article-hero-title { display: block; font-family: 'Merriweather', Georgia, serif; font-size: 1.5rem; line-height: 1.32; color: var(--text); margin: 0.5rem 0 0.6rem; } .article-hero-title:hover { color: var(--accent); } .article-hero-dek { color: var(--text-dim); font-size: 0.95rem; margin: 0 0 0.6rem; } @media (max-width: 720px) { .article-hero { grid-template-columns: 1fr; } .article-hero-media { min-height: 160px; } /* The 128px desktop thumbnail leaves too little room for the title on a phone-width card — shrink it rather than letting text wrap to 5+ lines. */ .article-media { flex-basis: 88px; height: 76px; } } /* Bottom nav — Samachar redesign Phase 3. Fixed, 5 destinations, Play in the center gets its own accent treatment (the "hero" action). */ .page-with-bottom-nav { padding-bottom: 5rem; } .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 4.2rem; background: var(--bg-elevated); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-around; z-index: 900; } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; color: var(--text-dim); text-decoration: none; font-family: 'Montserrat', sans-serif; font-size: 0.65rem; flex: 1; padding: 0.3rem 0; } .bottom-nav-item.active { color: var(--accent); } .bottom-nav-icon { font-size: 1.3rem; position: relative; } .bottom-nav-play-circle { display: flex; align-items: center; justify-content: center; background: var(--coral); border-radius: 50%; width: 3.2rem; height: 3.2rem; margin-top: -1.2rem; box-shadow: 0 4px 14px rgba(242, 102, 87, 0.4); } .bottom-nav-play .bottom-nav-icon { font-size: 1.4rem; color: #1c1714; } .notif-badge { position: absolute; top: -0.3rem; right: -0.6rem; background: var(--coral); color: #1c1714; font-size: 0.6rem; font-weight: 700; border-radius: 999px; min-width: 1.1rem; height: 1.1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.25rem; } /* Play (Inshorts/Instagram-style Shorts) — Samachar redesign Phase 4 */ .play-frame { max-width: 420px; margin: 0 auto; height: calc(100vh - 9rem); overflow-y: scroll; scroll-snap-type: y mandatory; border-radius: 16px; border: 1px solid var(--border); } .play-frame::-webkit-scrollbar { display: none; } .play-card { scroll-snap-align: start; height: calc(100vh - 9rem); display: flex; flex-direction: column; background: var(--bg-elevated); } .play-media { height: 48%; position: relative; overflow: hidden; } .play-media img, .play-media canvas { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; animation: play-media-drift 12s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .play-media img, .play-media canvas { animation: none; } .progress-bar { transition: none; } .toast { transition: opacity 0.2s ease; transform: none; } .toast.toast-in { transform: none; } .article-card { transition: none; } .article-card:hover { transform: none; } .article-media img, .article-media canvas, .article-hero-media img, .article-hero-media canvas { transition: none; } .article-card:hover .article-media img, .article-card:hover .article-media canvas, .article-hero:hover .article-hero-media img, .article-hero:hover .article-hero-media canvas { transform: none; } .judgment-copy-btn { transition: background 0.2s ease; } .judgment-copy-btn:hover { transform: none; } } @keyframes play-media-drift { from { transform: scale(1); } to { transform: scale(1.08); } } .play-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 23, 20, 0.5), transparent 60%); } .play-cat-badge { position: absolute; top: 0.8rem; left: 0.8rem; background: rgba(0,0,0,0.5); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px; } .play-body { flex: 1; padding: 1rem 1.1rem; display: flex; flex-direction: column; overflow-y: auto; } .play-date { font-family: 'Montserrat', sans-serif; font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.3rem; } .play-title { display: block; font-family: 'Merriweather', Georgia, serif; font-size: 1.15rem; line-height: 1.35; color: var(--text); margin-bottom: 0.5rem; } .play-title:hover { color: var(--accent); } .play-gist { color: var(--text-dim); font-size: 0.88rem; flex: 1; } .play-actions { display: flex; gap: 1rem; padding-top: 0.6rem; border-top: 1px solid var(--border); margin-top: 0.6rem; } .play-actions button { background: transparent; border: none; color: var(--text-dim); font-family: 'Montserrat', sans-serif; font-size: 0.82rem; cursor: pointer; padding: 0.2rem 0; margin: 0; display: flex; align-items: center; gap: 0.3rem; } .play-like.liked { color: var(--coral); } .play-like-icon { font-size: 1.1rem; } .play-comments { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--border); } .play-comment { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 0.4rem; } .play-comment b { color: var(--text); } .play-comment-form { display: flex; gap: 0.4rem; margin-top: 0.4rem; } .play-comment-form input { flex: 1; background: var(--bg-hover); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.5rem; font-size: 0.8rem; } .play-comment-form button { font-size: 0.78rem; padding: 0.3rem 0.6rem; } /* Notifications list — Samachar redesign Phase 5 */ .not-item { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.88rem; color: var(--text-dim); position: relative; } .not-item:last-child { border-bottom: none; } .not-item b { color: var(--text); } .not-item-time { display: block; font-size: 0.7rem; color: var(--text-dim); opacity: 0.7; margin-top: 0.2rem; } /* Community — channels list + chat window, Samachar redesign Phase 6 */ .channel-row { display: block; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: 0.6rem; text-decoration: none; color: var(--text); } .channel-row:hover { border-color: var(--accent); } .channel-row-name { font-family: 'Montserrat', sans-serif; font-weight: 600; } .channel-row-count { float: right; font-size: 0.75rem; color: var(--text-dim); font-weight: 400; } .channel-row-desc { font-size: 0.82rem; color: var(--text-dim); margin-top: 0.2rem; } .chat-window { height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; } .chat-message { font-size: 0.88rem; } .chat-message b { color: var(--gold); margin-right: 0.4rem; } .chat-message-text { color: var(--text); } /* Signup consent checkboxes — Samachar redesign Phase 9. Deliberately NOT styled to look identical/bundled — each is its own block with its own spacing, so the mandatory/optional distinction reads visually too. */ .consent-check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; margin: 0.9rem 0; cursor: pointer; } .consent-check input { margin-top: 0.2rem; flex-shrink: 0; } .consent-check a { color: var(--coral); } /* Site footer — grievance officer contact, DPDP/SPDI requirement */ .site-footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); font-family: 'Montserrat', sans-serif; font-size: 0.72rem; color: var(--text-dim); } .site-footer a { color: var(--text-dim); } .site-footer a:hover { color: var(--accent); } .site-footer-dot { margin: 0 0.4rem; opacity: 0.5; } .feedback-trigger { background: none; border: none; padding: 0; margin: 0; color: var(--text-dim); font: inherit; font-size: 0.72rem; text-decoration: underline; cursor: pointer; } .feedback-trigger:hover { color: var(--accent); } .feedback-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 999; } .feedback-modal-box { background: var(--bg-elevated); border: 1px solid var(--gold); border-radius: var(--radius); width: 90%; max-width: 28rem; padding: 1.2rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .assistant-thread { height: 60vh; min-height: 20rem; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; } .assistant-msg { max-width: 75%; padding: 0.5rem 0.8rem; border-radius: 12px; line-height: 1.45; white-space: pre-wrap; } .assistant-msg-user { align-self: flex-end; background: var(--accent); color: #1c1714; } .assistant-msg-assistant { align-self: flex-start; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); } /* News/Judgments/Policies section tabs — minimal, shareable-per-tab, per explicit user direction (2026-07-14): "very minimal segregation." Only on the general-purpose feeds (public reader, admin What's New) — team feeds already have their own purpose-built filters. */ .section-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } .section-tabs a { font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--text-dim); text-decoration: none; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); } .section-tabs a.active { background: var(--accent); color: #1c1714; border-color: var(--accent); } .section-tabs a:hover:not(.active) { border-color: var(--accent); color: var(--text); } /* Sub-tabs within a section (Research Papers -> Published/Opportunities, Student's Corner -> News/Internships/Moot Court Competitions) — a visually lighter, smaller second tier so the primary section tabs above stay the dominant navigation. */ .subsection-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: -0.4rem 0 1rem; } .subsection-tabs a { font-family: 'Montserrat', sans-serif; font-size: 0.74rem; font-weight: 600; color: var(--text-dim); text-decoration: none; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--bg-hover); border: 1px solid transparent; } .subsection-tabs a.active { background: var(--gold); color: #1c1714; } .subsection-tabs a:hover:not(.active) { border-color: var(--gold); color: var(--text); } /* India/World region chooser (2026-09, per explicit user direction) — News section only, Community feed. Client-side only (no page reload), same philosophy as the India/World pagers below: everything's already rendered server-side, this just shows/hides which block is visible. Visually matches .subsection-tabs (a second-tier control, not a primary nav), buttons instead of links since nothing here is a real navigation target. */ .region-choice { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: -0.4rem 0 1rem; } .region-choice-btn { font-family: 'Montserrat', sans-serif; font-size: 0.74rem; font-weight: 600; color: var(--text-dim); cursor: pointer; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--bg-hover); border: 1px solid transparent; } .region-choice-btn.active { background: var(--sage); color: #1c1714; } .region-choice-btn:hover:not(.active) { border-color: var(--sage); color: var(--text); } /* Judgments search — small and understated by design (per explicit user direction: "shouldn't be overly eye-catching, but needs to be visibly beautiful"), a slim pill that only widens its focus ring on interaction rather than announcing itself with size or color. */ .judgment-search { display: flex; align-items: center; gap: 0.5rem; max-width: 280px; margin-bottom: 1rem; padding: 0.4rem 0.8rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .judgment-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(246, 189, 82, 0.15); } .judgment-search-icon { font-size: 0.85rem; opacity: 0.55; line-height: 1; } .judgment-search input[type="text"] { flex: 1; border: none; background: transparent; outline: none; font-family: 'Montserrat', sans-serif; font-size: 0.82rem; color: var(--text); } .judgment-search input[type="text"]::placeholder { color: var(--text-dim); } .judgment-search-clear { color: var(--text-dim); text-decoration: none; font-size: 1rem; line-height: 1; padding: 0 0.2rem; } .judgment-search-clear:hover { color: var(--accent); } /* Optional industry categories grid — Settings/Preferences */ .industry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.4rem 1rem; } .industry-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-dim); cursor: pointer; } /* Community moderation controls */ .chat-message { position: relative; padding-right: 1.5rem; } .chat-message-delete { position: absolute; right: 0; top: 0; background: none; border: none; color: var(--danger); font-size: 0.95rem; cursor: pointer; padding: 0; margin: 0; opacity: 0.6; } .chat-message-delete:hover { opacity: 1; } /* Social login buttons */ .social-login { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; } .social-button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--text); background: var(--bg-elevated); } .social-button:hover { border-color: var(--accent); background: var(--bg-hover); } .social-icon { font-weight: 800; font-size: 1rem; } .social-divider { display: flex; align-items: center; text-align: center; color: var(--text-dim); font-size: 0.75rem; margin: 1rem 0; } .social-divider::before, .social-divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--border); } /* CRM zone — its own distinct area, per explicit user direction: "click on the CRM section, you should get into a completely different zone, unrelated to the news and everything else." No masthead, no bottom nav — a slim top bar + a real left sidebar instead. */ .crm-zone-body { margin: 0; } .crm-zone-topbar { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1.5rem; background: var(--bg-elevated); border-bottom: 1px solid var(--border); /* Same real bug/fix as .topnav above — wrap the row, don't break words. */ flex-wrap: wrap; row-gap: 0.5rem; } .crm-zone-brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; white-space: nowrap; } .crm-zone-wordmark { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--gold); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .crm-zone-exit { color: var(--text-dim); font-size: 0.85rem; text-decoration: none; white-space: nowrap; } .crm-zone-exit:hover { color: var(--accent); } .crm-zone-user { margin-left: auto; color: var(--text-dim); font-size: 0.85rem; white-space: nowrap; } .crm-zone-layout { display: flex; align-items: flex-start; min-height: calc(100vh - 3.6rem); } .crm-zone-sidebar { width: 14rem; flex-shrink: 0; background: var(--bg-elevated); border-right: 1px solid var(--border); min-height: calc(100vh - 3.6rem); padding: 1rem 0; position: sticky; top: 0; } .crm-zone-nav-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1.2rem; color: var(--text-dim); text-decoration: none; font-family: 'Montserrat', sans-serif; font-size: 0.88rem; font-weight: 600; border-left: 3px solid transparent; } .crm-zone-nav-item:hover { background: var(--bg-hover); color: var(--text); } .crm-zone-nav-item.active { color: var(--accent); border-left-color: var(--accent); background: var(--bg-hover); } .crm-zone-nav-icon { font-size: 1.1rem; } .crm-zone-main { flex: 1; padding: 1.5rem 2rem; min-width: 0; } .crm-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1rem; } .crm-settings-tile { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; color: var(--text); transition: border-color 0.15s; } .crm-settings-tile:hover { border-color: var(--accent); } .crm-settings-tile strong { font-family: 'Montserrat', sans-serif; font-size: 0.95rem; } /* Floating assistant widget — CRM zone only, per explicit user direction: "minimized to an extent where it does not hamper screen reading... click on that corner for it to appear in a bigger size, and then I can click again." */ .crm-chat-bubble { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: none; background: var(--coral); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; box-shadow: 0 4px 14px rgba(242, 102, 87, 0.4); z-index: 950; transition: transform 0.15s; } .crm-chat-bubble:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .crm-chat-bubble:hover { transform: scale(1.06); } .crm-chat-bubble-open { opacity: 0; pointer-events: none; } .crm-chat-panel { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 22rem; max-width: calc(100vw - 2rem); height: 28rem; max-height: calc(100vh - 3rem); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); z-index: 950; flex-direction: column; overflow: hidden; } .crm-chat-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1rem; background: var(--bg-hover); border-bottom: 1px solid var(--border); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9rem; } .crm-chat-close { background: none; border: none; color: var(--text-dim); font-size: 1.3rem; cursor: pointer; line-height: 1; } .crm-chat-close:hover { color: var(--text); } .crm-chat-thread { flex: 1; overflow-y: auto; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; } .crm-chat-form { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: 1px solid var(--border); } .crm-chat-form input { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.6rem; } .crm-chat-form input[type="file"] { display: none; } #crm-chat-attach { flex: 0 0 auto; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.6rem; cursor: pointer; font-size: 1rem; line-height: 1; } #crm-chat-attach:hover { background: var(--bg-elevated); } @media (max-width: 720px) { .crm-zone-sidebar { width: 4rem; } .crm-zone-nav-label { display: none; } .crm-zone-nav-item { justify-content: center; padding: 0.65rem 0.4rem; } /* Widen each Kanban column to roughly one-screen-plus-a-peek instead of the fixed 15rem desktop width — one stage at a time, with just enough of the next column showing to signal there's more to swipe to. */ .crm-kanban-column { flex: 0 0 82vw; } } .social-divider span { padding: 0 0.7rem; }