Initial commit: Substituição pelo portal Apex Solutions

This commit is contained in:
2026-06-08 17:08:10 +01:00
commit 74a73f5cd0
10 changed files with 930 additions and 0 deletions
+50
View File
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us | Apex Solutions</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased flex flex-col min-h-screen">
<nav class="bg-slate-900 text-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex items-center">
<a href="/" class="font-bold text-2xl tracking-tighter hover:opacity-80 transition-opacity">Apex<span class="text-blue-500">Solutions</span></a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="about.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">About Us</a>
<a href="careers.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Careers</a>
<a href="contact.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
</div>
</div>
</div>
</div>
</nav>
<main class="flex-grow max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<article class="prose prose-lg prose-blue max-w-none">
<h1 class="text-4xl font-extrabold text-slate-900 mb-8">Who We Are</h1>
<p class="text-xl text-gray-600 mb-8">Founded in 2005, Apex Solutions started with a simple idea: business services should be accessible, transparent, and driven by results. Today, we are proud to be a trusted partner for companies around the world.</p>
<h2 class="text-2xl font-bold text-slate-800 mt-12 mb-4">Our Mission</h2>
<p class="text-gray-600 mb-6 leading-relaxed">Our mission is to empower organizations by providing them with the tools, strategies, and support they need to thrive in a competitive landscape. We believe in creating sustainable growth through ethical business practices and continuous improvement.</p>
<h2 class="text-2xl font-bold text-slate-800 mt-12 mb-4">Our Core Values</h2>
<ul class="list-disc pl-6 text-gray-600 mb-6 space-y-2">
<li><strong>Integrity:</strong> We do what is right, not what is easy. Honesty is the foundation of all our client relationships.</li>
<li><strong>Innovation:</strong> We continuously seek new ways to solve old problems, staying ahead of market trends.</li>
<li><strong>Excellence:</strong> We strive for perfection in every project, delivering high-quality results consistently.</li>
<li><strong>Collaboration:</strong> We work closely with our clients, believing that the best solutions come from teamwork.</li>
</ul>
</article>
</main>
<footer class="bg-slate-900 text-slate-400 py-12 text-center">
<p>&copy; 2026 Apex Solutions. All rights reserved.</p>
</footer>
</body>
</html>
+66
View File
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Apex Solutions</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased flex flex-col min-h-screen">
<nav class="bg-slate-900 text-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex items-center">
<a href="/" class="font-bold text-2xl tracking-tighter hover:opacity-80 transition-opacity">Apex<span class="text-blue-500">Solutions</span></a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="about.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">About Us</a>
<a href="careers.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">Careers</a>
<a href="contact.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
</div>
</div>
</div>
</div>
</nav>
<main class="flex-grow max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="text-center mb-16">
<h1 class="text-4xl font-extrabold text-slate-900 mb-4">Join Our Team</h1>
<p class="text-xl text-gray-600">We are always looking for passionate individuals to help us build the future.</p>
</div>
<h2 class="text-2xl font-bold text-slate-800 mb-6">Open Positions</h2>
<div class="space-y-4">
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 flex justify-between items-center hover:border-blue-500 transition-colors">
<div>
<h3 class="text-lg font-bold text-slate-900">Senior Business Analyst</h3>
<p class="text-gray-500 text-sm mt-1">Full-Time &bull; Remote (Europe) &bull; Consulting Dept.</p>
</div>
<a href="contact.html" class="text-blue-600 font-semibold hover:underline">Apply Now &rarr;</a>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 flex justify-between items-center hover:border-blue-500 transition-colors">
<div>
<h3 class="text-lg font-bold text-slate-900">Account Executive</h3>
<p class="text-gray-500 text-sm mt-1">Full-Time &bull; New York, USA &bull; Sales Dept.</p>
</div>
<a href="contact.html" class="text-blue-600 font-semibold hover:underline">Apply Now &rarr;</a>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 flex justify-between items-center hover:border-blue-500 transition-colors">
<div>
<h3 class="text-lg font-bold text-slate-900">Customer Success Manager</h3>
<p class="text-gray-500 text-sm mt-1">Part-Time &bull; London, UK &bull; Support Dept.</p>
</div>
<a href="contact.html" class="text-blue-600 font-semibold hover:underline">Apply Now &rarr;</a>
</div>
</div>
</main>
<footer class="bg-slate-900 text-slate-400 py-12 text-center">
<p>&copy; 2026 Apex Solutions. All rights reserved.</p>
</footer>
</body>
</html>
+117
View File
@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us | Apex Solutions</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased flex flex-col min-h-screen">
<nav class="bg-slate-900 text-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex items-center">
<a href="/" class="font-bold text-2xl tracking-tighter hover:opacity-80 transition-opacity">Apex<span class="text-blue-500">Solutions</span></a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="about.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">About Us</a>
<a href="careers.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Careers</a>
<a href="contact.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
</div>
</div>
</nav>
<main class="flex-grow max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16 w-full">
<div class="bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden">
<div class="bg-slate-900 px-8 py-10 text-white">
<h2 class="text-3xl font-bold mb-2">Get in Touch</h2>
<p class="text-slate-300">Have a question or want to work together? Leave your details below and we will get back to you.</p>
</div>
<form id="contactForm" class="p-8 space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
<input type="text" id="firstName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
</div>
<div>
<label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
<input type="text" id="lastName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="you@example.com" required>
</div>
<div>
<label for="company" class="block text-sm font-medium text-gray-700 mb-1">Company / Subject</label>
<input type="text" id="company" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="How can we help you?" required></textarea>
</div>
<div id="formStatus" class="hidden rounded-md p-4 mb-4 text-sm font-medium"></div>
<button type="submit" id="submitBtn" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-md hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Send Message
</button>
</form>
</div>
</main>
<footer class="bg-slate-900 text-slate-400 py-12 text-center">
<p>&copy; 2026 Apex Solutions. All rights reserved.</p>
</footer>
<script>
document.getElementById('contactForm').addEventListener('submit', async (e) => {
e.preventDefault();
const btn = document.getElementById('submitBtn');
const statusDiv = document.getElementById('formStatus');
btn.disabled = true;
btn.textContent = 'Sending...';
statusDiv.classList.add('hidden');
const data = {
firstName: document.getElementById('firstName').value,
lastName: document.getElementById('lastName').value,
email: document.getElementById('email').value,
company: document.getElementById('company').value,
message: document.getElementById('message').value,
};
try {
const response = await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
const result = await response.json();
statusDiv.classList.remove('hidden', 'bg-red-50', 'text-red-800');
statusDiv.classList.add('bg-green-50', 'text-green-800');
statusDiv.textContent = result.message;
e.target.reset();
} catch (err) {
statusDiv.classList.remove('hidden', 'bg-green-50', 'text-green-800');
statusDiv.classList.add('bg-red-50', 'text-red-800');
statusDiv.textContent = 'Connection error. Please try again later.';
} finally {
btn.disabled = false;
btn.textContent = 'Send Message';
}
});
</script>
</body>
</html>
+101
View File
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | Apex Solutions</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
html { scroll-behavior: smooth; } /* Animação suave ao clicar no link de serviços */
</style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased flex flex-col min-h-screen">
<nav class="bg-slate-900 text-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex items-center">
<a href="/" class="font-bold text-2xl tracking-tighter hover:opacity-80 transition-opacity">Apex<span class="text-blue-500">Solutions</span></a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="about.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">About Us</a>
<a href="careers.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Careers</a>
<a href="contact.html" class="text-gray-300 hover:bg-slate-700 hover:text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
</div>
</div>
</div>
</div>
</nav>
<main class="flex-grow">
<div class="bg-white border-b border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block">Innovative Solutions for</span>
<span class="block text-blue-600">Modern Businesses</span>
</h1>
<p class="mt-6 max-w-2xl text-lg text-gray-500 leading-relaxed">
At Apex Solutions, we deliver high-quality business consulting, technology services, and strategic insights. We help organizations across the globe achieve their goals through operational excellence and digital transformation.
</p>
<div class="mt-10 flex gap-4">
<a href="#services" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">Explore Services</a>
<a href="contact.html" class="px-8 py-3 border border-gray-300 text-base font-medium rounded-md text-slate-700 bg-white hover:bg-gray-50">Get in Touch</a>
</div>
</div>
</div>
<div id="services" class="bg-slate-50 border-b border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
<h2 class="text-4xl font-extrabold text-slate-900 mb-4">Our Services</h2>
<p class="text-xl text-gray-600 mb-12 max-w-3xl">Comprehensive solutions designed to elevate your business operations and drive meaningful results.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center font-bold text-xl mb-4">1</div>
<h3 class="text-2xl font-bold text-slate-800 mb-3">Management Consulting</h3>
<p class="text-gray-600">We analyze your current organizational structure and provide actionable strategies to improve efficiency, reduce costs, and accelerate business growth.</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center font-bold text-xl mb-4">2</div>
<h3 class="text-2xl font-bold text-slate-800 mb-3">Technology Integration</h3>
<p class="text-gray-600">Upgrade your legacy systems. We help you implement modern software solutions, CRM systems, and cloud-based applications tailored to your specific industry.</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center font-bold text-xl mb-4">3</div>
<h3 class="text-2xl font-bold text-slate-800 mb-3">Financial Advisory</h3>
<p class="text-gray-600">Expert guidance on capital allocation, risk management, and financial restructuring to ensure your company remains profitable in volatile markets.</p>
</div>
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center font-bold text-xl mb-4">4</div>
<h3 class="text-2xl font-bold text-slate-800 mb-3">Human Resources Support</h3>
<p class="text-gray-600">From talent acquisition to employee retention programs, we provide full-scale HR solutions to build and maintain a strong corporate culture.</p>
</div>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<h2 class="text-3xl font-bold text-gray-900 mb-8">Why Choose Us?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<h3 class="text-xl font-semibold text-slate-900 mb-3">Global Reach</h3>
<p class="text-gray-600 leading-relaxed">With offices in over 20 countries, our international presence allows us to understand diverse markets and deliver tailored solutions that meet local and global demands.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<h3 class="text-xl font-semibold text-slate-900 mb-3">Proven Expertise</h3>
<p class="text-gray-600 leading-relaxed">Our team consists of industry veterans and certified professionals dedicated to providing top-tier service. We bring decades of combined experience to every project we undertake.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<h3 class="text-xl font-semibold text-slate-900 mb-3">Customer First</h3>
<p class="text-gray-600 leading-relaxed">Your success is our success. We prioritize transparent communication, rapid response times, and a commitment to exceeding expectations in everything we do.</p>
</div>
</div>
</div>
</main>
<footer class="bg-slate-900 text-slate-400 py-12 text-center">
<p>&copy; 2026 Apex Solutions. All rights reserved.</p>
</footer>
</body>
</html>
+474
View File
@@ -0,0 +1,474 @@
/* =========================================================
1. RESET E VARIÁVEIS
========================================================= */
:root {
--primary-color: #0f172a;
--accent-color: #3b82f6;
--bg-color: #f8fafc;
--card-bg: #ffffff;
--text-main: #334155;
--text-muted: #64748b;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--text-main);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 0 40px;
}
/* =========================================================
2. NAVEGAÇÃO E RODAPÉ
========================================================= */
.navbar {
background-color: rgba(15, 23, 42, 0.95); /* Cor escura com 5% de transparência */
backdrop-filter: blur(8px); /* Cria o efeito de vidro desfocado */
color: white;
padding: 20px 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Sombra mais suave e espalhada */
position: sticky; /* Fixa a barra no topo */
top: 0;
z-index: 1000; /* Garante que a barra fica sempre por cima do conteúdo */
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.5px; /* Junta ligeiramente as letras para um look corporativo */
}
.logo span {
color: var(--accent-color);
}
.navbar ul {
list-style: none;
display: flex;
gap: 10px; /* Reduzido o gap para acomodar o padding dos novos botões */
}
.navbar a {
color: #cbd5e1;
text-decoration: none;
font-weight: 500;
padding: 8px 16px; /* Transforma o link num botão clicável com espaço interno */
border-radius: 6px; /* Cantos arredondados */
transition: all 0.3s ease; /* Transição suave de cores e fundos */
}
/* Efeito ao passar o rato (Hover) */
.navbar a:hover {
color: white;
background-color: rgba(255, 255, 255, 0.1); /* Fundo branco muito subtil */
}
/* Estado da página atual (Active) */
.navbar a.active {
color: white;
background-color: var(--accent-color);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4); /* Sombra azul ao redor do botão ativo */
}
footer {
background-color: white;
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
font-size: 14px;
border-top: 1px solid #e2e8f0;
}
/* =========================================================
3. ESTRUTURA GERAL (MAIN & INTRO)
========================================================= */
main {
flex-grow: 1;
padding: 80px 20px;
}
.intro {
margin-bottom: 40px;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 20px;
}
.intro h2 {
font-size: 28px;
color: var(--primary-color);
margin-bottom: 5px;
}
.intro p {
color: var(--text-muted);
}
/* --- Lógica de View (Single Page App) --- */
.view-section.hidden {
display: none;
}
.view-section.active {
display: block;
animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* =========================================================
4. COMPONENTES (Cartões, Tabelas, Formulários)
========================================================= */
/* --- Diretório: Grelha de Cartões --- */
.grid-colaboradores {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.cartao {
background: var(--card-bg);
border-radius: 8px;
padding: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
display: flex;
align-items: center;
gap: 15px;
transition: transform 0.2s, box-shadow 0.2s;
border: 1px solid #e2e8f0;
}
.cartao:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.avatar {
width: 50px;
height: 50px;
background-color: var(--accent-color);
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: bold;
}
.info h3 {
font-size: 16px;
color: var(--primary-color);
}
.cargo {
font-size: 14px;
font-weight: 600;
color: var(--accent-color);
margin: 2px 0;
}
.departamento {
font-size: 13px;
color: var(--text-muted);
}
.email {
font-size: 13px;
color: var(--text-muted);
text-decoration: none;
display: inline-block;
margin-top: 5px;
}
.email:hover {
color: var(--accent-color);
text-decoration: underline;
}
/* --- Departamentos: Tabela --- */
.table-container {
background: var(--card-bg);
border-radius: 8px;
border: 1px solid #e2e8f0;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.data-table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
.data-table th {
background-color: #f1f5f9;
color: var(--primary-color);
padding: 15px;
font-size: 14px;
border-bottom: 2px solid #e2e8f0;
}
.data-table td {
padding: 15px;
border-bottom: 1px solid #e2e8f0;
color: var(--text-main);
font-size: 14px;
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tr:hover td {
background-color: #f8fafc;
}
.badge {
background-color: #dcfce7;
color: #166534;
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.text-center {
text-align: center;
}
/* --- Definições: Cartões e Botões --- */
.settings-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.settings-card {
background: var(--card-bg);
border-radius: 8px;
padding: 25px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.settings-card h3 {
color: var(--primary-color);
margin-bottom: 10px;
}
.settings-card p {
color: var(--text-muted);
font-size: 14px;
margin-bottom: 20px;
min-height: 40px;
}
.btn-outline {
background: transparent;
color: var(--accent-color);
border: 1px solid var(--accent-color);
padding: 8px 16px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
width: 100%;
margin-top: 0;
}
.btn-outline:hover {
background: var(--accent-color);
color: white;
}
/* --- Formulário de Contacto --- */
.divisor {
border: 0;
height: 1px;
background: #e2e8f0;
margin: 40px 0;
}
.contacto-suporte {
background: var(--card-bg);
padding: 30px;
border-radius: 8px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.contacto-suporte h2 {
color: var(--primary-color);
margin-bottom: 5px;
}
.contacto-suporte p {
color: var(--text-muted);
margin-bottom: 20px;
font-size: 14px;
}
.formulario {
display: flex;
flex-direction: column;
gap: 15px;
max-width: 600px;
}
.grupo-input {
display: flex;
flex-direction: column;
gap: 5px;
}
.grupo-input label {
font-weight: 600;
font-size: 14px;
color: var(--text-main);
}
.grupo-input input,
.grupo-input textarea {
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
font-family: inherit;
}
.grupo-input input:focus,
.grupo-input textarea:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
button[type="submit"] {
background-color: var(--accent-color);
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
margin-top: 10px;
}
button[type="submit"]:hover {
background-color: #2563eb;
}
button[type="submit"]:disabled {
background-color: #94a3b8;
cursor: not-allowed;
}
/* Status da Mensagem / Notificações */
.status-oculto {
display: none;
}
.status-visivel {
display: block;
padding: 10px;
border-radius: 6px;
margin-top: 15px;
font-size: 14px;
font-weight: 600;
text-align: center;
}
.status-sucesso {
background-color: #dcfce7;
color: #166534;
border: 1px solid #bbf7d0;
}
.status-erro {
background-color: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
}
/* =========================================================
5. RESPONSIVIDADE (Mobile & Tablets)
========================================================= */
@media (max-width: 768px) {
main {
padding: 40px 15px;
}
.container {
padding: 0 15px;
}
.navbar {
padding: 15px 0;
}
.navbar .container {
flex-direction: column;
gap: 15px;
}
.navbar ul {
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
.navbar a {
padding: 6px 12px;
font-size: 14px;
}
.intro h2 {
font-size: 24px;
}
.intro p {
font-size: 14px;
}
.grid-colaboradores {
grid-template-columns: 1fr;
}
.settings-grid {
grid-template-columns: 1fr;
}
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.data-table th, .data-table td {
white-space: nowrap;
padding: 10px;
}
}