/* ============================================================ Notice Board — Govably Brand ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;0,9..144,900&family=Inter:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap'); :root { /* Govably brand colors (from govably.com) */ --brand-50: #f5fbe6; --brand-100: #dff2c5; --brand-200: #cdedb3; --brand-300: #cef17b; --brand-400: #a4d655; --brand-500: #7eba36; --brand-600: #5a9326; --brand-700: #3d6b1c; --brand-800: #1d4730; --brand-900: #084734; --brand-950: #052a20; /* Warm neutrals (Govably's "handmade" feel) */ --paper: #fafaf7; --paper-2: #f5f4ed; --ink-900: #0c1612; --ink-800: #1c2825; --ink-700: #344441; --ink-600: #4f615d; --ink-500: #6b7c78; --ink-400: #98a6a2; --ink-300: #c4cdc9; --ink-200: #dde2df; --ink-100: #ecefed; --ink-50: #f7f8f7; --accent-red: #b91c1c; --accent-amber: #b45309; --accent-blue: #075985; } /* ──────────────── Reset & base ──────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--ink-900); background: var(--paper); line-height: 1.55; -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; } .serif { font-family: 'Fraunces', Georgia, serif; font-feature-settings: 'ss01', 'ss03'; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; } input, select, textarea { font-family: inherit; font-size: inherit; } img, svg { display: block; max-width: 100%; } /* Retention feature flag: when a super admin turns off Texas records-retention for a client, KC.mountLayout/mountAdminLayout add `no-retention` to and every retention-specific element (marked .retention-only) is hidden everywhere. */ body.no-retention .retention-only { display: none !important; } /* Retention Center "coming soon": while the global KC.RETENTION_LIVE flag is off, the admin adds `retention-cs` to and Retention Center entry points (marked .retention-center-only, e.g. the dashboard card) are hidden. The sidebar still shows the item, grayed out as "Coming soon". */ body.retention-cs .retention-center-only { display: none !important; } /* ──────────────── Top utility bar ──────────────── */ .topbar { background: var(--brand-950); font-size: 12px; color: rgba(255,255,255,0.62); } .topbar-inner { max-width: 1280px; margin: 0 auto; padding: 7px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .topbar a { transition: color 0.15s; cursor: pointer; } .topbar a:hover { color: white; } .topbar-links { display: flex; gap: 22px; } .topbar .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #34d399; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 6px rgba(52, 211, 153, 0.6); } /* ──────────────── Header ──────────────── */ .header { background: var(--brand-900); position: relative; } .header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-300), transparent); opacity: 0.4; } .header-inner { max-width: 1280px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; gap: 24px; } .header-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; } .header-seal { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-700); border: 1.5px solid var(--brand-300); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s; } .header-brand:hover .header-seal { transform: rotate(-3deg); } .header-seal svg { width: 24px; height: 24px; color: var(--brand-300); } /* When a client uploads a logo, show it cleanly on the header — no tile, no outline, and no hover tilt (the logo speaks for itself). */ .header-seal.has-logo { background: transparent; border: none; padding: 0; overflow: visible; } .header-seal.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .header-brand:hover .header-seal.has-logo { transform: none; } .header-titles { line-height: 1.15; } .header-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px; color: white; letter-spacing: -0.01em; } .header-subtitle { font-size: 12px; color: var(--brand-300); margin-top: 2px; font-weight: 500; letter-spacing: 0.02em; } .header-nav { margin-left: auto; display: flex; gap: 2px; align-items: center; } .header-nav a { padding: 8px 14px; border-radius: 6px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.72); transition: all 0.15s; cursor: pointer; } .header-nav a:hover { background: rgba(255,255,255,0.06); color: white; } .header-nav a.active { color: white; font-weight: 600; background: rgba(206,241,123,0.10); } .header-cta { background: var(--brand-300); color: var(--brand-900); padding: 9px 17px; border-radius: 7px; font-weight: 600; font-size: 13px; transition: all 0.15s; cursor: pointer; margin-left: 8px; } .header-cta:hover { background: var(--brand-400); transform: translateY(-1px); } /* Categories dropdown in the public header (built from the client's categories) */ .header-dropdown { position: relative; display: inline-flex; } .header-dropdown-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 6px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.72); background: none; border: none; cursor: pointer; font-family: inherit; transition: all 0.15s; } .header-dropdown-toggle:hover { background: rgba(255,255,255,0.06); color: white; } .header-dropdown-toggle.active { color: white; font-weight: 600; background: rgba(206,241,123,0.10); } .header-dropdown-toggle svg { transition: transform 0.15s; } .header-dropdown:hover .header-dropdown-toggle svg, .header-dropdown:focus-within .header-dropdown-toggle svg { transform: rotate(180deg); } .header-dropdown-menu { position: absolute; top: 100%; right: 0; background: #fff; border: 1px solid var(--ink-200); border-radius: 10px; box-shadow: 0 14px 36px rgba(8,15,12,0.20); min-width: 220px; padding: 6px; z-index: 200; display: none; flex-direction: column; max-height: min(70vh, 440px); overflow: auto; } .header-dropdown:hover .header-dropdown-menu, .header-dropdown:focus-within .header-dropdown-menu { display: flex; } .header-dropdown-menu a { padding: 9px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 500; color: var(--ink-700); white-space: nowrap; } .header-dropdown-menu a:hover { background: var(--brand-50); color: var(--brand-900); } /* ──────────────── Hero w/ search ──────────────── */ .search-hero { background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(206,241,123,0.10), transparent 70%), linear-gradient(180deg, var(--brand-900) 0%, var(--brand-950) 100%); padding: 64px 24px 72px; position: relative; overflow: hidden; } .search-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 0% 0%, rgba(206,241,123,0.05), transparent 40%), radial-gradient(circle at 100% 100%, rgba(206,241,123,0.04), transparent 40%); pointer-events: none; } .search-hero-inner { max-width: 780px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } .search-hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand-300); margin-bottom: 18px; padding: 5px 12px; border-radius: 14px; background: rgba(206,241,123,0.10); border: 1px solid rgba(206,241,123,0.20); } .search-hero h1 { font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(32px, 4.5vw, 44px); color: white; letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 14px; } .search-hero h1 em { font-style: italic; color: var(--brand-300); font-weight: 500; } .search-hero p { color: rgba(255,255,255,0.72); font-size: 16px; margin-bottom: 28px; font-weight: 400; } .search-box { position: relative; background: white; border-radius: 999px; box-shadow: 0 12px 40px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.12); display: flex; align-items: center; padding: 6px 6px 6px 22px; border: 1px solid rgba(206,241,123,0.30); } .search-box svg.search-icon { width: 18px; height: 18px; color: var(--ink-500); flex-shrink: 0; } .search-box input { flex: 1; border: none; outline: none; padding: 14px 12px; font-size: 15px; background: transparent; color: var(--ink-900); } .search-box input::placeholder { color: var(--ink-400); } .search-box button { background: var(--brand-900); color: white; border-radius: 999px; padding: 12px 22px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; transition: all 0.15s; } .search-box button:hover { background: var(--brand-800); } .search-box button:disabled { opacity: 0.6; cursor: wait; } .search-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; } .search-chip { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.82); padding: 7px 15px; border-radius: 999px; font-size: 13px; cursor: pointer; transition: all 0.15s; font-weight: 500; } .search-chip:hover { background: var(--brand-300); color: var(--brand-900); border-color: var(--brand-300); } .search-attribution { text-align: center; font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 22px; font-family: 'DM Mono', monospace; } .search-attribution span { color: var(--brand-300); font-weight: 600; } /* Home welcome + compact search — a short intro that names the client and explains the board, with a deliberately small search beneath. The color-coded categories below remain the primary way to navigate. */ .home-search { background: var(--paper); padding: 40px 24px 18px; text-align: center; } .home-search-inner { max-width: 760px; margin: 0 auto; } .home-search-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand-700); margin-bottom: 14px; padding: 5px 12px; border-radius: 14px; background: rgba(61,107,28,0.08); border: 1px solid rgba(61,107,28,0.16); } .home-welcome { font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(26px, 3.4vw, 36px); color: var(--brand-900); letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 12px; } .home-welcome span { color: var(--brand-700); } .home-welcome-sub { color: var(--ink-600); font-size: 15.5px; line-height: 1.55; max-width: 620px; margin: 0 auto 22px; } .search-box-sm { box-shadow: 0 2px 8px rgba(8,71,52,0.06); border: 1px solid var(--ink-200); padding: 5px 5px 5px 18px; max-width: 600px; margin: 0 auto; } .search-box-sm input { padding: 11px 10px; font-size: 14.5px; } .search-box-sm button { padding: 10px 18px; } /* Inline variant for light-background pages (e.g. Browse): softer shadow + defined border instead of the deep drop shadow used on the dark home hero. */ .search-box-inline { box-shadow: 0 1px 2px rgba(0,0,0,0.04); border: 1px solid var(--ink-200); } .search-box-inline:focus-within { border-color: var(--brand-300); box-shadow: 0 0 0 3px rgba(206,241,123,0.25); } .search-chips-sm { justify-content: center; margin-top: 12px; } .search-chips-sm .search-chip { background: white; border: 1px solid var(--ink-200); color: var(--ink-600); } .search-chips-sm .search-chip:hover { background: var(--brand-300); color: var(--brand-900); border-color: var(--brand-300); } /* AI search inline result panel */ .ai-result { background: white; max-width: 860px; margin: 16px auto 0; padding: 22px 24px; border-radius: 14px; box-shadow: 0 18px 40px rgba(8,71,52,0.12), 0 4px 10px rgba(0,0,0,0.04); position: relative; z-index: 10; border: 1px solid var(--brand-100); } .ai-result-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-700); font-weight: 600; } .ai-result-body { font-size: 15px; color: var(--ink-800); line-height: 1.65; } /* Search results sit on a white panel, so force the Govably forest green for links — the AI is told to style them lime (var(--brand-300)), which is only legible on the dark document-Q&A panel. !important beats that inline color. */ .ai-result-body a { color: var(--brand-900) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .ai-result-body strong { color: var(--brand-900); } .ai-result-thinking { display: inline-flex; gap: 4px; align-items: center; } .ai-result-thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-600); animation: dot 1.2s infinite ease-in-out; } .ai-result-thinking span:nth-child(2) { animation-delay: 0.15s; } .ai-result-thinking span:nth-child(3) { animation-delay: 0.30s; } @keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-6px); opacity: 1; } } /* ──────────────── Alert banner ──────────────── */ .alert-banner { background: var(--brand-800); color: white; font-size: 14px; } .alert-banner-inner { max-width: 1280px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; } .alert-banner strong { color: var(--brand-300); } .alert-banner a { color: white; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } .alert-banner a:hover { color: var(--brand-300); } /* ──────────────── Layout ──────────────── */ .container { max-width: 1280px; margin: 0 auto; padding: 48px 24px; } .container-narrow { max-width: 920px; margin: 0 auto; padding: 48px 24px; } .container-wide { max-width: 1440px; margin: 0 auto; padding: 32px 24px; } /* ──────────────── Section headings ──────────────── */ .section-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 26px; color: var(--brand-900); margin-bottom: 14px; letter-spacing: -0.02em; line-height: 1.15; } .section-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--brand-700); font-weight: 600; margin-bottom: 8px; } .section-subtitle { color: var(--ink-600); font-size: 15px; margin-top: -4px; margin-bottom: 24px; max-width: 720px; line-height: 1.6; } /* ──────────────── Category grid ──────────────── */ .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .category-card { background: white; border: 1px solid var(--ink-200); border-radius: 12px; padding: 22px; transition: all 0.22s cubic-bezier(.2,.7,.3,1); cursor: pointer; text-decoration: none; color: inherit; display: block; position: relative; overflow: hidden; } .category-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--brand-700); transition: all 0.22s; } .category-card:hover { border-color: var(--brand-300); box-shadow: 0 12px 28px rgba(8,71,52,0.10), 0 2px 6px rgba(0,0,0,0.04); transform: translateY(-2px); } .category-card:hover::before { background: var(--brand-300); height: 5px; } .category-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-900); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: all 0.2s; } .category-icon svg { width: 22px; height: 22px; color: inherit; } .category-card .category-icon { color: var(--brand-300); } .category-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 16px; color: var(--brand-900); margin-bottom: 6px; letter-spacing: -0.01em; } .category-desc { color: var(--ink-600); font-size: 13px; line-height: 1.55; margin-bottom: 16px; } .category-footer { display: flex; align-items: center; justify-content: space-between; } .category-link { font-size: 12px; color: var(--brand-700); font-weight: 600; display: flex; align-items: center; gap: 4px; transition: gap 0.2s; } .category-card:hover .category-link { gap: 8px; } /* ──────────────── Badges & pills ──────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; letter-spacing: 0.01em; } .b-new { background: #fef3c7; color: #92400e; } .b-active { background: var(--brand-100); color: var(--brand-800); } .b-urgent { background: #fee2e2; color: #991b1b; } .b-closed { background: var(--ink-100); color: var(--ink-600); } .b-open { background: var(--brand-100); color: var(--brand-800); } .b-pending { background: #fef3c7; color: #92400e; } .b-expired { background: var(--ink-200); color: var(--ink-600); } .cat-pill { display: inline-block; padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .cat-foreclosures { background: #fef2f2; color: #991b1b; } .cat-meetings { background: #ecfeff; color: #0e7490; } .cat-estrays { background: #fdf2f8; color: #9d174d; } .cat-probate { background: #f5f3ff; color: #6d28d9; } .cat-elections { background: #fffbeb; color: #92400e; } .cat-public-comments { background: var(--brand-50); color: var(--brand-800); } .cat-assumed-names { background: #fff7ed; color: #9a3412; } .cat-legal { background: #f5f3ff; color: #6d28d9; } .cat-campaign-finance { background: #ecfeff; color: #155e75; } /* ──────────────── Document list rows ──────────────── */ .doc-list { background: white; border: 1px solid var(--ink-200); border-radius: 12px; overflow: hidden; } .doc-row { display: flex; align-items: stretch; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--ink-100); cursor: pointer; transition: background 0.12s; text-decoration: none; color: inherit; } .doc-row:hover { background: var(--ink-50); } .doc-row:last-child { border-bottom: none; } .doc-stripe { width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0; } .doc-stripe.s-active { background: var(--brand-500); } .doc-stripe.s-urgent { background: var(--accent-red); } .doc-stripe.s-new { background: var(--brand-300); } .doc-stripe.s-closed { background: var(--ink-300); } .doc-stripe.s-open { background: var(--brand-400); } .doc-body { flex: 1; min-width: 0; } .doc-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; } .doc-title { font-weight: 600; font-size: 14.5px; color: var(--ink-900); letter-spacing: -0.005em; } .doc-sub { font-size: 12px; color: var(--ink-500); margin-top: 3px; } .doc-sub strong { color: var(--ink-700); font-weight: 600; } .doc-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; } .btn-sm { font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--ink-200); background: white; color: var(--ink-700); transition: all 0.15s; white-space: nowrap; cursor: pointer; } .btn-sm:hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-900); } .btn-sm-primary { background: var(--brand-900); color: white; border-color: var(--brand-900); } .btn-sm-primary:hover { background: var(--brand-800); border-color: var(--brand-800); color: white; } .btn-sm-lime { background: var(--brand-300); color: var(--brand-900); border-color: var(--brand-400); } .btn-sm-lime:hover { background: var(--brand-400); } /* ──────────────── Buttons ──────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: all 0.15s; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-primary { background: var(--brand-900); color: white; box-shadow: 0 1px 0 var(--brand-950) inset, 0 1px 2px rgba(8,71,52,0.15); } .btn-primary:hover { background: var(--brand-800); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(8,71,52,0.20); } .btn-secondary { background: white; color: var(--ink-800); border-color: var(--ink-200); } .btn-secondary:hover { background: var(--ink-50); border-color: var(--ink-300); } .btn-lime { background: var(--brand-300); color: var(--brand-900); box-shadow: 0 1px 0 var(--brand-400) inset, 0 1px 2px rgba(8,71,52,0.10); } .btn-lime:hover { background: var(--brand-400); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--brand-700); padding: 8px 12px; } .btn-ghost:hover { background: var(--brand-50); } .btn-danger { background: white; color: var(--accent-red); border-color: #fecaca; } .btn-danger:hover { background: #fef2f2; } .btn-lg { padding: 14px 24px; font-size: 15px; } /* ──────────────── Cards ──────────────── */ .card { background: white; border: 1px solid var(--ink-200); border-radius: 12px; overflow: hidden; } .card-header { padding: 14px 20px; border-bottom: 1px solid var(--ink-100); background: var(--ink-50); display: flex; align-items: center; justify-content: space-between; } .card-title { font-weight: 600; font-size: 14px; color: var(--brand-900); } .card-body { padding: 20px; } .card-padded { padding: 24px; } /* ──────────────── Stats ──────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } .stat { background: white; border: 1px solid var(--ink-200); border-radius: 12px; padding: 20px; position: relative; overflow: hidden; } .stat::after { content: ""; position: absolute; right: -20px; bottom: -20px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, var(--brand-50), transparent 70%); opacity: 0.5; pointer-events: none; } .stat-label { font-size: 12px; color: var(--ink-500); margin-bottom: 8px; font-weight: 500; } .stat-value { font-size: 32px; font-weight: 800; color: var(--brand-900); line-height: 1; font-family: 'Fraunces', serif; letter-spacing: -0.02em; } .stat-change { font-size: 12px; margin-top: 8px; font-weight: 500; } .stat-change.up { color: var(--brand-700); } .stat-change.down { color: var(--accent-red); } .stat-change.warn { color: var(--accent-amber); } /* ──────────────── Tables ──────────────── */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table thead th { background: var(--ink-50); text-align: left; padding: 12px 16px; font-weight: 600; color: var(--ink-500); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--ink-200); font-family: 'DM Mono', monospace; } .table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--ink-100); vertical-align: top; } .table tbody tr:hover { background: var(--ink-50); } .table tbody tr:last-child td { border-bottom: none; } /* ──────────────── Inputs ──────────────── */ .input, .select, .textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--ink-200); border-radius: 8px; font-size: 14px; outline: none; transition: all 0.15s; background: white; color: var(--ink-900); } .input:focus, .select:focus, .textarea:focus { border-color: var(--brand-700); box-shadow: 0 0 0 3px rgba(8,71,52,0.10); } .input::placeholder, .textarea::placeholder { color: var(--ink-400); } .label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-800); margin-bottom: 6px; } .label-sm { font-size: 11px; color: var(--ink-500); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; font-family: 'DM Mono', monospace; } .help-text { font-size: 12px; color: var(--ink-500); margin-top: 6px; } /* ──────────────── Admin layout ──────────────── */ .admin-shell { display: flex; min-height: 100vh; background: var(--ink-50); } .admin-sidebar { width: 248px; flex-shrink: 0; background: var(--brand-900); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--brand-800); } .admin-sidebar-header { padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.06); } .admin-sidebar-logo { font-family: 'Fraunces', serif; font-weight: 700; color: white; font-size: 17px; letter-spacing: -0.01em; } .admin-sidebar-logo-img { display: block; max-height: 36px; max-width: 160px; object-fit: contain; margin-bottom: 8px; background: #fff; border-radius: 6px; padding: 4px 7px; } .admin-sidebar-sub { font-size: 11px; color: var(--brand-300); margin-top: 3px; font-family: 'DM Mono', monospace; letter-spacing: 0.04em; } .admin-nav { flex: 1; padding: 14px 12px; overflow-y: auto; } .admin-nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em; color: rgba(206,241,123,0.55); padding: 14px 12px 6px; font-weight: 700; font-family: 'DM Mono', monospace; } .admin-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 7px; font-size: 13px; color: rgba(255,255,255,0.72); margin-bottom: 2px; transition: all 0.15s; cursor: pointer; } .admin-nav a svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; } .admin-nav a:hover { background: rgba(255,255,255,0.06); color: white; } .admin-nav a:hover svg { opacity: 1; } .admin-nav a.active { background: rgba(206,241,123,0.12); color: white; font-weight: 600; } .admin-nav a.active svg { color: var(--brand-300); opacity: 1; } /* Grayed-out, non-clickable nav item for features that aren't live yet. */ .admin-nav-disabled { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 7px; font-size: 13px; color: rgba(255,255,255,0.32); margin-bottom: 2px; cursor: not-allowed; } .admin-nav-disabled svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.4; } .admin-nav-soon { margin-left: auto; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-family: 'DM Mono', monospace; padding: 2px 7px; border-radius: 10px; white-space: nowrap; } .admin-nav-count { margin-left: auto; background: var(--brand-300); color: var(--brand-900); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; min-width: 20px; text-align: center; } .admin-nav-count.warn { background: #f59e0b; color: white; } .admin-nav-count.red { background: #ef4444; color: white; } /* Contact-support line, pinned just above the user footer (not inside the scrolling nav) so it's always visible. Matches the nav-link styling. */ .admin-nav-support { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 18px; margin: 0; background: none; border: none; border-top: 1px solid rgba(255,255,255,0.06); font-family: inherit; font-size: 13px; text-align: left; color: rgba(255,255,255,0.72); cursor: pointer; transition: all 0.15s; } .admin-nav-support svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; } .admin-nav-support:hover { background: rgba(255,255,255,0.06); color: white; } .admin-nav-support:hover svg { opacity: 1; } .admin-sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 11px; } .admin-user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-300); color: var(--brand-900); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; font-family: 'Fraunces', serif; } .admin-user-name { color: white; font-size: 13px; font-weight: 600; } .admin-user-role { color: var(--brand-300); font-size: 11px; opacity: 0.85; } .admin-main { flex: 1; overflow-x: auto; } .admin-topbar { background: white; border-bottom: 1px solid var(--ink-200); padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; } .admin-topbar h1 { font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; color: var(--brand-900); letter-spacing: -0.015em; } .admin-topbar-sub { font-size: 13px; color: var(--ink-500); margin-top: 2px; } .admin-content { padding: 32px; } /* ──────────────── Footer ──────────────── */ .footer { background: var(--brand-950); color: rgba(255,255,255,0.55); font-size: 13px; padding: 40px 24px; margin-top: 80px; } .footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; } .footer h4 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 14px; color: white; margin-bottom: 12px; letter-spacing: -0.01em; } .footer p { margin: 4px 0; line-height: 1.6; } .footer a { color: rgba(255,255,255,0.75); transition: color 0.15s; } .footer a:hover { color: var(--brand-300); } .footer-bottom { max-width: 1280px; margin: 32px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; font-size: 12px; flex-wrap: wrap; gap: 12px; color: rgba(255,255,255,0.45); } .footer-bottom-right { display: inline-flex; align-items: center; gap: 22px; } .footer-bottom .footer-signin { color: rgba(255,255,255,0.45); font-size: 12px; transition: color 0.15s; } .footer-bottom .footer-signin:hover { color: var(--brand-300); } .footer-bottom .powered { display: inline-flex; align-items: center; gap: 7px; font-family: 'DM Mono', monospace; } .footer-bottom .powered .powered-label { color: rgba(255,255,255,0.45); } .footer-bottom .powered img { height: 18px; width: auto; display: block; } .footer-bottom .powered .powered-word { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; color: #F4D44E; letter-spacing: -0.02em; } @media (max-width: 920px) { .footer-inner { grid-template-columns: 1fr; } } /* ──────────────── Two-col notice layout ──────────────── */ .notice-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: start; } @media (max-width: 980px) { .notice-layout { grid-template-columns: 1fr; } } /* Single-panel notice view (Office Settings → digital-only or PDF-only). One column, comfortable reading width, and the PDF no longer needs to stick since there's nothing beside it to scroll against. */ .notice-single { display: block; max-width: 880px; } .notice-single .pdf-viewer { position: static; } /* PDF-only board: the scan is the whole story, so give it a wider, centered frame and a tall canvas. Paired with the PDF's "Fit" view (whole page), this reads bigger and less zoomed-in than the width-filled two-column preview. */ .notice-single.pdf-only { max-width: 1040px; margin-left: auto; margin-right: auto; } .notice-single.pdf-only .pdf-canvas { min-height: 86vh; max-height: 86vh; } .notice-single.pdf-only .pdf-canvas iframe { min-height: 86vh; } /* ──────────────── PDF viewer ──────────────── */ .pdf-viewer { background: var(--ink-100); border-radius: 12px; border: 1px solid var(--ink-200); position: sticky; top: 20px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,0.06); } .pdf-toolbar { background: var(--brand-950); color: white; padding: 10px 14px; font-size: 12px; display: flex; align-items: center; justify-content: space-between; } .pdf-toolbar .pdf-name { font-weight: 500; font-family: 'DM Mono', monospace; font-size: 11px; } .pdf-toolbar .pdf-actions { display: flex; gap: 6px; } .pdf-toolbar button { background: rgba(255,255,255,0.10); color: white; padding: 5px 11px; border-radius: 5px; font-size: 11px; font-weight: 500; cursor: pointer; transition: background 0.15s; } .pdf-toolbar button:hover { background: rgba(255,255,255,0.20); } .pdf-canvas { background: white; min-height: 600px; display: flex; align-items: stretch; max-height: 80vh; overflow-y: auto; } .pdf-canvas iframe { width: 100%; min-height: 600px; border: 0; } /* ──────────────── Field list ──────────────── */ .field-list { background: white; border: 1px solid var(--ink-200); border-radius: 12px; overflow: hidden; } .field-row { display: grid; grid-template-columns: 170px 1fr; padding: 13px 18px; border-bottom: 1px solid var(--ink-100); gap: 18px; align-items: start; } .field-row:last-child { border-bottom: none; } .field-row:nth-child(even) { background: var(--ink-50); } .field-label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding-top: 3px; } .field-value { font-size: 14px; color: var(--ink-900); line-height: 1.6; } .field-value.mono { font-family: 'DM Mono', monospace; font-size: 13px; } /* ──────────────── AI Q&A box ──────────────── */ .ai-qa { background: radial-gradient(ellipse at top right, rgba(206,241,123,0.10), transparent 60%), linear-gradient(135deg, var(--brand-900), var(--brand-950)); border-radius: 14px; padding: 24px; color: white; border: 1px solid var(--brand-800); position: relative; overflow: hidden; } .ai-qa-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; } .ai-qa-title .ai-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-300); box-shadow: 0 0 10px var(--brand-300); animation: pulse-dot 2s infinite ease-in-out; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; box-shadow: 0 0 14px var(--brand-300); } } .ai-qa-subtitle { font-size: 13px; color: rgba(255,255,255,0.65); margin-bottom: 16px; } .ai-qa-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 11px 14px; display: flex; gap: 8px; align-items: center; transition: all 0.15s; } .ai-qa-input:focus-within { border-color: var(--brand-300); background: rgba(255,255,255,0.10); } .ai-qa-input input { flex: 1; background: transparent; border: none; outline: none; color: white; font-size: 14px; } .ai-qa-input input::placeholder { color: rgba(255,255,255,0.45); } .ai-qa-input button { background: var(--brand-300); color: var(--brand-900); padding: 7px 16px; border-radius: 7px; font-weight: 700; font-size: 12px; transition: all 0.15s; } .ai-qa-input button:hover { background: white; } .ai-qa-input button:disabled { opacity: 0.6; } .ai-qa-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .ai-qa-suggestion { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.82); padding: 6px 13px; border-radius: 999px; font-size: 12px; cursor: pointer; transition: all 0.15s; font-weight: 500; } .ai-qa-suggestion:hover { background: var(--brand-300); color: var(--brand-900); border-color: var(--brand-300); } .ai-qa-conversation { margin-top: 18px; max-height: 360px; overflow-y: auto; padding-right: 4px; } .ai-bubble { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px 12px 12px 2px; padding: 12px 15px; margin-bottom: 10px; font-size: 13.5px; line-height: 1.6; } .ai-bubble a { color: var(--brand-300); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; } .ai-bubble strong { color: white; font-weight: 600; } .user-bubble { background: var(--brand-300); color: var(--brand-900); border-radius: 12px 12px 2px 12px; padding: 11px 15px; margin-bottom: 10px; font-size: 13.5px; font-weight: 500; max-width: 80%; margin-left: auto; } /* ──────────────── Meeting cards ──────────────── */ .side-card { background: white; border: 1px solid var(--ink-200); border-radius: 12px; padding: 18px; margin-bottom: 16px; } .meeting-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--ink-100); } .meeting-item:first-child { padding-top: 0; } .meeting-item:last-child { border-bottom: none; padding-bottom: 0; } .meeting-date { background: var(--brand-900); color: white; padding: 7px 10px; border-radius: 8px; text-align: center; min-width: 48px; } .meeting-date.next { background: var(--brand-300); color: var(--brand-900); } .meeting-date-mo { font-size: 10px; font-weight: 700; opacity: 0.85; font-family: 'DM Mono', monospace; letter-spacing: 0.04em; } .meeting-date-day { font-size: 18px; font-weight: 800; line-height: 1; font-family: 'Fraunces', serif; } .meeting-info { flex: 1; min-width: 0; } .meeting-name { font-size: 13px; font-weight: 600; color: var(--ink-900); margin-bottom: 2px; } .meeting-time { font-size: 12px; color: var(--ink-500); } /* ──────────────── Browse: filter & sidebar ──────────────── */ .filter-bar { background: white; border: 1px solid var(--ink-200); border-radius: 10px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } .filter-bar .filter-label { font-size: 12px; font-weight: 600; color: var(--ink-600); text-transform: uppercase; letter-spacing: 0.06em; font-family: 'DM Mono', monospace; } .filter-bar select, .filter-bar input[type="search"], .filter-bar input[type="text"] { padding: 7px 12px; font-size: 13px; border: 1px solid var(--ink-200); border-radius: 7px; outline: none; background: white; transition: all 0.15s; } .filter-bar select:focus, .filter-bar input:focus { border-color: var(--brand-700); } .cat-sidebar { background: white; border: 1px solid var(--ink-200); border-radius: 12px; overflow: hidden; position: sticky; top: 20px; } .cat-sidebar-header { padding: 12px 16px; background: var(--ink-50); border-bottom: 1px solid var(--ink-200); font-size: 10px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.10em; font-family: 'DM Mono', monospace; } .cat-sidebar-list { padding: 6px; } .cat-sidebar-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 7px; font-size: 13px; color: var(--ink-700); cursor: pointer; transition: all 0.12s; text-decoration: none; } .cat-sidebar-item:hover { background: var(--brand-50); color: var(--brand-900); } .cat-sidebar-item.active { background: var(--brand-100); color: var(--brand-900); font-weight: 600; } .cat-sidebar-count { font-size: 11px; color: var(--ink-500); background: var(--ink-100); padding: 2px 8px; border-radius: 10px; font-weight: 600; font-family: 'DM Mono', monospace; } .cat-sidebar-item.active .cat-sidebar-count { background: var(--brand-700); color: white; } /* ──────────────── Dropzone ──────────────── */ .dropzone { border: 2px dashed var(--ink-300); border-radius: 14px; background: var(--ink-50); padding: 56px 24px; text-align: center; cursor: pointer; transition: all 0.2s; } .dropzone:hover, .dropzone.is-drag-over { border-color: var(--brand-600); background: var(--brand-50); } .dropzone-icon-wrap { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-100); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .dropzone svg.dropzone-icon { width: 30px; height: 30px; color: var(--brand-700); display: block; } .dropzone-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px; color: var(--brand-900); margin-bottom: 8px; letter-spacing: -0.01em; } .dropzone-sub { color: var(--ink-600); font-size: 14px; line-height: 1.5; max-width: 520px; margin: 0 auto; } /* ──────────────── Progress bar ──────────────── */ .progress-container { background: radial-gradient(ellipse at top right, rgba(206,241,123,0.10), transparent 60%), linear-gradient(135deg, var(--brand-900), var(--brand-950)); color: white; border-radius: 14px; border: 1px solid var(--brand-800); overflow: hidden; } .progress-header { padding: 22px 26px 6px; } .progress-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; letter-spacing: -0.015em; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; } .progress-title .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-300); box-shadow: 0 0 12px var(--brand-300); animation: pulse-dot 1.5s infinite ease-in-out; } .progress-title.is-done .pulse { background: var(--brand-300); animation: none; box-shadow: 0 0 14px var(--brand-300); } .progress-title.is-error .pulse { background: #ef4444; animation: none; box-shadow: 0 0 12px #ef4444; } .progress-subtitle { font-size: 14px; color: rgba(255,255,255,0.70); margin-bottom: 4px; } .progress-meta { display: flex; gap: 18px; font-size: 12px; color: rgba(255,255,255,0.55); font-family: 'DM Mono', monospace; letter-spacing: 0.02em; margin-top: 14px; flex-wrap: wrap; } .progress-meta strong { color: var(--brand-300); font-weight: 600; } .progress-bar-wrap { padding: 0 26px 18px; } .progress-bar { width: 100%; height: 10px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; position: relative; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand-500), var(--brand-300)); border-radius: 999px; transition: width 0.5s cubic-bezier(.4,.0,.2,1); position: relative; box-shadow: 0 0 16px rgba(206,241,123,0.4); } .progress-bar-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); background-size: 60px 100%; background-repeat: no-repeat; animation: progress-shimmer 1.4s linear infinite; } @keyframes progress-shimmer { from { background-position: -100px 0; } to { background-position: calc(100% + 100px) 0; } } .progress-bar-fill.is-done::after { animation: none; opacity: 0; } .progress-bar-percent { display: flex; justify-content: space-between; font-family: 'DM Mono', monospace; font-size: 12px; color: rgba(255,255,255,0.65); margin-top: 8px; } .progress-bar-percent strong { color: var(--brand-300); font-weight: 600; font-size: 13px; } .progress-events { padding: 0 26px 22px; max-height: 280px; overflow-y: auto; } .progress-events-title { font-family: 'DM Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.45); margin-bottom: 10px; font-weight: 700; } .progress-event { display: flex; align-items: flex-start; gap: 11px; padding: 6px 0; font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.5; animation: progress-event-in 0.4s ease-out; } @keyframes progress-event-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .progress-event-icon { width: 22px; height: 22px; border-radius: 50%; background: rgba(206,241,123,0.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .progress-event-icon svg { width: 13px; height: 13px; color: var(--brand-300); } .progress-event-icon.warn { background: rgba(239,68,68,0.20); } .progress-event-icon.warn svg { color: #fca5a5; } .progress-event-text { flex: 1; } .progress-event-time { font-family: 'DM Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; } .progress-walkaway { padding: 18px 26px; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.15); font-size: 13px; color: rgba(255,255,255,0.75); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .progress-walkaway-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-300); color: var(--brand-900); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .progress-walkaway-icon svg { width: 16px; height: 16px; } .progress-walkaway strong { color: white; } .progress-walkaway-link { margin-left: auto; padding: 8px 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: white; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; text-decoration: none; } .progress-walkaway-link:hover { background: rgba(206,241,123,0.20); border-color: var(--brand-300); color: var(--brand-300); } .progress-error-box { margin: 0 26px 22px; padding: 16px 18px; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.30); border-radius: 10px; font-size: 13px; color: #fca5a5; } .progress-error-box strong { color: #fecaca; } /* ──────────────── AI processing animation (legacy) ──────────────── */ .ai-process-box { background: linear-gradient(135deg, var(--brand-900), var(--brand-950)); color: white; border-radius: 12px; padding: 22px; margin-top: 20px; border: 1px solid var(--brand-800); } .ai-process-header { font-family: 'Fraunces', serif; font-weight: 700; font-size: 17px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; } .ai-process-header .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-300); box-shadow: 0 0 8px var(--brand-300); animation: pulse-dot 1.5s infinite; } .ai-process-sub { font-size: 13px; color: rgba(255,255,255,0.65); margin-bottom: 14px; } .ai-process-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; transition: all 0.3s; } .ai-process-row.done svg { color: var(--brand-300); } .ai-process-row.active svg { color: white; } .ai-process-row.pending { opacity: 0.4; } .ai-process-row.pending svg { color: rgba(255,255,255,0.4); } .spinner-svg { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ──────────────── Kanban ──────────────── */ .kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .kanban-col { background: white; border: 1px solid var(--ink-200); border-radius: 12px; overflow: hidden; } .kanban-header { padding: 12px 16px; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--ink-200); display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; letter-spacing: 0.04em; } .kanban-header .kanban-count { background: var(--ink-100); color: var(--ink-600); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; font-family: 'DM Mono', monospace; } .kanban-header.h-active { background: var(--brand-50); color: var(--brand-900); } .kanban-header.h-active .kanban-count { background: var(--brand-200); color: var(--brand-900); } .kanban-header.h-expiring { background: #fef3c7; color: #92400e; } .kanban-header.h-expiring .kanban-count { background: #fde68a; color: #78350f; } .kanban-header.h-archive { background: var(--ink-50); color: var(--ink-600); } .kanban-body { padding: 10px; min-height: 220px; } .kanban-card { background: white; border: 1px solid var(--ink-200); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; font-size: 13px; transition: all 0.15s; } .kanban-card:hover { border-color: var(--ink-300); box-shadow: 0 2px 6px rgba(0,0,0,0.04); } .kanban-card-title { font-weight: 600; color: var(--ink-900); margin-bottom: 4px; line-height: 1.4; } .kanban-card-meta { color: var(--ink-500); font-size: 11.5px; } .kanban-card-actions { margin-top: 10px; display: flex; gap: 6px; } /* ──────────────── Tabs ──────────────── */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ink-200); margin-bottom: 24px; } .tab { padding: 12px 18px; font-size: 13.5px; font-weight: 600; color: var(--ink-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; display: flex; align-items: center; gap: 8px; } .tab:hover { color: var(--ink-900); } .tab.active { color: var(--brand-900); border-bottom-color: var(--brand-700); } .tab.active svg { color: var(--brand-700); } /* ──────────────── Breadcrumb ──────────────── */ .breadcrumb { font-size: 13px; color: var(--ink-500); margin-bottom: 18px; display: flex; align-items: center; gap: 6px; } .breadcrumb a { color: var(--brand-700); font-weight: 500; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb-sep { color: var(--ink-300); } /* ──────────────── Empty / loading states ──────────────── */ .empty-state { padding: 60px 24px; text-align: center; color: var(--ink-500); } .empty-state svg { width: 48px; height: 48px; color: var(--ink-300); margin: 0 auto 16px; display: block; } .empty-state-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px; color: var(--ink-700); margin-bottom: 4px; } .empty-state-desc { font-size: 13px; color: var(--ink-500); max-width: 360px; margin: 0 auto; line-height: 1.5; } .skeleton { background: linear-gradient(90deg, var(--ink-100), var(--ink-50), var(--ink-100)); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; border-radius: 6px; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ──────────────── Toasts ──────────────── */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--brand-900); color: white; padding: 14px 20px; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.20); font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; z-index: 1000; animation: toastIn 0.3s cubic-bezier(.2,.7,.3,1); max-width: 380px; } .toast.error { background: var(--accent-red); } .toast svg { width: 18px; height: 18px; color: var(--brand-300); flex-shrink: 0; } @keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ──────────────── Loading overlay ──────────────── */ .loading-overlay { position: fixed; inset: 0; background: rgba(8,71,52,0.92); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; z-index: 9999; color: white; } .loading-spinner { width: 48px; height: 48px; border: 3px solid rgba(206,241,123,0.20); border-top-color: var(--brand-300); border-radius: 50%; animation: spin 0.9s linear infinite; } /* ──────────────── Helpers ──────────────── */ .grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; } .grid-sidebar { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; } @media (max-width: 920px) { .grid-2 { grid-template-columns: 1fr; } .grid-sidebar { grid-template-columns: 1fr; } .header-nav { display: none; } .kanban { grid-template-columns: 1fr; } .filter-bar { gap: 8px; } } .text-xs { font-size: 11px; } .text-sm { font-size: 13px; } .text-muted { color: var(--ink-500); } .text-brand { color: var(--brand-700); } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .text-center { text-align: center; } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .w-full { width: 100%; } .hide { display: none !important; } /* ──────────────── Scrollbar ──────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--ink-50); } ::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-400); } /* ──────────────── Subscribe card ──────────────── */ .subscribe-card { background: radial-gradient(ellipse 80% 100% at 0% 0%, var(--brand-100), transparent 60%), var(--brand-50); border: 1px solid var(--brand-200); border-radius: 12px; padding: 20px; } .subscribe-card h4 { font-family: 'Fraunces', serif; font-weight: 700; font-size: 16px; color: var(--brand-900); margin-bottom: 6px; letter-spacing: -0.01em; } .subscribe-card p { font-size: 13px; color: var(--ink-700); margin-bottom: 14px; line-height: 1.55; }