/* ==== STORMHOUSE - CSS DARK THEME (TOM AZULADO) Paleta: Azul escuro, azul turquesa, verde vibrante e amarelo mostarda Tipografia: Moderna e Profissional ==== */ /* Importação de Fontes do Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap'); /* ==== VARIÁVEIS CSS (Custom Properties) - DARK BLUE THEME ==== */ :root { /* Cores Principais */ --primary-color: #28A745; /* Verde Vibrante */ --secondary-color: #17A2B8; /* Azul Turquesa */ --accent-color: #1A2233; /* Azul Escuro Profundo */ --background-color: #101828; /* Fundo Principal Azul Escuro */ --background-alt: #16203A; /* Fundo Alternativo Azul Mais Claro */ --cta-color: #FFC107; /* Amarelo Mostarda */ --white: #FFFFFF; /* Branco Puro */ --black: #000000; /* Preto */ /* Cores de Estado */ --success-color: #28A745; --warning-color: #FFC107; --danger-color: #DC3545; --info-color: #17A2B8; /* Cores de Texto */ --text-primary: #F1F5FA; /* Texto Principal Azul Claro */ --text-secondary: #A3B8D8; /* Texto Secundário Azul Suave */ --text-muted: #6C7A91; /* Texto Suave Azul */ --text-light: #E9ECEF; /* Texto Muito Claro */ /* Tipografia */ --font-primary: 'Poppins', sans-serif; --font-secondary: 'Inter', sans-serif; /* Tamanhos de Fonte */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; /* Pesos de Fonte */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Espaçamentos */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4rem; /* Bordas */ --border-radius-sm: 0.25rem; --border-radius-md: 0.5rem; --border-radius-lg: 0.75rem; --border-radius-xl: 1rem; /* Sombras */ --shadow-sm: 0 1px 2px 0 rgba(10, 20, 40, 0.25); --shadow-md: 0 4px 6px -1px rgba(10, 20, 40, 0.35), 0 2px 4px -1px rgba(10, 20, 40, 0.25); --shadow-lg: 0 10px 15px -3px rgba(10, 20, 40, 0.35), 0 4px 6px -2px rgba(10, 20, 40, 0.25); --shadow-xl: 0 20px 25px -5px rgba(10, 20, 40, 0.4), 0 10px 10px -5px rgba(10, 20, 40, 0.25); } /* ==== RESET E ESTILOS BASE ==== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-secondary); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.6; color: var(--text-primary); background-color: var(--background-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ==== TIPOGRAFIA ==== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: var(--font-weight-bold); line-height: 1.2; color: var(--secondary-color); margin-bottom: var(--spacing-md); } h1 { font-size: var(--font-size-5xl); font-weight: var(--font-weight-extrabold); color: var(--white); } h2 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); } h3 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); } h4 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); } h5 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); } h6 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); } p { margin-bottom: var(--spacing-md); color: var(--text-primary); } .lead { font-size: var(--font-size-lg); font-weight: var(--font-weight-normal); color: var(--text-secondary); } .small { font-size: var(--font-size-sm); color: var(--text-secondary); } /* Links */ a { color: var(--secondary-color); text-decoration: none; transition: all 0.3s ease; } a:hover { color: var(--cta-color); text-decoration: underline; } /* ==== BOTÕES ==== */ .btn { display: inline-block; padding: var(--spacing-sm) var(--spacing-lg); font-family: var(--font-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); text-align: center; text-decoration: none; border: 2px solid transparent; border-radius: var(--border-radius-md); cursor: pointer; transition: all 0.3s ease; line-height: 1.5; } /* Botão Primário (CTA) */ .btn-primary { background-color: var(--cta-color); color: var(--accent-color); border-color: var(--cta-color); } .btn-primary:hover { background-color: #E0A800; border-color: #E0A800; color: var(--accent-color); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Botão Secundário */ .btn-secondary { background-color: var(--secondary-color); color: var(--white); border-color: var(--secondary-color); } .btn-secondary:hover { background-color: #138496; border-color: #138496; color: var(--white); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Botão Outline */ .btn-outline { background-color: transparent; color: var(--secondary-color); border-color: var(--secondary-color); } .btn-outline:hover { background-color: var(--secondary-color); color: var(--accent-color); text-decoration: none; } /* Tamanhos de Botão */ .btn-sm { padding: var(--spacing-xs) var(--spacing-md); font-size: var(--font-size-sm); } .btn-lg { padding: var(--spacing-md) var(--spacing-xl); font-size: var(--font-size-lg); } /* ==== LAYOUT E CONTAINERS ==== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); } .container-fluid { width: 100%; padding: 0 var(--spacing-md); } /* Grid System */ .row { display: flex; flex-wrap: wrap; margin: 0 -var(--spacing-sm); } .col { flex: 1; padding: 0 var(--spacing-sm); } .col-6 { flex: 0 0 50%; max-width: 50%; padding: 0 var(--spacing-sm); } .col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; padding: 0 var(--spacing-sm); } .col-3 { flex: 0 0 25%; max-width: 25%; padding: 0 var(--spacing-sm); } /* ==== HEADER ==== */ header { background-color: var(--accent-color); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 1000; } .navbar { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) 0; } .logo { font-family: var(--font-primary); font-size: var(--font-size-2xl); font-weight: var(--font-weight-extrabold); color: var(--secondary-color); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; } .logo img { height: 48px; width: auto; border-radius: 8px; padding: 2px; } .nav-menu { display: flex; list-style: none; gap: var(--spacing-lg); } .nav-link { font-weight: var(--font-weight-medium); color: var(--text-primary); transition: color 0.3s ease; } .nav-link:hover { color: var(--secondary-color); text-decoration: none; } /* ==== SEÇÕES ==== */ .section { padding: var(--spacing-3xl) 0; background-color: var(--background-color); } .section-alt { background-color: var(--background-alt); } .section-hero { background: linear-gradient(135deg, #1A2233 0%, #16203A 100%); color: var(--white); text-align: center; padding: var(--spacing-3xl) 0; } .section-hero h1 { color: var(--white); margin-bottom: var(--spacing-lg); } .section-hero p { font-size: var(--font-size-lg); margin-bottom: var(--spacing-xl); opacity: 0.9; } .hero-img-highlight { width: 100%; max-width: 100%; display: block; margin: 2rem auto 0 auto; border-radius: 1.5rem; box-shadow: 0 8px 32px 0 rgba(23,162,184,0.15); object-fit: cover; height: 340px; } /* Ícones de Serviços e Diferenciais */ .icon-rounded { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--primary-color); background: rgba(40,167,69,0.07); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto; box-sizing: border-box; transition: box-shadow 0.2s; overflow: hidden; /* Garante que o ícone não ultrapasse a borda arredondada */ } .icon-rounded img, .icon-rounded svg { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; display: block; background: none; margin: 0; padding: 0; } /* ==== CARDS ==== */ .card { background-color: var(--background-alt); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); padding: var(--spacing-xl); transition: transform 0.3s ease, box-shadow 0.3s ease; color: var(--text-primary); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .card-title { color: var(--secondary-color); margin-bottom: var(--spacing-md); } .card-text { color: var(--text-secondary); margin-bottom: var(--spacing-lg); } .card.text-center .icon-rounded { margin-bottom: 1rem; } .card.servico-card { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; } /* Depoimentos - layout responsivo */ .testimonial-row { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; } .testimonial-card { display: flex; background: var(--background-alt); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); overflow: hidden; min-height: 180px; margin-bottom: 2rem; max-width: 600px; width: 100%; } .testimonial-photo { flex: 0 0 180px; width: 180px; height: 100%; display: flex; align-items: stretch; justify-content: center; background: #16203A; border-right: 2px solid var(--primary-color); } .testimonial-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; } .testimonial-content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 2rem; } .testimonial-content .card-text { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 1rem; } .testimonial-content .small { color: var(--text-secondary); } /* Formulário de Contato Rápido */ .contact-form { max-width: 600px; margin: 0 auto; } .contact-form .form-group { width: 100%; } .contact-form textarea.form-control { min-height: 120px; width: 100%; resize: vertical; } .contact-form .btn { width: 100%; margin-top: 1rem; } /* ==== FOOTER ==== */ footer { background-color: var(--accent-color); color: var(--text-light); padding: var(--spacing-3xl) 0 var(--spacing-xl) 0; } footer h5 { color: var(--white); margin-bottom: var(--spacing-md); } footer a { color: var(--text-light); opacity: 0.8; } footer a:hover { color: var(--secondary-color); opacity: 1; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); text-align: center; opacity: 0.7; } /* ==== UTILITÁRIOS ==== */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-primary { color: var(--secondary-color); } .text-secondary { color: var(--primary-color); } .text-muted { color: var(--text-muted); } .bg-primary { background-color: var(--secondary-color); } .bg-secondary { background-color: var(--primary-color); } .bg-light { background-color: var(--background-alt); } .bg-white { background-color: var(--accent-color); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--spacing-xs); } .mb-2 { margin-bottom: var(--spacing-sm); } .mb-3 { margin-bottom: var(--spacing-md); } .mb-4 { margin-bottom: var(--spacing-lg); } .mb-5 { margin-bottom: var(--spacing-xl); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--spacing-xs); } .mt-2 { margin-top: var(--spacing-sm); } .mt-3 { margin-top: var(--spacing-md); } .mt-4 { margin-top: var(--spacing-lg); } .mt-5 { margin-top: var(--spacing-xl); } /* ==== RESPONSIVIDADE ==== */ @media (max-width: 900px) { .nav-menu, .navbar > .btn.btn-primary { display: none !important; } .hero-img-highlight { height: 220px; } .testimonial-row { flex-direction: column; gap: 1.5rem; align-items: center; } .testimonial-card { flex-direction: column; min-height: unset; width: 100%; max-width: 500px; } .testimonial-photo { width: 100%; height: 180px; border-right: none; border-bottom: 2px solid var(--primary-color); justify-content: center; flex: 0 0 180px; display: flex; align-items: center; background: #16203A; } .testimonial-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1.5rem; text-align: center; } .testimonial-photo img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 4px solid var(--primary-color); display: block; background: #16203A; margin: 0 auto; } .testimonial-content .card-text { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 1rem; } .testimonial-content .small { color: var(--text-secondary); } .card.servico-card { height: auto; } } @media (max-width: 768px) { :root { --font-size-5xl: 2.25rem; --font-size-4xl: 1.875rem; --font-size-3xl: 1.5rem; } .container { padding: 0 var(--spacing-sm); } .navbar { flex-direction: column; gap: var(--spacing-md); } .nav-menu { flex-direction: column; gap: var(--spacing-sm); text-align: center; } .row { flex-direction: column; } .row.servicos-row { align-items: stretch; } .col, .col-6, .col-4, .col-3 { flex: 1; max-width: 100%; margin-bottom: var(--spacing-md); } .section { padding: var(--spacing-xl) 0; } .btn { width: 100%; margin-bottom: var(--spacing-sm); } .hide-mobile { display: none; } /* Centralizar textos do footer em mobile/tablet */ footer .row, footer .col-6, footer h5, footer p, footer ul, footer a { text-align: center !important; justify-content: center; align-items: center; } } @media (max-width: 600px) { .logo img { height: 28px; } .hero-img-highlight { border-radius: 1rem; height: 160px; } .icon-rounded { width: 56px; height: 56px; } .icon-rounded img, .icon-rounded svg { width: 40px; height: 40px; } .testimonial-photo { height: 160px; } .testimonial-photo img { width: 96px; height: 96px; } .testimonial-content { padding: 1rem; } } @media (max-width: 480px) { .container { padding: 0 var(--spacing-xs); } .card { padding: var(--spacing-lg); } } /* ==== ANIMAÇÕES ==== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.6s ease-out; } /* ==== FORMULÁRIOS ==== */ .form-group { margin-bottom: var(--spacing-lg); } .form-label { display: block; margin-bottom: var(--spacing-xs); font-weight: var(--font-weight-medium); color: var(--text-primary); } .form-control { width: 100%; padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-base); border: 2px solid #22304A; background: #22304A; color: var(--text-primary); border-radius: var(--border-radius-md); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .form-control:focus { outline: none; border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.15); } textarea.form-control { resize: vertical; min-height: 120px; }