11: root {
2- --color-main : # 141414
3- --color-secondary : # fff
2+ --color-main : # 141414
3+ --color-secondary : # f0f0f0
4+ --font-main : 'Crimson Pro' , serif;
5+
6+ /* IMPORTANTE: Verifique se o caminho da imagem da máscara está correto */
7+ --logo-url : url ('assets/enigmatic_comma_-_logo_only_transp.png' );
48}
59
10+ *
11+ box-sizing : border-box;
12+ margin : 0 ;
13+ padding : 0 ;
14+ }
615
716body {
8- background-color : var (--color-main );
9- color : var (--color-secondary );
10- font-family : 'Crimson Pro' , sans-serif;
11- margin : 0 ;
12- padding : 0 ;
13- min-height : 100vh ; /* Ensures full height for centering */
14- display : flex;
15- flex-direction : column;
16- justify-content : center;
17- text-align : center;
17+ background-color : var (--color-main );
18+ color : var (--color-secondary );
19+ font-family : var (--font-main );
20+ min-height : 100vh ;
21+ display : flex;
22+ flex-direction : column;
23+ justify-content : center;
24+ align-items : center;
25+ text-align : center;
26+ padding : 20px ;
27+ overflow-x : hidden;
1828}
1929
20- .logo {
21- flex-direction : column;
22- align-items : center;
30+ /* --- LOGO COM MÁSCARA --- */
31+ .logo-container {
32+ display : flex;
33+ flex-direction : column;
34+ align-items : center;
35+ margin-bottom : 3rem ;
36+ animation : fadeIn 1.5s ease-in;
2337}
2438
25- .container {
26- display : flex;
27- flex-direction : row;
28- justify-content : center;
29- align-items : center;
39+ .video-mask {
40+ width : 600px ;
41+ height : 360px ;
42+
43+ position : relative;
44+ background-color : # ffffff/* Fundo branco de contraste */
45+
46+ /* Definição da Máscara */
47+ -webkit-mask-image : var (--logo-url );
48+ mask-image : var (--logo-url );
49+
50+ -webkit-mask-size : contain;
51+ mask-size : contain;
52+
53+ -webkit-mask-repeat : no-repeat;
54+ mask-repeat : no-repeat;
55+
56+ -webkit-mask-position : center;
57+ mask-position : center;
58+
59+ margin-bottom : 1rem ;
60+ overflow : hidden;
3061}
3162
32- img {
33- max-width : 50vw ;
34- max-height : 50vh ;
63+ /* --- MUDANÇA AQUI: Regra para a imagem GIF --- */
64+ .video-mask img {
65+ /* Zoom para garantir que cubra bem a máscara irregular */
66+ width : 180% ;
67+ height : 180% ;
68+ object-fit : cover; /* Garante que a imagem não distorça */
69+
70+ position : absolute;
71+
72+ /* Centralização Total */
73+ top : 50% ;
74+ left : 50% ;
75+ transform : translate (-50% , -50% );
76+
77+ /* Opacidade e Blend para contraste com o fundo branco */
78+ opacity : 0.6 ;
79+ mix-blend-mode : multiply;
80+
81+ pointer-events : none;
3582}
83+ /* --------------------------------------------- */
3684
37- h1 {
38- font-size : 40pt ;
39- font-weight : 500 ;
40- margin : 20px 0 ;
85+ .logo-container h1 {
86+ font-weight : 300 ;
87+ font-size : 3.5rem ;
88+ letter-spacing : 2px ;
89+ opacity : 0.9 ;
90+ margin : 0 ;
4191}
4292
43- footer {
44- background-color : var (--color-main );
45- color : var (--color-secondary );
46- padding : 20px 0 ;
93+ /* --- BOTÕES E TOOLTIPS --- */
94+ .nav-container {
95+ display : flex;
96+ flex-direction : row;
97+ justify-content : center;
98+ align-items : center;
99+ gap : 30px ;
100+ animation : slideUp 0.8s ease-out 0.2s backwards;
47101}
48102
49103.button {
50- display : inline-block;
51- padding : 10px 15px ;
52- border-radius : 5px ;
53- text-decoration : none;
54- color : var (--color-secondary );
55- background-color : var (--color-main );
56- font-size : 18pt ;
57- font-weight : 300 ;
58- margin : 5px ;
104+ position : relative;
105+ display : flex;
106+ justify-content : center;
107+ align-items : center;
108+ text-decoration : none;
109+ color : var (--color-secondary );
110+
111+ width : 50px ;
112+ height : 50px ;
113+ transition : transform 0.2s ease;
114+ }
115+
116+ .button i {
117+ font-size : 2rem ;
118+ opacity : 0.7 ;
119+ transition : opacity 0.2s ;
120+ }
121+
122+ /* --- TOOLTIP --- */
123+ .tooltip {
124+ position : absolute;
125+ top : -30px ;
126+ left : 50% ;
127+ transform : translateX (-50% );
128+
129+ background-color : var (--color-secondary );
130+ color : var (--color-main );
131+ padding : 4px 8px ;
132+
133+ font-size : 0.9rem ;
134+ font-weight : 600 ;
135+ text-transform : uppercase;
136+ letter-spacing : 1px ;
137+ white-space : nowrap;
138+
139+ border : 1px solid var (--color-secondary );
140+
141+ opacity : 0 ;
142+ visibility : hidden;
143+ transition : opacity 0.2s steps (2 ), top 0.2s ease;
144+ pointer-events : none;
145+ z-index : 10 ;
146+ }
147+
148+ .tooltip ::after {
149+ content : '' ;
150+ position : absolute;
151+ top : 100% ;
152+ left : 50% ;
153+ margin-left : -4px ;
154+ border-width : 4px ;
155+ border-style : solid;
156+ border-color : var (--color-secondary ) transparent transparent transparent;
59157}
60158
159+ /* --- HOVER EFFECTS --- */
61160.button : hover {
62- background-color : var (--color-secondary );
63- color : var (--color-main );
161+ transform : scale (1.1 );
162+ }
163+
164+ .button : hover i {
165+ opacity : 1 ;
166+ text-shadow : 0 0 10px rgba (255 , 255 , 255 , 0.5 );
167+ }
168+
169+ .button : hover .tooltip {
170+ opacity : 1 ;
171+ visibility : visible;
172+ top : -35px ;
173+ }
174+
175+ /* --- RESPONSIVIDADE --- */
176+ @media (max-width : 650px ) {
177+ .logo-container h1 {
178+ font-size : 2.5rem ;
179+ }
180+
181+ .video-mask {
182+ width : 90vw ;
183+ height : 54vw ;
184+ max-width : 400px ;
185+ max-height : 240px ;
186+ }
187+
188+ .nav-container {
189+ gap : 20px ;
190+ }
191+ }
192+
193+ /* --- ANIMAÇÕES --- */
194+ @keyframes fadeIn {
195+ from { opacity : 0 ; }
196+ to { opacity : 1 ; }
64197}
65198
66- @media only screen and (max-width : 768px ) {
67- .container {
68- flex-direction : column;
69- }
70- }
199+ @keyframes slideUp {
200+ from { opacity : 0 ; transform : translateY (20px ); }
201+ to { opacity : 1 ; transform : translateY (0 ); }
202+ }
0 commit comments