https://webcloster.com/wp-content/plugins/proyectos-shadowdom/js/widgets/estudentia-sheet.js

1const css =
2  /* CSS_START */`
3/* Reset y base */
4* {
5  box-sizing: border-box;
6  margin: 0;
7  padding: 0;
8}
9:host {
10  font-family: "Open Sans", sans-serif;
11  color: #333;
12  background: #f9f9f9;
13}
14a {
15  text-decoration: none;
16  color: inherit;
17}
18img {
19  display: block;
20  max-width: 100%;
21}
22
23/* Header */
24header {
25  display: flex;
26  justify-content: space-between;
27  align-items: center;
28  padding: 1rem 2rem;
29  background: #fff;
30}
31.nav-buttons {
32  display: flex;
33  gap: 1rem;
34}
35.nav-buttons a {
36  padding: 0.5rem 1rem;
37  border-radius: 4px;
38  font-weight: 500;
39}
40.btn-login {
41  color: #555;
42}
43.btn-register {
44  background: #f04e4e;
45  color: #fff;
46}
47
48/* Hero */
49.hero {
50  display: flex;
51  align-items: center;
52  justify-content: space-between;
53  max-width: 1200px;
54  margin: 6rem auto 2rem auto;
55  gap: 2rem;
56  padding: 1.5rem;
57}
58.hero-text {
59  flex: 1;
60  display: flex;
61  flex-direction: column;
62  gap: 0.8rem;
63}
64.hero-text h1 {
65  font-size: 3.25rem;
66  margin-bottom: 1rem;
67  color: #111;
68}
69.hero-text p {
70  font-size: 1.1rem;
71  margin-bottom: 1.5rem;
72  color: #555;
73  line-height: 165%;
74  word-spacing: 1px;
75}
76.search-bar {
77  display: flex;
78  max-width: 400px;
79}
80.search-bar input {
81  flex: 1;
82  padding: 0.5rem 1rem;
83  border: 1px solid #ccc;
84  border-radius: 4px 0 0 4px;
85}
86.search-bar button {
87  padding: 0 1.5rem 0 1rem;
88  background: #f04e4e;
89  color: #fff;
90  border: none;
91  border-radius: 0 4px 4px 0;
92  cursor: pointer;
93  display: inline-flex;
94  gap: 10px;
95  align-items: center;
96}
97
98.search-bar button img {
99  width: 20px;
100  height: 20px;
101}
102.hero-image {
103  flex: 1;
104}
105
106/* Barra de características */
107.feature-bar {
108  display: flex;
109  justify-content: space-between;
110  align-items: center;
111  background: linear-gradient(to right, #f9c0c0, #c0eaff);
112  padding: 1.5rem;
113  margin: 2rem auto;
114  max-width: 1200px;
115  border-radius: 8px;
116}
117.feature-item {
118  display: flex;
119  align-items: center;
120  gap: 0.75rem;
121  background: rgba(255, 255, 255, 0.8);
122  padding: 1rem;
123  border-radius: 6px;
124  flex: 1;
125}
126.feature-item + .feature-item {
127  margin-left: 1rem;
128}
129.feature-item i {
130  background-color: #ec5252;
131  height: 45px;
132  width: 45px;
133  font-size: 20px;
134  line-height: 45px;
135  text-align: center;
136  color: white;
137  border-radius: 50px;
138}
139.feature-item p {
140  font-size: 1.2rem;
141  color: #333;
142  font-weight: 700;
143}
144
145/* Sección CTA */
146.cta-section {
147  display: grid;
148  grid-template-columns: repeat(2, 1fr);
149  gap: 2rem;
150  max-width: 1200px;
151  margin: 2rem auto;
152  padding: 0 2rem;
153}
154.cta-card {
155  display: flex;
156  align-items: center;
157  gap: 1.5rem;
158  padding: 1.5rem;
159  border-radius: 8px;
160  background: #e8f4ff;
161}
162.cta-card.instructor {
163  background: #ffe8e8;
164}
165.cta-card img {
166  width: 280px;
167  flex-shrink: 0;
168}
169.cta-content {
170  flex: 1;
171}
172.cta-content h3 {
173  font-size: 1.25rem;
174  margin-bottom: 1.5rem;
175  color: #111;
176}
177.cta-content p {
178  font-size: 0.9rem;
179  margin-bottom: 1rem;
180  color: #555;
181}
182
183.cta-content a {
184  padding: 0.5rem 1rem;
185  border: none;
186  border-radius: 4px;
187  margin: 5px 0 0 0;
188  background: #2b9adf;
189  color: #fff;
190  cursor: pointer;
191  transition: all 0.3s ease;
192  font-weight: 500;
193}
194.instructor .cta-content a {
195  background: #ec5252;
196}
197
198.instructor .cta-content a:hover {
199  background: #b02a37;
200}
201
202.cta-content a:hover {
203  background: #095299;
204}
205@media (max-width: 1024px) {
206  .hero {
207    flex-direction: column;
208    text-align: center;
209  }
210  .hero-text h1 {
211    font-size: 2.6rem;
212  }
213  .estudentia-logo {
214    max-width: 90%;
215    margin: 0 auto;
216  }
217
218  .search-bar {
219    display: flex;
220    max-width: 90%;
221    margin: 0 auto;
222    width: 90%;
223  }
224  .cta-card {
225    flex-direction: column;
226  }
227}
228/* Responsive */
229@media (max-width: 768px) {
230  .hero {
231    flex-direction: column-reverse;
232  }
233  .hero-text h1 {
234    font-size: 2.2rem;
235  }
236  .search-bar button img {
237    width: 13px;
238    height: 13px;
239  }
240  .feature-bar {
241    flex-direction: column;
242  }
243  .feature-item + .feature-item {
244    margin-left: 0;
245    margin-top: 1rem;
246  }
247  .cta-section {
248    grid-template-columns: 1fr;
249    padding: 0 1rem;
250  }
251}
252`;
253/* CSS_END */
254
255export const estudentiaSheet = new CSSStyleSheet();
256estudentiaSheet.replaceSync(css);