/* ============================================================ UTILITIES — Single-purpose helpers ============================================================ */ /* ── Display ── */ .d-none { display: none !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } .d-grid { display: grid !important; } .d-inline { display: inline !important; } .d-inline-flex { display: inline-flex !important; } .hidden-mobile { display: none; } .hidden-desktop { display: block; } @media (min-width: 1200px) { .hidden-mobile { display: block; } .hidden-desktop { display: none; }} /* ── Text align ── */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* ── Font weights ── */ .fw-regular { font-weight: var(--font-weight-regular); } .fw-medium { font-weight: var(--font-weight-medium); } .fw-bold { font-weight: var(--font-weight-bold); } /* ── Colors ── */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-inverse { color: var(--text-inverse); } .text-red { color: var(--color-red); } /* ── Background ── */ .bg-dark { background-color: var(--bg-dark); } .bg-subtle { background-color: var(--bg-subtle); } .bg-white { background-color: var(--color-white); } .bg-red { background-color: var(--color-red); } /* ── Spacing helpers ── */ .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } /* ── Width / sizing ── */ .w-full { width: 100%; } .h-full { height: 100%; } .max-w-xs { max-width: 320px; } .max-w-sm { max-width: 480px; } .max-w-md { max-width: 640px; } .max-w-lg { max-width: 860px; } /* ── Borders ── */ .rounded-sm { border-radius: var(--radius-sm); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: var(--radius-pill); } /* ── Overflow ── */ .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } /* ── Position ── */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } .inset-0 { inset: 0; } /* ── Object fit ── */ .object-cover { object-fit: cover; } .object-contain { object-fit: contain; } /* ── Aspect ratios ── */ .aspect-square { aspect-ratio: 1; } .aspect-video { aspect-ratio: 16/9; } .aspect-4-3 { aspect-ratio: 4/3; } .aspect-3-2 { aspect-ratio: 3/2; } .aspect-21-9 { aspect-ratio: 21/9; } /* ── Animation helpers ── */ /* When JS hasn't run yet (file:// or module load failure), show everything */ .reveal { opacity: 1; transform: none; } /* Only hide for animation when JS is ready (class added to by main.js) */ html.js-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } html.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0); } /* prefers-reduced-motion: skip all animation */ @media (prefers-reduced-motion: reduce) { html.js-ready .reveal { opacity: 1; transform: none; transition: none; } } .reveal--delay-1 { transition-delay: 100ms; } .reveal--delay-2 { transition-delay: 200ms; } .reveal--delay-3 { transition-delay: 300ms; } .reveal--delay-4 { transition-delay: 400ms; } /* ── Divider with accent ── */ .divider-accent { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; } .divider-accent::before, .divider-accent::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); } /* ── Loading skeleton ── */ .skeleton { background: linear-gradient( 90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Truncate text ── */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }