css

templates/static/index.css

+/* RESET */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* BODY - sensação de natureza */
+body {
+    font-family: 'Segoe UI', sans-serif;
+    background: linear-gradient(to bottom, #e9f5db, #d8f3dc);
+    color: #333;
+}
+
+/* HEADER - madeira/campo */
+.topo {
+    background: #6b4226; /* marrom terra */
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+    border-bottom: 5px solid #a3b18a;
+}
+
+.topo h1 {
+    margin-bottom: 10px;
+}
+
+/* NAV */
+nav a {
+    color: #fefae0;
+    margin: 0 10px;
+    text-decoration: none;
+    font-weight: bold;
+    padding: 6px 10px;
+    border-radius: 6px;
+    transition: 0.3s;
+}
+
+nav a:hover {
+    background: #a3b18a; /* verde claro */
+    color: #333;
+}
+
+/* CONTAINER */
+.container {
+    width: 80%;
+    margin: 30px auto;
+    background: #fefae0; /* cor de palha clara */
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+
+/* TÍTULOS */
+h2 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #6b4226;
+}
+
+/* TABELA */
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+/* CABEÇALHO */
+th {
+    background: #588157; /* verde escuro */
+    color: white;
+    padding: 12px;
+}
+
+/* CÉLULAS */
+td {
+    padding: 10px;
+    text-align: center;
+}
+
+/* LINHAS */
+tr:nth-child(even) {
+    background: #e9edc9;
+}
+
+tr:hover {
+    background: #ccd5ae;
+    transition: 0.2s;
+}
+
+/* LINKS */
+td a {
+    text-decoration: none;
+    font-weight: bold;
+    color: #6b4226;
+}
+
+td a:hover {
+    color: #344e41;
+}
+
+/* FORM */
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* INPUTS */
+input {
+    width: 60%;
+    padding: 10px;
+    margin: 8px 0;
+    border-radius: 6px;
+    border: 1px solid #a3b18a;
+    background: #fefae0;
+    transition: 0.3s;
+}
+
+/* FOCUS */
+input:focus {
+    border-color: #588157;
+    outline: none;
+    box-shadow: 0 0 5px rgba(88,129,87,0.5);
+}
+
+/* BOTÃO */
+button {
+    background: #6b4226;
+    color: white;
+    border: none;
+    padding: 12px 18px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+/* HOVER BOTÃO */
+button:hover {
+    background: #4a2c1a;
+    transform: scale(1.05);
+}
+
+/* TEXTO VAZIO */
+p {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 18px;
+    color: #6b4226;
+}
+
+/* ALERTA */
+.alert {
+    background: #ccd5ae;
+    padding: 10px;
+    margin-bottom: 15px;
+    border-radius: 6px;
+    text-align: center;
+    color: #344e41;
+    font-weight: bold;
+}
+
+/* RESPONSIVO */
+@media (max-width: 768px) {
+    .container {
+        width: 95%;
+    }
+
+    input {
+        width: 90%;
+    }
+
+    table {
+        font-size: 12px;
+    }
+}
\ No newline at end of file