Ativar CSS

assets/css/frontend.css

@@ -2,6 +2,7 @@
 :root {
   --azul-principal: #006494;
   --azul-escuro: #003554;
+  --azul-brilhante: #00a6fb;
   --azul-claro: #0582ca;
   --amarelo: #ffb700;
   --cinza-claro: #f8f9fa;
@@ -23,6 +24,7 @@
   box-shadow: var(--sombra);
   max-width: 700px;
   margin: 20px auto;
+  animation: fadeIn 0.5s ease-out forwards;
 }
 
 .sts-ticket-form p {
@@ -44,7 +46,7 @@
   border: 1px solid var(--cinza);
   border-radius: var(--borda-radius);
   transition: var(--transicao);
-  background-color: var(--cinza-claro);
+  background-color: var(--branco);
   color: var(--preto);
 }
 
@@ -52,8 +54,8 @@
 .sts-ticket-form textarea:focus,
 .sts-ticket-form select:focus {
   outline: none;
-  border-color: var(--azul-principal);
+  border-color: var(--azul-claro);
-  box-shadow: 0 0 0 3px rgba(0, 100, 148, 0.15);
+  box-shadow: 0 0 0 3px rgba(5, 130, 202, 0.2);
 }
 
 .sts-ticket-form small {
@@ -62,6 +64,13 @@
   color: #777;
 }
 
+/* Estilo para o texto de ajuda dentro do label */
+.sts-label-helper {
+  display: inline;
+  font-weight: 400;
+  color: #777;
+}
+
 /* Botão de Envio */
 .sts-ticket-form input[type="submit"] {
   background: var(--azul-principal);
@@ -78,7 +87,7 @@
 }
 
 .sts-ticket-form input[type="submit"]:hover {
-  background: var(--azul-escuro);
+  background: var(--azul-claro);
   box-shadow: var(--sombra);
 }
 
@@ -121,12 +130,13 @@
 }
 
 .sts-file-input-button {
-  background: var(--cinza);
+  background: var(--branco);
-  color: var(--preto);
+  color: var(--azul-principal);
   padding: 10px 15px;
   border-radius: var(--borda-radius);
-  border: 1px solid #ccc;
+  border: 1px solid var(--azul-principal);
   display: inline-block;
+  transition: var(--transicao);
 }
 
 .sts-file-name {

templates/form-ticket.php

@@ -11,17 +11,17 @@ if (isset($_GET['ticket_submitted'])) {
 <form action="" method="post" class="sts-ticket-form" enctype="multipart/form-data">
     <?php wp_nonce_field('sts_ticket_form', 'sts_ticket_form_nonce'); ?>
 
-    <div class="form-grupo">
+    <p>
         <label for="sts_ticket_title"><?php _e('Descreva resumidamente seu problema', 'simple-ticket-system'); ?></label>
         <input type="text" id="sts_ticket_title" name="sts_ticket_title" required>
-    </div>
+    </p>
 
-    <div class="form-grupo">
+    <p>
         <label for="sts_ticket_content"><?php _e('Forneça detalhes', 'simple-ticket-system'); ?></label>
         <textarea id="sts_ticket_content" name="sts_ticket_content" rows="8" required></textarea>
-    </div>
+    </p>
 
-    <div class="form-grupo">
+    <p>
         <label for="sts_ticket_type"><?php _e('Tipo de solicitação', 'simple-ticket-system'); ?></label>
         <select id="sts_ticket_type" name="sts_ticket_type" required>
             <?php
@@ -31,19 +31,18 @@ if (isset($_GET['ticket_submitted'])) {
             }
             ?>
         </select>
-    </div>
+    </p>
 
-    <div class="form-grupo">
+    <p>
-        <label for="sts_ticket_attachment"><?php _e('Anexo', 'simple-ticket-system'); ?></label>
+        <label for="sts_ticket_attachment"><?php _e('Anexo', 'simple-ticket-system'); ?> <small class="sts-label-helper"><?php _e('(captura de tela, documento ou qualquer outro arquivo)', 'simple-ticket-system'); ?></small></label>
         <div class="sts-file-input-wrapper">
             <span class="sts-file-input-button"><?php _e('Escolher arquivo', 'simple-ticket-system'); ?></span>
             <input type="file" id="sts_ticket_attachment" name="sts_ticket_attachment">
         </div>
         <span id="sts-file-name" class="sts-file-name"></span>
-        <small><?php _e('(captura de tela, documento ou qualquer outro arquivo)', 'simple-ticket-system'); ?></small>
+    </p>
-    </div>
 
-    <div class="form-grupo">
+    <p>
         <input type="submit" name="sts_submit_ticket" value="<?php _e('Enviar Ticket', 'simple-ticket-system'); ?>">
-    </div>
+    </p>
 </form>