nichoth.com
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}