/* ============================================================================ TSI Foundation v2.1.0 2026-04-04 GLOBAL COMPONENT LIBRARY for the TSI App (219 pages). This stylesheet provides reusable components, micro-interactions, skeleton loading states, and the dark-mode-first base layer consumed by every page in the application. DEPENDS ON: tsi-tokens.css -- all --tsi-* custom properties are defined there. This file REFERENCES tokens only; it never redefines them. LOAD ORDER (every ): 1. tsi-tokens.css (custom properties) 2. tsi-foundation.css (this file -- reset, components, utilities) 3. page-specific CSS (feature styles) SECTIONS: A. Import & View Transitions B. Base Reset & Defaults C. Accessibility (reduced motion, high contrast, skip link) D. Glass Panel E. Card System F. Button System G. Badge System H. Status Indicators I. Form Inputs J. Audio Player Component K. Skeleton Loading L. Toast / Notification M. Modal N. Stats / Metric Display O. Grid Utilities P. Flex Utilities Q. Spacing Utilities R. Text Utilities S. Micro-Interaction Keyframes T. Scroll-Driven Animations U. Achievement Celebration V. Responsive Breakpoints ========================================================================= */ /* ============================================================================ A. IMPORT & VIEW TRANSITIONS ========================================================================= */ @import url('tsi-tokens.css'); /* Native MPA view transitions (Chrome 126+, progressive enhancement) */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: tsi-vt-fade-out 200ms ease-out; } ::view-transition-new(root) { animation: tsi-vt-fade-in 200ms ease-in; } @keyframes tsi-vt-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes tsi-vt-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ============================================================================ B. BASE RESET & DEFAULTS ========================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--tsi-font-primary); font-size: var(--tsi-text-base); font-weight: var(--tsi-weight-normal); line-height: var(--tsi-leading-normal); color: var(--tsi-text); background-color: var(--tsi-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } ::selection { background-color: var(--tsi-orange); color: var(--tsi-text-inverse); } ::-moz-selection { background-color: var(--tsi-orange); color: var(--tsi-text-inverse); } /* Scrollbar (WebKit + standard) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--tsi-bg-deep); } ::-webkit-scrollbar-thumb { background: var(--tsi-orange-dark); border-radius: var(--tsi-radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--tsi-orange); } * { scrollbar-width: thin; scrollbar-color: var(--tsi-orange-dark) var(--tsi-bg-deep); } /* Focus-visible for keyboard navigation */ :focus-visible { outline: 2px solid var(--tsi-orange); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* Base elements */ img, svg, video { display: block; max-width: 100%; height: auto; } a { color: var(--tsi-orange); text-decoration: none; transition: color var(--tsi-duration-fast) var(--tsi-ease); } a:hover { color: var(--tsi-orange-bright); } h1, h2, h3, h4, h5, h6 { font-family: var(--tsi-font-heading); line-height: var(--tsi-leading-tight); color: var(--tsi-text); } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } table { border-collapse: collapse; width: 100%; } /* ============================================================================ C. ACCESSIBILITY ========================================================================= */ /* Reduced motion -- disable all transitions and animations */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* High contrast -- solid backgrounds, stronger borders */ @media (prefers-contrast: more) { .tsi-glass { background: var(--tsi-bg-elevated) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: var(--tsi-border-strong) !important; } .tsi-card { border-color: var(--tsi-border-strong) !important; background: var(--tsi-bg-elevated) !important; } .tsi-input, .tsi-select, .tsi-textarea { border-color: var(--tsi-border-strong) !important; } } /* Skip-to-content link */ .tsi-skip-link { position: absolute; top: -100%; left: var(--tsi-space-4); z-index: var(--tsi-z-max); padding: var(--tsi-space-2) var(--tsi-space-4); background: var(--tsi-orange); color: var(--tsi-text-inverse); font-weight: var(--tsi-weight-bold); border-radius: var(--tsi-radius-md); transition: top var(--tsi-duration-fast) var(--tsi-ease); } .tsi-skip-link:focus { top: var(--tsi-space-4); } /* ============================================================================ D. GLASS PANEL ========================================================================= */ .tsi-glass { background: var(--tsi-glass-bg); backdrop-filter: blur(var(--tsi-glass-blur)); -webkit-backdrop-filter: blur(var(--tsi-glass-blur)); border: 1px solid var(--tsi-glass-border); border-radius: var(--tsi-radius-lg); } /* ============================================================================ E. CARD SYSTEM ========================================================================= */ .tsi-card { background: var(--tsi-bg-raised); border: 1px solid var(--tsi-border); border-radius: var(--tsi-radius-lg); padding: var(--tsi-space-5); transition: transform var(--tsi-duration-normal) var(--tsi-ease), box-shadow var(--tsi-duration-normal) var(--tsi-ease); } .tsi-card:hover { transform: translateY(-2px); box-shadow: var(--tsi-shadow-lg); } .tsi-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--tsi-space-3); margin-bottom: var(--tsi-space-4); } .tsi-card-header h3, .tsi-card-header h4 { margin: 0; flex: 1; } .tsi-card-body { padding: var(--tsi-space-2) 0; } .tsi-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--tsi-space-3); border-top: 1px solid var(--tsi-border); padding-top: var(--tsi-space-4); margin-top: var(--tsi-space-4); color: var(--tsi-text-muted); font-size: var(--tsi-text-sm); } /* ============================================================================ F. BUTTON SYSTEM ========================================================================= */ .tsi-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--tsi-space-2); padding: var(--tsi-space-2) var(--tsi-space-5); font-family: var(--tsi-font-primary); font-size: var(--tsi-text-sm); font-weight: var(--tsi-weight-semibold); line-height: 1; border: 1px solid transparent; border-radius: var(--tsi-radius-md); cursor: pointer; white-space: nowrap; user-select: none; text-decoration: none; transition: all var(--tsi-duration-fast) var(--tsi-ease); } .tsi-btn:hover { filter: brightness(1.15); } .tsi-btn:active { transform: scale(0.97); } /* Primary -- orange gradient */ .tsi-btn-primary { background: linear-gradient(135deg, var(--tsi-orange), var(--tsi-orange-bright)); color: var(--tsi-text-inverse); box-shadow: var(--tsi-glow-orange); } .tsi-btn-primary:hover { box-shadow: 0 0 28px rgba(255, 102, 0, 0.6); } /* Secondary -- dark bg, orange border */ .tsi-btn-secondary { background: var(--tsi-bg-elevated); border-color: var(--tsi-orange); color: var(--tsi-orange); } .tsi-btn-secondary:hover { background: rgba(255, 102, 0, 0.1); } /* Success -- green gradient */ .tsi-btn-success { background: linear-gradient(135deg, var(--tsi-green-soft), var(--tsi-green-dark)); color: #fff; } /* Danger -- red gradient */ .tsi-btn-danger { background: linear-gradient(135deg, var(--tsi-red), var(--tsi-red-dark)); color: #fff; } /* Ghost -- transparent */ .tsi-btn-ghost { background: transparent; color: var(--tsi-text); } .tsi-btn-ghost:hover { background: var(--tsi-bg-hover); filter: none; } /* Icon-only */ .tsi-btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--tsi-radius-md); } /* Size variants */ .tsi-btn-sm { padding: var(--tsi-space-1) var(--tsi-space-3); font-size: var(--tsi-text-xs); } .tsi-btn-lg { padding: var(--tsi-space-3) var(--tsi-space-8); font-size: var(--tsi-text-lg); } /* Disabled */ .tsi-btn:disabled, .tsi-btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .tsi-btn:disabled:hover, .tsi-btn[disabled]:hover { filter: none; transform: none; box-shadow: none; } /* ============================================================================ G. BADGE SYSTEM ========================================================================= */ .tsi-badge { display: inline-flex; align-items: center; gap: var(--tsi-space-1); padding: 2px var(--tsi-space-2); font-size: var(--tsi-text-xs); font-weight: var(--tsi-weight-semibold); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--tsi-radius-full); white-space: nowrap; } .tsi-badge-orange { background: rgba(255, 102, 0, 0.2); color: var(--tsi-orange-bright); } .tsi-badge-green { background: rgba(76, 175, 80, 0.2); color: var(--tsi-green-soft); } .tsi-badge-red { background: rgba(244, 67, 54, 0.2); color: var(--tsi-red); } .tsi-badge-blue { background: rgba(33, 150, 243, 0.2); color: var(--tsi-blue); } .tsi-badge-gold { background: rgba(255, 215, 0, 0.2); color: var(--tsi-gold); } /* Outline variant */ .tsi-badge-outline { background: transparent; border: 1px solid currentColor; } /* Pulse animation for live/active */ .tsi-badge-pulse { animation: tsi-pulse 2s ease-in-out infinite; } /* ============================================================================ H. STATUS INDICATORS ========================================================================= */ .tsi-status-dot { display: inline-flex; align-items: center; gap: var(--tsi-space-2); } .tsi-status-dot::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: var(--tsi-radius-round); flex-shrink: 0; } .tsi-status-dot--active::before { background: var(--tsi-status-active); box-shadow: 0 0 6px var(--tsi-status-active); animation: tsi-pulse 2s ease-in-out infinite; } .tsi-status-dot--warning::before { background: var(--tsi-status-warning); box-shadow: 0 0 6px var(--tsi-status-warning); } .tsi-status-dot--error::before { background: var(--tsi-status-error); box-shadow: 0 0 6px var(--tsi-status-error); } .tsi-status-dot--inactive::before { background: var(--tsi-status-inactive); } /* ============================================================================ I. FORM INPUTS ========================================================================= */ .tsi-label { display: block; font-size: var(--tsi-text-xs); font-weight: var(--tsi-weight-semibold); color: var(--tsi-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--tsi-space-1); } .tsi-input { display: block; width: 100%; padding: var(--tsi-space-2) var(--tsi-space-3); font-family: var(--tsi-font-primary); font-size: var(--tsi-text-base); color: var(--tsi-text); background: var(--tsi-bg-input); border: 1px solid var(--tsi-border); border-radius: var(--tsi-radius-md); transition: border-color var(--tsi-duration-fast) var(--tsi-ease), box-shadow var(--tsi-duration-fast) var(--tsi-ease); } .tsi-input::placeholder { color: var(--tsi-text-dim); } .tsi-input:focus { outline: none; border-color: var(--tsi-border-focus); box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.2); } /* Select */ .tsi-select { display: block; width: 100%; padding: var(--tsi-space-2) var(--tsi-space-8) var(--tsi-space-2) var(--tsi-space-3); font-family: var(--tsi-font-primary); font-size: var(--tsi-text-base); color: var(--tsi-text); background: var(--tsi-bg-input); border: 1px solid var(--tsi-border); border-radius: var(--tsi-radius-md); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--tsi-space-3) center; cursor: pointer; transition: border-color var(--tsi-duration-fast) var(--tsi-ease), box-shadow var(--tsi-duration-fast) var(--tsi-ease); } .tsi-select:focus { outline: none; border-color: var(--tsi-border-focus); box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.2); } /* Textarea */ .tsi-textarea { display: block; width: 100%; min-height: 100px; padding: var(--tsi-space-3); font-family: var(--tsi-font-primary); font-size: var(--tsi-text-base); color: var(--tsi-text); background: var(--tsi-bg-input); border: 1px solid var(--tsi-border); border-radius: var(--tsi-radius-md); resize: vertical; transition: border-color var(--tsi-duration-fast) var(--tsi-ease), box-shadow var(--tsi-duration-fast) var(--tsi-ease); } .tsi-textarea::placeholder { color: var(--tsi-text-dim); } .tsi-textarea:focus { outline: none; border-color: var(--tsi-border-focus); box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.2); } /* ============================================================================ J. AUDIO PLAYER COMPONENT ========================================================================= */ .tsi-audio-player { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--tsi-space-3); padding: var(--tsi-space-3) var(--tsi-space-4); background: var(--tsi-glass-bg); backdrop-filter: blur(var(--tsi-glass-blur)); -webkit-backdrop-filter: blur(var(--tsi-glass-blur)); border: 1px solid var(--tsi-glass-border); border-radius: var(--tsi-radius-lg); } .tsi-audio-player__play-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--tsi-radius-round); background: linear-gradient(135deg, var(--tsi-orange), var(--tsi-orange-bright)); color: var(--tsi-text-inverse); border: none; cursor: pointer; flex-shrink: 0; transition: all var(--tsi-duration-fast) var(--tsi-ease); } .tsi-audio-player__play-btn:hover { box-shadow: var(--tsi-glow-orange); transform: scale(1.05); } .tsi-audio-player__play-btn:active { transform: scale(0.95); } .tsi-audio-player__waveform { min-width: 0; height: 40px; flex: 1; } .tsi-audio-player__time { font-family: var(--tsi-font-mono); font-size: var(--tsi-text-xs); color: var(--tsi-text-muted); white-space: nowrap; } .tsi-audio-player__volume { display: flex; align-items: center; gap: var(--tsi-space-1); } .tsi-audio-player__volume input[type="range"] { -webkit-appearance: none; appearance: none; width: 64px; height: 4px; background: var(--tsi-bg-active); border-radius: var(--tsi-radius-full); outline: none; } .tsi-audio-player__volume input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: var(--tsi-radius-round); background: var(--tsi-orange); cursor: pointer; } .tsi-audio-player__volume input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: var(--tsi-radius-round); background: var(--tsi-orange); border: none; cursor: pointer; } .tsi-audio-player__credit { grid-column: 1 / -1; font-size: var(--tsi-text-xs); color: var(--tsi-text-dim); padding-top: var(--tsi-space-1); border-top: 1px solid var(--tsi-border-subtle); } /* ============================================================================ K. SKELETON LOADING ========================================================================= */ @keyframes tsi-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .tsi-skeleton { background: linear-gradient( 90deg, var(--tsi-bg-raised) 25%, var(--tsi-bg-hover) 50%, var(--tsi-bg-raised) 75% ); background-size: 200% 100%; animation: tsi-shimmer 1.5s ease-in-out infinite; border-radius: var(--tsi-radius-sm); pointer-events: none; user-select: none; } .tsi-skeleton-text { height: 1em; width: 80%; margin-bottom: 0.5em; } .tsi-skeleton-title { height: 1.5em; width: 60%; margin-bottom: 0.75em; } .tsi-skeleton-avatar { width: 48px; height: 48px; border-radius: var(--tsi-radius-round); } .tsi-skeleton-card { height: 160px; width: 100%; border-radius: var(--tsi-radius-lg); } /* ============================================================================ L. TOAST / NOTIFICATION ========================================================================= */ @keyframes tsi-toast-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes tsi-toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } .tsi-toast-container { position: fixed; bottom: var(--tsi-space-6); right: var(--tsi-space-6); z-index: var(--tsi-z-toast); display: flex; flex-direction: column; gap: var(--tsi-space-2); pointer-events: none; max-width: 400px; } .tsi-toast { display: flex; align-items: flex-start; gap: var(--tsi-space-3); padding: var(--tsi-space-3) var(--tsi-space-4); background: var(--tsi-glass-bg); backdrop-filter: blur(var(--tsi-glass-blur)); -webkit-backdrop-filter: blur(var(--tsi-glass-blur)); border: 1px solid var(--tsi-glass-border); border-left: 4px solid var(--tsi-status-info); border-radius: var(--tsi-radius-md); box-shadow: var(--tsi-shadow-lg); color: var(--tsi-text); font-size: var(--tsi-text-sm); pointer-events: auto; animation: tsi-toast-in 300ms var(--tsi-ease) forwards, tsi-toast-out 300ms var(--tsi-ease) 4s forwards; } .tsi-toast--success { border-left-color: var(--tsi-status-success); } .tsi-toast--error { border-left-color: var(--tsi-status-error); } .tsi-toast--warning { border-left-color: var(--tsi-status-warning); } .tsi-toast--info { border-left-color: var(--tsi-status-info); } /* ============================================================================ M. MODAL ========================================================================= */ @keyframes tsi-modal-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes tsi-modal-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .tsi-modal-overlay { position: fixed; inset: 0; z-index: var(--tsi-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--tsi-space-6); background: rgba(0, 0, 0, 0.7); animation: tsi-modal-overlay-in 200ms var(--tsi-ease); } .tsi-modal { background: var(--tsi-glass-bg-light); backdrop-filter: blur(var(--tsi-glass-blur)); -webkit-backdrop-filter: blur(var(--tsi-glass-blur)); border: 1px solid var(--tsi-glass-border); border-radius: var(--tsi-radius-xl); box-shadow: var(--tsi-shadow-xl); width: 100%; max-width: 600px; max-height: 80vh; overflow-y: auto; animation: tsi-modal-scale-in 200ms var(--tsi-ease); } .tsi-modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--tsi-space-3); padding: var(--tsi-space-5) var(--tsi-space-6); border-bottom: 1px solid var(--tsi-border); } .tsi-modal-header h2, .tsi-modal-header h3 { margin: 0; flex: 1; } .tsi-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; color: var(--tsi-text-muted); font-size: var(--tsi-text-xl); cursor: pointer; border-radius: var(--tsi-radius-md); transition: all var(--tsi-duration-fast) var(--tsi-ease); } .tsi-modal-close:hover { background: var(--tsi-bg-hover); color: var(--tsi-text); } .tsi-modal-body { padding: var(--tsi-space-6); } .tsi-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--tsi-space-3); padding: var(--tsi-space-4) var(--tsi-space-6); border-top: 1px solid var(--tsi-border); } /* ============================================================================ N. STATS / METRIC DISPLAY ========================================================================= */ .tsi-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--tsi-space-1); } .tsi-stat-value { font-size: var(--tsi-text-3xl); font-weight: var(--tsi-weight-bold); color: var(--tsi-orange); line-height: 1; } .tsi-stat-label { font-size: var(--tsi-text-sm); color: var(--tsi-text-muted); } .tsi-stat-row { display: flex; align-items: flex-start; justify-content: center; gap: var(--tsi-space-8); flex-wrap: wrap; } /* ============================================================================ O. GRID UTILITIES ========================================================================= */ .tsi-grid { display: grid; gap: var(--tsi-space-4); } .tsi-grid-2 { grid-template-columns: repeat(2, 1fr); } .tsi-grid-3 { grid-template-columns: repeat(3, 1fr); } .tsi-grid-4 { grid-template-columns: repeat(4, 1fr); } /* ============================================================================ P. FLEX UTILITIES ========================================================================= */ .tsi-flex { display: flex; } .tsi-flex-center { display: flex; align-items: center; justify-content: center; } .tsi-flex-between { display: flex; align-items: center; justify-content: space-between; } .tsi-flex-col { display: flex; flex-direction: column; } .tsi-flex-wrap { flex-wrap: wrap; } .tsi-gap-1 { gap: var(--tsi-space-1); } .tsi-gap-2 { gap: var(--tsi-space-2); } .tsi-gap-3 { gap: var(--tsi-space-3); } .tsi-gap-4 { gap: var(--tsi-space-4); } .tsi-gap-5 { gap: var(--tsi-space-5); } .tsi-gap-6 { gap: var(--tsi-space-6); } .tsi-gap-8 { gap: var(--tsi-space-8); } /* ============================================================================ Q. SPACING UTILITIES ========================================================================= */ /* Padding */ .tsi-p-1 { padding: var(--tsi-space-1); } .tsi-p-2 { padding: var(--tsi-space-2); } .tsi-p-3 { padding: var(--tsi-space-3); } .tsi-p-4 { padding: var(--tsi-space-4); } .tsi-p-5 { padding: var(--tsi-space-5); } .tsi-p-6 { padding: var(--tsi-space-6); } .tsi-p-8 { padding: var(--tsi-space-8); } /* Margin */ .tsi-m-1 { margin: var(--tsi-space-1); } .tsi-m-2 { margin: var(--tsi-space-2); } .tsi-m-3 { margin: var(--tsi-space-3); } .tsi-m-4 { margin: var(--tsi-space-4); } .tsi-m-5 { margin: var(--tsi-space-5); } .tsi-m-6 { margin: var(--tsi-space-6); } .tsi-m-8 { margin: var(--tsi-space-8); } /* Margin-top */ .tsi-mt-1 { margin-top: var(--tsi-space-1); } .tsi-mt-2 { margin-top: var(--tsi-space-2); } .tsi-mt-3 { margin-top: var(--tsi-space-3); } .tsi-mt-4 { margin-top: var(--tsi-space-4); } .tsi-mt-5 { margin-top: var(--tsi-space-5); } .tsi-mt-6 { margin-top: var(--tsi-space-6); } .tsi-mt-8 { margin-top: var(--tsi-space-8); } /* Margin-bottom */ .tsi-mb-1 { margin-bottom: var(--tsi-space-1); } .tsi-mb-2 { margin-bottom: var(--tsi-space-2); } .tsi-mb-3 { margin-bottom: var(--tsi-space-3); } .tsi-mb-4 { margin-bottom: var(--tsi-space-4); } .tsi-mb-5 { margin-bottom: var(--tsi-space-5); } .tsi-mb-6 { margin-bottom: var(--tsi-space-6); } .tsi-mb-8 { margin-bottom: var(--tsi-space-8); } /* ============================================================================ R. TEXT UTILITIES ========================================================================= */ /* Sizes */ .tsi-text-xs { font-size: var(--tsi-text-xs); } .tsi-text-sm { font-size: var(--tsi-text-sm); } .tsi-text-base { font-size: var(--tsi-text-base); } .tsi-text-lg { font-size: var(--tsi-text-lg); } .tsi-text-xl { font-size: var(--tsi-text-xl); } .tsi-text-2xl { font-size: var(--tsi-text-2xl); } .tsi-text-3xl { font-size: var(--tsi-text-3xl); } .tsi-text-4xl { font-size: var(--tsi-text-4xl); } .tsi-text-5xl { font-size: var(--tsi-text-5xl); } /* Colors */ .tsi-text-muted { color: var(--tsi-text-muted); } .tsi-text-orange { color: var(--tsi-orange); } .tsi-text-green { color: var(--tsi-green-soft); } .tsi-text-red { color: var(--tsi-red); } .tsi-text-blue { color: var(--tsi-blue); } .tsi-text-gold { color: var(--tsi-gold); } /* Alignment */ .tsi-text-center { text-align: center; } .tsi-text-right { text-align: right; } .tsi-text-left { text-align: left; } /* Weight */ .tsi-text-bold { font-weight: var(--tsi-weight-bold); } .tsi-text-semibold { font-weight: var(--tsi-weight-semibold); } .tsi-text-black { font-weight: var(--tsi-weight-black); } /* Special */ .tsi-text-mono { font-family: var(--tsi-font-mono); } .tsi-text-uppercase { text-transform: uppercase; letter-spacing: 0.08em; } /* ============================================================================ S. MICRO-INTERACTION KEYFRAMES ========================================================================= */ @keyframes tsi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes tsi-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes tsi-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes tsi-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes tsi-slide-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes tsi-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================================================ T. SCROLL-DRIVEN ANIMATIONS ========================================================================= */ @supports (animation-timeline: scroll()) { .tsi-scroll-fade-in { animation: tsi-scroll-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; } @keyframes tsi-scroll-reveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } } /* ============================================================================ U. ACHIEVEMENT CELEBRATION ========================================================================= */ @keyframes tsi-celebrate { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); } 40% { transform: scale(1.2); box-shadow: 0 0 30px 8px rgba(255, 215, 0, 0.6); } 60% { transform: scale(1.1); box-shadow: 0 0 20px 4px rgba(255, 215, 0, 0.3); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); } } .tsi-celebrate { animation: tsi-celebrate 600ms var(--tsi-ease-spring); } /* ============================================================================ V. RESPONSIVE BREAKPOINTS ========================================================================= */ /* Tablet (768px) */ @media (max-width: 768px) { .tsi-grid-3 { grid-template-columns: repeat(2, 1fr); } .tsi-grid-4 { grid-template-columns: repeat(2, 1fr); } .tsi-stat-row { gap: var(--tsi-space-5); } .tsi-audio-player { grid-template-columns: auto 1fr auto; } .tsi-audio-player__volume { grid-column: 1 / -1; justify-content: flex-end; } } /* Small tablet / large phone (640px) */ @media (max-width: 640px) { /* Modal becomes bottom sheet */ .tsi-modal-overlay { align-items: flex-end; padding: 0; } .tsi-modal { max-width: 100%; max-height: 90vh; border-radius: var(--tsi-radius-xl) var(--tsi-radius-xl) 0 0; animation: tsi-modal-slide-up 300ms var(--tsi-ease); } @keyframes tsi-modal-slide-up { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } .tsi-toast-container { left: var(--tsi-space-3); right: var(--tsi-space-3); bottom: var(--tsi-space-3); max-width: 100%; } } /* Mobile (480px) */ @media (max-width: 480px) { body { font-size: var(--tsi-text-sm); } .tsi-grid-2, .tsi-grid-3, .tsi-grid-4 { grid-template-columns: 1fr; } .tsi-card { padding: var(--tsi-space-4); border-radius: var(--tsi-radius-md); } .tsi-card:hover { transform: none; } .tsi-btn-lg { padding: var(--tsi-space-2) var(--tsi-space-5); font-size: var(--tsi-text-base); } .tsi-stat-value { font-size: var(--tsi-text-2xl); } .tsi-stat-row { gap: var(--tsi-space-4); } .tsi-modal-header, .tsi-modal-body, .tsi-modal-footer { padding-left: var(--tsi-space-4); padding-right: var(--tsi-space-4); } h1 { font-size: var(--tsi-text-2xl); } h2 { font-size: var(--tsi-text-xl); } h3 { font-size: var(--tsi-text-lg); } }