/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* pag_index.css para uso da página index */ /* ======================== HEADER ======================== */ /* Mantive a tua estrutura original do header grande na home */ .home .site-header { position: relative; width: 100%; height: 140vh; min-height: 1300px; background: url("../imagens/foto1.jpg") center top / cover no-repeat; color: white; display: flex; flex-direction: column; justify-content: space-between; clip-path: none; /* sem inclinação */ } /* Manutenção */ .home .manu { position: absolute; max-width: 600px; height: auto; top: 10%; left: 50%; transform: translate(-50%, -50%); display: block; justify-content: center; text-align: center; align-items: center; color: white; z-index: 2; background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3)); border-radius: 15px; padding: 40px 40px; } .home .manu h1 { font-family: 'Days One', sans-serif; font-size: 2.2rem; text-transform: uppercase; margin: 0px; margin-bottom: 5px; } .manu p { margin: 0; font-size: 16px; } body.home .btn-voltar-flutuante { display: none !important; } /* Versão alternativa para outras páginas (ex: portas.html) */ .home .header-claro { background: linear-gradient(180deg, #505DB3 0%, #505DB3 10%, #ffffff 90%); height: 130px; } /* Espaço para garantir que o menu se mantém visível acima de tudo */ .home .site-header nav { z-index: 5; } /* ======================== BODY ======================== */ /* CORRETO: aplicar estilos quando o tem a classe "home" */ body.home { font-family: Arial, sans-serif; color: #333; background-color: #001755; margin: 0; padding: 0; } /* ======================== CONTAINER ======================== */ .home .container { width: 90%; max-width: 1200px; margin: auto; } /* ---------- HERO ---------- */ .home .hero-content { position: absolute; width: 60%; height: auto; top: 60%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; text-align: center; align-items: center; color: white; z-index: 2; background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3)); border-radius: 15px; padding: 40px 40px; } .home .hero-content h1 { font-family: 'Days One', sans-serif; font-size: 2.2rem; text-transform: uppercase; margin: 0px; } .home .hero-content .btn { background: #ff9900; color: white; padding: 12px 28px; border-radius: 30px; text-decoration: none; font-weight: bold; transition: background 0.3s; } .home .hero-content .btn:hover { background: #e68300; } /* ======================== SEÇÕES DIAGONAIS ======================== */ /* ---------- SERVIÇOS ---------- */ /* atenção: usa transform skew para efeito diagonal — mantive o teu valor */ .home .servicos { position: relative; background: #36A9E1; color: black; text-align: center; padding: 180px 0 220px; overflow: hidden; transform: skewY(-4deg); margin-top: -130px; } .home .servicos > * { transform: skewY(4deg); } /* ---------- PORTEFÓLIO ---------- */ .home .portefolio { background: #001755; color: white; text-align: center; padding: 120px 0; overflow: hidden; transform: skewY(-4deg); margin-top: -10px; } .home .portefolio > * { transform: skewY(4deg); } .home .servicos h2, .home .portefolio h2 { font-size: 2.2rem; margin-bottom: 80px; margin-top: -80px; } /* ======================== SERVIÇOS (CONTINUAÇÃO) ======================== */ .home .container { color: white; } .home .container h2 { color: white; font-size: 25px; font-family: verdana; } .home .grid-servicos { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .home .card-servico { border-radius: 8px; overflow: hidden; height: 40px; } .home .card-servico h3 { margin: 15px 0; } .home .card-servico a { display: inline-block; border: 2px solid transparent; padding: 18px 28px; border-radius: 8px; color: #ffffff; text-decoration: none; font-weight: bold; text-align: center; /* centraliza o texto */ transition: all 0.3s ease; } .home .card-servico a:hover { border: 2px solid transparent; padding: 8px 16px; background-color: white; color: navy; } /* ======================== PORTEFÓLIO (CONTINUAÇÃO) ======================== */ .home .grid-portefolio { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } .home .card-portefolio img { width: 400px; height: 200px; object-fit: cover; border-radius: 5px; transition: transform 0.3s; } .home .card-portefolio img:hover { transform: scale(1.05); } /* ======================== CARROSSEL ======================== */ .home .carousel { position: relative; width: 100%; overflow: hidden; margin: 0 auto; } .home .carousel-track { display: flex; transition: transform 0.8s ease; } .home .carousel-item { flex: 0 0 30%; padding: 10px; } .home .carousel-item img { width: 100%; height: 400px; border-radius: 20px; object-fit: cover; display: block; } .home .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.4); color: white; border: none; font-size: 2rem; padding: 0.5rem 1rem; cursor: pointer; z-index: 2; border-radius: 50%; } .home .carousel-btn.prev { left: 10px; } .home .carousel-btn.next { right: 10px; } .home .carousel-btn:hover { background: rgba(0, 0, 0, 0.7); } .home .carousel-indicators { display: flex; justify-content: center; gap: 8px; margin-top: 10px; } .home .carousel-indicators button { width: 12px; height: 12px; border-radius: 50%; border: none; background: #ccc; cursor: pointer; transition: background 0.3s; } .home .carousel-indicators button.active { background: #555; } /* ======================== EXPOSIÇÃO ======================== */ /* Secção anterior ao footer — cantos arredondados visíveis */ .expo { position: relative; background: #ffffff; /* mantém a cor original */ color: black; text-align: center; padding: 80px 0 50px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; overflow: hidden; /* garante que os cantos arredondados são visíveis */ z-index: 3; /* fica acima do footer */ margin-bottom: 0; /* encosta ao footer */ box-shadow: 0 -6px 20px rgba(0,0,0,0.05); /* leve sombra de separação */ } .home .expo::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 150px; background: inherit; transform: skewY(-4deg); transform-origin: 0 0; z-index: -1; } .home .expo > * { position: relative; z-index: 1; } /* ---------- FOTOS ---------- */ .home .expo-fotos { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 60px; } .home .expo-fotos img { flex: 1 1 45%; max-width: 500px; width: 100%; border-radius: 20px; object-fit: cover; transition: transform 0.3s ease; } .home .expo-fotos img:hover { transform: scale(1.03); } /* ---------- INFO + MAPA ---------- */ .home .expo-info { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start; max-width: 1200px; margin: 0 auto; padding: 40px 20px; } .home .expo-texto { flex: 0 0 32%; max-width: 420px; text-align: left; line-height: 1.5; font-size: 1rem; color: #333; } .home .expo-texto h2 { font-size: 1.6rem; margin-bottom: 20px; } .home .expo-texto h3 { font-size: 1rem; margin-bottom: 15px; font-weight: normal; color: #555; } .home .expo-texto p { margin-bottom: 15px; } .home .expo-mapa { flex: 1; max-width: 600px; } .home .expo-mapa iframe { width: 100%; height: 320px; border: none; border-radius: 20px; } /* ======================== RESPONSIVO (mantive e ajuste) ======================== */ @media (max-width: 900px) { .carousel-item { flex: 0 0 50%; } } @media (max-width: 768px) { .home .site-header { height: auto; min-height: 540px; background: url("../imagens/foto1_mobile.jpg"); background-size:contain; /*background-size: 200%; /* zoom suave */ background-position: top center; /* foca mais em cima, igual ao Squarespace */ background-repeat: no-repeat; /* border: rgb(187, 255, 0) 2px dashed;*/ } .home .hero-content { position: absolute; width: 80%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; text-align: center; align-items: center; color: white; z-index: 2; background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3)); border-radius: 15px; padding: 40px 40px; } .home .site-header nav { margin-top: -20px; /* sobe o menu */ position: relative; z-index: 100; /* border: red 2px dashed; */ } .home .hero-content h1 { font-size: 1.4rem; } /* -- carrossel portefólio -- */ .home .carousel-item { flex: 0 0 80%; /* imagem mais larga */ padding: 5px; } .home .carousel-item img { height: 300px; /* menor altura para mobile */ border-radius: 15px; } .home .carousel-btn { font-size: 1.5rem; padding: 0.3rem 0.7rem; } /* -- */ .grid-servicos, .grid-portefolio, .expo-fotos, .expo-info { flex-direction: column; gap: 20px; } .expo { padding: 120px 20px 100px; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; } .expo::before { top: -45px; height: 80px; transform: skewY(-5deg); } .expo-texto, .expo-mapa { flex: 1 1 100%; max-width: 100%; } .expo-mapa iframe { height: 280px; } } @media (max-width: 600px) { .carousel-item { flex: 0 0 100%; margin-right: 0; } } @media screen and (max-height: 480px) { .home .site-header { height: auto; min-height: 580px; background: url("../imagens/foto1.jpg"); background-size:contain; /*background-size: 200%; /* zoom suave */ background-position: top center; /* foca mais em cima, igual ao Squarespace */ background-repeat: no-repeat; /*border: rgb(187, 255, 0) 2px dashed; */ } }