@@ -63,6 +63,7 @@ const props = defineProps({
63
63
.content {
64
64
width : calc (100% - 7rem );
65
65
height : calc (100% - 2.5rem );
66
+ z-index : 2 ;
66
67
@media screen and (max-width : 701px ) {
67
68
width : calc (100% - 7rem );
68
69
height : calc (100% - 4rem );
@@ -101,7 +102,7 @@ const props = defineProps({
101
102
color : var (--color-theme-secondary );
102
103
}
103
104
.ticket-container :hover .specular {
104
- filter : brightness ( 0.5 ) saturate ( 2 .5 );
105
+ filter : filter( 1 ) brightness (1 .5);
105
106
}
106
107
.ticket-container :hover rect {
107
108
stroke : var (--color-theme );
@@ -137,16 +138,23 @@ svg {
137
138
border-radius : 1.25rem ;
138
139
}
139
140
.specular {
140
- opacity : 0.2 ;
141
+ opacity : 0.25 ;
141
142
left : 2rem ;
142
143
top : 1rem ;
143
144
width : calc (100% - 4rem );
144
145
height : calc (100% - 2rem );
145
- mix-blend-mode : difference ;
146
- background-image : linear-gradient (130deg , rgba (200 ,200 ,200 ,1 ) 9% , #3b2f00 10% , rgba (150 ,150 ,150 ,1 ) 30% , #3b2f00 36% , #eeddaa 57% , #3b2f00 65% , rgba (170 ,170 ,170 ,1 ) 92% );
147
- background-attachment : fixed ;
148
- background-size : 100% ;
146
+ background-image : linear-gradient (130deg , rgba (200 , 200 , 200 , 1 ) 9% , #a38719 10% , rgba (150 , 150 , 150 , 1 ) 30% , #6181ff 36% , #eeddaa 57% , #ede9ff 65% , rgb (54 115 255 ) 92% );
147
+ background-size : 150vw ;
149
148
transition : filter 0.1s ;
149
+ background-position : 0% 0% ;
150
+ background-repeat : repeat ;
151
+ filter : brightness (1.5 ) blur (1px );
152
+ /* background-position: 100% 0%; */
153
+
154
+ animation-name : bling;
155
+ animation-duration : 1ms ;
156
+ animation-direction : alternate ;
157
+ animation-timeline : scroll (root);
150
158
151
159
@media screen and (max-width : 701px ) {
152
160
width : calc (100% - 5rem );
@@ -155,8 +163,16 @@ svg {
155
163
top : 1.5rem ;
156
164
}
157
165
}
166
+ @keyframes bling {
167
+ from {
168
+ background-position : 0vw 0 ;
169
+ }
170
+ to {
171
+ background-position : 150vw 0 ;
172
+ }
173
+ }
158
174
.golden {
159
- background-image : linear-gradient (130deg , rgba (200 , 200 , 200 , 1 ) 9% , #0f69d5 10% , rgba ( 150 , 150 , 150 , 1 ) 30% , #1b43b1 36% , #7aacff 57% , #0016ff 65% , rgba (170 , 170 , 170 , 1 ) 92% );
175
+ background-image : linear-gradient (130deg , rgba (200 , 200 , 200 , 1 ) 9% , #ffc800 10% , rgb ( 255 175 0 ) 30% , #ffef00 36% , #d5cabf 57% , #ffd45e 65% , rgba (170 , 170 , 170 , 1 ) 92% );
160
176
opacity : 0.3 ;
161
177
filter : saturate (2 );
162
178
}
@@ -170,14 +186,16 @@ svg {
170
186
background-position : -6% -32% ;
171
187
background-repeat : repeat ;
172
188
background-image : url (/img/rf-pattern.jpg );
189
+ filter : brightness (1 );
173
190
}
174
191
.mask2 {
175
- mix-blend-mode : color-burn ;
192
+ mix-blend-mode : hard-light ;
193
+ transform : translate3d (0 , 0 , 0 );
176
194
background-size : cover ;
177
195
/* background-image: url(/docs/img/ticket-depth.jpg), url(/img/ticket-depth.jpg); */
178
196
background-image : url (/img/ticket-depth.jpg );
179
- opacity : 0.7 ;
180
- filter : brightness ( 0.8 );
197
+ opacity : 1 ;
198
+ filter : invert ( );
181
199
182
200
}
183
201
.text-container {
0 commit comments