/* ========== RESET & BASE ========== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --blue: #0066cc; --blue-dark: #004fa3; --blue-light: #e8f0fb; --blue-mid: #ccddf7; --green: #1a7a4a; --green-light: #e6f4ed; --amber: #b45309; --amber-light: #fef3c7; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --white: #ffffff; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06); --shadow-lg: 0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06); --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ========== TAB THEME PALETTES ========== */ /* Defaults (blue) active from first paint — overridden per tab via data-tab */ :root { --tab-color: #0066cc; --tab-dark: #004fa3; --tab-mid: #ccddf7; --tab-light: #e8f0fb; --tab-glow: rgba(0,102,204,.12); } body[data-tab="find"] { --tab-color: #0066cc; --tab-dark: #004fa3; --tab-mid: #ccddf7; --tab-light: #e8f0fb; --tab-glow: rgba(0,102,204,.12); } body[data-tab="tables"] { --tab-color: #0694a2; --tab-dark: #0e7490; --tab-mid: #a5f3fc; --tab-light: #ecfeff; --tab-glow: rgba(6,148,162,.15); } body[data-tab="decode"] { --tab-color: #d97706; --tab-dark: #92400e; --tab-mid: #fde68a; --tab-light: #fef3c7; --tab-glow: rgba(217,119,6,.13); } body[data-tab="flows"] { --tab-color: #059669; --tab-dark: #065f46; --tab-mid: #a7f3d0; --tab-light: #ecfdf5; --tab-glow: rgba(5,150,105,.13); } html { font-size: 16px; height: 100%; scrollbar-gutter: stable; /* Custom scrollbar — light mode defaults (find/blue) */ --sb-track: var(--gray-100); --sb-thumb: var(--tab-mid, #ccddf7); --sb-thumb-hover: var(--tab-color, #0066cc); } /* Per-tab scrollbar accent mirrors the tab palette on */ html[data-tab="find"] { --sb-thumb: #99bff0; --sb-thumb-hover: #0066cc; } html[data-tab="tables"] { --sb-thumb: #67d8e8; --sb-thumb-hover: #0694a2; } html[data-tab="decode"] { --sb-thumb: #f9c74f; --sb-thumb-hover: #d97706; } html[data-tab="flows"] { --sb-thumb: #6edbb8; --sb-thumb-hover: #059669; } /* Dark mode per-tab */ html.dark[data-tab="find"] { --sb-track: #1a1d27; --sb-thumb: #2a4e7a; --sb-thumb-hover: #4da6ff; } html.dark[data-tab="tables"] { --sb-track: #1a1d27; --sb-thumb: #0e5460; --sb-thumb-hover: #22d3ee; } html.dark[data-tab="decode"] { --sb-track: #1a1d27; --sb-thumb: #5a3d00; --sb-thumb-hover: #fbbf24; } html.dark[data-tab="flows"] { --sb-track: #1a1d27; --sb-thumb: #0d4f38; --sb-thumb-hover: #34d399; } /* Webkit scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--sb-track); } ::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 99px; border: 2px solid var(--sb-track); transition: background .2s; } ::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); } ::-webkit-scrollbar-corner { background: var(--sb-track); } body { font-family: var(--font); background: var(--gray-50); color: var(--gray-800); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } /* ========== HEADER ========== */ header { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 0 24px; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); } .header-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; padding: 0 4px; } .header-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .logo-icon { width: 32px; height: 32px; background: var(--blue); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--white); letter-spacing: -0.5px; } .logo-text { font-weight: 700; font-size: 15px; color: var(--gray-900); } .logo-text span { color: var(--blue); } /* ========== TABS ========== */ nav.tabs { display: flex; gap: 0; position: relative; justify-self: center; } .tab-btn { padding: 8px 16px; border: none; background: transparent; color: var(--gray-500); font-size: 14px; font-weight: 500; border-radius: var(--radius-sm); cursor: pointer; transition: color .2s; font-family: var(--font); position: relative; z-index: 1; } .tab-btn:hover { color: var(--gray-800); background: transparent; } .tab-btn.active { color: var(--blue); background: transparent; font-weight: 600; } #tab-indicator { position: absolute; top: 50%; transform: translateY(-50%); height: 34px; border-radius: var(--radius-sm); background: var(--tab-light); transition: left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1), background .3s; pointer-events: none; z-index: 0; } /* ========== MAIN LAYOUT ========== */ main { max-width: 900px; margin: 0 auto; padding: 32px 24px 64px; } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ========== PAGE HEADER ========== */ .page-header { margin-bottom: 24px; } .page-header h1 { font-size: 22px; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; } .page-header p { font-size: 14px; color: var(--gray-500); } /* ========== PAGE STAT COUNTER ========== */ .page-stat { display: inline-flex; align-items: baseline; gap: 7px; margin-top: 10px; background: var(--blue-light); border: 1px solid var(--blue-mid); border-radius: 20px; padding: 5px 14px 5px 12px; } .page-stat-count { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 15px; font-weight: 700; color: var(--blue); letter-spacing: -0.5px; min-width: 2ch; transition: color .15s; } .page-stat-label { font-size: 12px; font-weight: 500; color: var(--blue-dark); opacity: .75; } /* ========== TAB HERO CARD ========== */ .tab-hero { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 24px 28px 24px; box-shadow: var(--shadow-sm); margin-bottom: 16px; position: relative; overflow: hidden; } .tab-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--tab-color), var(--tab-mid)); transition: background .3s; } .tab-hero-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .tab-hero--browse .tab-hero-header { margin-bottom: 0; } .tab-icon-wrap { width: 44px; height: 44px; border-radius: var(--radius); background: var(--tab-light); display: flex; align-items: center; justify-content: center; color: var(--tab-color); flex-shrink: 0; transition: background .3s, color .3s; } .tab-icon-wrap svg { width: 22px; height: 22px; } .tab-hero-copy { flex: 1; min-width: 0; } .tab-hero-copy h1 { font-size: 18px; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; line-height: 1.3; } .tab-hero-copy p { font-size: 13.5px; color: var(--gray-500); line-height: 1.5; } .tab-hero-stat { text-align: right; flex-shrink: 0; } .tab-stat-num { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 28px; font-weight: 700; color: var(--tab-color); letter-spacing: -1.5px; line-height: 1; transition: color .3s; } .tab-stat-lbl { font-size: 11px; color: var(--gray-400); font-weight: 500; margin-top: 4px; text-align: right; } /* Remove bottom margin from search when it lives inside the hero card */ .tab-hero .search-wrap { margin-bottom: 0; } /* ========== CHIP DROPDOWN (suggestions) ========== */ .chip-dropdown { margin-bottom: 20px; } .chip-dropdown-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-radius: var(--radius); border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-500); font-size: 12.5px; font-weight: 500; font-family: var(--font); cursor: pointer; list-style: none; user-select: none; transition: border-color .15s, color .15s, background .15s; } .chip-dropdown-toggle::-webkit-details-marker { display: none; } .chip-dropdown-toggle .toggle-label { display: flex; align-items: center; gap: 7px; } .chip-dropdown-toggle .toggle-label svg { width: 14px; height: 14px; color: var(--gray-400); } .chip-dropdown-toggle .toggle-chevron { width: 14px; height: 14px; transition: transform .2s cubic-bezier(.4,0,.2,1); color: var(--gray-400); flex-shrink: 0; } .chip-dropdown[open] .toggle-chevron { transform: rotate(180deg); } .chip-dropdown-toggle:hover { border-color: var(--tab-mid); color: var(--tab-dark); background: var(--tab-light); } .chip-dropdown-toggle:hover .toggle-label svg, .chip-dropdown-toggle:hover .toggle-chevron { color: var(--tab-color); } .chip-dropdown .chip-row { margin-top: 12px; margin-bottom: 0; padding: 12px 14px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); } /* ========== CHIP ROW (suggestions) ========== */ .chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .chip-row-label { font-size: 11px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; flex-shrink: 0; } /* ========== TAB EMPTY STATE ========== */ .tab-empty { text-align: center; padding: 64px 24px; } .tab-empty-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--tab-light); display: flex; align-items: center; justify-content: center; color: var(--tab-color); margin: 0 auto 20px; opacity: .55; transition: background .3s, color .3s; } .tab-empty-icon svg { width: 26px; height: 26px; } .tab-empty-title { font-size: 15px; font-weight: 600; color: var(--gray-700); margin-bottom: 8px; } .tab-empty-desc { font-size: 13.5px; color: var(--gray-400); line-height: 1.65; max-width: 360px; margin: 0 auto; } /* ========== SEARCH BOX ========== */ .search-wrap { position: relative; margin-bottom: 28px; } .search-wrap input { width: 100%; padding: 14px 16px 14px 48px; font-size: 15px; font-family: var(--font); border: 1.5px solid var(--gray-300); border-radius: var(--radius); background: var(--white); color: var(--gray-900); outline: none; transition: border-color .15s, box-shadow .15s; box-shadow: var(--shadow-sm); } .search-wrap input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,102,204,.12); } .search-wrap input::placeholder { color: var(--gray-400); } .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; } .clear-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--gray-400); cursor: pointer; padding: 4px; border-radius: 4px; display: none; font-size: 16px; line-height: 1; } .clear-btn:hover { color: var(--gray-700); background: var(--gray-100); } .clear-btn.visible { display: block; } /* ========== SUGGESTIONS ========== */ .suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .suggestion-chip { padding: 5px 12px; font-size: 12.5px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 20px; color: var(--gray-600); cursor: pointer; transition: all .15s; font-family: var(--font); } .suggestion-chip:hover { background: var(--blue-light); border-color: var(--blue-mid); color: var(--blue-dark); } /* ========== RESULTS SECTIONS ========== */ .results { margin-top: 8px; } .results-section { margin-bottom: 24px; } .results-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-400); margin-bottom: 10px; } /* ========== BEST RESULT CARD ========== */ .best-card { background: var(--white); border: 2px solid var(--blue); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .best-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), #4da6ff); } .best-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--blue-light); color: var(--blue-dark); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; margin-bottom: 12px; } .card-code { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 22px; font-weight: 700; color: var(--blue); margin-bottom: 2px; } /* Card header row: code left, category badge right */ .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; } .card-cat-badge { font-size: 11px; font-weight: 500; color: var(--gray-500); background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 4px; padding: 3px 8px; white-space: nowrap; flex-shrink: 0; margin-top: 6px; line-height: 1.4; } /* Card footer row: report left, category tag right */ .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gray-100); } .card-report { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 11px; color: var(--gray-400); } .card-cat-tag { font-size: 11px; color: var(--gray-400); text-align: right; } .card-name { font-size: 15px; font-weight: 600; color: var(--gray-900); margin-bottom: 6px; } .card-desc { font-size: 13.5px; color: var(--gray-600); margin-bottom: 10px; line-height: 1.55; } .card-reason { font-size: 12.5px; color: var(--green); background: var(--green-light); padding: 6px 10px; border-radius: var(--radius-sm); border-left: 3px solid var(--green); } /* ========== RELATED CARDS GRID ========== */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .tx-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .1s; } .tx-card:hover { border-color: var(--blue-mid); box-shadow: var(--shadow); transform: translateY(-1px); } .tx-card .card-code { font-size: 15px; margin-bottom: 2px; } .tx-card .card-name { font-size: 13px; margin-bottom: 4px; } .tx-card .card-desc { font-size: 12.5px; margin-bottom: 8px; } .tx-card .card-reason { font-size: 12px; } /* ========== DECODE RESULTS ========== */ .decode-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; } .decode-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .decode-title { font-size: 16px; font-weight: 700; color: var(--gray-900); } .category-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } .category-badge.security { background: #fee2e2; color: #991b1b; } .category-badge.transport { background: #fef3c7; color: #92400e; } .category-badge.connectivity { background: #dbeafe; color: #1e40af; } .category-badge.system { background: #f3e8ff; color: #6b21a8; } .category-badge.hr { background: #dcfce7; color: #166534; } .category-badge.workflow { background: #e0f2fe; color: #075985; } .category-badge.materials { background: #fff7ed; color: #9a3412; } .category-badge.controlling { background: #f0fdf4; color: #15803d; } .decode-desc { font-size: 13.5px; color: var(--gray-600); margin-bottom: 16px; line-height: 1.55; } .decode-primary { display: flex; align-items: center; gap: 10px; background: var(--blue-light); border: 1px solid var(--blue-mid); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; } .decode-primary-label { font-size: 11px; font-weight: 700; color: var(--blue-dark); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .decode-primary-code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 15px; font-weight: 700; color: var(--blue); } .decode-primary-name { font-size: 13px; color: var(--gray-700); } .decode-steps { margin-bottom: 14px; } .decode-steps-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); margin-bottom: 8px; } .step-list { list-style: none; } .step-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; color: var(--gray-700); line-height: 1.5; } .step-item:last-child { border-bottom: none; } .step-num { width: 20px; height: 20px; background: var(--tab-light); color: var(--tab-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; } .flow-link-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--blue); background: none; border: 1px solid var(--blue-mid); border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; font-family: var(--font); transition: all .15s; } .flow-link-btn:hover { background: var(--blue-light); } /* ========== SEE ALSO STRIP (Find best card) ========== */ .see-also { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gray-100); display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; } .see-also-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); white-space: nowrap; padding-top: 4px; } .see-also-chips { display: flex; flex-wrap: wrap; gap: 6px; } .seealso-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 4px 10px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; font-weight: 600; color: var(--gray-700); cursor: pointer; transition: all .15s; } .seealso-chip:hover { background: var(--blue-light); border-color: var(--blue-mid); color: var(--blue-dark); } .seealso-chip-name { font-family: var(--font); font-size: 11.5px; font-weight: 400; color: var(--gray-500); } /* ========== RELATED FLOW HINT (Find best card) ========== */ .related-flow-hint { margin-top: 10px; } /* ========== MODULE FILTER BAR (Flows tab) ========== */ .module-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; } .module-chip { padding: 5px 14px; font-size: 12.5px; font-weight: 500; background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 20px; color: var(--gray-600); cursor: pointer; transition: all .15s; font-family: var(--font); } .module-chip:hover { border-color: var(--gray-400); color: var(--gray-800); } .module-chip.active { background: var(--blue); border-color: var(--blue); color: var(--white); font-weight: 600; } /* ========== FLOWS TAB ========== */ .flows-section { margin-bottom: 32px; } .flows-section-title { font-size: 13px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .flows-section-title::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); } .flows-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .flow-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 18px; cursor: pointer; transition: all .15s; box-shadow: var(--shadow-sm); position: relative; } .flow-card:hover { border-color: var(--blue-mid); box-shadow: var(--shadow); transform: translateY(-2px); } .flow-card.favorited { border-color: #fbbf24; } .flow-card.favorited::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .flow-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .flow-title { font-size: 14px; font-weight: 600; color: var(--gray-900); line-height: 1.4; flex: 1; } .fav-btn { background: none; border: none; cursor: pointer; font-size: 16px; padding: 2px; margin-left: 8px; flex-shrink: 0; opacity: .5; transition: opacity .15s, transform .15s; line-height: 1; } .fav-btn:hover { opacity: 1; transform: scale(1.2); } .fav-btn.active { opacity: 1; } .flow-desc { font-size: 12.5px; color: var(--gray-500); margin-bottom: 12px; line-height: 1.5; } .flow-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .flow-tx-badge { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11.5px; font-weight: 600; background: var(--blue-light); color: var(--blue-dark); padding: 2px 8px; border-radius: 4px; } .flow-steps-count { font-size: 11.5px; color: var(--gray-400); } /* ========== FLOW DETAIL MODAL ========== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .2s; } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 620px; width: 100%; max-height: 88vh; overflow-y: auto; transform: translateY(16px); transition: transform .2s; } .modal-overlay.open .modal { transform: translateY(0); } .modal-header { padding: 24px 24px 0; position: sticky; top: 0; background: var(--white); border-bottom: 1px solid var(--gray-100); padding-bottom: 16px; margin-bottom: 0; } .modal-close { float: right; background: var(--gray-100); border: none; border-radius: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gray-500); font-size: 16px; font-family: var(--font); transition: all .15s; margin-left: 12px; } .modal-close:hover { background: var(--gray-200); color: var(--gray-800); } .modal-title { font-size: 18px; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; } .modal-subtitle { font-size: 13px; color: var(--gray-500); } .modal-body { padding: 20px 24px 24px; } .modal-steps { margin-top: 4px; } .modal-step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--gray-100); } .modal-step:last-child { border-bottom: none; } .modal-step-num { width: 26px; height: 26px; background: var(--tab-color); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px; } .modal-step-content {} .modal-step-tx { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; font-weight: 700; color: var(--blue); margin-bottom: 2px; } .modal-step-action { font-size: 14px; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; } .modal-step-reason { font-size: 12.5px; color: var(--gray-500); line-height: 1.55; } /* ========== EMPTY STATE ========== */ .empty-state { text-align: center; padding: 48px 24px; color: var(--gray-400); } .empty-icon { font-size: 40px; margin-bottom: 12px; line-height: 1; } .empty-title { font-size: 15px; font-weight: 600; color: var(--gray-500); margin-bottom: 6px; } .empty-text { font-size: 13.5px; } /* ========== LOADING ANIMATIONS ========== */ /* Initial app load — hero icon spins until data is ready */ @keyframes icon-spin { to { transform: rotate(360deg); } } @keyframes loading-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } body.app-loading .tab-icon-wrap svg { animation: icon-spin 1.4s linear infinite; transform-origin: center; } body.app-loading .tab-stat-num { animation: loading-pulse 1.4s ease-in-out infinite; } /* Search debounce spinner — replaces the search icon while waiting */ @keyframes spinner-spin { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } } .search-spinner { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--tab-mid); border-top-color: var(--tab-color); animation: spinner-spin .6s linear infinite; display: none; pointer-events: none; transition: border-color .3s; } .search-wrap.searching .search-icon { visibility: hidden; } .search-wrap.searching .search-spinner { display: block; } /* ========== UTILITY ========== */ .hidden { display: none !important; } /* ========== ABOUT BUTTON ========== */ .about-btn { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--gray-300); background: none; color: var(--gray-500); font-size: 13px; font-weight: 700; font-family: var(--font); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; } .about-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); } /* ========== ABOUT MODAL ========== */ .about-modal { max-width: 480px; } .about-features { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; } .about-feature { display: flex; gap: 14px; align-items: flex-start; } .about-feature-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--gray-100); color: var(--gray-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .about-feature-icon svg { width: 18px; height: 18px; } /* Per-tab tinted icons in the about modal */ .about-icon--find { background: #e8f0fb; color: #0066cc; } .about-icon--tables { background: #ecfeff; color: #0694a2; } .about-icon--decode { background: #fef3c7; color: #d97706; } .about-icon--flows { background: #ecfdf5; color: #059669; } .about-feature-title { font-size: 14px; font-weight: 600; color: var(--gray-900); margin-bottom: 3px; } .about-feature-desc { font-size: 13px; color: var(--gray-500); line-height: 1.55; } .about-note { font-size: 12px; color: var(--gray-400); padding-top: 16px; border-top: 1px solid var(--gray-100); } /* ========== TABLE CARDS ========== */ .table-best-card { background: var(--white); border: 2px solid var(--blue); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .table-best-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), #4da6ff); } .table-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .1s; } .table-card:hover { border-color: var(--blue-mid); box-shadow: var(--shadow); transform: translateY(-1px); } .table-name { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 20px; font-weight: 700; color: var(--blue); margin-bottom: 2px; } .table-best-card .table-name { font-size: 24px; } .table-title { font-size: 14px; font-weight: 600; color: var(--gray-900); margin-bottom: 6px; } .table-best-card .table-title { font-size: 15px; } .table-desc { font-size: 13px; color: var(--gray-600); line-height: 1.55; margin-bottom: 10px; } .table-key-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gray-100); } .table-key-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); white-space: nowrap; } .table-key-chip { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px; font-weight: 600; background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); border-radius: 4px; padding: 2px 7px; } .table-see-also { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gray-100); } .table-see-also-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); white-space: nowrap; padding-top: 3px; } .table-see-also-chips { display: flex; flex-wrap: wrap; gap: 6px; } .table-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 3px 9px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; font-weight: 600; color: var(--gray-700); cursor: pointer; transition: all .15s; } .table-chip:hover { background: var(--blue-light); border-color: var(--blue-mid); color: var(--blue-dark); } .table-module-tag { font-size: 11px; font-weight: 500; color: var(--gray-500); background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 4px; padding: 3px 8px; white-space: nowrap; flex-shrink: 0; } /* ========== FOOTER ========== */ footer { border-top: 1px solid var(--gray-200); background: var(--white); padding: 16px 24px; } .footer-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--gray-400); } .footer-name { font-weight: 600; color: var(--gray-600); } .footer-sep { color: var(--gray-300); } .footer-link { color: var(--blue); text-decoration: none; } .footer-link:hover { text-decoration: underline; } /* ========== TAB COLOR OVERRIDES ========== */ /* Single cascade block — uses var(--tab-color) family set on . These rules come after the base styles and win by source order. */ /* Active tab button — indicator handles the background */ .tab-btn.active { color: var(--tab-color); background: transparent; } /* Search focus ring */ .search-wrap input:focus { border-color: var(--tab-color); box-shadow: 0 0 0 3px var(--tab-glow); } /* Suggestion chips */ .suggestion-chip:hover { background: var(--tab-light); border-color: var(--tab-mid); color: var(--tab-dark); } /* Transaction code / Table name — top-of-card identifiers */ .card-code { color: var(--tab-color); } .table-name { color: var(--tab-color); } /* Best result cards */ .best-card { border-color: var(--tab-color); transition: border-color .3s; } .best-card::before { background: linear-gradient(90deg, var(--tab-color), var(--tab-mid)); } .table-best-card { border-color: var(--tab-color); transition: border-color .3s; } .table-best-card::before { background: linear-gradient(90deg, var(--tab-color), var(--tab-mid)); } /* Best badge */ .best-badge { background: var(--tab-light); color: var(--tab-dark); transition: background .3s, color .3s; } /* Match reason strip (was hardcoded green) */ .card-reason { color: var(--tab-dark); background: var(--tab-light); border-left-color: var(--tab-color); transition: color .3s, background .3s, border-left-color .3s; } /* Result card hover borders */ .tx-card:hover { border-color: var(--tab-mid); } .table-card:hover { border-color: var(--tab-mid); } .flow-card:hover { border-color: var(--tab-mid); } /* See-also + table chips */ .seealso-chip:hover, .table-chip:hover { background: var(--tab-light); border-color: var(--tab-mid); color: var(--tab-dark); } /* Flow link button */ .flow-link-btn { color: var(--tab-color); border-color: var(--tab-mid); } .flow-link-btn:hover { background: var(--tab-light); } /* Decode "Start here" strip — amber makes great semantic sense */ .decode-primary { background: var(--tab-light); border-color: var(--tab-mid); transition: background .3s, border-color .3s; } .decode-primary-label { color: var(--tab-dark); } .decode-primary-code { color: var(--tab-color); } /* Flows module filter chips */ .module-chip.active { background: var(--tab-color); border-color: var(--tab-color); } /* ========== CLICKABLE RELATED CARDS ========== */ .clickable-card { cursor: pointer; position: relative; } .clickable-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .clickable-card::after { content: 'View details'; position: absolute; bottom: 10px; right: 12px; font-size: 11px; font-weight: 600; color: var(--tab-color); opacity: 0; transition: opacity .15s; pointer-events: none; } .clickable-card:hover::after { opacity: 1; } /* "★ Top pick" tag shown on original best when it's been displaced */ .orig-top-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--tab-dark); background: var(--tab-light); border: 1px solid var(--tab-mid); border-radius: 20px; padding: 2px 9px; margin-bottom: 8px; letter-spacing: .02em; } /* ========== COPY BUTTON ========== */ .code-copy-row { display: flex; align-items: center; gap: 6px; } .copy-btn { width: 26px; height: 26px; border: none; background: none; color: var(--gray-400); cursor: pointer; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; transition: color .15s, background .15s; opacity: 0; pointer-events: none; } /* Show copy button when parent card is hovered */ .best-card:hover .copy-btn, .tx-card:hover .copy-btn, .table-best-card:hover .copy-btn, .table-card:hover .copy-btn, .modal-step-tx-row .copy-btn { opacity: 1; pointer-events: auto; } .copy-btn:hover { color: var(--tab-color); background: var(--tab-light); } .copy-btn svg { width: 13px; height: 13px; } /* Default: show copy icon, hide check */ .copy-btn .check-icon { display: none; } .copy-btn .copy-icon { display: block; } /* Copied state: swap icons, turn green */ .copy-btn.copied { color: #059669; background: #ecfdf5; opacity: 1; pointer-events: none; } .copy-btn.copied .copy-icon { display: none; } .copy-btn.copied .check-icon { display: block; } /* Flow modal step tx row — always show copy btn (no hover needed in modal) */ .modal-step-tx-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .modal-step-tx-row .copy-btn { opacity: 1; pointer-events: auto; } /* ========== LEGAL MODALS ========== */ .legal-modal { max-width: 600px; } .legal-body { display: flex; flex-direction: column; gap: 0; } .legal-section { padding: 16px 0; border-bottom: 1px solid var(--gray-100); } .legal-section:last-child { border-bottom: none; } .legal-section h3 { font-size: 13px; font-weight: 700; color: var(--gray-900); margin-bottom: 7px; letter-spacing: .01em; } .legal-section p { font-size: 13px; color: var(--gray-600); line-height: 1.65; margin-bottom: 6px; } .legal-section p:last-child { margin-bottom: 0; } .legal-section ul { margin: 6px 0 8px 16px; display: flex; flex-direction: column; gap: 4px; } .legal-section ul li { font-size: 13px; color: var(--gray-600); line-height: 1.55; } .legal-section a { color: var(--blue); text-decoration: none; } .legal-section a:hover { text-decoration: underline; } .legal-section code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; background: var(--gray-100); color: var(--gray-700); padding: 1px 5px; border-radius: 3px; } .footer-legal-btn { background: none; border: none; font-family: var(--font); font-size: inherit; cursor: pointer; padding: 0; } /* ========== DARK MODE ========== */ html.dark { color-scheme: dark; /* Surface scale — light grays flip to dark */ --white: #181b25; --gray-50: #0f1117; --gray-100: #1a1d27; --gray-200: #252935; --gray-300: #2e3348; --gray-400: #4a5068; --gray-500: #7c8599; --gray-600: #9ea8bc; --gray-700: #b8c3d8; --gray-800: #d4dced; --gray-900: #eef2ff; /* Blue palette */ --blue: #4da6ff; --blue-dark: #93c5fd; --blue-light: #111e33; --blue-mid: #1c3456; /* Green / amber */ --green: #34d399; --green-light: #052418; --amber: #fbbf24; --amber-light: #261a00; /* Heavier shadows on dark surfaces */ --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --shadow: 0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4); --shadow-lg: 0 8px 24px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.4); } /* Dark tab palettes — brighter accents, dark-tinted surfaces */ html.dark body[data-tab="find"] { --tab-color: #4da6ff; --tab-dark: #93c5fd; --tab-mid: #1c3456; --tab-light: #111e33; --tab-glow: rgba(77,166,255,.22); } html.dark body[data-tab="tables"] { --tab-color: #22d3ee; --tab-dark: #67e8f9; --tab-mid: #0c3a40; --tab-light: #082830; --tab-glow: rgba(34,211,238,.2); } html.dark body[data-tab="decode"] { --tab-color: #fbbf24; --tab-dark: #fcd34d; --tab-mid: #3d2a00; --tab-light: #261a00; --tab-glow: rgba(251,191,36,.2); } html.dark body[data-tab="flows"] { --tab-color: #34d399; --tab-dark: #6ee7b7; --tab-mid: #08362a; --tab-light: #052418; --tab-glow: rgba(52,211,153,.2); } /* Category badges — dark-tinted versions */ html.dark .category-badge.security { background: #2d0f0f; color: #fca5a5; } html.dark .category-badge.transport { background: #2d1f00; color: #fcd34d; } html.dark .category-badge.connectivity { background: #0f1f3d; color: #93c5fd; } html.dark .category-badge.system { background: #1e0f33; color: #d8b4fe; } html.dark .category-badge.hr { background: #0a2010; color: #86efac; } html.dark .category-badge.workflow { background: #082030; color: #7dd3fc; } html.dark .category-badge.materials { background: #2d1008; color: #fdba74; } html.dark .category-badge.controlling { background: #072010; color: #86efac; } /* About modal icons */ html.dark .about-icon--find { background: #111e33; color: #4da6ff; } html.dark .about-icon--tables { background: #082830; color: #22d3ee; } html.dark .about-icon--decode { background: #261a00; color: #fbbf24; } html.dark .about-icon--flows { background: #052418; color: #34d399; } /* ========== THEME TOGGLE BUTTON ========== */ .theme-btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--gray-300); background: none; color: var(--gray-500); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color .15s, color .15s, background .15s; padding: 0; } .theme-btn:hover { border-color: var(--tab-color); color: var(--tab-color); background: var(--tab-light); } .theme-btn svg { width: 14px; height: 14px; } /* Show moon in light, sun in dark */ .theme-btn .icon-sun { display: none; } html.dark .theme-btn .icon-moon { display: none; } html.dark .theme-btn .icon-sun { display: block; } /* Smooth colour transitions when toggling */ body { transition: background-color .25s, color .25s; } header, .tab-hero, .best-card, .table-best-card, .tx-card, .table-card, .flow-card, .decode-card, .modal, .search-wrap input { transition: background-color .25s, border-color .25s, color .25s; } /* ========== RESPONSIVE ========== */ @media (max-width: 600px) { .header-inner { height: 56px; } nav.tabs { gap: 0; } .tab-btn { padding: 7px 10px; font-size: 13px; } .logo-text { display: none; } .tab-btn { padding: 7px 12px; font-size: 13px; } main { padding: 20px 16px 48px; } .cards-grid { grid-template-columns: 1fr; } .flows-grid { grid-template-columns: 1fr; } .decode-header { flex-direction: column; gap: 8px; } .footer-inner { gap: 6px; } .footer-desc { display: none; } .tab-hero { padding: 18px 18px 18px; } .tab-hero-header { gap: 12px; } .tab-icon-wrap { width: 36px; height: 36px; } .tab-icon-wrap svg { width: 18px; height: 18px; } .tab-stat-num { font-size: 20px; } .tab-stat-lbl { font-size: 10px; } .chip-row-label { display: none; } }