Como criar um simples SPA com javascript e bootstrap 5

Simples SPA com javascript e bootstrap 5

Tutorial: SPA Moderna com Vanilla JS e ES Modules

Estrutura do Projeto

Conceitos Aplicados

1. ES Modules nativos — cada arquivo usa export/import; o HTML carrega apenas <script type="module" src="app.js"> e o browser resolve a árvore de dependências.

2. Roteamento por hash — a URL #home, #about, #contact controla qual página é exibida. O app.js ouve o evento hashchange e renderiza o template correspondente.

3. Separação de responsabilidades — cada página é uma função que retorna HTML (template literal). Lógica específica (ex: bindContactForm) fica junto da página que a utiliza.

4. CSS externo com custom properties — variáveis como --spa-primary e --spa-gradient centralizam cores e facilitam customização.

5. Dark mode nativo — usa data-bs-theme do Bootstrap 5.3, com persistência via localStorage e detecção da preferência do sistema (prefers-color-scheme).

6. Transições de página — classe .page-exit aplica fade+slide antes de trocar o conteúdo; animações .fade-up escalonadas nos elementos internos.

7. Zero dependências de build — funciona direto no browser, sem bundler, transpiler ou framework. Apenas Bootstrap via C

app.js

import { homePage } from './pages/home.js';
import { aboutPage } from './pages/about.js';
import { contactPage, bindContactForm } from './pages/contact.js';
import { notFoundPage } from './pages/404.js';
import { showToast } from './utils/toast.js';

// ??? Route Registry ?????????????????????????????????????????
const routes = {
 home: homePage,
 about: aboutPage,
 contact: contactPage,
 404: notFoundPage
};

// Hooks executados após renderizar cada página
const afterRender = {
 contact: bindContactForm
};

// ??? Router ??????????????????????????????????????????????????
const contentDiv = document.getElementById('app-content');
let currentPage = null;

function navigateTo(page) {
 if (page === currentPage) return;
 currentPage = page;

 // Animate out
 contentDiv.classList.add('page-exit');

 setTimeout(() => {
 const renderer = routes[page] || routes['404'];
 contentDiv.innerHTML = renderer();
 contentDiv.classList.remove('page-exit');
 window.scrollTo({ top: 0, behavior: 'smooth' });

 // Update active nav link
 document.querySelectorAll('.nav-link[data-page]').forEach(link => {
 link.classList.toggle('active', link.dataset.page === page);
 });

 // Run page-specific hooks
 if (afterRender[page]) afterRender[page]();

 // Bind internal SPA links inside page content
 bindInternalLinks(contentDiv);
 }, 250);
}

function bindInternalLinks(root) {
 root.querySelectorAll('a[data-page]').forEach(link => {
 link.addEventListener('click', (e) => {
 e.preventDefault();
 window.location.hash = link.dataset.page;
 });
 });
}

// ??? Theme Toggle ???????????????????????????????????????????
const themeBtn = document.getElementById('themeToggle');
const htmlEl = document.documentElement;

function applyTheme(theme) {
 htmlEl.setAttribute('data-bs-theme', theme);
 themeBtn.innerHTML = theme === 'dark'
 ? '<i class="bi bi-sun-fill"></i>'
 : '<i class="bi bi-moon-stars-fill"></i>';
 localStorage.setItem('spa-theme', theme);
}

const savedTheme = localStorage.getItem('spa-theme')
 || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
applyTheme(savedTheme);

themeBtn.addEventListener('click', () => {
 applyTheme(htmlEl.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark');
});

// ??? Hash Routing ???????????????????????????????????????????
function handleRoute() {
 const hash = window.location.hash.replace('#', '') || 'home';
 navigateTo(hash);
}

window.addEventListener('hashchange', handleRoute);

document.querySelectorAll('.nav-link[data-page]').forEach(link => {
 link.addEventListener('click', (e) => {
 e.preventDefault();
 window.location.hash = link.dataset.page;
 const navCollapse = document.getElementById('navbarNav');
 const bsCollapse = bootstrap.Collapse.getInstance(navCollapse);
 if (bsCollapse) bsCollapse.hide();
 });
});

// Initial load
handleRoute();

index.html

<!DOCTYPE html>
<html lang="pt-BR" data-bs-theme="light">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SPA Moderna</title>
 <!-- Bootstrap 5.3 CSS -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 <!-- Bootstrap Icons -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
 <!-- Google Fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 <!-- App CSS -->
 <link rel="stylesheet" href="style.css">
</head>

<body>
 <!-- Navbar -->
 <nav class="navbar navbar-expand-lg sticky-top">
 <div class="container">
 <a class="navbar-brand" href="#home">
 <i class="bi bi-hexagon-fill me-1"></i> SPA
 </a>
 <div class="d-flex align-items-center gap-2 order-lg-last">
 <button class="btn-theme" id="themeToggle" aria-label="Alternar tema">
 <i class="bi bi-moon-stars-fill"></i>
 </button>
 <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse"
 data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
 aria-label="Abrir menu">
 <span class="navbar-toggler-icon"></span>
 </button>
 </div>
 <div class="collapse navbar-collapse" id="navbarNav">
 <ul class="navbar-nav ms-auto gap-1">
 <li class="nav-item">
 <a class="nav-link active" href="#home" data-page="home">
 <i class="bi bi-house-door"></i> Home
 </a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#about" data-page="about">
 <i class="bi bi-info-circle"></i> Sobre
 </a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#contact" data-page="contact">
 <i class="bi bi-envelope"></i> Contato
 </a>
 </li>
 </ul>
 </div>
 </div>
 </nav>

 <!-- Content -->
 <main class="container py-4 py-lg-5">
 <div id="app-content"></div>
 </main>

 <!-- Footer -->
 <footer class="py-4">
 <div class="container">
 <div class="row align-items-center g-3">
 <div class="col-md-6 text-center text-md-start">
 <span class="text-secondary small">&copy; 2026 SPA Moderna. Todos os direitos reservados.</span>
 </div>
 <div class="col-md-6 text-center text-md-end">
 <a href="#" class="me-3"><i class="bi bi-github fs-5"></i></a>
 <a href="#" class="me-3"><i class="bi bi-twitter-x fs-5"></i></a>
 <a href="#"><i class="bi bi-linkedin fs-5"></i></a>
 </div>
 </div>
 </div>
 </footer>

 <!-- Toast container -->
 <div class="toast-container" id="toastContainer"></div>

 <!-- Bootstrap 5.3 Bundle -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 <!-- App (ES Module) -->
 <script type="module" src="app.js"></script>
</body>

</html>

/pages/404.js

export const notFoundPage = () => `
 <div class="text-center py-5 fade-up">
 <div class="display-1 fw-bold" style="background:var(--spa-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">404</div>
 <h3 class="fw-bold mt-2 mb-3">Página não encontrada</h3>
 <p class="text-secondary mb-4">A página que você procura não existe ou foi movida.</p>
 <a href="#home" data-page="home" class="btn btn-primary">
 <i class="bi bi-house me-2"></i>Voltar ao início
 </a>
 </div>
`;

/pages/about.js

export const aboutPage = () => `
 <div class="row g-5 align-items-center mb-5">
 <div class="col-lg-6 fade-up">
 <span class="badge rounded-pill text-bg-primary bg-opacity-10 text-primary mb-3 px-3 py-2" 
 style="background: rgba(99,102,241,.1) !important; color: var(--spa-primary) !important">
 <i class="bi bi-stars me-1"></i> Sobre nós
 </span>
 <h2 class="fw-bold mb-3" style="letter-spacing:-0.03em">
 Criamos experiências digitais excepcionais
 </h2>
 <p class="text-secondary mb-4">
 Somos apaixonados por tecnologia e design. Nossa missão é transformar ideias em 
 aplicações web modernas, performáticas e acessíveis para todos.
 </p>
 <a href="#contact" data-page="contact" class="btn btn-primary">
 Fale conosco <i class="bi bi-arrow-right ms-1"></i>
 </a>
 </div>
 <div class="col-lg-6 fade-up" style="animation-delay:0.1s">
 <div class="p-4">
 <h5 class="fw-semibold mb-4"><i class="bi bi-clock-history me-2 text-primary"></i>Nossa Trajetória</h5>
 ${[
 { year: '2020', text: 'Início do projeto com foco em soluções web modernas.' },
 { year: '2022', text: 'Expansão da equipe e adoção de metodologias ágeis.' },
 { year: '2024', text: 'Migração para arquitetura baseada em SPA e componentização.' },
 { year: '2026', text: 'Lançamento da versão totalmente modernizada.' }
 ].map(t => `
 <div class="timeline-item">
 <h6>${t.year}</h6>
 <p class="text-secondary small mb-0">${t.text}</p>
 </div>
 `).join('')}
 </div>
 </div>
 </div>

 <h4 class="fw-bold text-center mb-4 fade-up">Nossa Equipe</h4>
 <div class="row g-4 mb-3">
 ${[
 { initials: 'AS', name: 'Ana Silva', role: 'CEO & Design', icon: 'bi-palette2' },
 { initials: 'MR', name: 'Marcos Reis', role: 'Full-stack Dev', icon: 'bi-code-slash' },
 { initials: 'JF', name: 'Julia Fontes', role: 'UX Research', icon: 'bi-person-hearts' }
 ].map((m, i) => `
 <div class="col-md-4 fade-up" style="animation-delay:${i * 0.1}s">
 <div class="team-card">
 <div class="team-avatar">${m.initials}</div>
 <h6 class="fw-semibold mb-1">${m.name}</h6>
 <span class="text-secondary small"><i class="bi ${m.icon} me-1"></i>${m.role}</span>
 </div>
 </div>
 `).join('')}
 </div>
`;

/pages/contact.js

import { showToast } from '../utils/toast.js';

export const contactPage = () => `
 <div class="row g-5">
 <div class="col-lg-5 fade-up">
 <span class="badge rounded-pill text-bg-primary bg-opacity-10 text-primary mb-3 px-3 py-2"
 style="background: rgba(99,102,241,.1) !important; color: var(--spa-primary) !important">
 <i class="bi bi-chat-dots me-1"></i> Contato
 </span>
 <h2 class="fw-bold mb-3" style="letter-spacing:-0.03em">Vamos conversar?</h2>
 <p class="text-secondary mb-4">
 Tem uma ideia, projeto ou dúvida? Preencha o formulário ou use um dos canais abaixo. 
 Respondemos em até 24 horas.
 </p>
 <div class="d-flex flex-column gap-3">
 ${[
 { icon: 'bi-envelope-at', label: 'E-mail', value: 'contato@exemplo.com' },
 { icon: 'bi-telephone', label: 'Telefone', value: '+55 (11) 99999-0000' },
 { icon: 'bi-geo-alt', label: 'Localização', value: 'São Paulo, SP — Brasil' }
 ].map(c => `
 <div class="contact-info-card">
 <div class="icon-wrapper"><i class="bi ${c.icon}"></i></div>
 <div>
 <div class="small text-secondary">${c.label}</div>
 <div class="fw-medium">${c.value}</div>
 </div>
 </div>
 `).join('')}
 </div>
 </div>
 <div class="col-lg-7 fade-up" style="animation-delay:0.1s">
 <div class="p-4 p-lg-5 rounded-4" style="border:1px solid rgba(0,0,0,0.06); background: var(--bs-body-bg)">
 <form id="contactForm" novalidate>
 <div class="row g-3">
 <div class="col-sm-6">
 <label class="form-label small fw-medium">Nome</label>
 <input type="text" class="form-control" placeholder="Seu nome" required>
 </div>
 <div class="col-sm-6">
 <label class="form-label small fw-medium">E-mail</label>
 <input type="email" class="form-control" placeholder="seu@email.com" required>
 </div>
 <div class="col-12">
 <label class="form-label small fw-medium">Assunto</label>
 <select class="form-select">
 <option selected disabled>Selecione um assunto</option>
 <option>Projeto novo</option>
 <option>Consultoria</option>
 <option>Parceria</option>
 <option>Outro</option>
 </select>
 </div>
 <div class="col-12">
 <label class="form-label small fw-medium">Mensagem</label>
 <textarea class="form-control" rows="4" placeholder="Descreva como podemos ajudar…" required></textarea>
 </div>
 <div class="col-12">
 <button type="submit" class="btn btn-primary w-100">
 <i class="bi bi-send me-2"></i>Enviar mensagem
 </button>
 </div>
 </div>
 </form>
 </div>
 </div>
 </div>
`;

export function bindContactForm() {
 const form = document.getElementById('contactForm');
 if (!form) return;

 form.addEventListener('submit', (e) => {
 e.preventDefault();
 if (!form.checkValidity()) {
 form.classList.add('was-validated');
 return;
 }
 showToast('Mensagem enviada!', 'Obrigado pelo contato. Responderemos em breve.', 'bi-check-circle-fill text-success');
 form.reset();
 form.classList.remove('was-validated');
 });
}

/pages/home.js

export const homePage = () => `
 <section class="hero text-center mb-5 fade-up">
 <h1 class="mb-3">Construa algo<br>incrível hoje</h1>
 <p class="mx-auto mb-4" style="max-width:540px">
 Uma Single Page Application moderna, rápida e elegante — feita com Bootstrap 5.3, ícones, 
 dark mode e transições suaves.
 </p>
 <a href="#about" data-page="about" class="btn btn-outline-light btn-lg">
 Saiba mais <i class="bi bi-arrow-right ms-1"></i>
 </a>
 </section>

 <div class="row g-4 mb-5">
 ${[
 { icon: 'bi-lightning-charge', title: 'Ultra Rápido', desc: 'Carregamento instantâneo sem reloads de página. Transições suaves entre seções.' },
 { icon: 'bi-palette', title: 'Design Moderno', desc: 'Interface clean com gradientes, glassmorphism e tema escuro automático.' },
 { icon: 'bi-phone', title: 'Responsivo', desc: 'Layout adaptável para qualquer dispositivo — desktop, tablet ou mobile.' },
 { icon: 'bi-shield-check', title: 'Boas Práticas', desc: 'Código semântico, acessível e seguindo padrões modernos da web.' },
 { icon: 'bi-gear', title: 'Fácil de Customizar', desc: 'Custom properties CSS, arquitetura simples e extensível.' },
 { icon: 'bi-moon-stars', title: 'Dark Mode', desc: 'Alternância de tema com um clique, respeitando a preferência do sistema.' }
 ].map((f, i) => `
 <div class="col-md-6 col-lg-4 fade-up" style="animation-delay:${i * 0.08}s">
 <div class="feature-card">
 <div class="feature-icon"><i class="bi ${f.icon}"></i></div>
 <h5>${f.title}</h5>
 <p class="mb-0">${f.desc}</p>
 </div>
 </div>
 `).join('')}
 </div>

 <div class="row g-4 text-center mb-3">
 ${[
 { value: '99.9%', label: 'Uptime' },
 { value: '< 50ms', label: 'Latência' },
 { value: '100', label: 'Lighthouse Score' },
 { value: '0', label: 'Dependências externas' }
 ].map((s, i) => `
 <div class="col-6 col-lg-3 fade-up" style="animation-delay:${(i + 6) * 0.08}s">
 <div class="stat-value">${s.value}</div>
 <div class="stat-label">${s.label}</div>
 </div>
 `).join('')}
 </div>
`;

utils/toast.js

export function showToast(title, body, iconClass = 'bi-info-circle-fill') {
 const container = document.getElementById('toastContainer');
 const id = 'toast-' + Date.now();
 const html = `
 <div id="${id}" class="toast align-items-center border-0 shadow-lg" role="alert" 
 aria-live="assertive" aria-atomic="true">
 <div class="toast-header">
 <i class="bi ${iconClass} me-2"></i>
 <strong class="me-auto">${title}</strong>
 <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="toast"></button>
 </div>
 <div class="toast-body">${body}</div>
 </div>`;
 container.insertAdjacentHTML('beforeend', html);
 const toastEl = document.getElementById(id);
 const toast = new bootstrap.Toast(toastEl, { delay: 4000 });
 toast.show();
 toastEl.addEventListener('hidden.bs.toast', () => toastEl.remove());
}

style.css

:root {
 --spa-primary: #6366f1 ;
 --spa-primary-hover: #4f46e5 ;
 --spa-accent: #06b6d4 ;
 --spa-gradient: linear-gradient(135deg, #6366f1 , #06b6d4 );
 --spa-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 --spa-radius: 1rem;
 --spa-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 --spa-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

* {
 font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 overflow-x: hidden;
}

/* Navbar */
.navbar {
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 background: rgba(255, 255, 255, 0.8) !important;
 border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 padding: 0.75rem 0;
 transition: var(--spa-transition);
}

[data-bs-theme="dark"] .navbar {
 background: rgba(30, 30, 40, 0.85) !important;
 border-bottom-color: rgba(255, 255, 255, 0.06);
}

.navbar-brand {
 font-weight: 700;
 font-size: 1.35rem;
 background: var(--spa-gradient);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 letter-spacing: -0.025em;
}

.nav-link {
 font-weight: 500;
 font-size: 0.925rem;
 padding: 0.5rem 1rem !important;
 border-radius: 0.5rem;
 transition: var(--spa-transition);
 position: relative;
 color: var(--bs-body-color) !important;
}

.nav-link:hover,
.nav-link.active {
 color: var(--spa-primary) !important;
 background: rgba(99, 102, 241, 0.08);
}

.nav-link.active::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 1.25rem;
 height: 2px;
 background: var(--spa-gradient);
 border-radius: 2px;
}

.nav-link i {
 margin-right: 0.35rem;
 font-size: 1rem;
}

/* Theme toggle */
.btn-theme {
 border: none;
 background: transparent;
 font-size: 1.2rem;
 padding: 0.4rem 0.6rem;
 border-radius: 0.5rem;
 transition: var(--spa-transition);
 color: var(--bs-body-color);
 cursor: pointer;
}

.btn-theme:hover {
 background: rgba(99, 102, 241, 0.1);
 color: var(--spa-primary);
}

/* Page transitions */
#app-content {
 flex: 1;
 opacity: 1;
 transform: translateY(0);
 transition: opacity 0.25s ease, transform 0.25s ease;
}

#app-content.page-exit {
 opacity: 0;
 transform: translateY(12px);
}

/* Hero Section */
.hero {
 background: var(--spa-gradient);
 border-radius: var(--spa-radius);
 padding: 4rem 2rem;
 color: #fff ;
 position: relative;
 overflow: hidden;
}

.hero::before {
 content: '';
 position: absolute;
 inset: 0;
 background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero h1 {
 font-weight: 700;
 font-size: 2.75rem;
 letter-spacing: -0.035em;
 position: relative;
}

.hero p {
 font-size: 1.15rem;
 opacity: 0.9;
 position: relative;
}

.hero .btn {
 position: relative;
}

/* Cards */
.feature-card {
 border: 1px solid rgba(0, 0, 0, 0.06);
 border-radius: var(--spa-radius);
 padding: 2rem;
 transition: var(--spa-transition);
 background: var(--bs-body-bg);
 height: 100%;
}

[data-bs-theme="dark"] .feature-card {
 border-color: rgba(255, 255, 255, 0.08);
}

.feature-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--spa-shadow-lg);
 border-color: rgba(99, 102, 241, 0.25);
}

.feature-icon {
 width: 3rem;
 height: 3rem;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 0.75rem;
 background: rgba(99, 102, 241, 0.1);
 color: var(--spa-primary);
 font-size: 1.3rem;
 margin-bottom: 1rem;
}

.feature-card h5 {
 font-weight: 600;
 letter-spacing: -0.01em;
}

.feature-card p {
 color: var(--bs-secondary-color);
 font-size: 0.925rem;
 line-height: 1.6;
}

/* Stats */
.stat-value {
 font-size: 2.25rem;
 font-weight: 700;
 background: var(--spa-gradient);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

.stat-label {
 font-size: 0.85rem;
 color: var(--bs-secondary-color);
 font-weight: 500;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

/* About page */
.timeline-item {
 position: relative;
 padding-left: 2rem;
 padding-bottom: 2rem;
 border-left: 2px solid rgba(99, 102, 241, 0.2);
}

.timeline-item:last-child {
 padding-bottom: 0;
}

.timeline-item::before {
 content: '';
 position: absolute;
 left: -6px;
 top: 4px;
 width: 10px;
 height: 10px;
 background: var(--spa-primary);
 border-radius: 50%;
}

.timeline-item h6 {
 font-weight: 600;
 color: var(--spa-primary);
}

/* Team */
.team-card {
 text-align: center;
 padding: 2rem 1.5rem;
 border: 1px solid rgba(0, 0, 0, 0.06);
 border-radius: var(--spa-radius);
 transition: var(--spa-transition);
}

[data-bs-theme="dark"] .team-card {
 border-color: rgba(255, 255, 255, 0.08);
}

.team-card:hover {
 box-shadow: var(--spa-shadow-lg);
 transform: translateY(-4px);
}

.team-avatar {
 width: 80px;
 height: 80px;
 border-radius: 50%;
 background: var(--spa-gradient);
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 1rem;
 font-size: 2rem;
 color: #fff ;
 font-weight: 600;
}

/* Contact */
.contact-info-card {
 display: flex;
 align-items: center;
 gap: 1rem;
 padding: 1.25rem;
 border: 1px solid rgba(0, 0, 0, 0.06);
 border-radius: var(--spa-radius);
 transition: var(--spa-transition);
}

[data-bs-theme="dark"] .contact-info-card {
 border-color: rgba(255, 255, 255, 0.08);
}

.contact-info-card:hover {
 border-color: rgba(99, 102, 241, 0.3);
 box-shadow: var(--spa-shadow);
}

.contact-info-card .icon-wrapper {
 width: 3rem;
 height: 3rem;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 0.75rem;
 background: rgba(99, 102, 241, 0.1);
 color: var(--spa-primary);
 font-size: 1.2rem;
 flex-shrink: 0;
}

.form-control,
.form-select {
 border-radius: 0.75rem;
 padding: 0.75rem 1rem;
 border: 1px solid rgba(0, 0, 0, 0.1);
 transition: var(--spa-transition);
}

.form-control:focus,
.form-select:focus {
 border-color: var(--spa-primary);
 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.btn-primary {
 background: var(--spa-gradient);
 border: none;
 border-radius: 0.75rem;
 padding: 0.75rem 2rem;
 font-weight: 600;
 transition: var(--spa-transition);
}

.btn-primary:hover {
 transform: translateY(-1px);
 box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);
}

.btn-outline-light {
 border-radius: 0.75rem;
 padding: 0.65rem 1.75rem;
 font-weight: 600;
 border-width: 2px;
}

/* Footer */
footer {
 border-top: 1px solid rgba(0, 0, 0, 0.06);
 margin-top: auto;
}

[data-bs-theme="dark"] footer {
 border-top-color: rgba(255, 255, 255, 0.06);
}

footer a {
 color: var(--bs-secondary-color);
 text-decoration: none;
 transition: var(--spa-transition);
}

footer a:hover {
 color: var(--spa-primary);
}

/* Animate elements on page load */
.fade-up {
 animation: fadeUp 0.5s ease forwards;
 opacity: 0;
}

@keyframes fadeUp {
 from {
 opacity: 0;
 transform: translateY(20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

.fade-up:nth-child(2) { animation-delay: 0.1s; }
.fade-up:nth-child(3) { animation-delay: 0.2s; }
.fade-up:nth-child(4) { animation-delay: 0.3s; }

/* Toast */
.toast-container {
 position: fixed;
 bottom: 1.5rem;
 right: 1.5rem;
 z-index: 9999;
}

/* Scrollbar */
::-webkit-scrollbar {
 width: 8px;
}

::-webkit-scrollbar-track {
 background: transparent;
}

::-webkit-scrollbar-thumb {
 background: rgba(99, 102, 241, 0.3);
 border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
 background: rgba(99, 102, 241, 0.5);
}