541 lines
12 KiB
CSS
541 lines
12 KiB
CSS
/*
|
|
* Theme Name: CNT Sindiaktua
|
|
* Description: Tema Timber de nexos
|
|
* Author: nexos estudios
|
|
*/
|
|
|
|
:root {
|
|
--rojo-cnt: #dc2d30;
|
|
--rojo-cnt-dark: #9d1b1d;
|
|
--rojo-cnt-light: #d6453f;
|
|
--reset: #7b7b7b;
|
|
--white:#fff;
|
|
--black:#000000ff;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Yaro';
|
|
src: url('assets/fonts/yaro-font-family/YaroSt-Black.ttf') format('truetype');
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* PORTADA -> ENLACES */
|
|
.margin-50 {
|
|
margin: 50px 0 !important;
|
|
}
|
|
|
|
/* Botón primario */
|
|
.btn-primary-cnt {
|
|
border-radius: 75px !important;
|
|
background-color: var(--rojo-cnt);
|
|
border: 2px solid var(--rojo-cnt);
|
|
color: var(--white);
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Botón primario - hover */
|
|
.btn-primary-cnt:hover {
|
|
color: var(--black);
|
|
background-color: white;
|
|
border-color: var(--black);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Botón primario - active */
|
|
.btn-primary-cnt:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 4px rgba(255, 0, 0, 0.25);
|
|
}
|
|
|
|
button[type="reset"] {
|
|
background-color: var(--reset);
|
|
}
|
|
|
|
/* Botón secundario */
|
|
.btn-secondary-cnt {
|
|
border-radius: 10px !important;
|
|
background-color: var(--rojo-cnt-light);
|
|
border: 2px solid var(--rojo-cnt-light);
|
|
color: var(--white);
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Botón secundario - hover */
|
|
.btn-secondary-cnt:hover {
|
|
color: var(--black);
|
|
background-color: var(--white);
|
|
border-color: var(--black);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Botón secundario - active */
|
|
.btn-secondary-cnt:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 4px rgba(255, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Quitar el focus/active de todos los elementos del menú */
|
|
.nav-link:focus,
|
|
.nav-link:active,
|
|
.btn:focus,
|
|
.btn:active,
|
|
.dropdown-item:focus,
|
|
.dropdown-item:active {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
background-color: var(--rojo-cnt) !important;
|
|
color: var(--white) !important;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* PORTADA -> Titles */
|
|
.sp-module-title::after{
|
|
background: var(--rojo-cnt);
|
|
content: "";
|
|
height: 1px;
|
|
left: 0;
|
|
position: absolute;
|
|
bottom: -12px;
|
|
width: 150px;
|
|
}
|
|
|
|
.sp-module-title::before{
|
|
background: var(--rojo-cnt);
|
|
content: "";
|
|
height: 1px;
|
|
left: 0;
|
|
position: absolute;
|
|
bottom: -15px;
|
|
width: 150px;
|
|
}
|
|
|
|
/* HEADER sindikatua */
|
|
.text-sindikatua {
|
|
font-family: 'Yaro', Arial, sans-serif;
|
|
}
|
|
|
|
/* HEADER ->MENU */
|
|
@media (min-width: 992px) {
|
|
.menu-bar .dropdown:hover .dropdown-menu {
|
|
display: block;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
/* menu-burger */
|
|
.menu-burger .offcanvas {
|
|
background: linear-gradient(135deg,rgba(204,29,26,0.9),#cc1d1a);
|
|
}
|
|
|
|
.menu-burger .dropdown:hover .dropdown-menu {
|
|
display: block;
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* transition effects both menus*/
|
|
.dropdown-menu {
|
|
transition: opacity 0.3s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
.nav-item.dropdown:hover .dropdown-menu {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* PORTADA -> CARDS recent posts 'noticias' */
|
|
.page-portada .recent-posts .card-img-overlay {
|
|
top: auto !important; /* Anula el top: 0 por defecto de Bootstrap */
|
|
bottom: 0;
|
|
height: 25%;
|
|
background: rgba(128, 128, 128, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* PORTADA -> CARDS OPINION */
|
|
.page-portada .opinion-article .card-img-overlay {
|
|
top: auto !important; /* Anula el top: 0 por defecto de Bootstrap */
|
|
bottom: 0;
|
|
height: 30%;
|
|
background: rgba(128, 128, 128, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.page-portada .opinion-article .card-img-overlay:hover,
|
|
.page-portada .recent-posts .card-img-overlay:hover {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
@media (991px <= width < 1400px) {
|
|
.page-portada .opinion-article .card-img-overlay {
|
|
height: 40%;
|
|
}
|
|
}
|
|
|
|
@media (width < 990px) {
|
|
.page-portada .opinion-article .card-img-overlay {
|
|
height: 20%;
|
|
}
|
|
}
|
|
|
|
.page-portada .recent-posts .card-title,
|
|
.page-portada .opinion-article .card-title {
|
|
color: var(--white);
|
|
margin: 0;
|
|
font-weight: 600;
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2; /* Número de líneas */
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.page-portada .recent-posts .card-title a,
|
|
.page-portada .opinion-article .card-title a {
|
|
color: var(--white);
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.page-portada .recent-posts .card-title a:hover {
|
|
color: var(--rojo-cnt);
|
|
}
|
|
|
|
.page-portada .recent-posts .card.secondary-article .card-title {
|
|
font-size: medium;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.page-portada .recent-posts .card-img-overlay {
|
|
height: 18%;
|
|
}
|
|
|
|
.page-portada .recent-posts .card-title {
|
|
font-size: 0.9rem;
|
|
}
|
|
.page-portada .recent-posts .media-mb {
|
|
margin-bottom: 1rem; /* o el valor que necesites */
|
|
}
|
|
}
|
|
|
|
/* PORTADA -> ENLACES */
|
|
.btn-hover .btn-image-only {
|
|
overflow: hidden;
|
|
border-radius: 0.375rem;
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.btn-hover .btn-image-only img {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.btn-hover:hover .btn-image-only {
|
|
box-shadow: 0 0 15px var(--rojo-cnt);
|
|
}
|
|
|
|
.btn-hover:hover .btn-image-only img {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
/* PORTADA -> SECTION VIDEO */
|
|
.video-iframe {
|
|
border-radius: 0.5rem; /* o usa la clase .rounded directamente */
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* PORTADA -> SECTION CAMPAÑA */
|
|
.card-img-fixed {
|
|
max-height: 300px; /* o el valor que necesites */
|
|
object-fit: cover;
|
|
width: 100%;
|
|
}
|
|
|
|
/* FOOTER */
|
|
|
|
/* Convert SVG RRSS white */
|
|
.svg-white {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.svg-white:hover {
|
|
filter: none;
|
|
}
|
|
|
|
.btn-outline-white {
|
|
color: var(--white);
|
|
border-color: var(--white);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.btn-outline-white:hover {
|
|
background-color: var(--white);
|
|
border-color: var(--white);
|
|
}
|
|
|
|
.svg-hover-white:hover {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.active-acerca {
|
|
background-color: var(--rojo-cnt);
|
|
}
|
|
|
|
.servicios-publicos .card img,
|
|
.servicios-privados .card img {
|
|
width: 100%;
|
|
max-width: 50%;
|
|
height: auto;
|
|
}
|
|
|
|
.servicios .card .card-body .card-title {
|
|
width: fit-content;
|
|
}
|
|
|
|
.enlaces button:not(.collapsed) {
|
|
background-color: var(--rojo-cnt);
|
|
color: #fff;
|
|
border-color: none;
|
|
}
|
|
|
|
.enlaces button:focus,
|
|
.enlaces button:active {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* FORM */
|
|
/* Contenedor principal del formulario */
|
|
.formulario-contacto {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Formulario centrado */
|
|
.formulario-contacto .wpcf7-form {
|
|
width: 100%;
|
|
max-width: 500px; /* Ajusta según necesites */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Estilos para todos los inputs y textareas */
|
|
.formulario-contacto input[type="text"],
|
|
.formulario-contacto input[type="email"],
|
|
.formulario-contacto input[type="tel"],
|
|
.formulario-contacto input[type="url"],
|
|
.formulario-contacto input[type="number"],
|
|
.formulario-contacto textarea,
|
|
.formulario-contacto select {
|
|
border-radius: 25px !important; /* Bordes redondos */
|
|
border: 2px solid #e9ecef !important;
|
|
padding: 12px 20px !important;
|
|
font-size: 16px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: none !important;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Efecto hover y focus en inputs */
|
|
.formulario-contacto input[type="text"]:focus,
|
|
.formulario-contacto input[type="email"]:focus,
|
|
.formulario-contacto input[type="tel"]:focus,
|
|
.formulario-contacto input[type="url"]:focus,
|
|
.formulario-contacto input[type="number"]:focus,
|
|
.formulario-contacto textarea:focus,
|
|
.formulario-contacto select:focus {
|
|
border-color: var(--rojo-cnt) !important;
|
|
box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25) !important;
|
|
outline: none;
|
|
}
|
|
|
|
.formulario-contacto input {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Estilo específico para textarea */
|
|
.formulario-contacto textarea {
|
|
resize: vertical;
|
|
min-height: 120px;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Botón submit - ancho completo y redondeado */
|
|
.formulario-contacto input[type="submit"] {
|
|
width: 100% !important;
|
|
border-radius: 25px !important;
|
|
background-color: var(--rojo-cnt);
|
|
border: 2px solid var(--rojo-cnt);
|
|
color: var(--white);
|
|
padding: 15px 30px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Efectos hover del botón */
|
|
.formulario-contacto input[type="submit"]:hover {
|
|
background-color: var(--rojo-cnt-dark);
|
|
border-color: var(--rojo-cnt-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(255, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Efectos active del botón */
|
|
.formulario-contacto input[type="submit"]:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 4px rgba(255, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Estilos para labels */
|
|
.formulario-contacto label {
|
|
font-weight: 500;
|
|
margin-bottom: 5px;
|
|
color: #495057;
|
|
display: block;
|
|
}
|
|
|
|
/* Mensajes de error de CF7 */
|
|
.formulario-contacto .wpcf7-not-valid-tip {
|
|
color: var(--rojo-cnt-dark);
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Mensaje de validación */
|
|
.formulario-contacto .wpcf7-validation-errors {
|
|
border: 1px solid var(--rojo-cnt-dark);
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border-radius: 15px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Mensaje de éxito */
|
|
.formulario-contacto .wpcf7-mail-sent-ok {
|
|
border: 1px solid #28a745;
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border-radius: 15px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Responsive - pantallas pequeñas */
|
|
@media (max-width: 768px) {
|
|
.formulario-contacto {
|
|
padding: 15px;
|
|
}
|
|
|
|
.formulario-contacto .wpcf7-form {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.formulario-contacto input[type="submit"] {
|
|
font-size: 16px;
|
|
padding: 12px 25px;
|
|
}
|
|
}
|
|
|
|
/* Texto sección tease.twig */
|
|
.link-underline-animate {
|
|
position: relative;
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.link-underline-animate::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 2px;
|
|
background-color: var(--rojo-cnt); /* color del subrayado */
|
|
transition: all 0.3s ease;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.link-underline-animate:hover {
|
|
color: var(--rojo-cnt) !important; /* color del texto al hacer hover */
|
|
}
|
|
|
|
.link-underline-animate:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
/* search page */
|
|
.offcanvas-body {
|
|
height: 18vh!important; /* altura del 18% del viewport */
|
|
}
|
|
|
|
/* Resetear estilos de Bootstrap en la paginación */
|
|
.pagination-block .pagination {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.pagination-block .page-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0; /* Resetear margin por defecto */
|
|
}
|
|
|
|
/* Estilos específicos para números de página */
|
|
.page-number {
|
|
padding: 10px 15px !important;
|
|
min-width: 44px;
|
|
text-align: center;
|
|
border-color: var(--reset);
|
|
background-color: var(--reset);
|
|
border-radius: 10px;
|
|
color: var(--white);
|
|
}
|
|
|
|
.current-page {
|
|
border-radius: 75px !important; /* Mismo border-radius que activos */
|
|
}
|
|
|
|
.btn-pagination-position {
|
|
display: inline-flex;
|
|
align-items: end;
|
|
justify-content: center;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.btn-no-hover {
|
|
transition: none !important;
|
|
pointer-events: none;
|
|
cursor: default !important;
|
|
}
|
|
|
|
.btn-page-hover:hover {
|
|
color: var(--black);
|
|
background-color: var(--white);
|
|
border-color: var(--black);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
a.btn-page-hover:hover {
|
|
border: 2px solid var(--black) !important;
|
|
} |