/* Theme Name: Mahara New 2026 Theme URI: https://www.maharadigital.com.br Author: Mahara Digital Description: Tema institucional da Mahara Digital, portado do design novo (Antigravity). Produtora de video em Santos. Version: 1.13 Requires at least: 5.9 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later Text Domain: mahara */ /* O CSS visual do site esta embutido no (header.php) e em cada template, exatamente como no design original, para fidelidade total. */ /* ========================================================================== 1. DESIGN SYSTEM & CSS VARIABLES ========================================================================== */ :root { /* Color Palette */ --color-bg-dark: #070a0f; --color-bg-panel: #0a0e15; --color-bg-card: rgba(255,255,255,.03); --color-border: rgba(255,255,255,.09); --color-text-primary: #eef1f5; --color-text-secondary: #9aa4b1; --color-text-muted: #5a6675; --color-accent: #22d3ee; --color-whatsapp: #22d3ee; --color-whatsapp-hover: #3bdcf0; --color-overlay: rgba(7, 10, 15, 0.9); /* Typography */ --font-primary: 'Hanken Grotesk', system-ui, sans-serif; --font-heading: 'Plus Jakarta Sans', sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-2xl: 2rem; --font-size-3xl: 3rem; --font-size-4xl: 4.5rem; /* Spacing */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 3rem; --spacing-xl: 5rem; --spacing-xxl: 8rem; /* Layout */ --container-max-width: 1200px; --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 16px; /* Transitions */ --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================================== 2. RESET & BASE STYLES ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; background-color: var(--color-bg-dark); } body { font-family: var(--font-primary); font-size: var(--font-size-md); line-height: 1.6; color: var(--color-text-primary); background-color: var(--color-bg-dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.1; } /* ========================================================================== 3. TYPOGRAPHY HIERARCHY ========================================================================== */ h1 { font-size: clamp(2.5rem, 5vw, var(--font-size-4xl)); } h2 { font-size: clamp(2rem, 4vw, var(--font-size-3xl)); margin-bottom: var(--spacing-sm); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); } .text-gradient { background: linear-gradient(135deg, #ffffff 0%, #888888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ========================================================================== 4. LAYOUT COMPONENTS ========================================================================== */ .container { width: 90%; max-width: var(--container-max-width); margin: 0 auto; } .section { padding: var(--spacing-xl) 0; position: relative; overflow: hidden; } .section-xxl { padding: var(--spacing-xxl) 0; } .section-header { text-align: center; max-width: 700px; margin: 0 auto var(--spacing-lg) auto; } .section-tagline { font-size: var(--font-size-xs); color: var(--color-text-secondary); letter-spacing: 0.25em; margin-bottom: var(--spacing-xs); display: block; } /* Grid Layouts */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); } @media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .section { padding: var(--spacing-lg) 0; } } /* ========================================================================== 5. BUTTONS & INTERACTIVE ELEMENTS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 2rem; font-family: var(--font-heading); font-size: var(--font-size-md); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 9999px; border: 1px solid var(--color-accent); background-color: transparent; color: var(--color-text-primary); cursor: pointer; transition: all var(--transition-fast); } .btn-primary { background-color: var(--color-text-primary); color: var(--color-bg-dark); } .btn-primary:hover { background-color: transparent; color: var(--color-text-primary); } .btn-outline:hover { background-color: var(--color-text-primary); color: var(--color-bg-dark); } .btn-whatsapp { background-color: var(--color-whatsapp); border-color: var(--color-whatsapp); color: var(--color-text-primary); } .btn-whatsapp:hover { background-color: var(--color-whatsapp-hover); border-color: var(--color-whatsapp-hover); transform: translateY(-2px); } /* ========================================================================== 6. HEADER & NAV STYLING ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: transparent; transition: background-color var(--transition-fast), padding var(--transition-fast); padding: 1.5rem 0; } .site-header.scrolled { background-color: rgba(15, 15, 15, 0.95); backdrop-filter: blur(10px); padding: 1rem 0; border-bottom: 1px solid var(--color-border); } .header-container { display: flex; align-items: center; justify-content: space-between; } .logo img { height: 32px; width: auto; } .main-nav ul { display: flex; gap: var(--spacing-md); } .main-nav a { font-family: var(--font-heading); text-transform: uppercase; font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.05em; opacity: 0.8; } .main-nav a:hover, .main-nav li.current-menu-item a { opacity: 1; color: var(--color-accent); } /* Mobile Nav Toggle */ .nav-toggle { display: none; background: none; border: none; color: var(--color-text-primary); font-size: 1.5rem; cursor: pointer; } @media (max-width: 768px) { .nav-toggle { display: block; } .main-nav { display: none; /* Mobile Drawer handled via JavaScript */ } } /* ========================================================================== 7. FOOTER STYLING ========================================================================== */ .site-footer { background-color: var(--color-bg-panel); border-top: 1px solid var(--color-border); padding: var(--spacing-lg) 0 var(--spacing-md) 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: var(--spacing-md); } } .footer-logo img { height: 48px; margin-bottom: var(--spacing-sm); } .footer-nav ul { display: flex; flex-direction: column; gap: var(--spacing-xs); } .footer-nav a:hover { color: var(--color-text-primary); } .footer-newsletter h4 { margin-bottom: var(--spacing-xs); } .footer-bottom { border-top: 1px solid var(--color-border); padding-top: var(--spacing-md); text-align: center; font-size: var(--font-size-xs); } /* ========================================================================== 8. MOBILE NAVIGATION DRAWER ========================================================================== */ .mobile-menu-drawer { position: fixed; top: 0; right: 0; width: 300px; height: 100vh; background-color: var(--color-bg-panel); z-index: 2000; display: flex; flex-direction: column; justify-content: space-between; padding: var(--spacing-md); border-left: 1px solid var(--color-border); transform: translateX(100%); transition: transform var(--transition-normal); } .mobile-menu-drawer.active { transform: translateX(0); } .drawer-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; } .drawer-close { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; } .mobile-nav ul { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; } .mobile-nav a { font-family: var(--font-heading); font-size: var(--font-size-lg); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; display: block; } .drawer-socials { display: flex; gap: 1.5rem; font-size: 1.5rem; border-top: 1px solid var(--color-border); padding-top: 1rem; } /* ========================================================================== 9. VIMEO VIDEO LIGHTBOX ========================================================================== */ .mahara-lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.95); z-index: 20000 !important; opacity: 0; pointer-events: none; display: none; align-items: center; justify-content: center; transition: opacity 0.3s ease; } .mahara-lightbox.active { opacity: 1; pointer-events: auto; display: flex !important; } .lightbox-close { position: absolute; top: 30px; right: 30px; background: none; border: none; color: #ffffff; font-size: 2rem; cursor: pointer; z-index: 20010 !important; transition: transform 0.2s, color 0.2s; } .lightbox-close:hover { transform: scale(1.1); color: var(--color-text-secondary); } /* ========================================================================== 10. ACCORDION STYLING ("O que nos move" & FAQs) ========================================================================== */ .accordion-item { transition: border-color var(--transition-fast); } .accordion-item.active { border-color: rgba(255, 255, 255, 0.4) !important; } .accordion-header:hover { color: var(--color-text-secondary) !important; } /* ========================================================================== 11. SCROLL-SNAP SLIDERS ========================================================================== */ .slider-track { scrollbar-width: none; /* Firefox */ } .slider-track::-webkit-scrollbar { display: none; /* Chrome, Safari */ } /* ========================================================================== 12. PORTFOLIO CARD HOVER EFFECT ========================================================================== */ .portfolio-card:hover .portfolio-img { transform: scale(1.04); } .portfolio-card:hover .portfolio-overlay { opacity: 1 !important; } .portfolio-link-anchor { display: block; } /* ========================================================================== 13. SERVICE CARD CAPTIONS ========================================================================== */ .service-card { position: relative; overflow: hidden; } .service-card img { transition: transform var(--transition-normal); } .service-card:hover img { transform: scale(1.05); } /* ========================================================================== 14. CONTACT FORM 7 Sleek Re-styling ========================================================================== */ .wpcf7 { width: 100%; } .wpcf7-form { display: flex; flex-direction: column; gap: 1.25rem; } .wpcf7-form-control-wrap { display: block; width: 100%; } .wpcf7-form-control { width: 100%; font-family: var(--font-primary); font-size: var(--font-size-sm); color: var(--color-text-primary); background-color: var(--color-bg-dark); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: 1rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .wpcf7-form-control:focus { outline: none; border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); } .wpcf7-textarea { resize: vertical; min-height: 120px; } .wpcf7-submit { background-color: var(--color-text-primary) !important; color: var(--color-bg-dark) !important; font-family: var(--font-heading); font-size: var(--font-size-md); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--color-text-primary) !important; cursor: pointer; padding: 1rem !important; transition: all var(--transition-fast) !important; } .wpcf7-submit:hover { background-color: transparent !important; color: var(--color-text-primary) !important; } /* Validation styling */ .wpcf7-not-valid-tip { color: #ff3333; font-size: var(--font-size-xs); margin-top: 0.25rem; display: block; } .wpcf7-response-output { margin: 1rem 0 0 0 !important; padding: 0.75rem 1rem !important; border: 1px solid var(--color-border) !important; border-radius: var(--border-radius-sm) !important; font-size: var(--font-size-sm); text-align: center; background-color: var(--color-bg-dark); } .wpcf7-mail-sent-ok { border-color: #25d366 !important; color: #25d366 !important; } .wpcf7-validation-errors, .wpcf7-acceptance-missing { border-color: #ffcc00 !important; color: #ffcc00 !important; } /* Floating WhatsApp button hover */ .whatsapp-float-btn:hover { background-color: var(--color-whatsapp-hover) !important; transform: scale(1.08); } /* ========================================================================== 15. PREMIUM TRANSITIONS, HOVERS & SCROLL REVEALS ========================================================================== */ /* Dropdown Menu styling */ .main-nav ul li { position: relative; } .main-nav ul li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .main-nav .sub-menu { position: absolute; top: 100%; left: 0; background-color: var(--color-bg-panel); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); min-width: 220px; display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0.75rem 0 !important; margin: 0 !important; list-style: none !important; opacity: 0; visibility: hidden; transform: translateY(15px); transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal); z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .main-nav .sub-menu li { width: 100%; padding: 0 !important; margin: 0 !important; } .main-nav .sub-menu a { padding: 0.6rem 1.5rem !important; display: block !important; font-family: var(--font-primary) !important; font-size: var(--font-size-xs) !important; text-transform: none !important; font-weight: 400 !important; letter-spacing: 0.02em !important; color: var(--color-text-secondary) !important; transition: all var(--transition-fast) !important; border-bottom: 1px solid rgba(255,255,255,0.02); } .main-nav .sub-menu a:hover { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--color-text-primary) !important; padding-left: 1.75rem !important; } /* Scroll Reveal Classes */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1); will-change: transform, opacity; } .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1); will-change: transform, opacity; } .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1); will-change: transform, opacity; } .reveal-scale { opacity: 0; transform: scale(0.93); transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1); will-change: transform, opacity; } .reveal.active, .reveal-left.active, .reveal-right.active, .reveal-scale.active { opacity: 1; transform: translateY(0) translateX(0) scale(1); } /* Reveal Delays */ .delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; } /* Text Gradient & Accent Animations */ .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); } .btn-outline:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 255, 255, 0.05); } /* Hover scales for links */ .logo a { display: block; transition: transform var(--transition-fast); } .logo a:hover { transform: scale(1.02); } /* Round all button-like elements globally */ .btn, .wpcf7-submit, .btn-pill-fill, .btn-pill-outline, .cta-whatsapp-trigger { border-radius: 9999px !important; } /* ========================================================================== 16. ABOUT VALUES GRID (Nossa Essência) ========================================================================== */ .about-values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 40px; width: 100%; } @media (max-width: 1024px) { .about-values-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .about-values-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 480px) { .about-values-grid { grid-template-columns: 1fr; } } @keyframes rotateSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (max-width: 991px) { [data-about-grid="1"] { grid-template-columns: 1fr !important; gap: 40px !important; } }