/* Theme Name: Avada Child MDC Description: Tema hijo de Avada para Madrid Dental Clinic. Aqui van los ajustes propios de MDC; nunca se edita el tema padre. Author: Madrid Dental Clinic Template: Avada Version: 1.0.0 Text Domain: avada-child-mdc */ /* * Boton "PEDIR CITA" del menu principal. * El elemento visual real es el de dentro del * , no el en si (por eso el primer intento no funciono). Valores * calcados de produccion: 2px solido #BE9359, sin relleno, sin radio, mismo * color en :hover (en produccion el hover no cambia nada). */ li.fusion-menu-item-button .fusion-button.button-default { background-color: transparent !important; border: 2px solid #BE9359 !important; border-radius: 0 !important; color: #BE9359 !important; padding: 8px !important; } li.fusion-menu-item-button .fusion-button.button-default:hover { background-color: transparent !important; border-color: #BE9359 !important; color: #BE9359 !important; } /* * Curvas decorativas de seccion. * Reglas copiadas literalmente de Elementor (assets/css/conditionals/shapes.css) * para que el markup que genera el conversor se pinte con la misma geometria. * Elementor ya no esta activo: estas clases no chocan con nada. */ .elementor-shape { overflow: hidden; position: absolute; left: 0; width: 100%; line-height: 0; direction: ltr; } .elementor-shape-top { top: -1px; } .elementor-shape-top:not([data-negative=false]) svg { z-index: -1; } .elementor-shape-bottom { bottom: -1px; } .elementor-shape-bottom:not([data-negative=true]) svg { z-index: -1; } .elementor-shape[data-negative=false].elementor-shape-bottom { transform: rotate(180deg); } .elementor-shape[data-negative=true].elementor-shape-top { transform: rotate(180deg); } .elementor-shape svg { display: block; width: calc(100% + 1.3px); position: relative; left: 50%; transform: translateX(-50%); } .elementor-shape .elementor-shape-fill { fill: #fff; transform-origin: center; transform: rotateY(0deg); } /* * Base minima de los botones de Elementor (copiada de su frontend.css). * El estilo concreto de cada boton (contorno dorado, relleno...) lo pone el * CSS compilado del mockup por elemento; esto solo da la estructura. */ .elementor-button-wrapper { text-align: center; } .elementor-button { display: inline-block; line-height: 1; background-color: #69727d; color: #fff; fill: #fff; text-align: center; transition: all .3s; padding: 12px 24px; border-radius: 3px; text-decoration: none; } .elementor-button:hover, .elementor-button:focus, .elementor-button:visited { color: #fff; } .elementor-button-content-wrapper { display: flex; justify-content: center; align-items: center; gap: 5px; } .elementor-size-xs { font-size: 13px; padding: 10px 20px; } .elementor-size-sm { font-size: 15px; padding: 12px 24px; } .elementor-size-md { font-size: 16px; padding: 15px 30px; } .elementor-size-lg { font-size: 18px; padding: 20px 40px; } .elementor-size-xl { font-size: 20px; padding: 25px 50px; } /* * Neutralizacion de clases fosiles del Avada de 2019. * Los textos migrados a Elementor guardan HTML renderizado de aquel Avada * (.reading-box, .fusion-fullwidth internos...). En produccion (Astra) esas * clases no tienen CSS y son divs invisibles; al volver a Avada, su hoja las * "revive" (caja blanca con sombra que tapa el texto). Se neutralizan solo * dentro del contenido migrado para igualar el mockup. */ .elementor-widget-container .fusion-reading-box-container { margin: 0 !important; animation: none; } .elementor-widget-container .reading-box { background: none !important; background-color: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; } .elementor-widget-container .reading-box.element-bottomshadow:before, .elementor-widget-container .reading-box.element-bottomshadow:after { display: none !important; } .elementor-widget-container .reading-box-additional { margin: 0 !important; padding: 0 !important; } .elementor-widget-container .fusion-fullwidth { padding: 0 !important; margin: 0 !important; background: none !important; } .elementor-widget-container .fusion-builder-row { max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .elementor-widget-container .fusion-column-wrapper { padding: 0 !important; margin: 0 !important; } /* --- Migrado de custom-css-js: CSS tema --- */ .widget { margin-bottom:1em !important; } .tp-flipbox__front { background-position: center; background-size:cover !important; } .reviews span{ color:white !important; } .reviews strong{ color:white !important; } /* Gravity forms */ html body div#primary .elementor-element .eael-gravity-form .gform_footer input[type="submit"] { border: 1px solid transparent; border-radius: 7px; cursor: pointer; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.5; padding: 8px 20px; position: relative; text-align: center; transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; -webkit-user-select: none; -moz-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; width: auto !important; } .gform_heading { display: none; } /* * Anchos de columna del mockup. * Elementor guarda el ancho de cada contenedor en la variable --width (CSS * compilado por elemento); Avada no la consume. Cadena de respaldo: si el * mockup definio --width, gana; si no, se usa el ancho propio de Avada. */ /* (regla de ancho por --width retirada: pisaba las columnas 1_2 de las paginas con contenedores flex) */ /* --- Desplegable del menu: filete superior dorado como en el mockup (Astra) --- */ .fusion-main-menu .fusion-dropdown-menu .sub-menu { border-top: 2px solid #be9359; } .fusion-main-menu .sub-menu li a:hover, .fusion-main-menu .sub-menu .current-menu-item > a { background-color: #a87f45 !important; color: #ffffff !important; } /* --- Paleta global de Astra (variables que inyectaba el tema padre en el mockup) --- */ :root, body { --e-global-color-astglobalcolor0: #000000; --e-global-color-astglobalcolor1: #b1b1b1; --e-global-color-astglobalcolor2: #be9359; --e-global-color-astglobalcolor3: #334155; --e-global-color-astglobalcolor4: #f9fafb; --e-global-color-astglobalcolor5: #FFFFFF; --e-global-color-astglobalcolor6: #e2e8f0; --e-global-color-astglobalcolor7: #cbd5e1; --e-global-color-astglobalcolor8: #94a3b8; --ast-global-color-0: #000000; --ast-global-color-1: #b1b1b1; --ast-global-color-2: #be9359; --ast-global-color-3: #334155; --ast-global-color-4: #f9fafb; --ast-global-color-5: #FFFFFF; --ast-global-color-6: #e2e8f0; --ast-global-color-7: #cbd5e1; --ast-global-color-8: #94a3b8; } /* Titulos de las cajas de icono: en el mockup van en Lato (no en Abril) */ .mdc-titulo-span .content-box-heading { font-family: var(--body_typography-font-family, "Lato", sans-serif); font-weight: 600; letter-spacing: 1px; } .mdc-titulo-abril .content-box-heading { font-family: var(--h2_typography-font-family, "Abril Fatface", serif); font-weight: 400; line-height: 1.2; } /* --- Botones de Elementor: estilo global que ponia Astra en el mockup --- */ .wp-block-button .wp-block-button__link, .elementor-widget-button .elementor-button, .elementor-widget-button .elementor-button:visited { color: #000000; } .elementor-widget-button .elementor-button { border-color: var(--ast-global-color-2); background-color: var(--ast-global-color-2); } .elementor-widget-button .elementor-button:hover, .elementor-widget-button .elementor-button:focus { color: #000000; background-color: var(--ast-global-color-1); border-color: var(--ast-global-color-1); } /* Estrellas de las opiniones: doradas como en el mockup */ .elementor-star-rating { color: #e7a83d; font-size: 20px; } .elementor-star-rating i { font-style: normal; } /* Columna creada para un widget suelto de fila flex: la columna ya encarna el ancho del widget en la fila; el % propio del mockup no debe re-aplicarse dentro (encogia los antes/despues de black-friday a 68px). */ .mdc-col-widget .fusion-column-wrapper > .elementor-element { width: 100% !important; max-width: 100% !important; } /* Contenedores de Elementor convertidos en columna: el CSS del mockup pinta su fondo en el nodo exterior y deja el radio en la var --border-radius de Elementor (su CSS base no esta cargado); se aplica aqui esa var. */ .fusion_builder_column.elementor-element { border-radius: var(--border-radius, 0); } /* Cabecera como el mockup de Astra: los enlaces del menu quedan hacia el centro de la barra y el boton PEDIR CITA anclado a la derecha con hueco. */ @media (min-width: 800px) { .fusion-main-menu > ul > li.fusion-menu-item-button { margin-left: 150px; } }