blockenberg / blocks / gradient-text-animator / style.css

style.css in Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor 2.0.7, at blocks/gradient-text-animator/style.css

165 lines 5.4 KB

Raw Download Zip

1	/* Gradient Text Animator Block — bkbg-gta-* */
2
3	.bkbg-gta-app {
4	display: block;
5	}
6
7	/* ── Text element typography ── */
8	.bkbg-gta-el {
9	font-family: var(--bkbg-gta-tt-font-family, inherit);
10	font-size: var(--bkbg-gta-tt-font-size-d, 56px);
11	font-weight: var(--bkbg-gta-tt-font-weight, 800);
12	font-style: var(--bkbg-gta-tt-font-style, normal);
13	text-decoration: var(--bkbg-gta-tt-text-decoration, none);
14	text-transform: var(--bkbg-gta-tt-text-transform, none);
15	line-height: var(--bkbg-gta-tt-line-height-d, 1.15);
16	letter-spacing: var(--bkbg-gta-tt-letter-spacing-d, -1px);
17	word-spacing: var(--bkbg-gta-tt-word-spacing-d, normal);
18	}
19
20	/* Heading specificity (0,2,0) beats editor theme heading rules */
21	.bkbg-gta-app h1.bkbg-gta-el,
22	.bkbg-gta-app h2.bkbg-gta-el,
23	.bkbg-gta-app h3.bkbg-gta-el,
24	.bkbg-gta-app h4.bkbg-gta-el,
25	.bkbg-gta-app h5.bkbg-gta-el,
26	.bkbg-gta-app h6.bkbg-gta-el {
27	font-family: var(--bkbg-gta-tt-font-family, inherit);
28	font-size: var(--bkbg-gta-tt-font-size-d, 56px);
29	font-weight: var(--bkbg-gta-tt-font-weight, 800);
30	font-style: var(--bkbg-gta-tt-font-style, normal);
31	text-decoration: var(--bkbg-gta-tt-text-decoration, none);
32	text-transform: var(--bkbg-gta-tt-text-transform, none);
33	line-height: var(--bkbg-gta-tt-line-height-d, 1.15);
34	letter-spacing: var(--bkbg-gta-tt-letter-spacing-d, -1px);
35	word-spacing: var(--bkbg-gta-tt-word-spacing-d, normal);
36	margin: 0;
37	}
38
39	.bkbg-gta-text {
40	background-clip: text;
41	-webkit-background-clip: text;
42	-webkit-text-fill-color: transparent;
43	color: transparent;
44	background-size: 300% 300%;
45	display: inline-block;
46	width: 100%;
47	}
48
49	/* ── Shift — gradient slides across ── */
50	.bkbg-gta-anim-shift {
51	animation: bkbg-gta-shift linear infinite;
52	}
53
54	@keyframes bkbg-gta-shift {
55	0% { background-position: 0% 50%; }
56	50% { background-position: 100% 50%; }
57	100% { background-position: 0% 50%; }
58	}
59
60	/* ── Pulse — gradient softly breathes ── */
61	.bkbg-gta-anim-pulse {
62	animation: bkbg-gta-pulse ease-in-out infinite alternate;
63	}
64
65	@keyframes bkbg-gta-pulse {
66	0% { background-position: 0% 50%; filter: brightness(1); }
67	100% { background-position: 100% 50%; filter: brightness(1.3); }
68	}
69
70	/* ── Rainbow — full hue cycle ── */
71	.bkbg-gta-anim-rainbow {
72	animation: bkbg-gta-rainbow linear infinite;
73	}
74
75	@keyframes bkbg-gta-rainbow {
76	0% { filter: hue-rotate(0deg); }
77	100% { filter: hue-rotate(360deg); }
78	}
79
80	/* ── Reveal — spotlight sweep ── */
81	.bkbg-gta-anim-reveal {
82	animation: bkbg-gta-reveal linear infinite;
83	background-size: 400% 100%;
84	}
85
86	@keyframes bkbg-gta-reveal {
87	0% { background-position: -100% 50%; }
88	100% { background-position: 200% 50%; }
89	}
90
91	/* ── Wave — best done in frontend.js with spans, fallback: gradient scroll ── */
92	.bkbg-gta-anim-wave {
93	animation: bkbg-gta-wave ease-in-out infinite;
94	background-size: 300% 300%;
95	}
96
97	@keyframes bkbg-gta-wave {
98	0%,100% { background-position: 0% 50%; }
99	25% { background-position: 50% 0%; }
100	50% { background-position: 100% 50%; }
101	75% { background-position: 50% 100%; }
102	}
103
104	/* ── Wave per-character spans (built by frontend.js) ── */
105	.bkbg-gta-char {
106	display: inline;
107	background: inherit;
108	background-clip: text;
109	-webkit-background-clip: text;
110	-webkit-text-fill-color: transparent;
111	color: transparent;
112	animation: bkbg-gta-char-wave ease-in-out infinite;
113	}
114
115	@keyframes bkbg-gta-char-wave {
116	0%,100% { transform: translateY(0); }
117	50% { transform: translateY(-0.25em); }
118	}
119
120	/* ── Glitch — RGB displacement ── */
121	.bkbg-gta-anim-glitch {
122	position: relative;
123	animation: bkbg-gta-glitch-base linear infinite;
124	}
125
126	@keyframes bkbg-gta-glitch-base {
127	0%,90%,100% { filter: none; }
128	91% { filter: blur(1px) drop-shadow(2px 0 #f00); }
129	93% { filter: blur(1px) drop-shadow(-2px 0 #0ff); }
130	95% { filter: none; }
131	96% { filter: drop-shadow(2px 0 #f0f); }
132	98% { filter: none; }
133	}
134
135	/* ── Pause/reverse on hover ── */
136	.bkbg-gta-pause-hover:hover .bkbg-gta-text,
137	.bkbg-gta-pause-hover:hover .bkbg-gta-char {
138	animation-play-state: paused;
139	}
140
141	.bkbg-gta-reverse-hover:hover .bkbg-gta-text,
142	.bkbg-gta-reverse-hover:hover .bkbg-gta-char {
143	animation-direction: reverse;
144	}
145
146	/* Typography responsive – tablet */
147	@media (max-width: 1024px) {
148	.bkbg-gta-app .bkbg-gta-el {
149	font-size: var(--bkbg-gta-tt-font-size-t, var(--bkbg-gta-tt-font-size-d, 56px));
150	line-height: var(--bkbg-gta-tt-line-height-t, var(--bkbg-gta-tt-line-height-d, 1.15));
151	letter-spacing: var(--bkbg-gta-tt-letter-spacing-t, var(--bkbg-gta-tt-letter-spacing-d, -1px));
152	word-spacing: var(--bkbg-gta-tt-word-spacing-t, var(--bkbg-gta-tt-word-spacing-d, normal));
153	}
154	}
155
156	/* Typography responsive – mobile */
157	@media (max-width: 767px) {
158	.bkbg-gta-app .bkbg-gta-el {
159	font-size: var(--bkbg-gta-tt-font-size-m, var(--bkbg-gta-tt-font-size-t, var(--bkbg-gta-tt-font-size-d, 56px)));
160	line-height: var(--bkbg-gta-tt-line-height-m, var(--bkbg-gta-tt-line-height-t, var(--bkbg-gta-tt-line-height-d, 1.15)));
161	letter-spacing: var(--bkbg-gta-tt-letter-spacing-m, var(--bkbg-gta-tt-letter-spacing-t, var(--bkbg-gta-tt-letter-spacing-d, -1px)));
162	word-spacing: var(--bkbg-gta-tt-word-spacing-m, var(--bkbg-gta-tt-word-spacing-t, var(--bkbg-gta-tt-word-spacing-d, normal)));
163	}
164	}
165