/* CSS UNIFICADO - PIZZARIA PAULISTA */ /* Garante consistência visual em todas as páginas */ /* ===== VARIÁVEIS GLOBAIS ===== */ :root { --primary-color: #d32f2f; --primary-dark: #b71c1c; --primary-light: #ff6659; --secondary-color: #333333; --accent-color: #ff9800; --text-color: #333333; --text-light: #666666; --bg-light: #f8f8f8; --white: #ffffff; --border-color: #e0e0e0; --shadow: 0 2px 10px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; --border-radius: 8px; } /* Dark mode variables: applied when .dark-mode class is present on */ html.dark-mode { --primary-color: #ffb4a2; --primary-dark: #ff8a65; --primary-light: #ffccbc; --secondary-color: #f5f5f5; --accent-color: #ffb74d; --text-color: #eaeaea; --text-light: #cfcfcf; --bg-light: #121212; --white: #0b0b0b; --border-color: #1f1f1f; --shadow: 0 2px 10px rgba(0,0,0,0.6); } /* Magnific Popup / modal adjustments for dark mode Ensure popups loaded via AJAX or inline use the same color variables so modal backgrounds, text and headings follow the site theme. */ html.dark-mode .mfp-bg { background: rgba(0, 0, 0, 0.85) !important; } html.dark-mode .mfp-wrap, html.dark-mode .mfp-container, html.dark-mode .mfp-content { color: var(--text-color) !important; } /* The dialog element used in modal/*.html files */ html.dark-mode .zoom-anim-dialog, html.dark-mode .zoom-anim-dialog * { background: transparent !important; color: inherit !important; } html.dark-mode .zoom-anim-dialog { background: var(--white) !important; /* panel background (switches in dark mode) */ color: var(--text-color) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--shadow) !important; padding: 20px !important; border-radius: 8px !important; } html.dark-mode .zoom-anim-dialog h3, html.dark-mode .zoom-anim-dialog h4 { color: var(--primary-color) !important; } html.dark-mode .zoom-anim-dialog ul li { border-bottom: 1px solid var(--border-color) !important; padding: 8px 0 !important; } /* Center opening modal on small screens (mobile) so the popup appears visually centered and readable. This targets the opening popup which uses class .opening_popup and the Magnific Popup wrapper structure. */ @media (max-width: 480px) { .zoom-anim-dialog.opening_popup { width: calc(100% - 32px) !important; max-width: 420px !important; margin: 20px auto !important; left: 0 !important; right: 0 !important; transform: none !important; position: relative !important; box-shadow: var(--shadow) !important; padding: 0 !important; } .mfp-wrap .mfp-content { display: flex; align-items: center; justify-content: center; padding: 0 8px; } .zoom-anim-dialog.opening_popup > div { padding: 18px; } } /* ===== RESET E BASE ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; line-height: 1.6; scroll-behavior: smooth; /* Prevent horizontal overflow at the root to avoid occasional scrollbars caused by 100vw elements on some browsers */ overflow-x: hidden; } body { font-family: 'Raleway', sans-serif; color: var(--text-color); background-color: var(--white); overflow-x: hidden; /* keep existing behavior */ } /* ===== LAYOUT CONSISTENTE ===== */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .row { display: flex; align-items: flex-start; flex-wrap: nowrap; justify-content: center; } .span12 { display: flex; width: 100%; padding: 0 15px; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; } .span9 { width: 75%; padding: 0 15px; } .span6 { width: 50%; padding: 0 15px; } .span4 { width: 33.333%; padding: 0 15px; } .span3 { width: 25%; padding: 0 15px; } /* ===== HEADER CONSISTENTE ===== */ .header { background: var(--white); box-shadow: var(--shadow); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 15px 0; } .logo_wrap { display: flex; align-items: center; } .logo_wrap img { max-width: 250px; height: auto; width: 100%; transition: var(--transition); } .head_right { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; justify-content: flex-end; } .opening_time a { display: flex; align-items: center; gap: 8px; color: var(--text-color); text-decoration: none; font-weight: 500; white-space: nowrap; } .opening_time img { width: 20px; height: 20px; } /* ===== BOTÕES CONSISTENTES ===== */ .button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; background: var(--primary-color); color: var(--white); text-decoration: none; border: none; border-radius: var(--border-radius); font-weight: 600; text-transform: uppercase; font-size: 0.9rem; transition: var(--transition); cursor: pointer; text-align: center; white-space: nowrap; min-height: 44px; } .button:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3); } /* ===== NAVEGAÇÃO CONSISTENTE ===== */ .navigation { margin-top: 15px; display: flex; justify-content: center; } .xxxx_menu { display: flex; list-style: none; gap: 30px; margin: 0; padding: 0; justify-content: center; } .xxxx_menu li a { color: var(--text-color); text-decoration: none; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; transition: var(--transition); padding: 8px 0; position: relative; white-space: nowrap; } .xxxx_menu li a:hover { color: var(--primary-color); } .xxxx_menu li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary-color); transition: var(--transition); } .xxxx_menu li a:hover::after { width: 100%; } /* ===== MENU MOBILE CONSISTENTE ===== */ .nav_mobile { display: none; background: var(--white); box-shadow: var(--shadow); position: absolute; top: 100%; left: 0; right: 0; z-index: 999; } .nav_mobile ul { list-style: none; padding: 20px; text-align: center; } .nav_mobile li { margin-bottom: 10px; } .nav_mobile a { color: var(--text-color); text-decoration: none; font-weight: 600; display: block; padding: 12px; border-radius: var(--border-radius); transition: var(--transition); text-align: center; } .nav_mobile a:hover { background: var(--bg-light); color: var(--primary-color); } .nav_trigger { display: none; } /* ===== TÍTULOS E BREADCRUMBS ===== */ .main_title { background: var(--bg-light); padding: 80px 0 40px; text-align: center; margin-top: 350px; } .main_title h1 { font-size: 2.5rem; font-weight: 700; color: var(--secondary-color); text-transform: uppercase; margin: 0; } .breadcrumbs { background: var(--white); padding: 15px 0; border-bottom: 1px solid var(--border-color); } .breadcrumbs p { margin: 0; color: var(--text-light); font-size: 0.9rem; } .breadcrumbs a { color: var(--primary-color); text-decoration: none; } .breadcrumbs a:hover { color: var(--primary-dark); } .breadcrumbs span { color: var(--text-color); font-weight: 600; } /* ===== CONTEÚDO PRINCIPAL ===== */ .main_content { padding: 30px 0; min-height: 60vh; } .main_content.home { padding-top: 0; } /* ===== SLIDER CONSISTENTE ===== */ .main_slider { margin-top: 180px; position: relative; } .flexslider { position: relative; overflow: hidden; } .slides { list-style: none; margin: 0; padding: 0; } .slides li { position: relative; } .slides img { width: 100%; height: auto; display: block; } /* On small screens make the slider images full-bleed (100% of the device width) so they always span the entire horizontal viewport regardless of container padding. This uses a safe "break-out" technique that doesn't affect desktop/tablet layouts. */ @media (max-width: 768px) { .main_slider { /* let the slider break out of the centered container */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: relative; /* reduce top offset a little on small screens so it looks balanced */ margin-top: 140px; } .main_slider .flexslider, .main_slider .slides, .main_slider .slides li { width: 100%; max-width: 100vw; } .main_slider .slides img { width: 100vw; /* explicitly match viewport width */ /* allow the image to exactly match the viewport and avoid being constrained by container max-widths which could introduce a subtle horizontal scrollbar in some setups */ max-width: none; height: auto; display: block; object-fit: cover; /* avoids distortion if aspect ratio differs */ } } /* ===== ABAS DE SERVIÇOS ===== */ .serviceIntro { background: var(--white); border-radius: var(--border-radius); box-shadow: var(--shadow); overflow: hidden; margin: 0 0 1px 0; } .etabs { display: flex; list-style: none; background: var(--bg-light); border-bottom: 1px solid var(--border-color); flex-wrap: wrap; justify-content: center; } .etabs li { flex: 1; min-width: 120px; } .etabs li a { display: block; padding: 15px 20px; text-align: center; color: var(--text-color); text-decoration: none; font-weight: 600; text-transform: uppercase; font-size: 0.85rem; transition: var(--transition); border-bottom: 3px solid transparent; } .etabs li a.active, .etabs li a:hover { color: var(--primary-color); border-bottom-color: var(--primary-color); background: var(--white); } .tabcontent { padding: 30px; } .tabcontent>div { display: none; } .tabcontent>div.active { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center; } .img_holder img { max-width: 200px; height: auto; border-radius: var(--border-radius); } .content_holder { flex: 1; min-width: 300px; text-align: center; } .content_holder h4 { color: var(--primary-color); margin-bottom: 15px; font-size: 1.5rem; } .content_holder p { color: var(--text-light); line-height: 1.6; margin-bottom: 0; } /* ===== DEPOIMENTOS ===== */ .testimonials { background: var(--bg-light); padding: 60px 0; margin: 80px 0; text-align: center; } .testimonials .title { display: block; font-size: 2rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 40px; text-transform: uppercase; } .carouselle { max-width: 800px; margin: 0 auto; } .carouselle.owl-carousel { position: relative; } .carousel-item { background: var(--white); padding: 40px; border-radius: var(--border-radius); box-shadow: var(--shadow); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; margin: 0 auto; } .xx_b { width: 100%; display: flex; justify-content: center; } .xx_b p { font-size: 1.1rem; line-height: 1.8; color: var(--text-light); font-style: italic; margin-bottom: 20px; text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; } .t_author { display: block; font-weight: 700; color: var(--primary-color); font-size: 1.1rem; text-align: center; margin-top: 15px; } .t_occupation { display: block; color: var(--text-light); font-size: 0.9rem; text-align: center; margin-top: 5px; } /* Owl Carousel Custom Styles */ .owl-carousel .owl-stage { display: flex; align-items: center; } .owl-carousel .owl-item { display: flex; justify-content: center; } .owl-carousel .owl-dots { text-align: center; margin-top: 20px; } .owl-carousel .owl-dot { display: inline-block; margin: 0 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--border-color); cursor: pointer; transition: var(--transition); } .owl-carousel .owl-dot.active { background: var(--primary-color); transform: scale(1.2); } .owl-carousel .owl-dot:hover { background: var(--primary-light); } .owl-carousel .owl-nav { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; } .owl-carousel .owl-prev, .owl-carousel .owl-next { background: var(--primary-color) !important; color: var(--white) !important; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; pointer-events: all; transition: var(--transition); } .owl-carousel .owl-prev:hover, .owl-carousel .owl-next:hover { background: var(--primary-dark) !important; transform: scale(1.1); } .owl-carousel .owl-prev { margin-left: 20px; } .owl-carousel .owl-next { margin-right: 20px; } /* ===== SIDEBAR E WIDGETS ===== */ .sidebar { width: 25%; padding: 0 15px; } .widget_block { background: var(--white); border-radius: var(--border-radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 30px; } .wid-title { font-size: 1.2rem; font-weight: 700; color: var(--primary-color); margin-bottom: 15px; text-align: center; text-transform: uppercase; } .random_img { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .random_img div { flex: 0 0 calc(50% - 10px); text-align: center; } .random_img img { max-width: 100%; height: auto; border-radius: var(--border-radius); transition: var(--transition); } .random_img img:hover { transform: scale(1.05); } /* ===== CONTEÚDO DE PÁGINAS ===== */ .xx_content { width: 100%; } .desc { line-height: 1.6; color: var(--text-color); } .desc h4, .desc h5 { color: var(--primary-color); margin-bottom: 15px; } .desc p { margin-bottom: 15px; color: var(--text-light); } /* ===== ACCORDION ===== */ .accordion { width: 100%; } .accordion_in { margin-bottom: 10px; border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; } .acc_head { background: var(--bg-light); padding: 15px 20px; font-weight: 600; cursor: pointer; transition: var(--transition); border-bottom: 1px solid var(--border-color); } .acc_head:hover { background: var(--primary-color); color: var(--white); } .acc_content { padding: 20px; background: var(--white); display: none; } .acc_active .acc_content { display: block; } /* ===== CONTATO ===== */ .contact { width: 100%; } .google_map { width: 100%; margin-bottom: 30px; border-radius: var(--border-radius); overflow: hidden; } .google_map iframe { width: 100%; height: 450px; border: none; } .xx_location, .xx_phone, .xx_email { text-align: center; padding: 20px; background: var(--bg-light); border-radius: var(--border-radius); margin-bottom: 20px; } .xx_di span { display: block; font-weight: 600; color: var(--text-color); } /* ===== FOOTER CONSISTENTE ===== */ .footer { background: var(--bg-light); color: var(--text-color); padding: 40px 0; text-align: center; } /* Footer elements should follow the theme variables so the footer switches between light/dark automatically via html.dark-mode */ .footer .social { list-style: none; display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; } .footer .social a { color: var(--text-color); text-decoration: none; font-weight: 600; transition: var(--transition); padding: 8px 16px; border-radius: var(--border-radius); background: transparent; border: 1px solid transparent; } .footer .social a:hover { background: var(--primary-color); color: var(--white); transform: translateY(-2px); } .footer .copyright { color: var(--text-light); font-size: 0.9rem; margin: 0; } .footer .copyright a { color: var(--primary-light); text-decoration: none; } .footer .copyright a:hover { color: var(--primary-color); } /* ===== RESPONSIVIDADE ===== */ @media (max-width: 768px) { .span6, .span4, .span3, .span9, .sidebar { width: 100%; } .container { padding: 0 15px; } .xxxx_menu { display: none; } .nav_trigger { display: block; } .head_right { justify-content: space-between; gap: 10px; } .tabcontent>div.active { flex-direction: column; text-align: center; } .etabs li { flex: 0 0 50%; } .main_title { padding: 100px 0 30px; } .main_title h1 { font-size: 2rem; } /* Mobile header / navigation adjustments */ .header { padding: 10px 0; } .logo_wrap img { max-width: 160px; height: auto; } .navigation, .xxxx_menu { display: none; } /* By default the mobile nav stays hidden; JS will add the `open` class to show it. This prevents the menu from appearing opened on non-index pages before JS runs. */ .nav_mobile { display: none; } .nav_mobile.open { display: block; } /* Hamburger button */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 6px; } .nav-toggle .hamburger { width: 24px; height: 2px; background: var(--text-color); position: relative; display: inline-block; } .nav-toggle .hamburger::before, .nav-toggle .hamburger::after { content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: var(--text-color); } .nav-toggle .hamburger::before { top: -7px; } .nav-toggle .hamburger::after { top: 7px; } .nav-toggle[aria-expanded="true"] .hamburger { background: transparent; } .nav-toggle[aria-expanded="true"] .hamburger::before { transform: rotate(45deg) translate(4px, 4px); } .nav-toggle[aria-expanded="true"] .hamburger::after { transform: rotate(-45deg) translate(4px, -4px); } .main_slider { margin-top: 120px; } .testimonials { padding: 30px 0; margin: 40px 0; } .testimonials .title { font-size: 1.4rem; } /* Make carousel nav inline below items on small screens */ .owl-carousel .owl-nav { position: static; transform: none; margin-top: 12px; display: flex; justify-content: center; gap: 12px; } /* Modal adjustments for small screens */ .modal-popup { top: 8%; left: 50%; transform: translate(-50%, 0) scale(1) !important; width: 95vw; max-width: 95vw; max-height: 85vh; overflow: auto; border-radius: 8px; } .modal-close { top: 10px; right: 10px; width: 32px; height: 32px; } .random_img div { flex: 0 0 100%; } } @media (max-width: 480px) { html { font-size: 14px; } .button { padding: 10px 20px; font-size: 0.8rem; } .tabcontent { padding: 20px; } .carousel-item { padding: 20px; margin: 0 10px; } .head_right { gap: 8px; } .etabs li { flex: 0 0 100%; } .social { gap: 10px; } .social a { padding: 6px 12px; font-size: 0.8rem; } /* Extra small device refinements (360/375 widths common phones) */ @media (max-width: 375px) { .logo_wrap img { max-width: 140px; } .main_title { padding: 60px 0 20px; } .main_title h1 { font-size: 1.6rem; } .head_right .book_online .button { padding: 8px 12px; font-size: 0.85rem; } .pdfjs-wrapper .pdf-controls { gap: 6px; } .pdfjs-wrapper .pdf-controls button[aria-label] { min-width: 34px; height: 34px; } .testimonials .title { font-size: 1.2rem; } .carousel-item { padding: 16px; } .footer { padding: 24px 0; } .nav_mobile ul { padding: 12px; } } } /* ===== CENTRALIZAÇÃO E ALINHAMENTO ===== */ .fix { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; } .text-center { text-align: center; } .mx-auto { margin-left: auto; margin-right: auto; } .d-flex { display: flex; } .justify-center { justify-content: center; } .align-center { align-items: center; } /* ===== COMPATIBILIDADE ===== */ .contentwrap { position: relative; } .xx_margin { margin: 30px 0; } .random_img_nav { display: none; } /* ===== MODAL/POP-UP SYSTEM ===== */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 9998; opacity: 0; transition: opacity 0.3s ease; } .modal-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); background: var(--white); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); z-index: 9999; max-width: 90vw; max-height: 90vh; width: auto; min-width: 300px; opacity: 0; transition: all 0.3s ease; overflow: hidden; } .modal-close { position: absolute; top: 15px; right: 15px; background: var(--primary-color); color: var(--white); border: none; border-radius: 50%; width: 35px; height: 35px; font-size: 20px; font-weight: bold; cursor: pointer; z-index: 10000; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .modal-close:hover { background: var(--primary-dark); transform: scale(1.1); } .modal-content { padding: 40px 30px 30px; max-height: 80vh; overflow-y: auto; } /* Estilos específicos para o modal de horários */ .modal-content h3 { color: var(--primary-color); font-size: 1.8rem; margin-bottom: 20px; text-align: center; font-weight: 700; } .modal-content h4 { color: var(--secondary-color); font-size: 1.3rem; margin: 20px 0 15px; text-align: center; font-weight: 600; } .modal-content ul { list-style: none; padding: 0; margin: 0; } .modal-content li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-color); } .modal-content .week-day { font-weight: 600; color: var(--text-color); font-size: 1rem; } .modal-content .week-time { color: var(--primary-color); font-weight: 600; font-size: 1rem; } .modal-content .week-time[data-closed="true"] { color: #d32f2f; font-weight: 700; } /* ===== ACESSIBILIDADE ===== */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== ANIMAÇÕES ===== */ .fade-in { animation: fadeIn 0.6s ease-in; } .slide-up { animation: slideUp 0.6s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Theme toggle small button adjustments */ .theme-toggle { padding: 8px 10px; min-height: 36px; font-size: 1.05rem; line-height: 1; } /* Dark mode specific elements (body backgrounds, text) */ body { background-color: var(--white); color: var(--text-color); } html.dark-mode body { background-color: var(--bg-light); color: var(--text-color); } /* Header adjustments for dark mode */ .header { background: var(--white); } html.dark-mode .header { background: #0f0f0f; box-shadow: var(--shadow); } /* Links and navigation in dark mode */ .xxxx_menu li a { color: var(--text-color); } html.dark-mode .xxxx_menu li a { color: var(--text-light); } /* Ensure logo stays visually appropriate (the img src will be swapped via JS) */ .logo_wrap img { transition: opacity 0.25s ease; }