/* ========================================================================== Creative Builders H&G — ajustes propios de la migración a GHL (correcciones que NO existían en el sitio original de WordPress) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Logo del header centrado con aire simétrico En el original el logo mide 90px pero vive en una fila de 54px: se desborda hacia abajo y su texto se encima con los enlaces del menú principal. Aquí se deja que la fila crezca hasta el alto real del logo y se le da el mismo margen arriba que abajo. -------------------------------------------------------------------------- */ /* el alto del header lo fija el tema (160px); debe seguir al contenido */ #header.site-header { height: auto !important; } .site-header .site-header-main-wrapper .site-header-main, .site-header .site-header-main-wrapper .site-header-main > .fxb-col, .site-header .site-header-main-wrapper .site-header-main .site-header-main-center { height: auto; min-height: 0; } .site-header #logo-container.logo-container { display: flex; align-items: center; justify-content: center; padding-top: 14px; padding-bottom: 14px; } .site-header #logo.site-logo, .site-header .site-logo { display: flex; align-items: center; margin: 0; min-height: 0; line-height: 0; } .site-header .site-logo-anch { display: flex; align-items: center; padding: 0; line-height: 0; } .site-header .logo-img.site-logo-img, .site-header .logo-img-sticky.site-logo-img-sticky { display: block; margin: 0; } /* el menu principal deja de quedar por debajo del logo */ .site-header .site-header-bottom-wrapper { position: relative; z-index: 3; } /* -------------------------------------------------------------------------- 1b. Movil: cabecera de una fila (logo + hamburguesa) -> ver cabecera.css. Los iconos de llamar y redes van dentro del menu desplegable (cbhg-fixes.js). -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 1c. Movil: la barra del menu queda fija al hacer scroll El tema pone la clase .header--is-sticked al bajar, pero deja el header en position:relative, asi que en movil se va con el scroll y no queda nada a mano. cbhg-fixes.js marca con .cbhg-nav-fija en cuanto el scroll alcanza la barra, y guarda su alto en --cbhg-nav-alto para reservar el hueco y que el contenido no de un salto. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .cbhg-nav-fija .site-header .site-header-bottom-wrapper { position: fixed; top: 0; left: 0; right: 0; width: 100%; background-color: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); z-index: 9999; } /* hueco que deja la barra al salir del flujo */ .cbhg-nav-fija .site-header .site-header-wrapper { padding-bottom: var(--cbhg-nav-alto, 44px); } /* con la barra fija sobra el separador de arriba */ .cbhg-nav-fija .site-header .site-header-separator { display: none; } /* el panel del menu desplegable debe quedar por encima de la barra fija */ .zn-res-menu-nav, .zn-res-menuwrapper .zn-res-menu-nav { z-index: 10000; } } /* -------------------------------------------------------------------------- 2. Galerias (Photo Gallery / BWG) en movil El plugin calcula el tamano de cada miniatura por JS con las medidas de escritorio y se lo pone en el atributo style (p. ej. height:384px dentro de una celda de 288px). En movil las fotos se salian de su celda, se encimaban entre ellas y alguna se iba del borde de la pantalla. Aqui se obliga a cada miniatura a ocupar exactamente su celda. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .bwg_container .bwg-item2 > img, .bwg_container img[class*="bwg_standart_thumb_img"], .bwg_container .bwg-item2 img { width: 100% !important; height: 100% !important; max-width: 100% !important; min-width: 0 !important; object-fit: cover !important; object-position: center !important; display: block; } /* el plugin mete margin-top:-48px / margin-left:-48px en linea para armar la reticula de escritorio; en una sola columna eso encima unas fotos con otras y descuadra el resto hacia la izquierda */ .bwg_container .bwg-item2 { overflow: hidden; max-width: 100%; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .bwg_container .bwg-item0, .bwg_container .bwg-item { max-width: 100%; } } /* -------------------------------------------------------------------------- 3. Areas de toque en movil Telefonos, correo y enlaces del pie median 15-20px de alto: quedan por debajo del minimo comodo para el dedo (~44px segun Apple y Google). Se les da altura de toque sin cambiar como se ven. -------------------------------------------------------------------------- */ @media (max-width: 767px) { a[href^="tel:"], a[href^="mailto:"] { display: inline-block; padding-top: 12px; padding-bottom: 12px; } .site-footer a, .kl-bottombar a, .kl-footer a { display: inline-block; padding-top: 8px; padding-bottom: 8px; } /* paginacion de los carruseles: el punto se ve igual, el area crece */ .slickBtn, button[id^="slick-slide-control"] { min-width: 32px; min-height: 32px; } /* boton "Load More" de las galerias (el plugin le pone 3px 6px) */ .bwg_container a.bwg_load_btn, .bwg_container a[class*="bwg_load_btn"] { display: inline-block; padding: 12px 22px !important; } /* enlaces sueltos dentro de bloques de titulo (pie: PRIVACY POLICY, DEVELOPED BY UNITECH, y los enlaces a servicios) */ .kl-title-block a, .tbk__title a, .tbk__subtitle a { display: inline-block; padding-top: 9px; padding-bottom: 9px; } .kl-iconbox__link { display: inline-block; padding-top: 6px; padding-bottom: 6px; } /* enlace SUPPORT de la barra superior */ a#open_sliding_panel.open-sliding-panel { display: inline-block; min-width: 44px; min-height: 40px; } } /* === ajustes desplegados en index.css de AI Studio (copia para pruebas) === */ /* -------------------------------------------------------------------------- Cabecera en monitores intermedios (993-1279px) El tema solo cambia a menu hamburguesa por debajo de 992px, y de ahi hasta 1280px mantiene el menu horizontal aunque ya no quepa: los iconos sociales se encimaban con los enlaces y el menu se partia en dos filas. No se puede forzar la hamburguesa en esta banda porque el tema NO construye el menu desplegable por encima de 992px (quedaria sin navegacion). La salida es liberar espacio: se ocultan las redes del header (siguen en el pie) y se compacta el menu para que entre en una sola fila. Va con !important porque este CSS se carga con la app y el del sitio se inyecta despues, en runtime. -------------------------------------------------------------------------- */ @media (min-width: 993px) and (max-width: 1279px) { .site-header .site-header-main-left .social-icons, .site-header .site-header-top .social-icons { display: none !important; } .site-header #main-menu .main-menu-link-top { padding-left: 10px !important; padding-right: 10px !important; font-size: 14px !important; letter-spacing: 0 !important; } .site-header #menu-main-menu > li { margin: 0 !important; } .site-header .site-header-bottom { flex-wrap: nowrap !important; } .site-header #main-menu.main-nav { white-space: nowrap !important; } } @media (min-width: 993px) and (max-width: 1120px) { .site-header #main-menu .main-menu-link-top { padding-left: 7px !important; padding-right: 7px !important; font-size: 13px !important; } } /* -------------------------------------------------------------------------- Barra de navegacion fija: se veia una linea delgada del fondo Al quedar fija, entre el borde superior de la barra y el viewport asomaba una franja de 1px del contenido por redondeo de subpixel. Se soluciona pintando la barra de blanco solido y montandola 1px por encima del borde. -------------------------------------------------------------------------- */ .site-header .site-header-bottom-wrapper, .site-header .site-header-wrapper, .site-header.header--is-sticked .site-header-bottom-wrapper { background-color: #fff !important; } .cbhg-nav-fija .site-header .site-header-bottom-wrapper, .site-header.header--is-sticked .site-header-bottom-wrapper { top: -1px !important; padding-top: 1px !important; box-shadow: 0 -2px 0 2px #fff, 0 2px 12px rgba(0, 0, 0, 0.12) !important; } /* -------------------------------------------------------------------------- Galerias: "Load More..." pedia la siguiente pagina de fotos a admin-ajax.php de WordPress; en el sitio estatico no responde y el boton no hacia nada. Las fotos que carga el HTML (hasta 15 por galeria) siguen visibles. -------------------------------------------------------------------------- */ [id^="bwg_load_"], .bwg_load_btn { display: none !important; } /* -------------------------------------------------------------------------- Logo dentro de la barra del menu (escritorio) build_static.py copia el logo a la izquierda de la barra y las redes a la derecha; aqui se oculta la fila original de 128px que solo tenia logo y redes. -------------------------------------------------------------------------- */ .site-header .cbhg-logo-nav, .site-header .cbhg-redes-nav { display: none !important; } @media (min-width: 993px) { .site-header .kl-top-header.site-header-main-wrapper { display: none !important; } .site-header .cbhg-logo-nav { display: flex !important; align-items: center; padding: 0; margin-right: 13px; } /* El PNG trae aire transparente alrededor del dibujo (este ocupa x 66-446, y 32-455 de 512). La imagen crece a 88px y los margenes negativos se comen ese aire: el logo visible pasa de ~53px a ~73px sin que la barra (76px) ni la separacion con el menu cambien. */ .site-header .cbhg-logo-nav img { display: block; height: 88px; width: auto; margin: -6px -11px -10px -3px; } .site-header .site-header-bottom > .fxb-start-x { flex: 0 0 auto !important; } /* el tema fija la barra a 46px: con el logo dentro necesita crecer */ .site-header .kl-main-header.site-header-bottom-wrapper, .site-header .site-header-bottom { height: auto !important; min-height: 76px; } .site-header #menu-main-menu { white-space: nowrap !important; } } @media (min-width: 1280px) { .site-header .cbhg-redes-nav { display: flex !important; align-items: center; margin: 0 14px 0 0 !important; } .site-header .cbhg-redes-nav .social-icons-item { width: 30px !important; } .site-header .site-header-bottom > .fxb-end-x { flex: 0 0 auto !important; } .site-header #main-menu .main-menu-link-top { padding-left: 15px !important; padding-right: 15px !important; } } /* -------------------------------------------------------------------------- Movil y tablet (hasta 992px, donde el tema usa la hamburguesa): una sola fila con el logo a la izquierda y la hamburguesa a la derecha. La fila original del logo se oculta; los iconos de llamar y redes pasan al menu desplegable (cbhg-fixes.js los copia ahi). -------------------------------------------------------------------------- */ @media (max-width: 992px) { .site-header .kl-top-header.site-header-main-wrapper { display: none !important; } .site-header .site-header-separator { display: none !important; } .site-header .site-header-row.site-header-bottom { display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 15px; } .site-header .site-header-bottom-left { flex: 0 0 auto !important; justify-content: flex-start; } .site-header .cbhg-logo-nav { display: flex !important; align-items: center; } /* mismo recorte del aire transparente del PNG que en escritorio: el dibujo queda de ~53px de alto y alineado con el margen de la pagina */ .site-header .cbhg-logo-nav img { display: block; height: 64px; width: auto; margin: -4px 0 -7px -8px; } .site-header .site-header-bottom .social-icons { display: none !important; } .site-header .site-header-bottom-center { flex: 1 1 auto !important; justify-content: flex-end !important; align-items: center; } .site-header .site-header-bottom-center .main-menu-wrapper { margin-left: auto; margin-right: 0; width: auto; } .site-header .zn-res-menuwrapper { margin: 0 0 0 auto; text-align: right; } .site-header .zn-res-menuwrapper .zn-res-trigger { margin-right: 0; } /* logo a la izquierda; lo demas pegado a la derecha, hamburguesa al final */ .site-header .site-header-bottom-left { order: 1; margin-right: auto; } .site-header .site-header-bottom-right { order: 2; flex: 0 0 auto !important; } .site-header .site-header-bottom-center { order: 3; flex: 0 0 auto !important; margin-left: 16px; } } /* en movil la columna de FREE QUOTE va vacia pero se llevaba 120px y centraba la hamburguesa: fuera */ @media (max-width: 767px) { .site-header .site-header-bottom-right { display: none !important; } .site-header .site-header-bottom-center { margin-left: 0; } } /* iconos al final del menu desplegable */ .zn-res-menu-nav > li.cbhg-res-redes { border: 0 !important; padding: 26px 20px 10px !important; background: none !important; } .zn-res-menu-nav .cbhg-res-redes-lista { display: flex; justify-content: center; gap: 18px; margin: 0; padding: 0; list-style: none; } .zn-res-menu-nav .cbhg-res-redes-lista li { margin: 0; padding: 0; border: 0 !important; float: none; } .zn-res-menu-nav .cbhg-res-redes-lista a { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0 !important; border: 0 !important; font-size: 26px !important; color: #1a1a1a !important; background: none !important; } /* -------------------------------------------------------------------------- Resenas de Google (reemplazo del widget de Trustindex) Marcado generado por build_static.py; carrusel y "Read more" en cbhg-fixes.js. Tipografia y colores del tema: Raleway, texto #535353, acentos en negro como el boton FREE QUOTE. -------------------------------------------------------------------------- */ .cbhg-rev { --rev-gap: 20px; --rev-cols: 3; --rev-tinta: #1a1a1a; --rev-texto: #535353; --rev-suave: #8a8a8a; --rev-borde: #ebe7e1; --rev-estrella: #fbbc04; margin: 8px auto 0; max-width: 1100px; font-family: "Raleway", Helvetica, Arial, sans-serif; color: var(--rev-texto); text-align: left; } /* ---- resumen: Google + estrellas + total + boton ---- */ .cbhg-rev__resumen { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 22px; margin: 0 auto 30px; padding: 18px 24px; border: 1px solid var(--rev-borde); border-radius: 10px; background: #fff; max-width: 640px; } .cbhg-rev__glogo { width: 36px; height: 36px; flex: 0 0 auto; } .cbhg-rev__nota { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.2; } .cbhg-rev__excelente { font-size: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rev-tinta); } .cbhg-rev__base { font-size: 14px; color: var(--rev-suave); } .cbhg-rev__base strong { color: var(--rev-tinta); font-weight: 600; } .cbhg-rev .cbhg-rev__escribir { display: inline-block; padding: 10px 22px; border: 2px solid var(--rev-tinta); border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--rev-tinta); text-decoration: none; transition: background-color .2s, color .2s; } .cbhg-rev .cbhg-rev__escribir:hover, .cbhg-rev .cbhg-rev__escribir:focus-visible { background: var(--rev-tinta); color: #fff; } /* ---- estrellas ---- */ .cbhg-rev__estrellas { display: inline-flex; gap: 2px; line-height: 0; } .cbhg-rev__estrellas svg { width: 18px; height: 18px; fill: var(--rev-estrella); } /* ---- carrusel ---- Cuantas tarjetas caben depende del ancho del bloque, no de la pantalla: en la portada la columna es ancha y en /testimonials/ es angosta. */ .cbhg-rev__marco { position: relative; container-type: inline-size; } .cbhg-rev .cbhg-rev__lista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--rev-cols) - 1) * var(--rev-gap)) / var(--rev-cols)); gap: var(--rev-gap); margin: 0; padding: 6px 2px 18px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cbhg-rev .cbhg-rev__lista::-webkit-scrollbar { display: none; } .cbhg-rev .cbhg-rev__lista:focus-visible { outline: 2px solid var(--rev-tinta); outline-offset: 4px; } .cbhg-rev .cbhg-rev__tarjeta { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 22px 22px 18px; scroll-snap-align: start; background: #fff; border: 1px solid var(--rev-borde); border-radius: 10px; box-shadow: 0 6px 22px rgba(0, 0, 0, .06); } .cbhg-rev__autor { display: flex; align-items: center; gap: 12px; } .cbhg-rev__foto { position: relative; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #e9e4dc; } .cbhg-rev__foto img { display: block; width: 100%; height: 100%; object-fit: cover; } /* si la foto de Google no carga, se ve la inicial */ .cbhg-rev__foto.sin-foto::after { content: attr(data-inicial); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: var(--rev-tinta); } .cbhg-rev__quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .cbhg-rev__nombre { font-weight: 700; font-size: 16px; color: var(--rev-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cbhg-rev__fecha { font-size: 13px; color: var(--rev-suave); } .cbhg-rev__glogo--mini { width: 20px; height: 20px; margin-left: auto; } .cbhg-rev .cbhg-rev__texto { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rev-texto); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .cbhg-rev__tarjeta.abierta .cbhg-rev__texto { display: block; -webkit-line-clamp: unset; } .cbhg-rev .cbhg-rev__mas { align-self: flex-start; margin-top: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--rev-tinta); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* ---- flechas ---- */ .cbhg-rev .cbhg-rev__flecha { position: absolute; top: calc(50% - 30px); z-index: 2; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--rev-borde); border-radius: 50%; background: #fff; color: var(--rev-tinta); box-shadow: 0 4px 14px rgba(0, 0, 0, .1); cursor: pointer; transition: opacity .2s, background-color .2s, color .2s; } .cbhg-rev .cbhg-rev__flecha svg { width: 20px; height: 20px; } .cbhg-rev .cbhg-rev__flecha:hover { background: var(--rev-tinta); color: #fff; } .cbhg-rev .cbhg-rev__flecha[disabled] { opacity: 0; pointer-events: none; } .cbhg-rev__flecha--prev { left: -21px; } .cbhg-rev__flecha--next { right: -21px; } .cbhg-rev__flecha--next svg { transform: rotate(180deg); } /* el tema daba 270px de relleno lateral a esta columna: el carrusel lo aprovecha mejor con menos */ @media (min-width: 993px) { .znColumnElement-innerWrapper:has(> .znColumnElement-innerContent > .zn_custom_html > .cbhg-rev) { padding-left: 60px !important; padding-right: 60px !important; } } @container (max-width: 860px) { .cbhg-rev .cbhg-rev__lista { grid-auto-columns: calc((100% - var(--rev-gap)) / 2); } } @container (max-width: 540px) { .cbhg-rev .cbhg-rev__lista { grid-auto-columns: 86%; } } @media (max-width: 992px) { .cbhg-rev__flecha--prev { left: -8px; } .cbhg-rev__flecha--next { right: -8px; } } @media (max-width: 767px) { .cbhg-rev { --rev-gap: 14px; } .cbhg-rev .cbhg-rev__flecha { display: none; } .cbhg-rev__resumen { flex-direction: column; text-align: center; padding: 18px; } .cbhg-rev__nota { align-items: center; } .cbhg-rev .cbhg-rev__tarjeta { padding: 18px 18px 16px; } } /* -------------------------------------------------------------------------- Hero de Home Addition & Extension (home_addition.py). Reproduce el hero de RevSlider de las paginas de servicio con sus medidas reales: desde 1100px el alto es 45.45vw (500/1100) y la tipografia escala igual; por debajo, 500px fijos, y 400px en movil. -------------------------------------------------------------------------- */ .cbhg-hero-ha { position: relative; width: 100%; height: 500px; overflow: hidden; background: #2b2b2b; } .cbhg-hero-ha__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cbhg-hero-ha__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.38) 55%, rgba(0,0,0,.30) 100%); } .cbhg-hero-ha__capas { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 20px; text-align: center; } .cbhg-hero-ha .cbhg-hero-ha__ante { margin: 0; font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 22px; letter-spacing: 2px; text-transform: uppercase; color: #fff; text-shadow: 3px 2px 0 rgba(0,0,0,.85); } .cbhg-hero-ha .cbhg-hero-ha__titulo { margin: 0; font-family: "Gloock", Georgia, serif; font-weight: 400; font-size: 45px; line-height: 1.12; letter-spacing: 0; text-transform: none; color: #fff; text-shadow: 3px 2px 1px #000; } .cbhg-hero-ha .cbhg-hero-ha__boton { display: inline-block; margin-top: 10px; padding: 16px 46px; border: 1px solid rgba(255,255,255,.25); border-radius: 3px; background: #ede9e1; font-family: "Raleway", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 1px; line-height: 1.1; color: #000; text-decoration: none; transition: background-color .2s; } .cbhg-hero-ha .cbhg-hero-ha__boton:hover { background: #fff; color: #000; } @media (min-width: 1100px) { .cbhg-hero-ha { height: 45.4545vw; } .cbhg-hero-ha__capas { gap: 1.6vw; } .cbhg-hero-ha .cbhg-hero-ha__ante { font-size: 2vw; letter-spacing: .18vw; } .cbhg-hero-ha .cbhg-hero-ha__titulo { font-size: 4.09vw; } } @media (max-width: 767px) { .cbhg-hero-ha { height: 400px; } .cbhg-hero-ha .cbhg-hero-ha__titulo { font-size: 39px; } .cbhg-hero-ha .cbhg-hero-ha__boton { padding: 12px 35px; font-weight: 600; } } /* texto del proyecto bajo su titulo, como las bajadas de las otras secciones */ .cbhg-proyecto-texto { max-width: 860px; margin: 14px auto 0; font-size: 17px; line-height: 1.65; color: #535353; text-align: center; } #cbhg-proyecto { scroll-margin-top: 110px; } /* las fotos de Wallpaper eran todas 570x670; las del proyecto no (el plano es horizontal) y la primera tarjeta quedaba mas baja: misma proporcion y recorte al centro */ .cbhg-home-addition .imgboxes_style4 .image-boxes-img { width: 100%; aspect-ratio: 570 / 670; object-fit: cover; object-position: center; }