/* ============================================================ KressVault Theme Engine ------------------------------------------------------------ Every color in tailwind.css is built as rgb(var(--c--) / ) so switching the `data-theme` attribute on restyles the entire app. Theme values are RGB triplets. Structural vars (bg, glass, glows, fonts, shadows) are defined per theme below. ============================================================ */ :root { /* palette — cyber (default). All shades defined so nothing can be undefined. */ --c-green-50: 224 255 238; --c-green-100: 178 255 214; --c-green-200: 112 255 178; --c-green-300: 79 255 150; --c-green-400: 46 255 133; --c-green-500: 0 255 117; --c-green-600: 0 204 94; --c-green-700: 0 158 71; --c-green-800: 0 107 48; --c-green-900: 0 61 27; --c-green-950: 0 30 13; --c-cyan-50: 224 250 255; --c-cyan-100: 178 242 255; --c-cyan-200: 112 232 255; --c-cyan-300: 80 238 255; --c-cyan-400: 51 232 255; --c-cyan-500: 0 229 255; --c-cyan-600: 0 184 204; --c-cyan-700: 0 138 153; --c-cyan-800: 0 92 102; --c-cyan-900: 0 46 51; --c-cyan-950: 0 23 26; --c-red-50: 255 235 238; --c-red-100: 255 204 211; --c-red-200: 255 163 177; --c-red-300: 255 143 163; --c-red-400: 255 92 119; --c-red-500: 255 51 85; --c-red-600: 204 41 68; --c-red-700: 153 31 51; --c-red-800: 102 20 34; --c-red-900: 51 10 17; --c-red-950: 26 5 8; --c-blue-50: 232 238 255; --c-blue-100: 204 218 255; --c-blue-200: 153 184 255; --c-blue-300: 128 166 255; --c-blue-400: 107 155 255; --c-blue-500: 68 136 255; --c-blue-600: 54 109 204; --c-blue-700: 41 82 153; --c-blue-800: 27 54 102; --c-blue-900: 13 27 51; --c-blue-950: 7 13 26; --c-yellow-50: 255 250 224; --c-yellow-100: 255 240 178; --c-yellow-200: 255 230 112; --c-yellow-300: 255 224 102; --c-yellow-400: 255 217 64; --c-yellow-500: 234 179 8; --c-yellow-600: 201 148 8; --c-yellow-700: 154 115 6; --c-yellow-800: 102 77 4; --c-yellow-900: 51 38 2; --c-yellow-950: 26 19 1; --c-purple-50: 250 240 255; --c-purple-100: 243 217 255; --c-purple-200: 233 181 255; --c-purple-300: 216 143 252; --c-purple-400: 196 120 252; --c-purple-500: 168 85 247; --c-purple-600: 147 51 234; --c-purple-700: 126 34 206; --c-purple-800: 88 28 135; --c-purple-900: 59 7 100; --c-purple-950: 30 4 51; --c-orange-50: 255 247 237; --c-orange-100: 255 237 213; --c-orange-200: 254 215 170; --c-orange-300: 253 186 116; --c-orange-400: 251 146 60; --c-orange-500: 249 115 22; --c-orange-600: 234 88 12; --c-orange-700: 194 65 12; --c-orange-800: 154 52 18; --c-orange-900: 124 45 18; --c-orange-950: 67 20 7; --c-amber-50: 255 251 235; --c-amber-100: 254 243 199; --c-amber-200: 253 230 138; --c-amber-300: 252 211 77; --c-amber-400: 251 191 36; --c-amber-500: 245 158 11; --c-amber-600: 217 119 6; --c-amber-700: 180 83 9; --c-amber-800: 146 64 14; --c-amber-900: 120 53 15; --c-amber-950: 69 26 3; /* structure */ --bg: #050505; --grid-image: linear-gradient(rgba(0,255,117,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,117,0.04) 1px, transparent 1px); --grid-size: 40px 40px; --glass-bg: rgba(0,8,4,0.35); --sheen-1: rgba(0,255,117,0.05); --sheen-2: rgba(0,229,255,0.06); --bar-bg: rgba(0,8,4,0.6); --bar-bg-2: rgba(0,8,4,0.5); --input-bg: rgba(0,0,0,0.5); --input-border: rgba(0,255,117,0.15); --input-border-focus: rgba(0,255,117,0.5); --shadow-primary: rgba(0,255,117,0.3); --shadow-primary-soft: rgba(0,255,117,0.06); --shadow-primary-strong: rgba(0,255,117,0.8); --shadow-cyan-soft: rgba(0,229,255,0.06); --shadow-danger: rgba(255,51,85,0.5); --shadow-danger-strong: rgba(255,0,60,0.8); --shadow-warn-strong: rgba(255,200,0,0.8); --ambient-1: rgba(0,255,117,0.05); --ambient-2: rgba(0,229,255,0.04); --ambient-3: rgba(68,136,255,0.03); --ambient-4: rgba(255,51,85,0.03); --scanline: rgba(0,0,0,0.15); --nav-hover: #ffffff; --input-text: rgb(var(--c-green-500)); --glow-primary: rgba(0,255,117,0.9); --glow-cyan: rgba(0,229,255,0.9); --glow-red: rgba(255,51,85,0.9); --glow-blue: rgba(68,136,255,0.9); --font-body: 'Share Tech Mono', monospace; --font-mono: 'Share Tech Mono', monospace; } [data-theme="vintage"] { /* palette overrides */ --c-green-50: 224 255 238; --c-green-100: 178 255 214; --c-green-200: 112 255 178; --c-green-300: 255 227 163; --c-green-400: 255 210 122; --c-green-500: 255 176 0; --c-green-600: 209 144 0; --c-green-700: 158 109 0; --c-green-800: 97 67 0; --c-green-900: 58 40 6; --c-green-950: 0 30 13; --c-cyan-50: 224 250 255; --c-cyan-100: 178 242 255; --c-cyan-200: 112 232 255; --c-cyan-300: 255 178 122; --c-cyan-400: 255 138 60; --c-cyan-500: 255 122 0; --c-cyan-600: 209 100 0; --c-cyan-700: 158 76 0; --c-cyan-800: 97 46 0; --c-cyan-900: 51 24 0; --c-cyan-950: 0 23 26; --c-red-50: 255 235 238; --c-red-100: 255 204 211; --c-red-200: 255 163 177; --c-red-300: 255 154 138; --c-red-400: 255 122 102; --c-red-500: 255 92 77; --c-red-600: 209 75 63; --c-red-700: 158 57 48; --c-red-800: 97 35 29; --c-red-900: 51 18 15; --c-red-950: 26 5 8; --c-blue-50: 232 238 255; --c-blue-100: 204 218 255; --c-blue-200: 153 184 255; --c-blue-300: 168 200 255; --c-blue-400: 122 168 240; --c-blue-500: 92 138 230; --c-blue-600: 75 113 189; --c-blue-700: 57 86 143; --c-blue-800: 35 52 87; --c-blue-900: 19 27 46; --c-blue-950: 7 13 26; --c-yellow-50: 255 250 224; --c-yellow-100: 255 240 178; --c-yellow-200: 255 230 112; --c-yellow-300: 255 227 163; --c-yellow-400: 255 210 122; --c-yellow-500: 255 200 77; --c-yellow-600: 209 164 63; --c-yellow-700: 158 124 48; --c-yellow-800: 97 76 29; --c-yellow-900: 51 40 6; --c-yellow-950: 26 19 1; --c-purple-50: 250 240 255; --c-purple-100: 243 217 255; --c-purple-200: 233 181 255; --c-purple-300: 214 175 253; --c-purple-400: 203 154 253; --c-purple-500: 192 132 252; --c-purple-600: 168 85 247; --c-purple-700: 119 82 156; --c-purple-800: 73 50 96; --c-purple-900: 29 20 38; --c-purple-950: 30 4 51; --c-orange-50: 255 247 237; --c-orange-100: 255 237 213; --c-orange-200: 254 215 170; --c-orange-300: 255 179 128; --c-orange-400: 255 159 95; --c-orange-500: 255 138 60; --c-orange-600: 224 122 48; --c-orange-700: 158 86 37; --c-orange-800: 97 52 23; --c-orange-900: 38 21 9; --c-orange-950: 67 20 7; --c-amber-50: 255 251 235; --c-amber-100: 254 243 199; --c-amber-200: 253 230 138; --c-amber-300: 255 204 89; --c-amber-400: 255 210 122; --c-amber-500: 255 176 0; --c-amber-600: 209 144 0; --c-amber-700: 158 109 0; --c-amber-800: 97 67 0; --c-amber-900: 38 26 0; --c-amber-950: 69 26 3; /* structure */ --bg: #161005; --grid-image: linear-gradient(rgba(255,176,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,176,0,0.05) 1px, transparent 1px); --grid-size: 40px 40px; --glass-bg: rgba(40,30,10,0.4); --sheen-1: rgba(255,176,0,0.05); --sheen-2: rgba(255,138,60,0.05); --bar-bg: rgba(32,24,8,0.6); --bar-bg-2: rgba(32,24,8,0.5); --input-bg: rgba(20,14,4,0.6); --input-border: rgba(255,176,0,0.18); --input-border-focus: rgba(255,176,0,0.55); --shadow-primary: rgba(255,176,0,0.35); --shadow-primary-soft: rgba(255,176,0,0.07); --shadow-primary-strong: rgba(255,176,0,0.8); --shadow-cyan-soft: rgba(255,138,60,0.07); --shadow-danger: rgba(255,92,77,0.5); --shadow-danger-strong: rgba(255,60,40,0.8); --shadow-warn-strong: rgba(255,200,0,0.8); --ambient-1: rgba(255,176,0,0.05); --ambient-2: rgba(255,138,60,0.04); --ambient-3: rgba(122,168,240,0.03); --ambient-4: rgba(255,92,77,0.03); --scanline: rgba(0,0,0,0.18); --nav-hover: #fff3d6; --input-text: rgb(var(--c-green-500)); --glow-primary: rgba(255,176,0,0.9); --glow-cyan: rgba(255,138,60,0.9); --glow-red: rgba(255,92,77,0.9); --glow-blue: rgba(122,168,240,0.9); --font-body: 'Share Tech Mono', monospace; --font-mono: 'Share Tech Mono', monospace; } [data-theme="midnight"] { /* palette overrides */ --c-green-50: 224 255 238; --c-green-100: 178 255 214; --c-green-200: 112 255 178; --c-green-300: 142 232 248; --c-green-400: 79 216 240; --c-green-500: 34 211 238; --c-green-600: 28 173 195; --c-green-700: 21 131 148; --c-green-800: 13 80 90; --c-green-900: 7 42 48; --c-green-950: 0 30 13; --c-cyan-50: 224 250 255; --c-cyan-100: 178 242 255; --c-cyan-200: 112 232 255; --c-cyan-300: 147 197 253; --c-cyan-400: 96 165 250; --c-cyan-500: 56 189 248; --c-cyan-600: 46 155 203; --c-cyan-700: 35 117 154; --c-cyan-800: 21 72 94; --c-cyan-900: 11 38 50; --c-cyan-950: 0 23 26; --c-red-50: 255 235 238; --c-red-100: 255 204 211; --c-red-200: 255 163 177; --c-red-300: 255 143 158; --c-red-400: 255 100 120; --c-red-500: 255 77 109; --c-red-600: 209 63 89; --c-red-700: 158 48 68; --c-red-800: 97 29 41; --c-red-900: 51 15 22; --c-red-950: 26 5 8; --c-blue-50: 232 238 255; --c-blue-100: 204 218 255; --c-blue-200: 153 184 255; --c-blue-300: 165 180 252; --c-blue-400: 129 140 248; --c-blue-500: 106 123 255; --c-blue-600: 87 101 209; --c-blue-700: 66 76 158; --c-blue-800: 40 47 97; --c-blue-900: 21 25 51; --c-blue-950: 7 13 26; --c-yellow-50: 255 250 224; --c-yellow-100: 255 240 178; --c-yellow-200: 255 230 112; --c-yellow-300: 255 224 138; --c-yellow-400: 255 209 102; --c-yellow-500: 244 185 66; --c-yellow-600: 200 152 54; --c-yellow-700: 151 115 41; --c-yellow-800: 93 70 25; --c-yellow-900: 51 40 6; --c-yellow-950: 26 19 1; --c-purple-50: 250 240 255; --c-purple-100: 243 217 255; --c-purple-200: 233 181 255; --c-purple-300: 198 180 252; --c-purple-400: 183 160 251; --c-purple-500: 167 139 250; --c-purple-600: 139 92 246; --c-purple-700: 104 86 155; --c-purple-800: 63 53 95; --c-purple-900: 25 21 38; --c-purple-950: 30 4 51; --c-orange-50: 255 247 237; --c-orange-100: 255 237 213; --c-orange-200: 254 215 170; --c-orange-300: 252 184 128; --c-orange-400: 252 166 95; --c-orange-500: 251 146 60; --c-orange-600: 234 122 46; --c-orange-700: 156 91 37; --c-orange-800: 95 55 23; --c-orange-900: 38 22 9; --c-orange-950: 67 20 7; --c-amber-50: 255 251 235; --c-amber-100: 254 243 199; --c-amber-200: 253 230 138; --c-amber-300: 248 192 96; --c-amber-400: 251 191 36; --c-amber-500: 245 158 11; --c-amber-600: 201 130 9; --c-amber-700: 152 98 7; --c-amber-800: 93 60 4; --c-amber-900: 37 24 2; --c-amber-950: 69 26 3; /* structure */ --bg: #060a16; --grid-image: linear-gradient(rgba(34,211,238,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,0.045) 1px, transparent 1px); --grid-size: 40px 40px; --glass-bg: rgba(10,16,32,0.5); --sheen-1: rgba(34,211,238,0.05); --sheen-2: rgba(129,140,248,0.05); --bar-bg: rgba(8,12,26,0.65); --bar-bg-2: rgba(8,12,26,0.55); --input-bg: rgba(4,8,20,0.6); --input-border: rgba(34,211,238,0.18); --input-border-focus: rgba(34,211,238,0.55); --shadow-primary: rgba(34,211,238,0.3); --shadow-primary-soft: rgba(34,211,238,0.06); --shadow-primary-strong: rgba(34,211,238,0.8); --shadow-cyan-soft: rgba(56,189,248,0.06); --shadow-danger: rgba(255,77,109,0.5); --shadow-danger-strong: rgba(255,0,60,0.8); --shadow-warn-strong: rgba(255,200,0,0.8); --ambient-1: rgba(34,211,238,0.05); --ambient-2: rgba(129,140,248,0.045); --ambient-3: rgba(56,189,248,0.04); --ambient-4: rgba(255,77,109,0.03); --scanline: rgba(0,0,0,0.16); --nav-hover: #e6f9ff; --input-text: rgb(var(--c-green-500)); --glow-primary: rgba(34,211,238,0.9); --glow-cyan: rgba(56,189,248,0.9); --glow-red: rgba(255,77,109,0.9); --glow-blue: rgba(129,140,248,0.9); --font-body: 'Space Grotesk', sans-serif; --font-mono: 'Share Tech Mono', monospace; } [data-theme="paper"] { /* palette overrides */ --c-green-50: 224 255 238; --c-green-100: 178 255 214; --c-green-200: 112 255 178; --c-green-300: 74 222 128; --c-green-400: 26 158 85; --c-green-500: 15 138 69; --c-green-600: 12 113 57; --c-green-700: 9 86 43; --c-green-800: 6 52 26; --c-green-900: 11 61 32; --c-green-950: 0 30 13; --c-cyan-50: 224 250 255; --c-cyan-100: 178 242 255; --c-cyan-200: 112 232 255; --c-cyan-300: 94 234 212; --c-cyan-400: 20 184 166; --c-cyan-500: 13 148 136; --c-cyan-600: 11 121 112; --c-cyan-700: 8 92 84; --c-cyan-800: 5 56 52; --c-cyan-900: 4 47 46; --c-cyan-950: 0 23 26; --c-red-50: 255 235 238; --c-red-100: 255 204 211; --c-red-200: 255 163 177; --c-red-300: 252 165 165; --c-red-400: 248 113 113; --c-red-500: 220 38 38; --c-red-600: 180 31 31; --c-red-700: 136 24 24; --c-red-800: 84 14 14; --c-red-900: 69 10 10; --c-red-950: 26 5 8; --c-blue-50: 232 238 255; --c-blue-100: 204 218 255; --c-blue-200: 153 184 255; --c-blue-300: 147 197 253; --c-blue-400: 96 165 250; --c-blue-500: 37 99 235; --c-blue-600: 30 81 193; --c-blue-700: 23 61 146; --c-blue-800: 14 38 89; --c-blue-900: 23 37 84; --c-blue-950: 7 13 26; --c-yellow-50: 255 250 224; --c-yellow-100: 255 240 178; --c-yellow-200: 255 230 112; --c-yellow-300: 253 224 71; --c-yellow-400: 250 204 21; --c-yellow-500: 202 138 4; --c-yellow-600: 166 113 3; --c-yellow-700: 125 86 2; --c-yellow-800: 77 52 2; --c-yellow-900: 69 49 5; --c-yellow-950: 26 19 1; --c-purple-50: 250 240 255; --c-purple-100: 243 217 255; --c-purple-200: 233 181 255; --c-purple-300: 170 127 243; --c-purple-400: 148 93 240; --c-purple-500: 124 58 237; --c-purple-600: 109 40 217; --c-purple-700: 77 36 147; --c-purple-800: 47 22 90; --c-purple-900: 19 9 36; --c-purple-950: 30 4 51; --c-orange-50: 255 247 237; --c-orange-100: 255 237 213; --c-orange-200: 254 215 170; --c-orange-300: 241 146 97; --c-orange-400: 238 118 56; --c-orange-500: 234 88 12; --c-orange-600: 194 65 12; --c-orange-700: 145 55 7; --c-orange-800: 89 33 5; --c-orange-900: 35 13 2; --c-orange-950: 67 20 7; --c-amber-50: 255 251 235; --c-amber-100: 254 243 199; --c-amber-200: 253 230 138; --c-amber-300: 248 192 96; --c-amber-400: 251 191 36; --c-amber-500: 245 158 11; --c-amber-600: 201 130 9; --c-amber-700: 152 98 7; --c-amber-800: 93 60 4; --c-amber-900: 37 24 2; --c-amber-950: 69 26 3; /* structure */ --bg: #f2f5f2; --grid-image: linear-gradient(rgba(15,138,69,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15,138,69,0.05) 1px, transparent 1px); --grid-size: 40px 40px; --glass-bg: rgba(255,255,255,0.55); --sheen-1: rgba(15,138,69,0.05); --sheen-2: rgba(13,148,136,0.05); --bar-bg: rgba(255,255,255,0.7); --bar-bg-2: rgba(255,255,255,0.6); --input-bg: rgba(255,255,255,0.8); --input-border: rgba(15,138,69,0.25); --input-border-focus: rgba(15,138,69,0.55); --shadow-primary: rgba(15,138,69,0.2); --shadow-primary-soft: rgba(15,138,69,0.05); --shadow-primary-strong: rgba(15,138,69,0.45); --shadow-cyan-soft: rgba(13,148,136,0.05); --shadow-danger: rgba(220,38,38,0.35); --shadow-danger-strong: rgba(220,38,38,0.5); --shadow-warn-strong: rgba(202,138,4,0.45); --ambient-1: rgba(15,138,69,0.04); --ambient-2: rgba(13,148,136,0.03); --ambient-3: rgba(37,99,235,0.03); --ambient-4: rgba(220,38,38,0.02); --scanline: rgba(0,0,0,0.03); --nav-hover: #0b3d20; --input-text: rgb(var(--c-green-500)); --glow-primary: rgba(15,138,69,0.35); --glow-cyan: rgba(13,148,136,0.35); --glow-red: rgba(220,38,38,0.35); --glow-blue: rgba(37,99,235,0.35); --font-body: 'Space Grotesk', sans-serif; --font-mono: 'Share Tech Mono', monospace; } [data-theme="blossom"] { /* palette overrides */ --c-green-50: 224 255 238; --c-green-100: 178 255 214; --c-green-200: 112 255 178; --c-green-300: 255 163 189; --c-green-400: 255 123 161; --c-green-500: 255 92 138; --c-green-600: 209 75 113; --c-green-700: 158 57 86; --c-green-800: 97 35 52; --c-green-900: 61 21 32; --c-green-950: 0 30 13; --c-cyan-50: 224 250 255; --c-cyan-100: 178 242 255; --c-cyan-200: 112 232 255; --c-cyan-300: 216 180 254; --c-cyan-400: 192 132 252; --c-cyan-500: 168 85 247; --c-cyan-600: 138 70 203; --c-cyan-700: 104 53 153; --c-cyan-800: 64 32 94; --c-cyan-900: 36 15 54; --c-cyan-950: 0 23 26; --c-red-50: 255 235 238; --c-red-100: 255 204 211; --c-red-200: 255 163 177; --c-red-300: 255 143 158; --c-red-400: 255 100 120; --c-red-500: 255 51 85; --c-red-600: 209 42 70; --c-red-700: 158 32 53; --c-red-800: 97 19 32; --c-red-900: 51 10 17; --c-red-950: 26 5 8; --c-blue-50: 232 238 255; --c-blue-100: 204 218 255; --c-blue-200: 153 184 255; --c-blue-300: 165 180 252; --c-blue-400: 129 140 248; --c-blue-500: 124 124 240; --c-blue-600: 102 102 197; --c-blue-700: 77 77 149; --c-blue-800: 47 47 91; --c-blue-900: 25 25 48; --c-blue-950: 7 13 26; --c-yellow-50: 255 250 224; --c-yellow-100: 255 240 178; --c-yellow-200: 255 230 112; --c-yellow-300: 255 224 138; --c-yellow-400: 255 209 102; --c-yellow-500: 244 185 66; --c-yellow-600: 200 152 54; --c-yellow-700: 151 115 41; --c-yellow-800: 93 70 25; --c-yellow-900: 51 40 6; --c-yellow-950: 26 19 1; --c-purple-50: 250 240 255; --c-purple-100: 243 217 255; --c-purple-200: 233 181 255; --c-purple-300: 214 175 253; --c-purple-400: 203 154 253; --c-purple-500: 192 132 252; --c-purple-600: 168 85 247; --c-purple-700: 119 82 156; --c-purple-800: 73 50 96; --c-purple-900: 29 20 38; --c-purple-950: 30 4 51; --c-orange-50: 255 247 237; --c-orange-100: 255 237 213; --c-orange-200: 254 215 170; --c-orange-300: 252 184 128; --c-orange-400: 252 166 95; --c-orange-500: 251 146 60; --c-orange-600: 234 122 46; --c-orange-700: 156 91 37; --c-orange-800: 95 55 23; --c-orange-900: 38 22 9; --c-orange-950: 67 20 7; --c-amber-50: 255 251 235; --c-amber-100: 254 243 199; --c-amber-200: 253 230 138; --c-amber-300: 248 192 96; --c-amber-400: 251 191 36; --c-amber-500: 245 158 11; --c-amber-600: 201 130 9; --c-amber-700: 152 98 7; --c-amber-800: 93 60 4; --c-amber-900: 37 24 2; --c-amber-950: 69 26 3; /* structure */ --bg: #120a0f; --grid-image: linear-gradient(rgba(255,92,138,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,92,138,0.05) 1px, transparent 1px); --grid-size: 40px 40px; --glass-bg: rgba(38,12,26,0.4); --sheen-1: rgba(255,92,138,0.05); --sheen-2: rgba(192,132,252,0.05); --bar-bg: rgba(30,10,20,0.6); --bar-bg-2: rgba(30,10,20,0.5); --input-bg: rgba(18,6,12,0.6); --input-border: rgba(255,92,138,0.18); --input-border-focus: rgba(255,92,138,0.55); --shadow-primary: rgba(255,92,138,0.3); --shadow-primary-soft: rgba(255,92,138,0.06); --shadow-primary-strong: rgba(255,92,138,0.8); --shadow-cyan-soft: rgba(192,132,252,0.06); --shadow-danger: rgba(255,51,85,0.5); --shadow-danger-strong: rgba(255,0,60,0.8); --shadow-warn-strong: rgba(255,200,0,0.8); --ambient-1: rgba(255,92,138,0.05); --ambient-2: rgba(192,132,252,0.045); --ambient-3: rgba(124,124,240,0.04); --ambient-4: rgba(255,51,85,0.03); --scanline: rgba(0,0,0,0.16); --nav-hover: #ffe6ef; --input-text: rgb(var(--c-green-500)); --glow-primary: rgba(255,92,138,0.9); --glow-cyan: rgba(192,132,252,0.9); --glow-red: rgba(255,51,85,0.9); --glow-blue: rgba(129,140,248,0.9); --font-body: 'Space Grotesk', sans-serif; --font-mono: 'Share Tech Mono', monospace; } [data-theme="kawaii"] { /* palette overrides */ --c-green-50: 224 255 238; --c-green-100: 178 255 214; --c-green-200: 112 255 178; --c-green-300: 255 128 200; --c-green-400: 216 27 127; --c-green-500: 255 20 147; --c-green-600: 209 16 121; --c-green-700: 158 12 91; --c-green-800: 97 8 56; --c-green-900: 61 10 34; --c-green-950: 0 30 13; --c-cyan-50: 224 250 255; --c-cyan-100: 178 242 255; --c-cyan-200: 112 232 255; --c-cyan-300: 181 138 255; --c-cyan-400: 156 99 255; --c-cyan-500: 138 77 255; --c-cyan-600: 113 63 209; --c-cyan-700: 86 48 158; --c-cyan-800: 52 29 97; --c-cyan-900: 40 20 90; --c-cyan-950: 0 23 26; --c-red-50: 255 235 238; --c-red-100: 255 204 211; --c-red-200: 255 163 177; --c-red-300: 255 122 134; --c-red-400: 255 45 63; --c-red-500: 230 0 18; --c-red-600: 189 0 15; --c-red-700: 143 0 11; --c-red-800: 87 0 7; --c-red-900: 92 10 16; --c-red-950: 26 5 8; --c-blue-50: 232 238 255; --c-blue-100: 204 218 255; --c-blue-200: 153 184 255; --c-blue-300: 133 196 255; --c-blue-400: 90 170 255; --c-blue-500: 63 155 255; --c-blue-600: 52 127 209; --c-blue-700: 39 96 158; --c-blue-800: 24 59 97; --c-blue-900: 13 42 77; --c-blue-950: 7 13 26; --c-yellow-50: 255 250 224; --c-yellow-100: 255 240 178; --c-yellow-200: 255 230 112; --c-yellow-300: 248 196 84; --c-yellow-400: 230 168 24; --c-yellow-500: 214 145 0; --c-yellow-600: 175 119 0; --c-yellow-700: 133 90 0; --c-yellow-800: 81 55 0; --c-yellow-900: 89 64 0; --c-yellow-950: 26 19 1; --c-purple-50: 250 240 255; --c-purple-100: 243 217 255; --c-purple-200: 233 181 255; --c-purple-300: 198 144 250; --c-purple-400: 184 116 248; --c-purple-500: 168 85 247; --c-purple-600: 147 51 234; --c-purple-700: 104 53 153; --c-purple-800: 64 32 94; --c-purple-900: 25 13 37; --c-purple-950: 30 4 51; --c-orange-50: 255 247 237; --c-orange-100: 255 237 213; --c-orange-200: 254 215 170; --c-orange-300: 255 169 134; --c-orange-400: 255 146 102; --c-orange-500: 255 122 69; --c-orange-600: 234 96 42; --c-orange-700: 158 76 43; --c-orange-800: 97 46 26; --c-orange-900: 38 18 10; --c-orange-950: 67 20 7; --c-amber-50: 255 251 235; --c-amber-100: 254 243 199; --c-amber-200: 253 230 138; --c-amber-300: 255 206 89; --c-amber-400: 255 194 51; --c-amber-500: 255 179 0; --c-amber-600: 209 147 0; --c-amber-700: 158 111 0; --c-amber-800: 97 68 0; --c-amber-900: 38 27 0; --c-amber-950: 69 26 3; /* structure */ --bg: #fff5f8; --grid-image: radial-gradient(rgba(255,20,147,0.10) 1.5px, transparent 1.5px); --grid-size: 26px 26px; --glass-bg: rgba(255,255,255,0.6); --sheen-1: rgba(255,20,147,0.05); --sheen-2: rgba(138,77,255,0.05); --bar-bg: rgba(255,255,255,0.78); --bar-bg-2: rgba(255,255,255,0.68); --input-bg: rgba(255,255,255,0.85); --input-border: rgba(255,20,147,0.25); --input-border-focus: rgba(255,20,147,0.5); --shadow-primary: rgba(255,20,147,0.22); --shadow-primary-soft: rgba(255,20,147,0.06); --shadow-primary-strong: rgba(255,20,147,0.45); --shadow-cyan-soft: rgba(138,77,255,0.06); --shadow-danger: rgba(230,0,18,0.35); --shadow-danger-strong: rgba(230,0,18,0.5); --shadow-warn-strong: rgba(255,179,0,0.45); --ambient-1: rgba(255,20,147,0.05); --ambient-2: rgba(138,77,255,0.04); --ambient-3: rgba(63,155,255,0.03); --ambient-4: rgba(230,0,18,0.02); --scanline: rgba(0,0,0,0.03); --nav-hover: #3d0a22; --input-text: #3d0a22; --glow-primary: rgba(255,20,147,0.35); --glow-cyan: rgba(138,77,255,0.35); --glow-red: rgba(230,0,18,0.35); --glow-blue: rgba(63,155,255,0.35); --font-body: 'Nunito', sans-serif; --font-mono: 'Share Tech Mono', monospace; } /* ============================================================ Base + components (all variable-driven) ============================================================ */ * { scrollbar-width: thin; scrollbar-color: rgb(var(--c-green-500) / 0.35) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgb(var(--c-green-500) / 0.25); border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; } body { font-family: var(--font-body); background-color: var(--bg); color: rgb(var(--c-green-500)); overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; } .grid-bg { background-image: var(--grid-image); background-size: var(--grid-size, 40px 40px); } .glow { text-shadow: 0 0 5px var(--glow-primary), 0 0 10px var(--glow-primary), 0 0 20px var(--glow-primary); } .glow-cyan { text-shadow: 0 0 5px var(--glow-cyan), 0 0 10px var(--glow-cyan), 0 0 20px var(--glow-cyan); } .glow-red { text-shadow: 0 0 5px var(--glow-red), 0 0 10px var(--glow-red), 0 0 20px var(--glow-red); } .glow-blue { text-shadow: 0 0 5px var(--glow-blue), 0 0 10px var(--glow-blue), 0 0 20px var(--glow-blue); } .text-green { color: rgb(var(--c-green-500)); } .text-red { color: rgb(var(--c-red-500)); } .text-cyan { color: rgb(var(--c-cyan-500)); } .text-blue { color: rgb(var(--c-blue-500)); } .scanlines::before { content: ""; position: fixed; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 2px, var(--scanline) 3px ); pointer-events: none; } @keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } } .flicker { animation: flicker 2s infinite; } .neon-box { border: 1px solid rgb(var(--c-green-500) / 0.3); box-shadow: 0 0 10px var(--shadow-primary), inset 0 0 10px rgb(var(--c-green-500) / 0.03); } .neon-box:hover { box-shadow: 0 0 20px var(--shadow-primary), inset 0 0 15px rgb(var(--c-green-500) / 0.05); } .neon-box-red { border-color: rgb(var(--c-red-500) / 0.3); box-shadow: 0 0 10px var(--shadow-danger); } .neon-box-red:hover { box-shadow: 0 0 20px var(--shadow-danger); } .neon-box-cyan { border-color: rgb(var(--c-cyan-500) / 0.3); box-shadow: 0 0 10px rgb(var(--c-cyan-500) / 0.3); } .neon-box-cyan:hover { box-shadow: 0 0 20px rgb(var(--c-cyan-500) / 0.3); } .neon-box-blue { border-color: rgb(var(--c-blue-500) / 0.3); box-shadow: 0 0 10px rgb(var(--c-blue-500) / 0.3); } .neon-box-blue:hover { box-shadow: 0 0 20px rgb(var(--c-blue-500) / 0.3); } .glass { position: relative; background: var(--glass-bg); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); } .glass::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient( 105deg, transparent 30%, var(--sheen-1) 40%, var(--sheen-2) 48%, var(--sheen-1) 56%, transparent 70% ); background-size: 200% 100%; animation: liquid-sweep 7s ease-in-out infinite; } @keyframes liquid-sweep { 0%, 100% { background-position: 100% 0%; } 50% { background-position: 0% 0%; } } .liquid-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 20% 30%, var(--ambient-1) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, var(--ambient-2) 0%, transparent 50%), radial-gradient(ellipse at 50% 10%, var(--ambient-3) 0%, transparent 40%), radial-gradient(ellipse at 90% 20%, var(--ambient-4) 0%, transparent 40%); animation: liquid-breathe 12s ease-in-out infinite alternate; } @keyframes liquid-breathe { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 1; transform: scale(1.05); } } /* Nav */ .nav-link { position: relative; padding: 4px 12px; font-size: 11px; letter-spacing: 0.1em; transition: all 0.2s ease; border-radius: 2px; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; transition: all 0.2s ease; transform: translateX(-50%); } .nav-link:hover::after, .nav-link.active::after { width: 70%; } .nav-link.active { font-weight: 700; } .nav-link-green { color: rgb(var(--c-green-500)); } .nav-link-green::after { background: rgb(var(--c-green-500)); } .nav-link-green:hover { color: var(--nav-hover); text-shadow: 0 0 8px var(--glow-primary); } .nav-link-cyan { color: rgb(var(--c-cyan-500)); } .nav-link-cyan::after { background: rgb(var(--c-cyan-500)); } .nav-link-cyan:hover { color: var(--nav-hover); text-shadow: 0 0 8px var(--glow-cyan); } .nav-link-red { color: rgb(var(--c-red-500)); } .nav-link-red::after { background: rgb(var(--c-red-500)); } .nav-link-red:hover { color: var(--nav-hover); text-shadow: 0 0 8px var(--glow-red); } .nav-link-blue { color: rgb(var(--c-blue-500)); } .nav-link-blue::after { background: rgb(var(--c-blue-500)); } .nav-link-blue:hover { color: var(--nav-hover); text-shadow: 0 0 8px var(--glow-blue); } .nav-link-yellow { color: rgb(var(--c-yellow-500)); } .nav-link-yellow::after { background: rgb(var(--c-yellow-500)); } .nav-link-yellow:hover { color: var(--nav-hover); text-shadow: 0 0 8px rgb(var(--c-yellow-500)); } .nav-divider { width: 1px; height: 14px; background: rgb(var(--c-green-500) / 0.15); flex-shrink: 0; } .top-utility { background: var(--bar-bg); backdrop-filter: blur(24px) saturate(1.5); border-bottom: 1px solid rgb(var(--c-green-500) / 0.06); } .top-utility input { background: var(--input-bg); border: 1px solid var(--input-border); color: rgb(var(--c-green-500)); font-family: var(--font-mono); } .top-utility input:focus { border-color: var(--input-border-focus); outline: none; box-shadow: 0 0 12px var(--shadow-primary); } .top-utility input::placeholder { color: rgb(var(--c-green-500) / 0.25); } .nav-bar { background: var(--bar-bg-2); backdrop-filter: blur(20px) saturate(1.3); border-bottom: 1px solid rgb(var(--c-green-500) / 0.08); } /* Custom glow variants used across templates (hover:glow / group-hover:glow-*). */ .hover\:glow:hover, .group:hover .group-hover\:glow { text-shadow: 0 0 5px var(--glow-primary), 0 0 10px var(--glow-primary), 0 0 20px var(--glow-primary); } .hover\:glow-cyan:hover, .group:hover .group-hover\:glow-cyan { text-shadow: 0 0 5px var(--glow-cyan), 0 0 10px var(--glow-cyan), 0 0 20px var(--glow-cyan); } .hover\:glow-red:hover, .group:hover .group-hover\:glow-red { text-shadow: 0 0 5px var(--glow-red), 0 0 10px var(--glow-red), 0 0 20px var(--glow-red); } .hover\:glow-blue:hover, .group:hover .group-hover\:glow-blue { text-shadow: 0 0 5px var(--glow-blue), 0 0 10px var(--glow-blue), 0 0 20px var(--glow-blue); } /* Theme picker */ .theme-picker { background: var(--input-bg); border: 1px solid var(--input-border); color: rgb(var(--c-green-500)); font-family: var(--font-mono); } .theme-picker:focus { outline: none; border-color: var(--input-border-focus); } .theme-picker option { background: var(--bg); color: rgb(var(--c-green-500)); } /* Light themes: darken input text so forms read well (--input-text per theme) */ input:not(.theme-picker), select, textarea { color: var(--input-text, rgb(var(--c-green-500))); } [data-theme="kawaii"] .theme-picker, [data-theme="paper"] .theme-picker { color: var(--input-text); } .theme-label { color: rgb(var(--c-green-500)); opacity: 0.45; } [data-theme="kawaii"] .theme-label, [data-theme="paper"] .theme-label { color: var(--input-text); } /* ─── UI enhancements: scrollbars, view transitions, reduced motion ─── */ /* Per-theme scrollbars (colors come from the active theme's palette) */ * { scrollbar-width: thin; scrollbar-color: rgb(var(--c-green-500) / 0.35) transparent; /* Firefox */ } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: rgb(var(--c-green-950, 2 8 5) / 0.6); } *::-webkit-scrollbar-thumb { background: rgb(var(--c-green-500) / 0.35); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-green-400) / 0.55); background-clip: padding-box; } /* View transitions (progressive enhancement — Chrome 111+/Edge, Safari 18+) */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-timing-function: ease-out; } ::view-transition-old(root) { animation-name: kt-fade-out; } ::view-transition-new(root) { animation-name: kt-fade-in; } @keyframes kt-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes kt-fade-out { from { opacity: 1; } to { opacity: 0.15; } } /* Command palette polish */ #palette-overlay input::selection { background: rgb(var(--c-green-500) / 0.35); } #palette-results a.palette-item { text-decoration: none; } /* Skeleton shimmer while load-more fetches the next page (theme-aware via CSS vars) */ .skeleton-card { position: relative; overflow: hidden; background: rgb(var(--c-green-950, 2 8 5) / 0.35); border-color: rgb(var(--c-green-500) / 0.15); } .skeleton-card::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(var(--c-green-500) / 0.10), transparent); animation: kress-shimmer 1.4s ease-in-out infinite; } .skeleton-thumb { background: rgb(var(--c-green-500) / 0.07); border: 1px solid rgb(var(--c-green-500) / 0.15); } .skeleton-line { background: rgb(var(--c-green-500) / 0.09); border-radius: 2px; } @keyframes kress-shimmer { 100% { transform: translateX(100%); } } /* The load-more BACK TO TOP chip scrolls the grid into view; keep the first row clear of the sticky header when it does. */ #video-grid, #album-grid, #model-grid, #studio-grid, #rmedia-grid, #text-grid, #rma-grid { scroll-margin-top: 7rem; } /* Respect users who prefer reduced motion: kill the decorative animation */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .flicker, .scanlines, .liquid-ambient, .glow, .glow-red, .glow-blue { animation: none !important; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }