/** * Critical CSS - Above-the-fold styles for instant first paint * This file is inlined in for fastest rendering * Target: < 14KB gzipped */ /* ===== Critical CSS Variables ===== */ :root { --bg-primary: #000000; --bg-secondary: #1c1c1e; --bg-card: rgba(29, 29, 29, 0.97); --text-primary: #f5f5f7; --text-secondary: rgba(235, 235, 245, 0.6); --accent-blue: #0071e3; --border-subtle: rgba(255, 255, 255, 0.08); --border-default: rgba(255, 255, 255, 0.12); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --radius-md: 12px; --transition-fast: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); } [data-bs-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #f5f5f7; --bg-card: rgba(255, 255, 255, 0.97); --text-primary: #1d1d1f; --text-secondary: rgba(28, 28, 30, 0.82); --border-subtle: rgba(0, 0, 0, 0.06); --border-default: rgba(0, 0, 0, 0.12); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); } /* ===== Reset & Base ===== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.5; min-height: 100vh; } /* ===== Navbar Critical Styles ===== */ .navbar-custom { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; height: 60px; background: rgba(28, 28, 30, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; padding: 0 1.5rem; } [data-bs-theme="light"] .navbar-custom { background: rgba(245, 245, 247, 0.85); } .navbar-brand { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; } /* ===== Main Container ===== */ .main-container, .content-wrapper { padding-top: 80px; min-height: 100vh; } /* ===== Card Critical Styles ===== */ .card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-subtle); background: transparent; } .card-body { padding: 1.25rem; } /* ===== Button Critical Styles ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 8px; border: none; cursor: pointer; transition: var(--transition-fast); min-height: 44px; /* iOS HIG touch target */ } .btn-primary { background: var(--accent-blue); color: #fff; } .btn-primary:hover { background: #0077ed; } /* ===== Form Critical Styles ===== */ .form-control, .form-select { background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 8px; color: var(--text-primary); padding: 0.75rem 1rem; min-height: 44px; transition: var(--transition-fast); } .form-control:focus, .form-select:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2); } /* ===== Typography ===== */ h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5rem; font-weight: 600; line-height: 1.2; color: var(--text-primary); } /* ===== Skeleton Loading ===== */ .skeleton { background: linear-gradient( 90deg, var(--bg-secondary) 0%, var(--bg-card) 50%, var(--bg-secondary) 100% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; } .skeleton-text { height: 1em; margin-bottom: 0.5em; } .skeleton-title { height: 1.5em; width: 60%; margin-bottom: 0.75em; } .skeleton-card { height: 120px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ===== Hide content until loaded ===== */ .js-loading { visibility: hidden; } .js-loaded .js-loading { visibility: visible; } /* ===== Prevent CLS (Cumulative Layout Shift) ===== */ img { max-width: 100%; height: auto; } /* Reserve space for common elements */ .post-preview-card { min-height: 200px; } .stats-card { min-height: 100px; } .history-item { min-height: 60px; }