fix performance and new mobile menu
Signed-off-by: Rodrigo Bertoldo de Sousa Martins <rodrigo.sousa.577@gmail.com>
This commit is contained in:
rodrigo committed
1 parent
989d7f0b98
commit
6904171303
4 files changed
+425
-131
No files matched your search
+52
-3
@@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
// Constantes de versão para cache busting
|
||||
define('THEME_VERSION', '1.0.1');
|
||||
define('THEME_VERSION', '1.0.5');
|
||||
|
||||
/**
|
||||
* Theme setup
|
||||
@@ -38,10 +38,12 @@ add_action('after_setup_theme', 'martinsevieira_setup');
|
||||
function martinsevieira_scripts() {
|
||||
// Styles
|
||||
wp_enqueue_style('martinsevieira-style', get_stylesheet_uri(), array(), THEME_VERSION);
|
||||
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', array(), '6.4.0');
|
||||
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', array(), '6.4.0', 'all');
|
||||
wp_style_add_data('font-awesome', 'display', 'swap');
|
||||
|
||||
// Scripts
|
||||
// Scripts com defer para melhor performance
|
||||
wp_enqueue_script('martinsevieira-script', get_template_directory_uri() . '/js/main.js', array(), THEME_VERSION, true);
|
||||
wp_script_add_data('martinsevieira-script', 'defer', true);
|
||||
|
||||
// Localizar script para AJAX
|
||||
wp_localize_script('martinsevieira-script', 'ajaxData', array(
|
||||
@@ -51,6 +53,53 @@ function martinsevieira_scripts() {
|
||||
}
|
||||
add_action('wp_enqueue_scripts', 'martinsevieira_scripts');
|
||||
|
||||
/**
|
||||
* Adicionar atributos async/defer aos scripts
|
||||
*/
|
||||
function add_defer_attribute($tag, $handle) {
|
||||
if ('martinsevieira-script' === $handle) {
|
||||
return str_replace(' src', ' defer src', $tag);
|
||||
}
|
||||
return $tag;
|
||||
}
|
||||
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);
|
||||
|
||||
/**
|
||||
* Otimizar carregamento de fontes
|
||||
*/
|
||||
function add_font_preconnect() {
|
||||
echo '<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>';
|
||||
echo '<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">';
|
||||
}
|
||||
add_action('wp_head', 'add_font_preconnect', 1);
|
||||
|
||||
/**
|
||||
* Remover jQuery Migrate para melhor performance
|
||||
*/
|
||||
function remove_jquery_migrate($scripts) {
|
||||
if (!is_admin() && isset($scripts->registered['jquery'])) {
|
||||
$script = $scripts->registered['jquery'];
|
||||
if ($script->deps) {
|
||||
$script->deps = array_diff($script->deps, array('jquery-migrate'));
|
||||
}
|
||||
}
|
||||
}
|
||||
add_action('wp_default_scripts', 'remove_jquery_migrate');
|
||||
|
||||
/**
|
||||
* Desabilitar emojis do WordPress para melhor performance
|
||||
*/
|
||||
function disable_emojis() {
|
||||
remove_action('wp_head', 'print_emoji_detection_script', 7);
|
||||
remove_action('admin_print_scripts', 'print_emoji_detection_script');
|
||||
remove_action('wp_print_styles', 'print_emoji_styles');
|
||||
remove_action('admin_print_styles', 'print_emoji_styles');
|
||||
remove_filter('the_content_feed', 'wp_staticize_emoji');
|
||||
remove_filter('comment_text_rss', 'wp_staticize_emoji');
|
||||
remove_filter('wp_mail', 'wp_staticize_emoji_for_email');
|
||||
}
|
||||
add_action('init', 'disable_emojis');
|
||||
|
||||
/**
|
||||
* Register widget areas
|
||||
*/
|
||||
|
||||
+49
-7
@@ -14,6 +14,26 @@ $template_uri = get_template_directory_uri();
|
||||
<head>
|
||||
<meta charset="<?php bloginfo('charset'); ?>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- Preconnect para recursos externos -->
|
||||
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
|
||||
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
|
||||
|
||||
<!-- Preload de recursos críticos -->
|
||||
<link rel="preload" href="<?php echo $template_uri; ?>/logo/logo-horizontal.png" as="image">
|
||||
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style">
|
||||
|
||||
<!-- CSS Crítico Inline para melhor performance -->
|
||||
<style>
|
||||
:root{--primary-color:#20337b;--secondary-color:#ffffff;--text-dark:#333;--text-light:#666;--accent-gold:#c9a961;--bg-light:#f8f9fa}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;color:var(--text-dark);line-height:1.6;overflow-x:hidden}
|
||||
.site-header{background:var(--secondary-color);box-shadow:0 2px 10px rgba(0,0,0,.1);position:sticky;top:0;z-index:999}
|
||||
.header-container{max-width:1200px;margin:0 auto;padding:.8rem 2rem;display:flex;justify-content:space-between;align-items:center}
|
||||
.logo img{max-height:65px;width:auto}
|
||||
@media(max-width:768px){.main-nav{display:block!important}}
|
||||
</style>
|
||||
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
<body <?php body_class(); ?>>
|
||||
@@ -36,14 +56,14 @@ $template_uri = get_template_directory_uri();
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<nav class="main-nav" id="main-nav" aria-label="Navegação principal">
|
||||
<nav class="main-nav desktop-nav" aria-label="Navegação principal">
|
||||
<ul>
|
||||
<li><a href="<?php echo $home_url; ?>#inicio"><i class="fas fa-home" aria-hidden="true"></i><span class="nav-text">Início</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#areas"><i class="fas fa-briefcase" aria-hidden="true"></i><span class="nav-text">Áreas de Atuação</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#sobre"><i class="fas fa-info-circle" aria-hidden="true"></i><span class="nav-text">Sobre</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#equipe"><i class="fas fa-user-tie" aria-hidden="true"></i><span class="nav-text">Equipe</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#blog"><i class="fas fa-newspaper" aria-hidden="true"></i><span class="nav-text">Blog</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#contato"><i class="fas fa-envelope" aria-hidden="true"></i><span class="nav-text">Contato</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#inicio"><span class="nav-text">Início</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#areas"><span class="nav-text">Áreas de Atuação</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#sobre"><span class="nav-text">Sobre</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#equipe"><span class="nav-text">Equipe</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#blog"><span class="nav-text">Blog</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#contato"><span class="nav-text">Contato</span></a></li>
|
||||
<li class="theme-toggle-item">
|
||||
<button class="theme-toggle" id="theme-toggle" aria-label="Alternar modo escuro">
|
||||
<i class="fas fa-moon" aria-hidden="true"></i>
|
||||
@@ -53,3 +73,25 @@ $template_uri = get_template_directory_uri();
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Menu Mobile (Separado do header para evitar conflitos de stacking context) -->
|
||||
<div class="mobile-menu-overlay" id="mobile-menu-overlay"></div>
|
||||
<nav class="mobile-nav" id="mobile-nav" aria-label="Menu mobile">
|
||||
<button class="mobile-menu-close" id="mobile-menu-close" aria-label="Fechar menu">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
<ul>
|
||||
<li><a href="<?php echo $home_url; ?>#inicio"><i class="fas fa-home"></i><span>Início</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#areas"><i class="fas fa-briefcase"></i><span>Áreas de Atuação</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#sobre"><i class="fas fa-info-circle"></i><span>Sobre</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#equipe"><i class="fas fa-user-tie"></i><span>Equipe</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#blog"><i class="fas fa-newspaper"></i><span>Blog</span></a></li>
|
||||
<li><a href="<?php echo $home_url; ?>#contato"><i class="fas fa-envelope"></i><span>Contato</span></a></li>
|
||||
<li class="theme-toggle-mobile">
|
||||
<button class="theme-toggle-btn" id="theme-toggle-mobile" aria-label="Alternar modo escuro">
|
||||
<i class="fas fa-moon"></i>
|
||||
<span>Modo Escuro</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
+135
-30
@@ -33,8 +33,11 @@
|
||||
cookieAccept: document.getElementById('cookie-accept'),
|
||||
cookieDecline: document.getElementById('cookie-decline'),
|
||||
themeToggle: document.getElementById('theme-toggle'),
|
||||
themeToggleMobile: document.getElementById('theme-toggle-mobile'),
|
||||
mobileMenuToggle: document.getElementById('mobile-menu-toggle'),
|
||||
mainNav: document.getElementById('main-nav'),
|
||||
mobileMenuClose: document.getElementById('mobile-menu-close'),
|
||||
mobileNav: document.getElementById('mobile-nav'),
|
||||
mobileMenuOverlay: document.getElementById('mobile-menu-overlay'),
|
||||
header: document.querySelector('.site-header'),
|
||||
loadMoreBtn: document.getElementById('load-more-posts'),
|
||||
postsContainer: document.getElementById('posts-container'),
|
||||
@@ -72,25 +75,31 @@
|
||||
// ============= MODO ESCURO =============
|
||||
|
||||
function initDarkMode() {
|
||||
if (!elements.themeToggle) return;
|
||||
const toggles = [elements.themeToggle, elements.themeToggleMobile].filter(Boolean);
|
||||
if (toggles.length === 0) return;
|
||||
|
||||
const icon = elements.themeToggle.querySelector('i');
|
||||
const currentTheme = localStorage.getItem('theme');
|
||||
|
||||
// Aplicar tema inicial
|
||||
if (currentTheme === 'light') {
|
||||
body.classList.remove('dark-mode');
|
||||
toggles.forEach(toggle => {
|
||||
const icon = toggle.querySelector('i');
|
||||
icon?.classList.replace('fa-sun', 'fa-moon');
|
||||
});
|
||||
} else {
|
||||
body.classList.add('dark-mode');
|
||||
toggles.forEach(toggle => {
|
||||
const icon = toggle.querySelector('i');
|
||||
icon?.classList.replace('fa-moon', 'fa-sun');
|
||||
});
|
||||
if (!currentTheme) {
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle modo escuro
|
||||
elements.themeToggle.addEventListener('click', (e) => {
|
||||
function toggleDarkMode(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
@@ -99,50 +108,94 @@
|
||||
|
||||
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||||
|
||||
toggles.forEach(toggle => {
|
||||
const icon = toggle.querySelector('i');
|
||||
if (icon) {
|
||||
icon.classList.replace(isDark ? 'fa-moon' : 'fa-sun', isDark ? 'fa-sun' : 'fa-moon');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
toggles.forEach(toggle => {
|
||||
toggle.addEventListener('click', toggleDarkMode);
|
||||
});
|
||||
}
|
||||
|
||||
// ============= MENU MOBILE =============
|
||||
|
||||
function initMobileMenu() {
|
||||
if (!elements.mobileMenuToggle || !elements.mainNav) return;
|
||||
|
||||
function toggleMenu(shouldOpen) {
|
||||
const isOpen = shouldOpen ?? !elements.mobileMenuToggle.classList.contains('active');
|
||||
|
||||
elements.mobileMenuToggle.classList.toggle('active', isOpen);
|
||||
elements.mobileMenuToggle.setAttribute('aria-expanded', isOpen);
|
||||
elements.mainNav.classList.toggle('active', isOpen);
|
||||
body.classList.toggle('menu-open', isOpen);
|
||||
body.style.overflow = isOpen ? 'hidden' : '';
|
||||
if (!elements.mobileMenuToggle || !elements.mobileNav || !elements.mobileMenuOverlay) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle menu
|
||||
function openMenu() {
|
||||
elements.mobileMenuToggle.classList.add('active');
|
||||
elements.mobileMenuToggle.setAttribute('aria-expanded', 'true');
|
||||
elements.mobileNav.classList.add('active');
|
||||
elements.mobileMenuOverlay.classList.add('active');
|
||||
body.classList.add('menu-open');
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
elements.mobileMenuToggle.classList.remove('active');
|
||||
elements.mobileMenuToggle.setAttribute('aria-expanded', 'false');
|
||||
elements.mobileNav.classList.remove('active');
|
||||
elements.mobileMenuOverlay.classList.remove('active');
|
||||
body.classList.remove('menu-open');
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
if (elements.mobileNav.classList.contains('active')) {
|
||||
closeMenu();
|
||||
} else {
|
||||
openMenu();
|
||||
}
|
||||
}
|
||||
|
||||
// Abrir/fechar menu ao clicar no botão hamburguer
|
||||
elements.mobileMenuToggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleMenu();
|
||||
});
|
||||
|
||||
// Fechar menu ao clicar em links
|
||||
elements.mainNav.addEventListener('click', (e) => {
|
||||
if (e.target.tagName === 'A' && !e.target.closest('.theme-toggle-item')) {
|
||||
toggleMenu(false);
|
||||
// Fechar menu ao clicar no botão X
|
||||
if (elements.mobileMenuClose) {
|
||||
elements.mobileMenuClose.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
closeMenu();
|
||||
});
|
||||
}
|
||||
|
||||
// Fechar menu ao clicar no overlay
|
||||
elements.mobileMenuOverlay.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
closeMenu();
|
||||
});
|
||||
|
||||
// Fechar menu ao clicar fora
|
||||
document.addEventListener('click', (e) => {
|
||||
if (body.classList.contains('menu-open')) {
|
||||
const isClickInsideNav = elements.mainNav.contains(e.target);
|
||||
const isClickOnToggle = elements.mobileMenuToggle.contains(e.target);
|
||||
// Fechar menu ao clicar em links
|
||||
const mobileLinks = elements.mobileNav.querySelectorAll('a');
|
||||
mobileLinks.forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
// Não previne o comportamento padrão para permitir navegação
|
||||
// Apenas fecha o menu
|
||||
closeMenu();
|
||||
});
|
||||
});
|
||||
|
||||
if (!isClickInsideNav && !isClickOnToggle) {
|
||||
toggleMenu(false);
|
||||
// Fechar menu ao clicar no botão de tema mobile
|
||||
if (elements.themeToggleMobile) {
|
||||
elements.themeToggleMobile.addEventListener('click', (e) => {
|
||||
// Não fecha imediatamente, só após trocar tema
|
||||
// O evento de tema já está tratado em initDarkMode
|
||||
});
|
||||
}
|
||||
|
||||
// Fechar menu com tecla ESC
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && elements.mobileNav.classList.contains('active')) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -177,12 +230,25 @@
|
||||
function initHeaderScroll() {
|
||||
if (!elements.header) return;
|
||||
|
||||
const handleScroll = debounce(() => {
|
||||
const shouldElevate = window.scrollY > 100;
|
||||
let lastScrollY = window.scrollY;
|
||||
let ticking = false;
|
||||
|
||||
const updateHeader = () => {
|
||||
const shouldElevate = lastScrollY > 100;
|
||||
elements.header.style.boxShadow = shouldElevate
|
||||
? '0 4px 20px rgba(0,0,0,0.15)'
|
||||
: '0 2px 10px rgba(0,0,0,0.1)';
|
||||
}, 50);
|
||||
ticking = false;
|
||||
};
|
||||
|
||||
const handleScroll = () => {
|
||||
lastScrollY = window.scrollY;
|
||||
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(updateHeader);
|
||||
ticking = true;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
}
|
||||
@@ -198,8 +264,13 @@
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
// Usar requestAnimationFrame para animação suave
|
||||
requestAnimationFrame(() => {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
});
|
||||
// Parar de observar após animar
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
@@ -208,7 +279,7 @@
|
||||
cards.forEach(card => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'all 0.6s ease';
|
||||
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||
observer.observe(card);
|
||||
});
|
||||
}
|
||||
@@ -301,6 +372,39 @@
|
||||
|
||||
// ============= INICIALIZAÇÃO =============
|
||||
|
||||
/**
|
||||
* Lazy loading de imagens nativas
|
||||
*/
|
||||
function initLazyLoading() {
|
||||
// Verificar se o navegador suporta lazy loading nativo
|
||||
if ('loading' in HTMLImageElement.prototype) {
|
||||
const images = document.querySelectorAll('img[loading="lazy"]');
|
||||
images.forEach(img => {
|
||||
if (img.dataset.src) {
|
||||
img.src = img.dataset.src;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Fallback: usar Intersection Observer
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
if (img.dataset.src) {
|
||||
img.src = img.dataset.src;
|
||||
img.removeAttribute('data-src');
|
||||
}
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('img[loading="lazy"]').forEach(img => {
|
||||
imageObserver.observe(img);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initCookieBanner();
|
||||
initDarkMode();
|
||||
@@ -310,6 +414,7 @@
|
||||
initCardAnimations();
|
||||
initRippleEffect();
|
||||
initLoadMorePosts();
|
||||
initLazyLoading();
|
||||
});
|
||||
|
||||
})();
|
||||
@@ -46,6 +46,10 @@ body {
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
transition: background 0.3s ease, color 0.3s ease;
|
||||
/* Aceleração por hardware */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeSpeed;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
@@ -56,6 +60,11 @@ body {
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
transition: all 0.3s ease;
|
||||
/* Aceleração por hardware - sem transform para não quebrar position:fixed do menu mobile */
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
/* Ajuste quando admin bar do WordPress está presente */
|
||||
@@ -89,6 +98,9 @@ body.dark-mode .site-header {
|
||||
max-height: 65px;
|
||||
width: auto;
|
||||
transition: all 0.3s ease;
|
||||
/* Otimização de renderização */
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
body.dark-mode .logo img {
|
||||
@@ -119,6 +131,9 @@ body.dark-mode .logo img {
|
||||
margin: 3px 0;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 3px;
|
||||
/* Aceleração por hardware */
|
||||
will-change: transform, opacity;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
body.dark-mode .mobile-menu-toggle span {
|
||||
@@ -194,6 +209,12 @@ body.dark-mode .main-nav a:hover {
|
||||
color: var(--accent-gold);
|
||||
}
|
||||
|
||||
/* Menu Mobile e Overlay - Hidden por padrão */
|
||||
.mobile-nav,
|
||||
.mobile-menu-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, #16254f 100%);
|
||||
@@ -295,6 +316,10 @@ body.dark-mode .hero-section {
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 4px 15px rgba(201, 169, 97, 0.3);
|
||||
animation: fadeInUp 1s ease 0.6s both;
|
||||
/* Aceleração por hardware */
|
||||
will-change: transform, box-shadow;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
@@ -356,6 +381,11 @@ body.dark-mode .section-title {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* Aceleração por hardware */
|
||||
will-change: transform, box-shadow;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
.area-card::before {
|
||||
@@ -514,6 +544,11 @@ body.dark-mode .equipe-section {
|
||||
transition: all 0.4s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Aceleração por hardware */
|
||||
will-change: transform, box-shadow;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
body.dark-mode .equipe-card {
|
||||
@@ -712,6 +747,11 @@ body.dark-mode .post-card:hover {
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
|
||||
transition: all 0.3s;
|
||||
/* Aceleração por hardware */
|
||||
will-change: transform, box-shadow;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
.post-card:hover {
|
||||
@@ -723,6 +763,11 @@ body.dark-mode .post-card:hover {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
/* Otimização de renderização */
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
@@ -1409,91 +1454,154 @@ body.dark-mode .post-content-single h4 {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* Menu Mobile - Oculto por padrão */
|
||||
.main-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
width: 75%;
|
||||
max-width: 300px;
|
||||
height: 100vh;
|
||||
background: var(--secondary-color);
|
||||
box-shadow: -5px 0 15px rgba(0,0,0,0.2);
|
||||
transition: right 0.3s ease;
|
||||
z-index: 99999;
|
||||
overflow-y: auto;
|
||||
/* Esconder navegação desktop no mobile */
|
||||
.desktop-nav {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.dark-mode .main-nav {
|
||||
background: #1f1f1f;
|
||||
box-shadow: -5px 0 15px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* Menu Mobile - Ativo */
|
||||
.main-nav.active {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.main-nav ul {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding: 5rem 0 2rem 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.main-nav ul li {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
body.dark-mode .main-nav ul li {
|
||||
border-bottom-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.main-nav a {
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.main-nav a i {
|
||||
display: inline-block !important;
|
||||
font-size: 1.2rem;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-nav .theme-toggle-item {
|
||||
margin-top: 1rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.main-nav .theme-toggle {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Overlay quando menu está aberto */
|
||||
body.menu-open::before {
|
||||
content: '';
|
||||
/* Menu Mobile Overlay */
|
||||
.mobile-menu-overlay {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 99998;
|
||||
animation: fadeIn 0.3s ease;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 9998;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
.mobile-menu-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Menu Mobile */
|
||||
.mobile-nav {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80%;
|
||||
max-width: 320px;
|
||||
height: 100vh;
|
||||
background: var(--secondary-color);
|
||||
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
|
||||
z-index: 9999;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
/* Performance */
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
body.dark-mode .mobile-nav {
|
||||
background: #1a1a1a;
|
||||
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.mobile-nav.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* Botão de fechar menu mobile */
|
||||
.mobile-menu-close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.8rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
body.dark-mode .mobile-menu-close {
|
||||
color: var(--accent-gold);
|
||||
}
|
||||
|
||||
.mobile-menu-close:active {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
body.dark-mode .mobile-menu-close:active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.mobile-nav ul {
|
||||
list-style: none;
|
||||
padding: 5rem 0 2rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mobile-nav li {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
body.dark-mode .mobile-nav li {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.mobile-nav a,
|
||||
.mobile-nav .theme-toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.2rem 1.5rem;
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
transition: background 0.2s ease;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
body.dark-mode .mobile-nav a,
|
||||
body.dark-mode .mobile-nav .theme-toggle-btn {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.mobile-nav a:active,
|
||||
.mobile-nav .theme-toggle-btn:active {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
body.dark-mode .mobile-nav a:active,
|
||||
body.dark-mode .mobile-nav .theme-toggle-btn:active {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.mobile-nav i {
|
||||
font-size: 1.2rem;
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
color: var(--accent-gold);
|
||||
}
|
||||
|
||||
.mobile-nav span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Prevenir scroll do body quando menu aberto */
|
||||
body.menu-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Conteúdo da página */
|
||||
@@ -1893,23 +2001,13 @@ body.dark-mode .cookie-decline:hover {
|
||||
|
||||
/* Desktop - garantir que elementos mobile não apareçam */
|
||||
@media (min-width: 769px) {
|
||||
.mobile-menu-toggle {
|
||||
.mobile-menu-toggle,
|
||||
.mobile-nav,
|
||||
.mobile-menu-overlay {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.main-nav a i {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
display: inline !important;
|
||||
.desktop-nav {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user