/* ============================================================================
PREROLLTRACKER DESIGN SYSTEM - polish-system.css
Version: 1.0
This shared CSS library provides the complete design system for all 17 pages
of PreRollTracker. It implements the polish standards from finished_goods.html.
Usage:
Sections:
1. Design Tokens
2. Typography
3. Grain Texture Overlay
4. Glassmorphism
5. 3-State Tactile Buttons
6. 5-Level Shadow System
7. Animation Library
8. Stagger Delays
9. Accessibility (Reduced Motion)
============================================================================ */
/* ============================================================================
1. DESIGN TOKENS
CSS custom properties for consistent theming across all pages
============================================================================ */
:root {
/* Color Palette - Strategic solid vs RGBA usage */
--color-bg-primary: #0f0f0f;
--color-bg-secondary: #1a1a1a;
--color-bg-tertiary: #2d2d2d;
--color-accent-green: #4CAF50;
--color-accent-green-light: #81C784;
--color-accent-green-lighter: #A5D6A7;
--color-accent-green-dark: #2E7D32;
--color-accent-orange: #FF9800;
--color-accent-orange-light: #FFB74D;
--color-accent-orange-dark: #E65100;
--color-accent-red: #f44336;
--color-accent-red-light: #E57373;
--color-accent-red-dark: #D84315;
--color-accent-purple: #9C27B0;
--color-accent-purple-light: #CE93D8;
--color-accent-purple-dark: #7B1FA2;
--color-accent-yellow: #FFC107;
--color-accent-yellow-light: #FFF59D;
--color-accent-yellow-dark: #F57F17;
--color-text-primary: #f5f5f5;
--color-text-secondary: #888;
--color-text-tertiary: #666;
/* Glass effect colors (RGBA for layering) */
--glass-white-5: rgba(255, 255, 255, 0.05);
--glass-white-8: rgba(255, 255, 255, 0.08);
--glass-white-10: rgba(255, 255, 255, 0.1);
--glass-white-15: rgba(255, 255, 255, 0.15);
--glass-white-20: rgba(255, 255, 255, 0.2);
--glass-black-20: rgba(0, 0, 0, 0.2);
--glass-black-30: rgba(0, 0, 0, 0.3);
/* Spacing System */
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 1.5rem; /* 24px */
--spacing-xl: 2rem; /* 32px */
--spacing-xxl: 3rem; /* 48px */
/* Border Radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-pill: 25px;
/* Transitions */
--transition-fast: 0.15s ease;
--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================================================
2. TYPOGRAPHY
Work Sans (UI) + JetBrains Mono (code/data) with responsive fluid scaling
============================================================================ */
/* Import Google Fonts - Add to if not already present:
*/
body {
font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 500;
line-height: 1.6;
color: var(--color-text-primary);
}
/* Headings with fluid scaling */
h1, .text-h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
}
h2, .text-h2 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.3;
}
h3, .text-h3 {
font-size: clamp(1.2rem, 3vw, 1.8rem);
font-weight: 700;
line-height: 1.4;
}
/* Gradient text effect (for hero titles) */
.text-gradient-green {
background: linear-gradient(45deg, #4CAF50, #81C784, #A5D6A7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Monospace for data/code */
.text-mono {
font-family: 'JetBrains Mono', 'Courier New', monospace;
letter-spacing: 0.5px;
}
/* Font weights */
.text-light { font-weight: 300; }
.text-normal { font-weight: 500; }
.text-bold { font-weight: 700; }
.text-black { font-weight: 900; }
/* Colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-accent { color: var(--color-accent-green-light); }
/* ============================================================================
3. GRAIN TEXTURE OVERLAY
Subtle SVG noise for organic depth (0.04 opacity)
============================================================================ */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.04;
pointer-events: none;
z-index: 9999;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
/* Usage: Already applied to body, no additional classes needed */
/* ============================================================================
4. GLASSMORPHISM
Frosted glass effects with backdrop blur
============================================================================ */
.glass {
background: var(--glass-white-8);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-white-10);
}
.glass-strong {
background: var(--glass-white-10);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-white-15);
}
.glass-subtle {
background: var(--glass-white-5);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-white-8);
}
/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(20px)) {
.glass, .glass-strong, .glass-subtle {
background: rgba(30, 30, 30, 0.95);
}
}
/* Usage examples:
Glass card content
*/
/* ============================================================================
5. 3-STATE TACTILE BUTTONS
Rest → Hover → Active states with shadows + transforms
============================================================================ */
.btn {
padding: 0.75rem 1.5rem;
background: var(--glass-white-10);
color: var(--color-text-primary);
border: 1px solid var(--glass-white-20);
border-radius: var(--radius-pill);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all var(--transition-normal);
text-decoration: none;
display: inline-block;
/* Rest state: Subtle depth */
box-shadow: 0 2px 8px rgba(0,0,0,0.2),
inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn:hover {
background: var(--glass-white-20);
transform: translateY(-2px);
/* Hover state: Elevated depth */
box-shadow: 0 4px 12px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn:active {
transform: translateY(0);
/* Active state: Pressed depth */
box-shadow: 0 1px 4px rgba(0,0,0,0.2),
inset 0 1px 0 rgba(255,255,255,0.1);
}
/* Primary button variant (green) */
.btn-primary {
background: var(--color-accent-green);
color: #ffffff;
border-color: var(--color-accent-green);
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3),
inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-primary:hover {
background: #66BB6A;
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4),
inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-primary:active {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3),
inset 0 1px 0 rgba(255,255,255,0.2);
}
/* Warning button variant (orange) */
.btn-warning {
background: rgba(255, 152, 0, 0.2);
color: var(--color-accent-orange);
border-color: rgba(255, 152, 0, 0.3);
}
.btn-warning:hover {
background: rgba(255, 152, 0, 0.3);
}
/* Danger button variant (red) */
.btn-danger {
background: rgba(244, 67, 54, 0.2);
color: var(--color-accent-red);
border-color: rgba(244, 67, 54, 0.3);
}
.btn-danger:hover {
background: rgba(244, 67, 54, 0.3);
}
/* Small button size */
.btn-sm {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
border-radius: 16px;
}
/* Large button size */
.btn-lg {
padding: 1rem 2rem;
font-size: 1.1rem;
}
/* Icon button (circular) */
.btn-icon {
padding: 0.5rem;
border-radius: 50%;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Disabled state */
.btn:disabled, .btn.disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}
/* ============================================================================
6. 5-LEVEL SHADOW SYSTEM
Layered depth from subtle to modal overlay
============================================================================ */
/* Level 1: Subtle - Flat cards at rest */
.shadow-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.1),
0 1px 2px rgba(0,0,0,0.06);
}
/* Level 2: Elevated - Hovered cards, elevated panels */
.shadow-2 {
box-shadow: 0 4px 12px rgba(0,0,0,0.15),
0 2px 4px rgba(0,0,0,0.08);
}
/* Level 3: Deep - Dropdowns, popovers, active elements */
.shadow-3 {
box-shadow: 0 8px 24px rgba(0,0,0,0.25),
0 4px 8px rgba(0,0,0,0.12);
}
/* Level 4: Modal - Dialogs, overlays */
.shadow-4 {
box-shadow: 0 16px 48px rgba(0,0,0,0.4),
0 8px 16px rgba(0,0,0,0.15);
}
/* Level 5: Pressed - Inset for active buttons */
.shadow-pressed {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.3),
inset 0 1px 2px rgba(0,0,0,0.2);
}
/* Glow effect (for focus states) */
.shadow-glow-green {
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}
.shadow-glow-orange {
box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
}
.shadow-glow-red {
box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2);
}
/* ============================================================================
7. ANIMATION LIBRARY
Reusable keyframe animations for entrances, interactions, and feedback
============================================================================ */
/* Fade In - Simple opacity transition */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in {
animation: fadeIn 0.3s ease;
}
/* Slide Up - Bottom to top entrance */
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-slide-up {
animation: slideUp 0.4s ease;
}
/* Slide In - Right to left entrance */
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-slide-in {
animation: slideIn 0.3s ease;
}
/* Slide Out - Left to right exit */
@keyframes slideOut {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(-100px);
}
}
.animate-slide-out {
animation: slideOut 0.3s ease;
}
/* Card Entrance - Combined opacity + translateY + scale */
@keyframes cardEntrance {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.animate-card-entrance {
animation: cardEntrance 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
/* Spin - Loading indicator */
@keyframes spin {
to { transform: rotate(360deg); }
}
.animate-spin {
animation: spin 0.8s linear infinite;
}
/* Rotate Gear - Subtle gear rotation */
@keyframes rotateGear {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
}
.animate-rotate-gear {
animation: rotateGear 1.5s ease-in-out infinite;
}
/* Pulse - Attention-grabbing pulse */
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
.animate-pulse {
animation: pulse 2s ease-in-out infinite;
}
/* Bounce - Success feedback */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.animate-bounce {
animation: bounce 0.6s ease;
}
/* ============================================================================
8. STAGGER DELAYS
50ms increment delays for child elements (use with nth-child)
============================================================================ */
/* Stagger pattern for card grids */
.stagger-children > *:nth-child(1) { animation-delay: 0s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(n+9) { animation-delay: 0.4s; }
/* Usage: Apply .stagger-children to parent container
*/
/* ============================================================================
9. ACCESSIBILITY - REDUCED MOTION SUPPORT
Respects user's prefers-reduced-motion OS setting
============================================================================ */
@media (prefers-reduced-motion: reduce) {
/* Disable all animations */
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* Remove transforms that might cause motion */
.btn:hover,
.btn-primary:hover {
transform: none !important;
}
/* Keep focus states visible but remove motion */
*:focus {
transition: none !important;
}
}
/* ============================================================================
10. UTILITY CLASSES
Common layout and styling patterns
============================================================================ */
/* Layout */
.container {
position: relative;
z-index: 2;
max-width: 1400px;
margin: 0 auto;
padding: var(--spacing-md);
}
/* Flexbox utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-wrap { flex-wrap: wrap; }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
/* Grid utilities */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* Spacing */
.m-0 { margin: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
/* Border radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-full { border-radius: 50%; }
/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
/* Common card pattern */
.card {
background: var(--glass-white-8);
border-radius: var(--radius-lg);
padding: var(--spacing-md);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-white-10);
transition: all var(--transition-normal);
}
.card:hover {
transform: translateY(-6px) scale(1.02);
border-color: rgba(76, 175, 80, 0.3);
box-shadow: 0 12px 40px rgba(0,0,0,0.4),
0 0 0 1px rgba(76, 175, 80, 0.2);
}
/* Accent border technique */
.card-accent-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-accent-green), var(--color-accent-green-light));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Input fields with focus glow */
.input {
padding: 0.75rem 1rem;
background: var(--glass-white-10);
border: 1px solid var(--glass-white-20);
border-radius: var(--radius-pill);
color: var(--color-text-primary);
font-size: 1rem;
transition: all var(--transition-normal);
}
.input:focus {
outline: none;
border-color: var(--color-accent-green);
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}
.input::placeholder {
color: var(--color-text-secondary);
}
/* Loading spinner */
.spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.spinner-sm {
width: 20px;
height: 20px;
border-width: 2px;
}
/* Badge/pill component */
.badge {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
}
.badge-success {
background: var(--color-accent-green-dark);
color: var(--color-accent-green-lighter);
}
.badge-warning {
background: var(--color-accent-orange-dark);
color: var(--color-accent-orange-light);
}
.badge-danger {
background: var(--color-accent-red-dark);
color: var(--color-accent-red-light);
}
.badge-info {
background: rgba(33, 150, 243, 0.2);
color: #64B5F6;
}
/* Version badge - subtle pill in navigation bar */
.version-badge {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.7rem;
background: rgba(76, 175, 80, 0.1);
border: 1px solid rgba(76, 175, 80, 0.25);
border-radius: var(--radius-pill);
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 0.7rem;
font-weight: 600;
color: rgba(76, 175, 80, 0.7);
letter-spacing: 0.5px;
user-select: all;
cursor: default;
white-space: nowrap;
}
/* ============================================================================
END OF POLISH SYSTEM
File size: ~18KB (well under 50KB target)
Compatible with: All modern browsers (Chrome 90+, Firefox 88+, Safari 14+)
Integration checklist:
1. Add Google Fonts link to
2. Link this CSS file:
3. Apply utility classes to existing elements
4. Test animations with Chrome DevTools Performance
5. Verify reduced-motion behavior in OS settings
============================================================================ */