body { font-family: 'DM Sans', sans-serif; margin: 0 0 0 0; background-color: #FFFFFF;}
body.woodplay { background-color: #FAF7F2; }
h1.branco {color:white; font-size: 5vw; font-weight: bolder;}
h2.branco {color:white; font-size: 2vw; font-weight: normal;}
h3.branco {color:white; font-size: 1vw; font-weight: normal;}
/* Container holding the image and the text */
.banner_imagem {position:relative;}
/* Bottom right text */
.banner_imagem_texto {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
a {text-decoration: none;font-weight: normal;}
a.menu {color: #FFFFFF;font-weight:bolder; padding-top: 20px; padding-bottom: 20px; padding-left: 5px; padding-right: 5px;}
a.menu:hover {color: orange;}
a.cinza {color: #767676;font-weight:normal;}
a.cinza:hover {color: orange;}
a.preto {color: black;font-weight:normal;}
a.preto:hover {color: orange;}
/* BOTÃO PRINCIPAL */
a.botao{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 22px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
letter-spacing: 0.2px;
background: orange;
color: #fff;
box-shadow: 0 10px 22px rgba(31, 95, 255, 0.22);
border: 1px solid rgba(255,255,255,0.10);
transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
a.botao:hover{transform: translateY(-1px); box-shadow: 0 14px 28px rgba(31, 95, 255, 0.28);filter: brightness(1.02);}
a.botao:active{transform: translateY(0px);box-shadow: 0 8px 18px rgba(31, 95, 255, 0.20);}
a.botao:focus{outline: none;}
a.botao:focus-visible{box-shadow: 0 0 0 4px rgba(31, 95, 255, 0.25), 0 10px 22px rgba(31, 95, 255, 0.22);}
a.botao::after{content: "➜";font-size: 1.05em;opacity: .95;}
button.fundobranco {border-radius: 5px; border-style: 1px; border-color: black; padding: 10px 20px 10px 20px; font-size: medium; color:black; background-color:transparent; transition-duration: 0.4s;}
button.fundobranco:hover {background-color: black; color:white; border-color: black;}
button.fundopreto {border-radius: 5px; border-style: 1px; border-color: black; padding: 10px 20px 10px 20px; min-width: 125px; font-size: medium; color:white; background-color:black; transition-duration: 0.4s;}
button.fundopreto:hover {background-color: white; color:black; border-color: black;}
button.fundotransparente { border-radius: 5px; border-style: 1px; border-color: white; padding: 10px 20px 10px 20px; min-width: 125px; font-weight: bold; font-size: medium; color:white; background-color:transparent; transition-duration: 0.4s;}
button.fundotransparente:hover {background-color: white; color:black; border-color: white;}
img.caixa {border-radius: 5px; max-width: 90%; max-height: 90%; width: 90%;}
img.noticia {padding-left: 25px; min-width: 30%; width: 50%;}
img.menu_icons {max-width: 32px;}
img.menu_icons:hover {transform: scaleX(-1);}
table.sem_espaco {border-collapse: collapse;}
td.linha_baixo_preta { border-bottom: 1px solid gainsboro;}
ul.lista_sem_bolinhas {list-style: none;padding-left: 0;margin-left: 0;}
/*Class*/
.centrar_texto {text-align: center;}
.afastamento_superior_inferior_10porcento {padding-top: 10%; padding-bottom: 10%;}
.afastamento_superior_10porcento {padding-top: 10%;}
.afastamento_inferior_10porcento {padding-bottom: 10%;}
.afastamento_superior_10porcento {padding-top: 10%;}
.afastamento_superior_5porcento {padding-top: 5%;}
.largura100_altura100 {width: 100%; height: 100%;}
.largura90_altura100 {width: 90%; height: 100%;}
.largura_100 {width: 100%;}
.alinha_fundo {vertical-align: bottom;}
.alinha_centro {vertical-align: middle;}
.alinharaocentro {vertical-align: middle;}
.alinha_centro_menu {vertical-align: middle;}
.alinha_topo {vertical-align: top;}
.alinha_texto_direita {text-align: right;}
.alinha_texto_centro {text-align: center;}
.alinha_direita {text-align: right;}
.alinha_texto_esquerda {text-align: left;}
.alinha_esquerda {text-align: left;}
.alinha_justificado {text-align:justify;}
.centrar {text-align: center;}
.alinharesquerda {text-align: left;}
.alinhar_esquerda {text-align: left;}
.alinhar_direita {text-align: right;}
.alinhar_justificado {text-align:justify;}
.alinhar_tudo_ao_centro {vertical-align: middle; text-align: center;}
.padding_5px {padding-left: 5px; padding-right: 5px;}
.padding_15px {padding-left: 15px; padding-right: 15px;}
.padding_30px {padding-left: 30px; padding-right: 30px;}
.margem_30px {width: 30px; min-width: 30px;}
.margem_60px {width: 60px; min-width: 60px;}
.margem_90px {width: 90px; min-width: 90px;}
.margem_120px {width: 120px; min-width: 120px;}
.margem_120px_menu {width: 120px; min-width: 120px;}
.margem_20porcento {padding-left: 20%; padding-right: 20%;}
.margem_10porcento {padding-left: 10%; padding-right: 10%;}
.largura_100porcento {width:100%;}
.largura_70porcento {width:70%;}
.largura_60porcento {width:60%;}
.largura_50porcento {width:50%;}
.largura_55porcento {width:55%;}
.largura_45porcento {width:45%;}
.largura_40porcento {width:40%;}
.largura_30porcento {width:30%;}
.largura_25porcento {width:25%;}
.largura_20porcento {width:20%;}
.largura_10porcento {width:10%;}
.largura_5porcento {width:5%;}
.largura_150px {width:150px;}
.altura_100porcento {height:100%;}
.sombra {-webkit-box-shadow: 1px 1px 15px 5px #000000; box-shadow: 1px 1px 15px 5px #000000;}
.texto_linhaàdireita_cinza {
border-right: 0.5px solid #767676; /* Linha à direita do texto */
height: 100%;
margin-right: 10px; /* Espaço entre o texto e a linha */
}
.texto_linhaàesquerda_cinza {border-left: 0.5px solid #767676; height: 100%; margin-left: 10px;}
.ocultar_se_pequeno {visibility: visible; display:inline;}
.ocultar_se_grande {visibility: collapse; display: none;}
.cinza {color: #767676;}
.branco {color: white;}
.cinza_fininho { color: #767676; font-weight: normal;}
.titulofundocinzaletrabranca {color:white; background-color:#767676;}
.textofundocinzaletrabranca {color:white; background-color:#767676; display:inline;}
.texto_cinza {color: #767676;}
.texto_bolder {font-weight: bolder;}
.texto_bold {font-weight: bold;}
.bold {font-weight: bold;}
.texto_centrado {text-align: center;}
.texto_justificado {text-align: justify;}
.texto_direita {text-align: right;}
.texto_esquerda {text-align: left;}
.font_gigante {font-size: xx-large;}
.font_grande {font-size: x-large;}
.font_3vw {font-size: 3vw;}
.font_6px {font-size: 6px;}
.font_7px {font-size: 7px;}
.font_8px {font-size: 8px;}
.font_12px {font-size: 12px;}
.font_24px {font-size: 24px;}
.font_32px {font-size: 32px;}
.font_48px {font-size: 48px;}
.font_64px {font-size: 64px;}
.font_120px {font-size: 120px;}
.material-icons.md-60 { font-size: 60px; }
.fundopreto {color:white; background-color:black;}
.fundo_preto {color:white; background-color:black;}
.fundo_creme {color:white; background-color:#ECE5DA;}
.fundo_castanho {color:white; background-color:rgb(203,191,177);}
.fundo_branco {color:black; background-color:white;}
.fundo_betula {
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.fundo_nogueira{
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.fundo_carvalho {
background-color: #D6C5A8;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='300' preserveAspectRatio='none'%3E%3Cfilter id='w2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.7' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.31 0 0 0 0 0.23 -0.3 0 0 0 0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w2)'/%3E%3C/svg%3E"); background-size: 800px 300px;
background-repeat: repeat;
background-position: center;
}
.imagem_50px {max-width: 50px;}
.imagem_100px {max-width: 100px;}
.imagem_150px {max-width: 150px;}
.imagem_250px {max-width: 250px;}
.imagem_500px {max-width: 500px;}
.imagem_100porcento {width: 100%; height: auto;}
.imagem_mouse_over:hover {transition: transform 0.3s; transform: scaleX(-1);}
.imagem_mouse_over_zoom:hover {transition: transform 0.1s; transform: scale(1.05);}
* {box-sizing: border-box;}
/*As proximas linhas são necessárias para criar o efeito das 3 ou 2*/
.coluna_6 {color:gray; font-weight: lighter; float: left; width: 16.66%; padding: 10px; text-align: center;}
.coluna_5 {color:gray; font-weight: lighter; float: left; width: 20%; padding: 10px; text-align: center;}
.coluna_4 {color:gray; font-weight: lighter; float: left; width: 25%; padding: 10px; text-align: center;}
.coluna_3 {color:gray; font-weight: lighter; float: left; width: 33.33%; padding: 10px; text-align: center;}
.coluna_2 {color:gray; font-weight: lighter; float: left; width: 50%; padding: 40px; padding-bottom: 10%; text-align: center;}
.coluna_2_txt_img {float: left; width: 50%; display: flex; flex-wrap: wrap;}
.coluna_1 {/*A ideia é dividir o paragrafo em 3 partes*/ padding: 5% 25% 5% 25%; text-align: center;}
/* BLOCO GERAL */
.homeclimbing-contacto{
width: 100%;
display: block;
box-sizing: border-box;
}
/* VIDEO */
.homeclimbing-video{
display: block !important;
width: 100% !important;
max-width: 480px;
height: auto !important;
/* MUITO IMPORTANTE: evita altura zero */
min-height: 260px;
margin: 0 auto 20px auto;
border-radius: 12px;
background-color: #000;
/* evita problemas em layouts flex */
flex-shrink: 0;
}
/* Garante proporção mesmo antes de carregar */
.homeclimbing-video::before{
content: "";
display: block;
padding-top: 56.25%; /* 16:9 */
}
/* TEXTO */
.homeclimbing-claim{
margin: 10px 0 20px;
font-size: 15px;
line-height: 1.5;
color: #555;
text-align: center;
}
/* RESPONSIVE */
@media (max-width: 768px){
.homeclimbing-video{
max-width: 100%;
min-height: 200px;
}
}
#menu {height:100px; background-color:rgb(240,238,234); position: relative/*fixed quando quero que se mantenha sempre visivel*/; top:0; left:0; width: 100%;}
#menu_img_logo {height: 50px; padding-left: 1px; padding-right: 1px;}
#menu_img_logo:hover {transform: scale(1.1);}
#menu_txt_logo {height: 20px; padding-left: 0vw; padding-right: 0vw;}
#item_menu.a {text-decoration: none; color:#EFEFEF; font-weight: bold;}
#redes_sociais {height:100px; background-color:rgb(240,238,234);width: 100%;}
#redes_sociais_img {height: 50px; padding-left: 10px; padding-right: 10px;}
#entrada {
background-color:rgb(203,191,177);
min-height: 300px;
background-size: cover;
background-repeat: no-repeat;
/*Texto*/
padding-top: 5%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
color: whitesmoke;
text-align: right;
}
#titulo_imagem {
background-color:rgb(203,191,177);
min-height: 300px;
background-size: cover;
background-repeat: no-repeat;
/*Texto*/
padding-top: 5%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
color: whitesmoke;
text-align: right;
}
#text_vertical {
text-align: center;
-moz-transform: rotate(-90.0deg); /* FF3.5+ */
-o-transform: rotate(-90.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
.fixedButton{position: fixed; bottom: 0px; right: 0px; padding: 25px;}
.roundedFixedBtn{height: 60px; line-height: 60px; width: 60px; font-weight: bold; border-radius: 50%; background-color: orange; color: white; text-align: center; vertical-align: top; cursor: pointer;}
.dropdown {position: relative; display: inline-block;}
.dropbtn {background-color:transparent; color: black; border-color: rgba(232,232,232,1); padding-left: 20px; padding-right: 0px; font-size:large; border-style: none none none none; border-radius: 0; cursor: pointer;}
.dropdown-content {display: none; text-align: left; position: absolute; background-color: #f9f9f9; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a {color: gray; padding: 12px 16px; text-decoration: none; display: block;}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {border-color: rgba(62,57,52,1);}
#footer {clear: both; /*sempre que usar float tenho de libertar*/ width: 100%; padding: 20px; font-weight: bold; background-color:#303E4E; color: #FFFFFF;}
#cta_homeclimb td{
overflow: hidden; /* “limpa” floats se coluna_2 usar float */
}
#cta_homeclimb .coluna_2{
box-sizing: border-box;
}
/* Se a tua coluna_2 for float-based, isto garante alinhamento */
#cta_homeclimb .homeclimbing-contacto,
#cta_homeclimb .homeclimbing-form{
float: left;
width: 50%;
padding: 20px;
}
/* Mobile */
@media (max-width: 900px){
#cta_homeclimb .homeclimbing-contacto,
#cta_homeclimb .homeclimbing-form{
float: none;
width: 100%;
padding: 15px;
}
}
@media (max-width: 1000px) {
.ocultar_se_pequeno {visibility: collapse; display: none;}
.ocultar_se_grande {visibility: visible; display: block;}
.coluna_6 {width: 100%;}
.coluna_5 {width: 100%;}
.coluna_4 {width: 100%;}
.coluna_3 {width: 100%;}
.coluna_2 {width: 100%; padding: 10px;}
.coluna_2_txt_img {width: 100%;}
h1.branco {font-size: 5vw;}
h2.branco {font-size: 4vw;}
h3.branco {font-size: 3vw;}
#menu {height:150px;}
#menu_img_logo {height: 40px;}
#menu_txt_logo {height: 15px;}
.margem_120px {width: 61px; min-width: 61px;}
}
/*Quando o meio é o telémovel vamos alterar alguns itens*/
@media (max-width: 320px) {
h1.branco {font-size: 4vw;}
h2.branco {font-size: 3vw;}
h3.branco {font-size: 2vw;}
#menu {height:300px;}
#menu_img_logo {padding-left: 1px; height: 25px;}
#menu_txt_logo {height: 10px;}
.margem_120px {width: 1px; min-width: 1px;}
}
/* ============================================================
PALETA WOODPLAY — Natural & Premium
Aplica-se apenas a páginas com
(woodplay.php e woodplayhoreca.php)
============================================================ */
body.woodplay {
/* Tokens da linha Woodplay */
--wp-offwhite: #FAF7F2; /* papel / fundo principal */
--wp-carvalho: #6B4F3A; /* castanho carvalho — títulos, acentos */
--wp-bege: #D6C5A8; /* bege areia — secções, blocos */
--wp-bege-claro:#F3EDE3; /* bege muito claro — dropdowns, camadas */
--wp-azeitona: #6B7A3B; /* verde azeitona — CTA, destaques */
/* PASSO 1 — só o body */
background-color: var(--wp-offwhite);
}
/* --- Menu Woodplay --------------------------------------------------
Ideia 3: textura de madeira inline (SVG feTurbulence)
Veio horizontal, off-white por baixo, tinta carvalho a ~25% no máximo
Cores base: texto carvalho, hover azeitona, dropdowns em bege claro
-------------------------------------------------------------------- */
body.woodplay #menu {
background-color: var(--wp-offwhite);
background-image: url("data:image/svg+xml;utf8,");
background-size: 600px 100px;
background-repeat: repeat;
background-position: center;
}
/* Linha inferior do menu em carvalho muito suave, em vez de preto/gainsboro */
body.woodplay .linha_baixo_preta {
border-bottom: 1px solid rgba(107, 79, 58, 0.18);
}
/* Botões do menu */
body.woodplay .dropbtn {
color: var(--wp-carvalho);
transition: color .2s ease;
}
body.woodplay .dropdown:hover .dropbtn {
color: var(--wp-azeitona);
}
body.woodplay .dropdown:hover .dropbtn .material-icons {
color: var(--wp-azeitona);
}
/* Fundo e itens dos dropdowns */
body.woodplay .dropdown-content {
background-color: var(--wp-bege-claro);
box-shadow: 0 10px 24px rgba(107, 79, 58, 0.18);
}
body.woodplay .dropdown-content a {
color: var(--wp-carvalho);
transition: background-color .15s ease, color .15s ease;
}
body.woodplay .dropdown-content a:hover {
background-color: var(--wp-bege);
color: #FFFFFF;
}
/* --- Ideia 1: tagline "natureza que brinca" sob o logo ------------- */
body.woodplay .tagline-woodplay {
display: block;
margin-top: 4px;
font-size: 10px;
letter-spacing: 3px;
text-transform: lowercase;
color: var(--wp-azeitona);
font-weight: 600;
}
/* --- Ideia 2: indicador de secção ativa (Parques) ------------------ */
body.woodplay .dropdown-parques .dropbtn {
position: relative;
}
body.woodplay .dropdown-parques .dropbtn::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -6px;
width: 28px;
height: 3px;
background-color: var(--wp-azeitona);
border-radius: 2px;
}
/* --- Hero Woodplay (#entrada / #titulo_imagem) ----------------------
Fundo bege areia com veio de madeira SVG.
Seed e frequências diferentes do menu para não parecer repetido.
Texto continua branco (herda classe .branco).
-------------------------------------------------------------------- */
body.woodplay #entrada,
body.woodplay #titulo_imagem {
background-color: var(--wp-bege);
background-image: url("data:image/svg+xml;utf8,");
background-size: 800px 300px;
background-repeat: repeat;
background-position: center;
}
#conceito_espaco{
margin-top:0;
padding-top:5%;
}
/* LIGHTBOX */
#lightbox{
display:none;
position:fixed;
z-index:9999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.92);
text-align:center;
}
#lightbox img{
max-width:92%;
max-height:92%;
margin-top:2%;
box-shadow:0 0 25px rgba(255,255,255,0.15);
border-radius:8px;
}
#lightbox span{
position:absolute;
top:20px;
right:30px;
font-size:42px;
color:white;
cursor:pointer;
font-weight:bold;
}