at main 53 lines 1.2 kB view raw
1:root { 2 /* Colors - Instagram-inspired dark palette */ 3 --color-bg-primary: #000000; 4 --color-bg-secondary: #121212; 5 --color-bg-elevated: #262626; 6 --color-text-primary: #fafafa; 7 --color-text-secondary: #a8a8a8; 8 --color-border: #363636; 9 --color-accent: #0095f6; 10 --color-error: #ed4956; 11 --color-heart: #ff6b81; 12 13 /* Typography */ 14 --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 15 --font-size-xs: 0.75rem; 16 --font-size-sm: 0.875rem; 17 --font-size-base: 1rem; 18 --font-weight-normal: 400; 19 --font-weight-semibold: 600; 20 21 /* Spacing */ 22 --space-xs: 0.25rem; 23 --space-sm: 0.5rem; 24 --space-md: 1rem; 25 --space-lg: 1.5rem; 26 --space-xl: 2rem; 27 28 /* Layout */ 29 --feed-max-width: 470px; 30 --border-radius: 8px; 31 --avatar-size-sm: 32px; 32 --avatar-size-md: 44px; 33} 34 35/* Global resets */ 36*, *::before, *::after { 37 box-sizing: border-box; 38 margin: 0; 39 padding: 0; 40} 41 42body { 43 font-family: var(--font-family); 44 background: var(--color-bg-primary); 45 color: var(--color-text-primary); 46 line-height: 1.5; 47 -webkit-font-smoothing: antialiased; 48} 49 50/* View Transitions - keep sticky header above transitioning content */ 51::view-transition-group(header) { 52 z-index: 100; 53}