/* Shared base reset + typography + structural tokens. Folder-specific globals provide color tokens and components. */ /* Import shared keyframe animations */ @import url("./animations.ef4399.css"); /* ============================================== Global Typography Defaults (Inter Font) These apply to all apps but can be overridden per-app. ============================================== */ :root { /* Font family */ --font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-family-numeric: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Font weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; /* Base sizes (rem so they scale with user font preference) */ --font-size-base: 0.9375rem; --line-height-base: 1.5; /* Letter spacing */ --tracking-tight: -0.01em; --tracking-normal: 0; /* ============================================== Shared Structural Tokens These apply to all apps. Color tokens are app-specific. ============================================== */ /* Transitions (smooth and professional) */ --transition-fast: 100ms ease-out; --transition-base: 150ms ease-out; --transition-slow: 250ms ease-out; /* Border Radius (modern but not too rounded) */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Spacing Scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Safe Areas */ --safe-area-top: env(safe-area-inset-top); --safe-area-bottom: env(safe-area-inset-bottom); --safe-area-left: env(safe-area-inset-left); --safe-area-right: env(safe-area-inset-right); } /* ============================================== App-Specific Font Sizing Add one class to per app. ============================================== */ /* SaaS app (customer app) - Readable + efficient density */ .app-saas { --font-size-base: 0.9375rem; /* 15px at default root */ --line-height-base: 1.5; } /* Landing website - Readability and trust, more whitespace */ .app-landing { --font-size-base: 1rem; /* 16px at default root */ --line-height-base: 1.6; } /* Admin app - Density + scan speed, like a console */ .app-admin { --font-size-base: 0.875rem; /* 14px at default root */ --line-height-base: 1.45; } /* CSS Unit Guidelines Base: Use percentage so rem units honour the user's browser / device font-size preference (default 16 px). */ html { font-size: 100%; } * { box-sizing: border-box; } *::before, *::after { box-sizing: inherit; } html, body { margin: 0; padding: 0; min-height: 100%; font-family: var(--font-family-sans); font-size: var(--font-size-base); line-height: var(--line-height-base); background: var(--color-bg, #0f1218); color: var(--color-text, #f4f6fb); /* * Numeric styling is intentionally scoped to numeric output * (tables, .amount, .num-tabular, UiMoney, UiNum) — applying * tabular-nums to body/labels/headings makes proportional copy * feel slightly mechanical. */ /* Text rendering */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { display: flex; flex-direction: column; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent, #1fc8ff); text-decoration: none; } a:hover { color: var(--color-accent-hover, #27e28c); } /* ============================================== Headings (uses semibold, tight tracking) ============================================== */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-2, 0.75rem); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-tight); } p { margin: 0 0 var(--space-2, 0.75rem); } #app { flex: 1; } /* ============================================== Buttons + Labels (uses medium weight) ============================================== */ button, .btn, label { font-weight: var(--font-weight-medium); } /* ============================================== Numeric output — column-aligned figures Use UiMoney / UiNum (or .num-tabular on a span) for inline numeric output. Tables and amount/kpi/badge classes inherit the same treatment so financial data always lines up. ============================================== */ table, th, td, .amount, .kpi, .badge, .num-tabular { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: 0; } /* * Inside UiMoney / UiNum specifically, swap to Geist Mono so amounts * read as data, not language. Tables / .amount / .kpi / .badge stay * in Inter with tabular-nums (above) — only the dedicated wrappers * use the numeric typeface so table headers and labels keep Inter. */ .num-tabular { font-family: var(--font-family-numeric); } /* ============================================== Monospace Usage (only for IDs/tokens) Use only for: invoice IDs, API keys, hashes NOT for money. ============================================== */ .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-variant-numeric: tabular-nums; } /* ============================================== Scroll Indicator System UX Hierarchy (best to situational): 1. Content Cut-off - Design layouts so content is visibly cut 2. Scroll Fade Gradient - Subtle bottom fade for containers 3. Scroll Indicator Chevron - Minimal hint, shown once only Never use looping animations or "scroll to see more" text. ============================================== */ /* ============================================== 1. SCROLL FADE GRADIENT (Very Good - Use for tables, modals, panels) A subtle gradient at the bottom that signals more content. Disappears when scrolled to bottom. Note: The actual fade overlay is created dynamically via JS (scroll-indicator.js) using position:absolute with dynamic top positioning for proper visibility in overflow containers. The .scroll-fade class marks an element for JS initialization. ============================================== */ .scroll-fade { position: relative; } /* Utility classes for JS to read the desired background color variant */ .scroll-fade--surface, .scroll-fade--card, .scroll-fade--lg, .scroll-fade--sm { /* These classes signal to JS what style variant to use */ } /* Hide fade when scrolled to bottom (managed by JS) */ .scroll-fade.scrolled-bottom::after, .scroll-fade[data-scrolled="bottom"]::after { opacity: 0; } /* Scroll fade overlay element styling (created by JS) */ .scroll-fade-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 24px; pointer-events: none; z-index: 10; border-radius: inherit; transition: opacity var(--anim-duration-standard) var(--anim-ease-standard); } /* Ensure containers that get scroll-fade have proper positioning */ .table-scroll, .modal-body, .modal-content, .dashboard-card__content, .detail-content, .card-content, .flow-body, .entry-scroll, .notification-dropdown, .suggest-menu, .mobile-card-list, .workflow-body { position: relative; } /* ============================================== 2. SCROLL INDICATOR CHEVRON (Situational) Use only when container doesn't look scrollable. Appears once, gentle animation, then hides after first scroll. ============================================== */ .scroll-indicator { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--scroll-indicator-bg, rgba(0, 0, 0, 0.55)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 50%; border: 1px solid var(--scroll-indicator-border, rgba(255, 255, 255, 0.12)); box-shadow: 0 4px 16px var(--scroll-indicator-shadow, rgba(0, 0, 0, 0.3)); z-index: 50; pointer-events: none; opacity: 0; transition: opacity var(--anim-duration-expressive) var(--anim-ease-standard), transform var(--anim-duration-expressive) var(--anim-ease-standard); } .scroll-indicator.visible { opacity: 1; } /* Single gentle animation on appear, not infinite */ .scroll-indicator.visible .scroll-indicator__icon { animation: scrollNudge 0.6s ease-out 0.3s 1; } .scroll-indicator.hiding { opacity: 0; transform: translateX(-50%) translateY(12px); } /* Mark as interacted - never show again this session */ .scroll-indicator.interacted { display: none !important; } .scroll-indicator__icon { display: flex; align-items: center; justify-content: center; } .scroll-indicator__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--scroll-indicator-icon, var(--color-accent, #1fc8ff)); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* No text - chevron only */ .scroll-indicator__text { display: none; } /* Single nudge animation - NOT infinite */ @keyframes scrollNudge { 0% { transform: translateY(0); } 50% { transform: translateY(4px); } 100% { transform: translateY(0); } } /* Hide on small screens where scrolling is more expected */ @media (max-width: 640px) { .scroll-indicator { bottom: 16px; width: 36px; height: 36px; } .scroll-indicator__icon svg { width: 16px; height: 16px; } } /* ============================================== 3. SCROLLABLE CONTAINER UTILITIES Mark containers as scrollable with proper overflow handling ============================================== */ .scrollable { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-gutter: stable; } .scrollable-x { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .scrollable-both { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Custom scrollbar styling for scrollable containers */ .scrollable::-webkit-scrollbar, .scrollable-both::-webkit-scrollbar { width: 8px; } .scrollable::-webkit-scrollbar-track, .scrollable-both::-webkit-scrollbar-track { background: transparent; } .scrollable::-webkit-scrollbar-thumb, .scrollable-both::-webkit-scrollbar-thumb { /* Fallback for older browsers */ background: rgba(31, 200, 255, 0.35); /* Modern browsers with color-mix support */ background: color-mix(in srgb, var(--color-accent, #1fc8ff) 35%, transparent); border-radius: 999px; } .scrollable::-webkit-scrollbar-thumb:hover, .scrollable-both::-webkit-scrollbar-thumb:hover { /* Fallback for older browsers */ background: rgba(31, 200, 255, 0.55); /* Modern browsers with color-mix support */ background: color-mix(in srgb, var(--color-accent, #1fc8ff) 55%, transparent); }