/* ========================================================================== SmartDoc Use Case Pages — shared styles Covers the interactive product mockup used across 7 use case pages. All mockup classes are scoped under .demo-page to avoid collisions with the new revamp's global components. ========================================================================== */ .demo-page { /* Scoped design tokens for the product mockup UI */ --demo-bg-darkest: oklch(8% 0.005 268); --demo-bg-dark: oklch(12% 0.006 268); --demo-bg-sidebar: oklch(9% 0.005 268 / 0.95); --demo-bg-panel: oklch(12% 0.006 268); --demo-bg-card: oklch(17% 0.007 268); --demo-bg-hover: oklch(20% 0.008 268 / 0.5); --demo-text-primary: oklch(96% 0.004 268); --demo-text-secondary: oklch(65% 0.006 268); --demo-text-muted: oklch(45% 0.005 268); --demo-accent-orange: #f97316; --demo-accent-orange-dim: rgba(249, 115, 22, 0.15); --demo-accent-green: #22c55e; --demo-accent-green-dim: rgba(34, 197, 94, 0.15); --demo-accent-blue: var(--color-accent); --demo-accent-blue-dim: rgba(65, 102, 245, 0.12); --demo-accent-red: #ef4444; --demo-accent-red-dim: rgba(239, 68, 68, 0.15); --demo-border: oklch(22% 0.008 268); --demo-border-light: oklch(30% 0.01 268); --demo-radius-sm: 6px; --demo-radius-md: 8px; --demo-radius-lg: 12px; --demo-radius-xl: 16px; --demo-font-display: var(--font-body); --demo-font-body: var(--font-body); --demo-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; } /* ========================================================================== USE CASE PAGE-LEVEL SHELL Applied to for grey gradient backdrop and wider content widths tuned for the mockup-heavy layout. ========================================================================== */ body.use-case-page { background: radial-gradient(ellipse 80% 60% at 50% 0%, oklch(15% 0.004 268) 0%, transparent 60%), linear-gradient(180deg, oklch(12% 0.004 268) 0%, oklch(9% 0.005 268) 40%, oklch(7% 0.005 268) 100%); background-attachment: fixed; } /* Tone down the page-hero's blue accent glow on use case pages */ body.use-case-page .page-hero::before { background: radial-gradient(ellipse at 25% 15%, oklch(22% 0.005 268 / 0.4) 0%, transparent 65%); } /* Tighten the nav → breadcrumb gap (product.css default is nav + 3xl = 192px) */ body.use-case-page .page-hero { padding-top: calc(var(--nav-height) + var(--space-16)); } /* Wider container tuned for the product mockup */ .container--wide { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--space-8); } /* ========================================================================== USE CASE PAGE HERO (breadcrumb + eyebrow tag) The outer hero uses .page-hero from product.css; these are additions. Overrides widen the hero content area on use case pages. ========================================================================== */ body.use-case-page .page-hero-title { font-size: clamp(var(--text-4xl), 5.5vw, var(--text-6xl)); line-height: 1.08; max-width: 30ch; margin-bottom: var(--space-6); } body.use-case-page .page-hero-body { max-width: 68ch; font-size: var(--text-lg); } .use-case-breadcrumb { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); font-size: var(--text-sm); } .use-case-breadcrumb a { color: var(--color-text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } .use-case-breadcrumb a:hover { color: var(--color-ink); } .use-case-breadcrumb svg { width: 14px; height: 14px; color: var(--color-text-subtle); } .use-case-breadcrumb span { color: var(--color-text-muted); } .use-case-eyebrow { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-6); } .page-hero-title em, .content-section-title em, .cta-title em { font-style: italic; font-weight: 400; } /* ========================================================================== USE CASE METRICS — 4-column grid for hero-level metric cards Uses tighter styling than the global .metrics-grid (which is 3-column) ========================================================================== */ .use-case-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-top: var(--space-10); } .use-case-metric { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); } .use-case-metric .metric-value { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: clamp(var(--text-2xl), 2.8vw, 42px); font-weight: 700; color: var(--demo-accent-green); line-height: 1; margin-bottom: var(--space-3); letter-spacing: var(--tracking-tight); } .use-case-metric .metric-label { font-size: var(--text-base); font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-2); } .use-case-metric .metric-detail { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-relaxed); } /* Disclaimer below the metrics grid */ .use-case-metrics-caveat { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-4) var(--space-6); background: oklch(14% 0.005 268 / 0.5); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-muted); } .use-case-metrics-caveat svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; opacity: 0.7; } /* ========================================================================== DEMO SECTION HEADER — larger, centered for use case pages ========================================================================== */ .demo-section-header { text-align: center; max-width: 900px; margin: 0 auto var(--space-12); } .demo-section-title { font-family: var(--font-display); font-size: clamp(var(--text-3xl), 4.2vw, var(--text-5xl)); font-weight: 400; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-ink); margin-bottom: var(--space-5); } .demo-section-title em { font-style: italic; font-weight: 400; } .demo-section-lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-muted); max-width: 70ch; margin-inline: auto; } /* ========================================================================== USE CASE BOTTOM CTA — two-line layout (heading + subtitle) ========================================================================== */ .use-case-cta { text-align: center; padding-block: var(--space-3xl); border-top: 1px solid var(--color-border); } .use-case-cta-heading { font-family: var(--font-display); font-size: clamp(var(--text-2xl), 3.2vw, var(--text-4xl)); font-weight: 400; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-ink); margin-bottom: var(--space-5); } .use-case-cta-heading em { font-style: italic; font-weight: 400; } .use-case-cta-subtitle { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-muted); max-width: 58ch; margin: 0 auto var(--space-10); } .use-case-cta-buttons { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; } /* ========================================================================== MOCKUP CONTAINER — frames the emulated product UI ========================================================================== */ .demo-page .mockup-container { background: var(--demo-bg-sidebar); border-radius: var(--demo-radius-xl); border: 1px solid var(--demo-border); overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); margin-top: var(--space-10); } .demo-page .mockup-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--demo-bg-dark); border-bottom: 1px solid var(--demo-border); } .demo-page .mockup-dots { display: flex; gap: 8px; } .demo-page .mockup-dots span { width: 12px; height: 12px; border-radius: 50%; } .demo-page .mockup-dots span:nth-child(1) { background: #ef4444; } .demo-page .mockup-dots span:nth-child(2) { background: #eab308; } .demo-page .mockup-dots span:nth-child(3) { background: #22c55e; } .demo-page .mockup-title { flex: 1; text-align: center; font-size: 13px; color: var(--demo-text-secondary); } /* App body — three-column layout: sidebar | document viewer | right panel */ .demo-page .app-body { display: grid; grid-template-columns: 200px 1fr 380px; height: 750px; } /* ========================================================================== SIDEBAR ========================================================================== */ .demo-page .sidebar { background: var(--demo-bg-sidebar); border-right: 1px solid var(--demo-border); display: flex; flex-direction: column; padding: 16px 12px; } .demo-page .sidebar-logo { display: flex; align-items: center; gap: 10px; font-family: var(--demo-font-display); font-size: 18px; font-weight: 700; padding: 8px 12px 24px; color: var(--demo-text-primary); } .demo-page .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--demo-radius-md); font-size: 14px; color: var(--demo-text-secondary); cursor: pointer; transition: all 0.2s; margin-bottom: 4px; } .demo-page .nav-item:hover { background: var(--demo-bg-hover); color: var(--demo-text-primary); } .demo-page .nav-item.active { background: var(--demo-accent-blue-dim); color: #7d96ff; } .demo-page .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; } .demo-page .nav-item.active svg { opacity: 1; color: #7d96ff; } .demo-page .sidebar-footer { margin-top: auto; padding: 16px 12px; border-top: 1px solid var(--demo-border); } .demo-page .user-info { display: flex; align-items: center; gap: 10px; padding: 12px 0 0; margin-top: 12px; border-top: 1px solid var(--demo-border); } .demo-page .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--demo-accent-blue); color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; } .demo-page .user-details { display: flex; flex-direction: column; } .demo-page .user-name { font-size: 13px; font-weight: 500; color: var(--demo-text-primary); } .demo-page .user-email { font-size: 11px; color: var(--demo-text-muted); } /* ========================================================================== DOCUMENT VIEWER ========================================================================== */ .demo-page .document-viewer { display: flex; flex-direction: column; background: var(--demo-bg-panel); overflow: hidden; } .demo-page .document-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--demo-bg-sidebar); border-bottom: 1px solid var(--demo-border); } .demo-page .document-tabs { display: flex; gap: 4px; } .demo-page .document-tab { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--demo-radius-md); font-size: 13px; font-weight: 500; color: var(--demo-text-secondary); cursor: pointer; transition: all 0.2s; border: 1px solid transparent; } .demo-page .document-tab:hover { background: var(--demo-bg-hover); color: var(--demo-text-primary); } .demo-page .document-tab.active { background: var(--demo-accent-blue-dim); color: var(--demo-accent-blue); border-color: var(--demo-accent-blue); } .demo-page .document-tab svg { width: 16px; height: 16px; } .demo-page .doc-badge { padding: 2px 6px; background: var(--demo-bg-hover); border-radius: 4px; font-size: 10px; font-weight: 600; color: var(--demo-text-muted); } .demo-page .document-tab.active .doc-badge { background: rgba(65, 102, 245, 0.3); color: var(--demo-accent-blue); } .demo-page .document-controls { display: flex; align-items: center; gap: 12px; } .demo-page .zoom-controls { display: flex; align-items: center; gap: 6px; } .demo-page .zoom-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--demo-bg-hover); border: none; border-radius: var(--demo-radius-sm); color: var(--demo-text-secondary); cursor: pointer; } .demo-page .zoom-btn:hover { background: var(--demo-border-light); color: var(--demo-text-primary); } .demo-page .zoom-btn svg { width: 14px; height: 14px; } .demo-page .zoom-level { font-size: 12px; color: var(--demo-text-secondary); min-width: 36px; text-align: center; } .demo-page .view-toggle { display: flex; background: var(--demo-bg-hover); border-radius: var(--demo-radius-md); padding: 2px; } .demo-page .view-toggle-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; background: transparent; border: none; border-radius: var(--demo-radius-sm); color: var(--demo-text-muted); cursor: pointer; } .demo-page .view-toggle-btn:hover { color: var(--demo-text-secondary); } .demo-page .view-toggle-btn.active { background: var(--demo-bg-card); color: var(--demo-text-primary); } .demo-page .view-toggle-btn svg { width: 16px; height: 16px; } /* Document pages — the emulated PDF look */ .demo-page .document-content { flex: 1; overflow: auto; padding: 20px; display: flex; gap: 20px; } .demo-page .document-content.single-view .document-pane:not(.active) { display: none; } .demo-page .document-content.split-view { display: grid; grid-template-columns: 1fr 1fr; } .demo-page .document-pane { flex: 1; min-width: 0; } .demo-page .document-page { background: #ffffff; border-radius: var(--demo-radius-md); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); padding: 28px; font-family: var(--demo-font-mono); font-size: 10px; color: #1a1a1a; line-height: 1.5; max-width: 580px; margin: 0 auto; } .demo-page .doc-header { text-align: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid #1a1a1a; } .demo-page .doc-header .company-name { font-size: 14px; font-weight: 700; font-family: var(--demo-font-display); color: #1e40af; margin-bottom: 2px; } .demo-page .doc-header .doc-type { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: #666; } .demo-page .doc-header .doc-number { font-size: 12px; font-weight: 600; color: #1a1a1a; margin-top: 6px; } .demo-page .doc-section { margin-bottom: 16px; } .demo-page .doc-section-title { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #666; margin-bottom: 6px; padding-bottom: 3px; border-bottom: 1px solid #e0e0e0; } .demo-page .doc-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 9px; } .demo-page .doc-row .label { color: #666; } .demo-page .doc-row .value { font-weight: 500; text-align: right; } .demo-page .doc-table { width: 100%; border-collapse: collapse; font-size: 8px; margin-top: 6px; } .demo-page .doc-table th { background: #f5f5f5; padding: 6px 4px; text-align: left; font-weight: 600; font-size: 7px; text-transform: uppercase; letter-spacing: 0.3px; border: 1px solid #e0e0e0; } .demo-page .doc-table td { padding: 5px 4px; border: 1px solid #e0e0e0; vertical-align: top; } .demo-page .doc-table tr.fail-row { background: #ffeef0 !important; } .demo-page .doc-table tr.pass-row { background: #f0fdf4 !important; } .demo-page .doc-table tr.review-row { background: #eff6ff !important; } .demo-page .decision-box { margin-top: 14px; padding: 10px; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 4px; text-align: center; } .demo-page .decision-box .decision-label { font-size: 8px; color: #92400e; text-transform: uppercase; letter-spacing: 0.5px; } .demo-page .decision-box .decision-value { font-size: 11px; font-weight: 700; color: #b45309; } /* Visual grounding — hover highlights */ .demo-page [data-field] { transition: all 0.2s ease; cursor: pointer; border-radius: 2px; } .demo-page [data-field]:hover { background: rgba(65, 102, 245, 0.1) !important; } .demo-page [data-field].highlighted { background: rgba(34, 197, 94, 0.15) !important; outline: 2px solid var(--demo-accent-green); outline-offset: 2px; } .demo-page [data-field].mismatch-highlight { background: rgba(239, 68, 68, 0.15) !important; outline: 2px solid var(--demo-accent-red); outline-offset: 2px; } .demo-page [data-field].partial-highlight { background: rgba(249, 115, 22, 0.15) !important; outline: 2px solid var(--demo-accent-orange); outline-offset: 2px; } .demo-page [data-field].review-highlight { background: rgba(65, 102, 245, 0.15) !important; outline: 2px solid var(--demo-accent-blue); outline-offset: 2px; } /* ========================================================================== COMPLIANCE PANEL (right column) ========================================================================== */ .demo-page .compliance-panel { display: flex; flex-direction: column; background: var(--demo-bg-sidebar); border-left: 1px solid var(--demo-border); overflow: hidden; } .demo-page .compliance-header { padding: 16px; border-bottom: 1px solid var(--demo-border); } .demo-page .compliance-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 14px; color: var(--demo-text-primary); } .demo-page .compliance-title svg { width: 18px; height: 18px; color: var(--demo-accent-blue); } /* Score ring */ .demo-page .score-card { background: var(--demo-bg-card); border-radius: var(--demo-radius-lg); padding: 16px; text-align: center; } .demo-page .score-ring { position: relative; width: 100px; height: 100px; margin: 0 auto 12px; } .demo-page .score-ring svg { transform: rotate(-90deg); } .demo-page .score-ring circle { fill: none; stroke-width: 8; } .demo-page .score-ring .bg { stroke: var(--demo-bg-hover); } .demo-page .score-ring .progress { stroke: var(--demo-accent-green); stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: calc(264 * (1 - var(--score) / 100)); } .demo-page .score-ring .progress.warning { stroke: var(--demo-accent-orange); } .demo-page .score-ring .progress.danger { stroke: var(--demo-accent-red); } .demo-page .score-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .demo-page .score-value .number { font-size: 26px; font-weight: 700; line-height: 1; color: var(--demo-text-primary); } .demo-page .score-value .label { font-size: 10px; color: var(--demo-text-muted); margin-top: 2px; } .demo-page .score-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--demo-accent-orange-dim); border-radius: var(--demo-radius-sm); font-size: 11px; font-weight: 600; color: var(--demo-accent-orange); } .demo-page .score-status svg { width: 12px; height: 12px; } .demo-page .summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; } .demo-page .summary-stat { background: var(--demo-bg-panel); border-radius: var(--demo-radius-sm); padding: 8px 4px; text-align: center; } .demo-page .summary-stat .stat-value { font-size: 16px; font-weight: 700; line-height: 1; margin-bottom: 2px; } .demo-page .summary-stat .stat-value.pass { color: var(--demo-accent-green); } .demo-page .summary-stat .stat-value.fail { color: var(--demo-accent-red); } .demo-page .summary-stat .stat-value.partial { color: var(--demo-accent-orange); } .demo-page .summary-stat .stat-value.review { color: var(--demo-accent-blue); } .demo-page .summary-stat .stat-label { font-size: 8px; color: var(--demo-text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .demo-page .compliance-content { flex: 1; overflow-y: auto; padding: 12px; } /* Discrepancy groups */ .demo-page .discrepancy-group { margin-bottom: 6px; } .demo-page .discrepancy-group-header { display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--demo-bg-card); border-radius: var(--demo-radius-md); cursor: pointer; transition: all 0.2s; } .demo-page .discrepancy-group-header:hover { background: var(--demo-bg-hover); } .demo-page .discrepancy-group.expanded .discrepancy-group-header { border-radius: var(--demo-radius-md) var(--demo-radius-md) 0 0; } .demo-page .discrepancy-icon { width: 18px; height: 18px; flex-shrink: 0; } .demo-page .discrepancy-icon.critical { color: var(--demo-accent-red); } .demo-page .discrepancy-icon.warning { color: var(--demo-accent-orange); } .demo-page .discrepancy-icon.review { color: var(--demo-accent-blue); } .demo-page .discrepancy-icon.pass { color: var(--demo-accent-green); } .demo-page .discrepancy-group-title { flex: 1; font-size: 12px; font-weight: 600; color: var(--demo-text-primary); } .demo-page .discrepancy-count { padding: 2px 8px; background: var(--demo-bg-hover); border-radius: 10px; font-size: 10px; font-weight: 600; color: var(--demo-text-muted); } .demo-page .discrepancy-group.expanded .discrepancy-count { background: var(--demo-accent-blue-dim); color: var(--demo-accent-blue); } .demo-page .discrepancy-chevron { width: 14px; height: 14px; color: var(--demo-text-muted); transition: transform 0.2s; } .demo-page .discrepancy-group.expanded .discrepancy-chevron { transform: rotate(180deg); } .demo-page .discrepancy-items { display: none; background: var(--demo-bg-card); border-radius: 0 0 var(--demo-radius-md) var(--demo-radius-md); border-top: 1px solid var(--demo-border); } .demo-page .discrepancy-group.expanded .discrepancy-items { display: block; } .demo-page .discrepancy-item { display: flex; gap: 10px; padding: 12px; border-bottom: 1px solid var(--demo-border); cursor: pointer; transition: all 0.2s; } .demo-page .discrepancy-item:last-child { border-bottom: none; } .demo-page .discrepancy-item:hover { background: var(--demo-bg-hover); } .demo-page .discrepancy-item.active { background: var(--demo-accent-blue-dim); border-left: 3px solid var(--demo-accent-blue); } .demo-page .discrepancy-item-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; } .demo-page .discrepancy-item-icon.critical { color: var(--demo-accent-red); } .demo-page .discrepancy-item-icon.warning { color: var(--demo-accent-orange); } .demo-page .discrepancy-item-icon.review { color: var(--demo-accent-blue); } .demo-page .discrepancy-item-icon.pass { color: var(--demo-accent-green); } .demo-page .discrepancy-item-content { flex: 1; min-width: 0; } .demo-page .discrepancy-item-title { font-size: 12px; font-weight: 500; margin-bottom: 3px; color: var(--demo-text-primary); } .demo-page .discrepancy-item-detail { display: flex; flex-wrap: wrap; gap: 6px; font-size: 10px; color: var(--demo-text-secondary); margin-bottom: 4px; } .demo-page .discrepancy-item-detail .our-value { color: var(--demo-text-muted); } .demo-page .discrepancy-item-detail .tender-value { color: var(--demo-text-primary); } .demo-page .discrepancy-item-detail .vs { color: var(--demo-text-muted); } .demo-page .discrepancy-item-status { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 600; } .demo-page .discrepancy-item-status.critical { color: var(--demo-accent-red); } .demo-page .discrepancy-item-status.warning { color: var(--demo-accent-orange); } .demo-page .discrepancy-item-status.review { color: var(--demo-accent-blue); } .demo-page .discrepancy-item-status.pass { color: var(--demo-accent-green); } .demo-page .discrepancy-item-criticality { font-size: 9px; color: var(--demo-text-muted); margin-top: 3px; } /* Demo footnote */ .demo-page .demo-footnote { max-width: 1400px; margin: 16px auto 0; padding: 0 20px; font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; font-style: italic; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1200px) { .demo-page .app-body { grid-template-columns: 180px 1fr 340px; } .use-case-metrics { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { .demo-page .app-body { grid-template-columns: 1fr; height: auto; } .demo-page .sidebar, .demo-page .compliance-panel { display: none; } .demo-page .document-viewer { height: 600px; } .use-case-metrics { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .use-case-metrics { grid-template-columns: 1fr; } }