pigui/gureametsabilagun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tema: nuevos botones, campos, casillas, tarjetas, selector, interruptor, cabecera y pie

Browse Source 
- Botones: borde que se dibuja al pasar el ratón o con el teclado (color según variante) y sombra.
- Campos: subrayados con etiqueta flotante y degradado principal → acento al enfocar; flecha
  propia en los desplegables. Formularios de contacto, cuestionario y finales felices adaptados.
- Casillas: marca «a mano» que se dibuja al marcarlas (ga_checkmark()), accesibles con teclado.
- Tarjetas de animales y finales felices: marco de 2 px con resplandor de acento en la esquina.
- Selector segmentado (.ga-segmented) con píldora deslizante; se usa en las pestañas Perros / Gatos
  y sirve también para grupos de radios.
- Interruptor (.ga-toggle, ga_toggle_ui()) listo para usar.
- Cabecera translúcida con borde al hacer scroll, enlaces en píldora, desplegable animado con
  descripción de cada elemento y fondo oscurecido mientras está abierto.
- Pie: nombre gigante en bajorrelieve que se descubre al final de la página (opción en el
  personalizador, «Bilagun» por defecto).
- Versión del tema 2.3.0.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Josep Piguillem
2026-09-27 15:11:17 +02:00
parent 83d1298dda
commit 9a6bcd56e5
9 changed files with 320 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
wp-content/mu-plugins/gure-ametsa/forms.php
View File

@@ -18,6 +18,21 @@ function ga_contact_reasons() {
); );
} }
/** Casilla dibujada: se coloca justo después del <input type="checkbox"> (la animación está en el CSS del tema). */
function ga_checkmark() {
return '<svg class="ga-check" viewBox="0 0 95 95" aria-hidden="true" focusable="false"><rect x="30" y="20" width="50" height="50" rx="9"/>'
. '<path transform="translate(0,-952.36222)" d="m 56,963 c -102,122 6,9 7,9 17,-5 -66,69 -38,52 122,-77 -7,14 18,4 29,-11 45,-43 23,-4"/></svg>';
}
/**
* Interruptor: se coloca justo después del checkbox, dentro de su etiqueta:
* <label class="ga-toggle"><input type="checkbox" role="switch" name="…"><?php echo ga_toggle_ui(); ?><span>Texto</span></label>
*/
function ga_toggle_ui() {
return '<span class="ga-toggle__switch" aria-hidden="true"><span class="ga-toggle__track"><i></i><i></i><i></i><i></i><i></i></span>'
. '<span class="ga-toggle__thumb"><span class="ga-toggle__icon"></span></span></span>';
}
/** Texto de confirmación tras enviar. */ /** Texto de confirmación tras enviar. */
function ga_confirmation_text( $is_animal ) { function ga_confirmation_text( $is_animal ) {
return $is_animal return $is_animal
@@ -61,34 +76,37 @@ add_shortcode( 'ga_contacto', function ( $atts ) {
<div class="ga-hp" aria-hidden="true"><label>No rellenar <input type="text" name="web" tabindex="-1" autocomplete="off"></label></div> <div class="ga-hp" aria-hidden="true"><label>No rellenar <input type="text" name="web" tabindex="-1" autocomplete="off"></label></div>
<div class="ga-form__row"> <div class="ga-form__row">
<label><?php ga_e( 'Nombre', 'Izena' ); ?> *<input type="text" name="nombre" required autocomplete="name"></label> <label class="ga-field"><input type="text" name="nombre" required autocomplete="name" placeholder=" "><span><?php ga_e( 'Nombre', 'Izena' ); ?> *</span></label>
<label><?php ga_e( 'Correo electrónico', 'Posta elektronikoa' ); ?> *<input type="email" name="email" required autocomplete="email"></label> <label class="ga-field"><input type="email" name="email" required autocomplete="email" placeholder=" "><span><?php ga_e( 'Correo electrónico', 'Posta elektronikoa' ); ?> *</span></label>
</div> </div>
<div class="ga-form__row"> <div class="ga-form__row">
<label><?php ga_e( 'Teléfono', 'Telefonoa' ); ?><?php echo $is_animal ? ' *' : ''; ?><input type="tel" name="telefono" autocomplete="tel"<?php echo $is_animal ? ' required' : ''; ?>></label> <label class="ga-field"><input type="tel" name="telefono" autocomplete="tel" placeholder=" "<?php echo $is_animal ? ' required' : ''; ?>><span><?php ga_e( 'Teléfono', 'Telefonoa' ); ?><?php echo $is_animal ? ' *' : ''; ?></span></label>
<?php if ( ! $is_animal ) : ?> <?php if ( ! $is_animal ) : ?>
<label><?php ga_e( 'Motivo', 'Arrazoia' ); ?> <label class="ga-field ga-field--select">
<select name="motivo"> <select name="motivo">
<?php foreach ( ga_contact_reasons() as $value => $label ) : ?> <?php foreach ( ga_contact_reasons() as $value => $label ) : ?>
<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $preselect, $value ); ?>><?php echo esc_html( $label ); ?></option> <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $preselect, $value ); ?>><?php echo esc_html( $label ); ?></option>
<?php endforeach; ?> <?php endforeach; ?>
</select> </select>
<span><?php ga_e( 'Motivo', 'Arrazoia' ); ?></span>
</label> </label>
<?php endif; ?> <?php endif; ?>
</div> </div>
<?php if ( ! $is_animal ) : ?> <?php if ( ! $is_animal ) : ?>
<label class="ga-form__visit"<?php echo 'visita' === $preselect ? '' : ' hidden'; ?>><?php ga_e( '¿Qué día y hora te vendría bien?', 'Zein egun eta ordu komeni zaizu?' ); ?> <label class="ga-field ga-form__visit"<?php echo 'visita' === $preselect ? '' : ' hidden'; ?>>
<input type="text" name="preferencia" placeholder="<?php echo esc_attr( ga__( 'Por ejemplo: martes o jueves por la tarde', 'Adibidez: asteartea edo osteguna arratsaldez' ) ); ?>"> <input type="text" name="preferencia" placeholder="<?php echo esc_attr( ga__( 'Por ejemplo: martes o jueves por la tarde', 'Adibidez: asteartea edo osteguna arratsaldez' ) ); ?>">
<span><?php ga_e( '¿Qué día y hora te vendría bien?', 'Zein egun eta ordu komeni zaizu?' ); ?></span>
</label> </label>
<?php endif; ?> <?php endif; ?>
<?php if ( $animal_id && ! $is_animal ) : ?> <?php if ( $animal_id && ! $is_animal ) : ?>
<p class="ga-form__animal"><?php echo esc_html( ga__( 'Animal: ', 'Animalia: ' ) . get_the_title( $animal_id ) ); ?></p> <p class="ga-form__animal"><?php echo esc_html( ga__( 'Animal: ', 'Animalia: ' ) . get_the_title( $animal_id ) ); ?></p>
<?php endif; ?> <?php endif; ?>
<label><?php ga_e( 'Mensaje', 'Mezua' ); ?><?php echo $is_animal ? ' (' . esc_html( ga__( 'opcional', 'aukerakoa' ) ) . ')' : ' *'; ?> <label class="ga-field">
<textarea name="mensaje" rows="<?php echo $is_animal ? 4 : 6; ?>"<?php echo $is_animal ? '' : ' required'; ?>></textarea> <textarea name="mensaje" rows="<?php echo $is_animal ? 4 : 6; ?>" placeholder=" "<?php echo $is_animal ? '' : ' required'; ?>></textarea>
<span><?php ga_e( 'Mensaje', 'Mezua' ); ?><?php echo $is_animal ? ' (' . esc_html( ga__( 'opcional', 'aukerakoa' ) ) . ')' : ' *'; ?></span>
</label> </label>
<label class="ga-form__check"> <label class="ga-form__check">
<input type="checkbox" name="privacidad" value="1" required> <input type="checkbox" name="privacidad" value="1" required><?php echo ga_checkmark(); // SVG estático. ?>
<span> <span>
<?php if ( 'eu' === ga_lang() ) : ?> <?php if ( 'eu' === ga_lang() ) : ?>
<a href="<?php echo esc_url( $privacy ); ?>" target="_blank">Pribatutasun-politika</a> irakurri eta onartzen dut. * <a href="<?php echo esc_url( $privacy ); ?>" target="_blank">Pribatutasun-politika</a> irakurri eta onartzen dut. *

12
wp-content/mu-plugins/gure-ametsa/questionnaire.php
View File

@@ -36,14 +36,14 @@ add_shortcode( 'ga_cuestionario', function () {
<fieldset> <fieldset>
<legend><?php ga_e( 'Tus datos', 'Zure datuak' ); ?></legend> <legend><?php ga_e( 'Tus datos', 'Zure datuak' ); ?></legend>
<div class="ga-form__row"> <div class="ga-form__row">
<label><?php ga_e( 'Nombre y apellidos', 'Izen-abizenak' ); ?> *<input type="text" name="nombre" required autocomplete="name"></label> <label class="ga-field"><input type="text" name="nombre" required autocomplete="name" placeholder=" "><span><?php ga_e( 'Nombre y apellidos', 'Izen-abizenak' ); ?> *</span></label>
<label><?php ga_e( 'Correo electrónico', 'Posta elektronikoa' ); ?> *<input type="email" name="email" required autocomplete="email"></label> <label class="ga-field"><input type="email" name="email" required autocomplete="email" placeholder=" "><span><?php ga_e( 'Correo electrónico', 'Posta elektronikoa' ); ?> *</span></label>
</div> </div>
<div class="ga-form__row"> <div class="ga-form__row">
<label><?php ga_e( 'Teléfono', 'Telefonoa' ); ?> *<input type="tel" name="telefono" required autocomplete="tel"></label> <label class="ga-field"><input type="tel" name="telefono" required autocomplete="tel" placeholder=" "><span><?php ga_e( 'Teléfono', 'Telefonoa' ); ?> *</span></label>
<label><?php ga_e( 'Localidad', 'Herria' ); ?><input type="text" name="localidad" autocomplete="address-level2"></label> <label class="ga-field"><input type="text" name="localidad" autocomplete="address-level2" placeholder=" "><span><?php ga_e( 'Localidad', 'Herria' ); ?></span></label>
</div> </div>
<label><?php ga_e( 'Animal por el que te interesas', 'Interesatzen zaizun animalia' ); ?><input type="text" name="animal" value="<?php echo esc_attr( $animal ); ?>"></label> <label class="ga-field"><input type="text" name="animal" value="<?php echo esc_attr( $animal ); ?>" placeholder=" "><span><?php ga_e( 'Animal por el que te interesas', 'Interesatzen zaizun animalia' ); ?></span></label>
</fieldset> </fieldset>
<fieldset> <fieldset>
@@ -56,7 +56,7 @@ add_shortcode( 'ga_cuestionario', function () {
</fieldset> </fieldset>
<label class="ga-form__check"> <label class="ga-form__check">
<input type="checkbox" name="privacidad" value="1" required> <input type="checkbox" name="privacidad" value="1" required><?php echo ga_checkmark(); // SVG estático. ?>
<span><?php printf( wp_kses( ga__( 'He leído y acepto la <a href="%s" target="_blank">política de privacidad</a>. *', '<a href="%s" target="_blank">Pribatutasun-politika</a> irakurri eta onartzen dut. *' ), array( 'a' => array( 'href' => array(), 'target' => array() ) ) ), esc_url( $privacy ) ); ?></span> <span><?php printf( wp_kses( ga__( 'He leído y acepto la <a href="%s" target="_blank">política de privacidad</a>. *', '<a href="%s" target="_blank">Pribatutasun-politika</a> irakurri eta onartzen dut. *' ), array( 'a' => array( 'href' => array(), 'target' => array() ) ) ), esc_url( $privacy ) ); ?></span>
</label> </label>
<p class="ga-form__hint"><?php ga_e( 'Lo que escribes se guarda en este navegador hasta que lo envíes.', 'Idazten duzuna nabigatzaile honetan gordetzen da bidali arte.' ); ?></p> <p class="ga-form__hint"><?php ga_e( 'Lo que escribes se guarda en este navegador hasta que lo envíes.', 'Idazten duzuna nabigatzaile honetan gordetzen da bidali arte.' ); ?></p>

12
wp-content/mu-plugins/gure-ametsa/stories.php
View File

@@ -72,15 +72,15 @@ add_shortcode( 'ga_final_feliz', function () {
<?php wp_nonce_field( 'ga_final_feliz', 'ga_nonce' ); ?> <?php wp_nonce_field( 'ga_final_feliz', 'ga_nonce' ); ?>
<div class="ga-hp" aria-hidden="true"><label>No rellenar <input type="text" name="web" tabindex="-1" autocomplete="off"></label></div> <div class="ga-hp" aria-hidden="true"><label>No rellenar <input type="text" name="web" tabindex="-1" autocomplete="off"></label></div>
<div class="ga-form__row"> <div class="ga-form__row">
<label><?php ga_e( 'Nombre del animal', 'Animaliaren izena' ); ?> *<input type="text" name="animal" required maxlength="80"></label> <label class="ga-field"><input type="text" name="animal" required maxlength="80" placeholder=" "><span><?php ga_e( 'Nombre del animal', 'Animaliaren izena' ); ?> *</span></label>
<label><?php ga_e( 'Vuestro nombre', 'Zuen izena' ); ?> *<input type="text" name="familia" required maxlength="80"></label> <label class="ga-field"><input type="text" name="familia" required maxlength="80" placeholder=" "><span><?php ga_e( 'Vuestro nombre', 'Zuen izena' ); ?> *</span></label>
</div> </div>
<label><?php ga_e( 'Correo electrónico (no se publica)', 'Posta elektronikoa (ez da argitaratzen)' ); ?> *<input type="email" name="email" required></label> <label class="ga-field"><input type="email" name="email" required placeholder=" "><span><?php ga_e( 'Correo electrónico (no se publica)', 'Posta elektronikoa (ez da argitaratzen)' ); ?> *</span></label>
<label><?php ga_e( '¿Cómo está ahora?', 'Nola dago orain?' ); ?> *<textarea name="texto" rows="5" required maxlength="800"></textarea></label> <label class="ga-field"><textarea name="texto" rows="5" required maxlength="800" placeholder=" "></textarea><span><?php ga_e( '¿Cómo está ahora?', 'Nola dago orain?' ); ?> *</span></label>
<label><?php ga_e( 'Una foto (JPG, PNG o WebP, máx. 5 MB)', 'Argazki bat (JPG, PNG edo WebP, gehienez 5 MB)' ); ?><input type="file" name="foto" accept="image/jpeg,image/png,image/webp"></label> <label><?php ga_e( 'Una foto (JPG, PNG o WebP, máx. 5 MB)', 'Argazki bat (JPG, PNG edo WebP, gehienez 5 MB)' ); ?><input type="file" name="foto" accept="image/jpeg,image/png,image/webp"></label>
<label class="ga-form__check"><input type="checkbox" name="publicar" value="1" required> <label class="ga-form__check"><input type="checkbox" name="publicar" value="1" required><?php echo ga_checkmark(); // SVG estático. ?>
<span><?php ga_e( 'Autorizo a Bilagun a publicar este texto y la foto en su web y redes. *', 'Bilaguni baimena ematen diot testu hau eta argazkia bere webgunean eta sareetan argitaratzeko. *' ); ?></span></label> <span><?php ga_e( 'Autorizo a Bilagun a publicar este texto y la foto en su web y redes. *', 'Bilaguni baimena ematen diot testu hau eta argazkia bere webgunean eta sareetan argitaratzeko. *' ); ?></span></label>
<label class="ga-form__check"><input type="checkbox" name="privacidad" value="1" required> <label class="ga-form__check"><input type="checkbox" name="privacidad" value="1" required><?php echo ga_checkmark(); // SVG estático. ?>
<span><?php <span><?php
printf( printf(
wp_kses( ga__( 'He leído y acepto la <a href="%s" target="_blank">política de privacidad</a>. *', '<a href="%s" target="_blank">Pribatutasun-politika</a> irakurri eta onartzen dut. *' ), array( 'a' => array( 'href' => array(), 'target' => array() ) ) ), wp_kses( ga__( 'He leído y acepto la <a href="%s" target="_blank">política de privacidad</a>. *', '<a href="%s" target="_blank">Pribatutasun-politika</a> irakurri eta onartzen dut. *' ), array( 'a' => array( 'href' => array(), 'target' => array() ) ) ),

3
wp-content/themes/gure-ametsa/archive-animal.php
View File

@@ -30,7 +30,7 @@ if ( $current ) {
<section class="ga-section ga-section--tight"> <section class="ga-section ga-section--tight">
<div class="ga-wrap"> <div class="ga-wrap">
<?php if ( ! $tiles ) : ?> <?php if ( ! $tiles ) : ?>
<nav class="ga-tabs" aria-label="<?php echo esc_attr( ga__( 'Especies', 'Espezieak' ) ); ?>"> <nav class="ga-tabs ga-segmented" aria-label="<?php echo esc_attr( ga__( 'Especies', 'Espezieak' ) ); ?>">
<?php foreach ( $groups as $slug => [ $label ] ) : ?> <?php foreach ( $groups as $slug => [ $label ] ) : ?>
<?php <?php
$url = ga_species_url( $slug ); $url = ga_species_url( $slug );
@@ -38,6 +38,7 @@ if ( $current ) {
?> ?>
<a class="ga-tab<?php echo $active ? ' is-active' : ''; ?>" href="<?php echo esc_url( $url ); ?>"<?php echo $active ? ' aria-current="page"' : ''; ?>><?php echo esc_html( $label ); ?></a> <a class="ga-tab<?php echo $active ? ' is-active' : ''; ?>" href="<?php echo esc_url( $url ); ?>"<?php echo $active ? ' aria-current="page"' : ''; ?>><?php echo esc_html( $label ); ?></a>
<?php endforeach; ?> <?php endforeach; ?>
<span class="ga-segmented__glider" aria-hidden="true"></span>
</nav> </nav>
<?php endif; ?> <?php endif; ?>

17
wp-content/themes/gure-ametsa/assets/js/main.js
View File

@@ -1,4 +1,12 @@
( function () { ( function () {
// Cabecera: borde y sombra al desplazarse (se nota con la cabecera fija).
var header = document.querySelector( '.ga-header' );
if ( header ) {
var onScroll = function () { header.classList.toggle( 'is-scrolled', window.scrollY > 8 ); };
window.addEventListener( 'scroll', onScroll, { passive: true } );
onScroll();
}
var toggle = document.querySelector( '.ga-menu-toggle' ); var toggle = document.querySelector( '.ga-menu-toggle' );
var nav = document.getElementById( 'ga-nav' ); var nav = document.getElementById( 'ga-nav' );
if ( toggle && nav ) { if ( toggle && nav ) {
@@ -15,6 +23,15 @@
} ); } );
} }
// Pestañas segmentadas con enlaces: la píldora se desliza a la pulsada mientras carga la página.
document.querySelectorAll( '.ga-segmented' ).forEach( function ( group ) {
group.addEventListener( 'click', function ( e ) {
var tab = e.target.closest( '.ga-tab' );
if ( ! tab || e.metaKey || e.ctrlKey || e.shiftKey ) { return; }
group.querySelectorAll( '.ga-tab' ).forEach( function ( t ) { t.classList.toggle( 'is-active', t === tab ); } );
} );
} );
// Filtros del listado: los <select> envían el formulario al cambiar. // Filtros del listado: los <select> envían el formulario al cambiar.
document.querySelectorAll( '.ga-filters select' ).forEach( function ( select ) { document.querySelectorAll( '.ga-filters select' ).forEach( function ( select ) {
select.addEventListener( 'change', function () { select.addEventListener( 'change', function () {

7
wp-content/themes/gure-ametsa/footer.php
View File

@@ -81,6 +81,13 @@ $columns = array(
?> ?>
</div> </div>
</div> </div>
<?php $wordmark = trim( (string) ga_opt( 'footer', 'wordmark' ) ); ?>
<?php if ( $wordmark ) : ?>
<div class="ga-footer__reveal" aria-hidden="true" style="--ga-chars: <?php echo (int) max( 4, mb_strlen( $wordmark ) ); ?>">
<div class="ga-footer__band"><span class="ga-footer__wordmark"><?php echo esc_html( $wordmark ); ?></span></div>
</div>
<?php endif; ?>
</footer> </footer>
<?php wp_footer(); ?> <?php wp_footer(); ?>

10
wp-content/themes/gure-ametsa/functions.php
View File

@@ -9,7 +9,7 @@
defined( 'ABSPATH' ) || exit; defined( 'ABSPATH' ) || exit;
define( 'GA_THEME_VERSION', '2.2.0' ); define( 'GA_THEME_VERSION', '2.3.0' );
require_once __DIR__ . '/inc/customizer.php'; require_once __DIR__ . '/inc/customizer.php';
require_once __DIR__ . '/inc/dynamic-css.php'; require_once __DIR__ . '/inc/dynamic-css.php';
@@ -36,6 +36,14 @@ add_action( 'after_setup_theme', function () {
) ); ) );
} ); } );
/* Menú principal: en los desplegables, la descripción del elemento (Menús → Opciones de pantalla → Descripción) va bajo el título. */
add_filter( 'nav_menu_item_title', function ( $title, $item, $args, $depth ) {
if ( $depth > 0 && 'primary' === ( $args->theme_location ?? '' ) && trim( (string) $item->description ) ) {
$title .= '<span class="ga-nav__desc">' . esc_html( $item->description ) . '</span>';
}
return $title;
}, 10, 4 );
add_action( 'wp_enqueue_scripts', function () { add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'gure-ametsa', get_stylesheet_uri(), array(), GA_THEME_VERSION ); wp_enqueue_style( 'gure-ametsa', get_stylesheet_uri(), array(), GA_THEME_VERSION );
wp_enqueue_script( 'gure-ametsa', get_theme_file_uri( 'assets/js/main.js' ), array(), GA_THEME_VERSION, array( 'strategy' => 'defer', 'in_footer' => true ) ); wp_enqueue_script( 'gure-ametsa', get_theme_file_uri( 'assets/js/main.js' ), array(), GA_THEME_VERSION, array( 'strategy' => 'defer', 'in_footer' => true ) );

1
wp-content/themes/gure-ametsa/inc/registry.php
View File

@@ -170,6 +170,7 @@ function ga_customizer_registry() {
'Bilagun es la protectora de Jaizubia, en Hondarribia. Cuidamos de los perros y gatos que llegan a nosotras y les buscamos una segunda oportunidad.', 'Bilagun es la protectora de Jaizubia, en Hondarribia. Cuidamos de los perros y gatos que llegan a nosotras y les buscamos una segunda oportunidad.',
'Bilagun Jaizubiko babeslekua da, Hondarribian. Guregana iristen diren txakur eta katuak zaintzen ditugu eta bigarren aukera bat bilatzen diegu.', 'textarea' ), 'Bilagun Jaizubiko babeslekua da, Hondarribian. Guregana iristen diren txakur eta katuak zaintzen ditugu eta bigarren aukera bat bilatzen diegu.', 'textarea' ),
'copyright' => array( 'type' => 'text', 'label' => 'Texto de copyright', 'default' => 'Gure Ametsa Bi Lagun' ), 'copyright' => array( 'type' => 'text', 'label' => 'Texto de copyright', 'default' => 'Gure Ametsa Bi Lagun' ),
'wordmark' => array( 'type' => 'text', 'label' => 'Nombre grande al final de la página', 'default' => 'Bilagun', 'description' => 'Vacío = no se muestra. Mejor corto (una o dos palabras).' ),
'newsletter' => array( 'type' => 'text', 'label' => 'Suscripción «Nuevos animales» (shortcode de MailPoet, p. ej. [mailpoet_form id="1"])', 'default' => '', 'description' => 'Vacío = no se muestra. Ver README: cómo crear el aviso automático en MailPoet.' ), 'newsletter' => array( 'type' => 'text', 'label' => 'Suscripción «Nuevos animales» (shortcode de MailPoet, p. ej. [mailpoet_form id="1"])', 'default' => '', 'description' => 'Vacío = no se muestra. Ver README: cómo crear el aviso automático en MailPoet.' ),
'newsletter_title' => $t( 'Suscripción · título', 'Te avisamos cuando lleguen nuevos animales', 'Animalia berriak iristen direnean abisatuko dizugu' ), 'newsletter_title' => $t( 'Suscripción · título', 'Te avisamos cuando lleguen nuevos animales', 'Animalia berriak iristen direnean abisatuko dizugu' ),
), ),

284
wp-content/themes/gure-ametsa/style.css
View File

@@ -125,6 +125,8 @@ p { margin: 0 0 1.1em; }
========================================================================= */ ========================================================================= */
.ga-btn, .ga-btn,
.wp-block-button__link { .wp-block-button__link {
--ga-btn-line: var(--ga-green-dark);
position: relative; isolation: isolate; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: .55em; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
padding: .85em 1.5em; padding: .85em 1.5em;
border-radius: 999px; border-radius: 999px;
@@ -134,21 +136,35 @@ p { margin: 0 0 1.1em; }
text-decoration: none; text-decoration: none;
border: 2px solid var(--ga-red); border: 2px solid var(--ga-red);
cursor: pointer; cursor: pointer;
transition: background .2s, border-color .2s, color .2s, transform .2s; transition: background .2s, border-color .2s, color .2s, box-shadow .3s, transform .2s;
} }
.ga-btn:hover, .ga-btn:hover,
.wp-block-button__link:hover { background: var(--ga-red-hover); border-color: var(--ga-red-hover); color: var(--ga-on-red); transform: translateY(-1px); } .wp-block-button__link:hover { background: var(--ga-red-hover); border-color: var(--ga-red-hover); color: var(--ga-on-red); transform: translateY(-1px); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--ga-green-dark) 70%, transparent); }
.ga-btn svg { transition: transform .2s; } .ga-btn svg { transition: transform .2s; }
.ga-btn:hover svg { transform: translateX(3px); } .ga-btn:hover svg { transform: translateX(3px); }
.ga-btn--primary { background: var(--ga-green); border-color: var(--ga-green); color: var(--ga-on-primary); } /* Borde que se dibuja al pasar el ratón: abajo e izquierda entran desde la derecha, arriba y derecha desde la izquierda. */
.ga-btn::before, .ga-btn::after,
.wp-block-button__link::before, .wp-block-button__link::after {
content: ""; position: absolute; left: 0; z-index: -1; width: 100%; height: 2px;
border: 0 solid var(--ga-btn-line); border-radius: inherit; pointer-events: none; opacity: 0;
transition: opacity .2s, transform 0s .2s, height 0s .2s;
}
.ga-btn::before, .wp-block-button__link::before { bottom: 0; border-bottom-width: 2px; border-left-width: 2px; transform: translateX(100%); }
.ga-btn::after, .wp-block-button__link::after { top: 0; border-top-width: 2px; border-right-width: 2px; transform: translateX(-100%); }
:is(.ga-btn, .wp-block-button__link):is(:hover, :focus-visible)::before,
:is(.ga-btn, .wp-block-button__link):is(:hover, :focus-visible)::after { opacity: 1; height: 100%; transform: none; }
:is(.ga-btn, .wp-block-button__link):is(:hover, :focus-visible)::before { transition: opacity 0s, transform .3s linear, height .3s linear .3s; }
:is(.ga-btn, .wp-block-button__link):is(:hover, :focus-visible)::after { transition: opacity 0s, transform .3s linear, height .3s linear .5s; }
.ga-btn--primary { --ga-btn-line: var(--ga-red); background: var(--ga-green); border-color: var(--ga-green); color: var(--ga-on-primary); }
.ga-btn--primary:hover { background: var(--ga-green-dark); border-color: var(--ga-green-dark); color: var(--ga-on-primary); } .ga-btn--primary:hover { background: var(--ga-green-dark); border-color: var(--ga-green-dark); color: var(--ga-on-primary); }
.ga-btn--outline, .ga-btn--outline,
.is-style-outline .wp-block-button__link { background: transparent; color: var(--ga-green); border-color: color-mix(in srgb, var(--ga-green) 55%, transparent); } .is-style-outline .wp-block-button__link { --ga-btn-line: var(--ga-green); background: transparent; color: var(--ga-green); border-color: color-mix(in srgb, var(--ga-green) 30%, transparent); }
.ga-btn--outline:hover, .ga-btn--outline:hover,
.is-style-outline .wp-block-button__link:hover { background: var(--ga-green); border-color: var(--ga-green); color: var(--ga-on-primary); } .is-style-outline .wp-block-button__link:hover { background: var(--ga-green-soft); border-color: color-mix(in srgb, var(--ga-green) 30%, transparent); color: var(--ga-green-dark); }
.ga-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); } .ga-btn--ghost { --ga-btn-line: #fff; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.ga-btn--ghost:hover { background: #fff; border-color: #fff; color: var(--ga-green-dark); } .ga-btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff; }
.ga-btn--small { padding: .65em 1.2em; font-size: .92rem; } .ga-btn--small { padding: .65em 1.2em; font-size: .92rem; }
.ga-btn--block { width: 100%; } .ga-btn--block { width: 100%; }
@@ -163,11 +179,14 @@ p { margin: 0 0 1.1em; }
.ga-header { .ga-header {
position: relative; z-index: 50; position: relative; z-index: 50;
background: color-mix(in srgb, var(--ga-cream) 96%, transparent); background: color-mix(in srgb, var(--ga-cream) 78%, transparent);
backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid var(--ga-line); -webkit-backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid transparent;
transition: border-color .25s, box-shadow .25s, background .25s;
} }
.ga-sticky-header .ga-header { position: sticky; top: 0; } .ga-sticky-header .ga-header { position: sticky; top: 0; }
.ga-header.is-scrolled { background: color-mix(in srgb, var(--ga-cream) 86%, transparent); border-bottom-color: var(--ga-line); box-shadow: 0 8px 24px -18px color-mix(in srgb, var(--ga-green-dark) 60%, transparent); }
.ga-header .ga-wrap { display: flex; align-items: center; gap: 24px; min-height: 80px; } .ga-header .ga-wrap { display: flex; align-items: center; gap: 24px; min-height: 80px; }
.ga-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ga-green-dark); flex: none; } .ga-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ga-green-dark); flex: none; }
@@ -184,23 +203,56 @@ p { margin: 0 0 1.1em; }
.ga-nav { margin-inline: auto; } .ga-nav { margin-inline: auto; }
.ga-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; } .ga-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
/* Enlaces en píldora: al pasar el ratón aparece un fondo en degradado (solo opacidad, sin saltos). */
.ga-nav a { .ga-nav a {
display: block; padding: 8px 11px; border-radius: 999px; white-space: nowrap; position: relative; isolation: isolate;
display: block; padding: 8px 13px; border-radius: 999px; white-space: nowrap;
color: var(--ga-ink); text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--ga-ink); text-decoration: none; font-weight: 600; font-size: .95rem;
transition: color .2s;
} }
.ga-nav a:hover, .ga-nav .current-menu-item > a, .ga-nav .current_page_item > a { background: var(--ga-green-soft); color: var(--ga-green-dark); } .ga-nav a::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
background: linear-gradient(180deg, #fff 0%, var(--ga-sand) 100%);
box-shadow: inset 0 0 0 1px var(--ga-line), 0 1px 2px rgba(0, 0, 0, .05);
transition: opacity .2s;
}
.ga-nav a:hover, .ga-nav .current-menu-item > a, .ga-nav .current_page_item > a,
.ga-nav .menu-item-has-children:is(:hover, :focus-within) > a { color: var(--ga-green-dark); }
.ga-nav a:hover::before, .ga-nav .current-menu-item > a::before, .ga-nav .current_page_item > a::before,
.ga-nav .menu-item-has-children:is(:hover, :focus-within) > a::before { opacity: 1; }
.ga-nav-highlight .ga-nav .menu-item:first-child > a { background: var(--ga-red); color: var(--ga-on-red); } .ga-nav-highlight .ga-nav .menu-item:first-child > a { background: var(--ga-red); color: var(--ga-on-red); }
.ga-nav-highlight .ga-nav .menu-item:first-child > a::before { display: none; }
.ga-nav .menu-item-has-children { position: relative; } .ga-nav .menu-item-has-children { position: relative; }
.ga-nav .menu-item-has-children > a::after { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .6; } .ga-nav .menu-item-has-children > a::after { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .6; transition: transform .2s; }
.ga-nav .menu-item-has-children:is(:hover, :focus-within) > a::after { transform: translateY(1px) rotate(225deg); }
/* Desplegable: panel que aparece deslizándose; cada enlace puede llevar la descripción del menú debajo. */
.ga-nav .sub-menu { .ga-nav .sub-menu {
position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; z-index: 60; position: absolute; top: calc(100% + 10px); left: -8px; min-width: 260px; z-index: 60;
display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px;
background: #fff; border: 1px solid var(--ga-line); border-radius: calc(var(--ga-radius) * .8); box-shadow: var(--ga-shadow); background: color-mix(in srgb, #fff 94%, transparent);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid var(--ga-line); border-radius: calc(var(--ga-radius) * 1.1);
box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--ga-green-dark) 45%, transparent), 0 2px 6px rgba(0, 0, 0, .04);
visibility: hidden; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: 24px 0;
transition: opacity .2s, transform .2s, visibility 0s .2s;
} }
.ga-nav .sub-menu::before { content: ""; position: absolute; inset: -10px 0 auto 0; height: 10px; } .ga-nav .sub-menu::before { content: ""; position: absolute; inset: -14px 0 auto 0; height: 14px; }
.ga-nav .menu-item-has-children:hover > .sub-menu, .ga-nav .menu-item-has-children:hover > .sub-menu,
.ga-nav .menu-item-has-children:focus-within > .sub-menu { display: flex; } .ga-nav .menu-item-has-children:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
.ga-nav .sub-menu a { border-radius: 8px; white-space: nowrap; } .ga-nav .sub-menu a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: calc(var(--ga-radius) * .7); white-space: normal; }
.ga-nav .sub-menu a::before { background: var(--ga-green-soft); box-shadow: none; }
.ga-nav__desc { font-weight: 400; font-size: .84rem; line-height: 1.35; color: var(--ga-muted); }
/* Con un desplegable abierto se oscurece la página (la cabecera queda por encima). */
@media (min-width: 1181px) {
body::after {
content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
background: color-mix(in srgb, var(--ga-ink) 30%, transparent);
visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .25s;
}
body:has(.ga-nav .menu-item-has-children:is(:hover, :focus-within))::after { visibility: visible; opacity: 1; transition: opacity .25s; }
}
.ga-header__actions { display: flex; align-items: center; gap: 12px; flex: none; } .ga-header__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.ga-header__phone { display: inline-flex; align-items: center; gap: 7px; color: var(--ga-green); font-weight: 700; text-decoration: none; font-size: .95rem; white-space: nowrap; } .ga-header__phone { display: inline-flex; align-items: center; gap: 7px; color: var(--ga-green); font-weight: 700; text-decoration: none; font-size: .95rem; white-space: nowrap; }
@@ -232,7 +284,7 @@ p { margin: 0 0 1.1em; }
.ga-nav.is-open { display: block; } .ga-nav.is-open { display: block; }
.ga-nav ul { flex-direction: column; align-items: stretch; } .ga-nav ul { flex-direction: column; align-items: stretch; }
.ga-nav a { padding: 12px 16px; font-size: 1.05rem; } .ga-nav a { padding: 12px 16px; font-size: 1.05rem; }
.ga-nav .sub-menu { position: static; display: flex; box-shadow: none; border: 0; padding: 0 0 6px 16px; background: none; min-width: 0; } .ga-nav .sub-menu { position: static; display: flex; box-shadow: none; border: 0; padding: 0 0 6px 16px; background: none; min-width: 0; visibility: visible; opacity: 1; transform: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ga-nav .sub-menu a { font-size: .98rem; padding: 8px 16px; color: var(--ga-muted); } .ga-nav .sub-menu a { font-size: .98rem; padding: 8px 16px; color: var(--ga-muted); }
.ga-nav .menu-item-has-children > a::after { display: none; } .ga-nav .menu-item-has-children > a::after { display: none; }
.ga-header__actions { margin-left: auto; } .ga-header__actions { margin-left: auto; }
@@ -292,8 +344,8 @@ body { overflow-x: clip; }
.ga-hero--split.has-doors { padding-bottom: clamp(150px, 14vw, 200px); } .ga-hero--split.has-doors { padding-bottom: clamp(150px, 14vw, 200px); }
.ga-hero--split .ga-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } .ga-hero--split .ga-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.ga-hero--split .ga-hero__lead { font-size: 1.15rem; color: var(--ga-muted); } .ga-hero--split .ga-hero__lead { font-size: 1.15rem; color: var(--ga-muted); }
.ga-hero--split .ga-btn--ghost { color: var(--ga-green); border-color: var(--ga-green); } .ga-hero--split .ga-btn--ghost { --ga-btn-line: var(--ga-green); color: var(--ga-green); border-color: color-mix(in srgb, var(--ga-green) 30%, transparent); }
.ga-hero--split .ga-btn--ghost:hover { background: var(--ga-green); color: var(--ga-on-primary); } .ga-hero--split .ga-btn--ghost:hover { background: var(--ga-green-soft); color: var(--ga-green-dark); }
.ga-hero__media img, .ga-hero__art { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 240px 240px var(--ga-radius) var(--ga-radius); box-shadow: var(--ga-shadow); } .ga-hero__media img, .ga-hero__art { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 240px 240px var(--ga-radius) var(--ga-radius); box-shadow: var(--ga-shadow); }
.ga-hero__art { background: var(--ga-green); color: var(--ga-cream); display: grid; place-items: center; } .ga-hero__art { background: var(--ga-green); color: var(--ga-cream); display: grid; place-items: center; }
.ga-hero__art svg { width: 62%; height: auto; } .ga-hero__art svg { width: 62%; height: auto; }
@@ -449,10 +501,25 @@ body { overflow-x: clip; }
.ga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; margin: 0 0 1.5em; } .ga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; margin: 0 0 1.5em; }
.ga-card { .ga-card {
position: relative; display: flex; flex-direction: column; position: relative; display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--ga-line); border-radius: var(--ga-radius); overflow: hidden; border-radius: var(--ga-radius); overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: transform .25s, box-shadow .25s; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: transform .25s, box-shadow .25s;
} }
.ga-card:hover { transform: translateY(-4px); box-shadow: var(--ga-shadow); } .ga-card:hover { transform: translateY(-4px); box-shadow: var(--ga-shadow); }
/* Tarjetas (animales y finales felices): marco de 2px con un resplandor del color de acento en la esquina,
que se desplaza al pasar el ratón. Capas: marco (fondo) → resplandor (::before) → panel blanco (::after) → contenido. */
.ga-card, .ga-story { isolation: isolate; padding: 2px; border: 0; background: var(--ga-line); }
.ga-card::before, .ga-story::before {
content: ""; position: absolute; z-index: -1; left: -30%; top: -30%; width: 75%; aspect-ratio: 1;
border-radius: 50%; background: var(--ga-red); filter: blur(36px); pointer-events: none;
transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .4s;
}
.ga-card::after, .ga-story::after {
content: ""; position: absolute; z-index: -1; inset: 2px; pointer-events: none;
border-radius: calc(var(--ga-radius) - 2px); background: #fff; opacity: .93;
}
.ga-card:hover::before, .ga-story:hover::before { transform: translate(45%, 30%) scale(1.25); }
.ga-card__img, .ga-story__img { border-radius: calc(var(--ga-radius) - 2px) calc(var(--ga-radius) - 2px) 0 0; }
.ga-card__img { aspect-ratio: 4/3; background: var(--ga-green-soft); overflow: hidden; } .ga-card__img { aspect-ratio: 4/3; background: var(--ga-green-soft); overflow: hidden; }
.ga-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .ga-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ga-card:hover .ga-card__img img { transform: scale(1.04); } .ga-card:hover .ga-card__img img { transform: scale(1.04); }
@@ -551,19 +618,54 @@ body { overflow-x: clip; }
} }
/* Finales felices */ /* Finales felices */
.ga-story { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ga-line); border-radius: var(--ga-radius); overflow: hidden; } .ga-story { position: relative; display: flex; flex-direction: column; border-radius: var(--ga-radius); overflow: hidden; }
.ga-story__img { aspect-ratio: 4/3; background: var(--ga-green-soft); } .ga-story__img { aspect-ratio: 4/3; background: var(--ga-green-soft); overflow: hidden; }
.ga-story__img img { width: 100%; height: 100%; object-fit: cover; } .ga-story__img img { width: 100%; height: 100%; object-fit: cover; }
.ga-story__body { margin: 0; padding: 18px 20px 20px; font-size: .98rem; flex: 1; display: flex; flex-direction: column; } .ga-story__body { margin: 0; padding: 18px 20px 20px; font-size: .98rem; flex: 1; display: flex; flex-direction: column; }
.ga-story__body p::before { content: "“"; font: 800 2rem/0 var(--ga-serif); color: var(--ga-red); vertical-align: -.35em; margin-right: 2px; } .ga-story__body p::before { content: "“"; font: 800 2rem/0 var(--ga-serif); color: var(--ga-red); vertical-align: -.35em; margin-right: 2px; }
.ga-story__body footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ga-line); color: var(--ga-muted); font-size: .9rem; } .ga-story__body footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ga-line); color: var(--ga-muted); font-size: .9rem; }
.ga-story__body footer strong { font-family: var(--ga-serif); color: var(--ga-green-dark); } .ga-story__body footer strong { font-family: var(--ga-serif); color: var(--ga-green-dark); }
/* Pestañas Perros / Gatos */ /* Selector segmentado (pestañas Perros / Gatos o un grupo de radios): una píldora se desliza con rebote
.ga-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; } bajo la opción activa y cambia de color según la posición.
.ga-tab { padding: 11px 26px; border-radius: 999px; border: 2px solid var(--ga-green); color: var(--ga-green); font-weight: 700; text-decoration: none; font-size: 1.05rem; } Enlaces: <nav class="ga-segmented"><a class="ga-tab is-active">…</a>…<span class="ga-segmented__glider"></span></nav>
.ga-tab:hover { background: var(--ga-green-soft); color: var(--ga-green-dark); } Radios: <div class="ga-segmented"><input type="radio" id="a"><label for="a">…</label>…<span class="ga-segmented__glider"></span></div> */
.ga-tab.is-active { background: var(--ga-green); color: var(--ga-on-primary); } .ga-tabs { margin-bottom: 28px; }
.ga-segmented {
--n: 2; --i: 0; --ga-glider: var(--ga-green); --ga-glider-on: var(--ga-on-primary);
position: relative; isolation: isolate; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
width: fit-content; max-width: 100%; padding: 5px; border-radius: 999px;
background: color-mix(in srgb, #fff 65%, var(--ga-sand));
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
box-shadow:
inset 1px 1px 3px rgba(255, 255, 255, .9),
inset -1px -1px 6px color-mix(in srgb, var(--ga-green-dark) 16%, transparent),
0 6px 16px -8px color-mix(in srgb, var(--ga-green-dark) 35%, transparent);
}
.ga-segmented:has(> :nth-child(3 of label, .ga-tab)) { --n: 3; }
.ga-segmented:has(> :nth-child(4 of label, .ga-tab)) { --n: 4; }
.ga-segmented > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.ga-segmented > :is(label, .ga-tab) {
position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
min-width: 110px; padding: .7em 1.6em; border-radius: 999px;
font: 700 1.02rem/1.2 var(--ga-sans); letter-spacing: .01em; text-transform: none;
color: var(--ga-muted); text-decoration: none; cursor: pointer; transition: color .3s ease-in-out;
}
.ga-segmented > :is(label, .ga-tab):hover { color: var(--ga-ink); }
.ga-segmented > :is(.is-active, input:checked + label) { color: var(--ga-glider-on); }
.ga-segmented > input:focus-visible + label { outline: 3px solid var(--ga-red); outline-offset: 2px; }
.ga-segmented__glider {
position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / var(--n));
border-radius: 999px; pointer-events: none; opacity: 0;
background: linear-gradient(135deg, color-mix(in srgb, var(--ga-glider) 55%, #fff), var(--ga-glider));
box-shadow: 0 0 18px color-mix(in srgb, var(--ga-glider) 50%, transparent), inset 0 0 10px rgba(255, 255, 255, .4);
transform: translateX(calc(var(--i) * 100%)) scale(.85);
transition: transform .5s cubic-bezier(.37, 1.95, .66, .56), opacity .25s, background .4s ease-in-out, box-shadow .4s ease-in-out;
}
.ga-segmented:has(> :is(.is-active, input:checked + label)) .ga-segmented__glider { opacity: 1; transform: translateX(calc(var(--i) * 100%)); }
.ga-segmented:has(> :nth-child(2 of label, .ga-tab):is(.is-active, input:checked + *)) { --i: 1; --ga-glider: var(--ga-red); --ga-glider-on: var(--ga-on-red); }
.ga-segmented:has(> :nth-child(3 of label, .ga-tab):is(.is-active, input:checked + *)) { --i: 2; --ga-glider: var(--ga-green-dark); }
.ga-segmented:has(> :nth-child(4 of label, .ga-tab):is(.is-active, input:checked + *)) { --i: 3; --ga-glider: var(--ga-red-dark); --ga-glider-on: #fff; }
/* Tarjeta detallada */ /* Tarjeta detallada */
.ga-card__excerpt { margin: 0; font-size: .95rem; color: var(--ga-muted); } .ga-card__excerpt { margin: 0; font-size: .95rem; color: var(--ga-muted); }
@@ -633,14 +735,101 @@ body { overflow-x: clip; }
.ga-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ga-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .ga-form__row { grid-template-columns: 1fr; } } @media (max-width: 640px) { .ga-form__row { grid-template-columns: 1fr; } }
.ga-form label { display: grid; gap: 7px; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ga-green-dark); } .ga-form label { display: grid; gap: 7px; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ga-green-dark); }
.ga-form input[type=text], .ga-form input[type=email], .ga-form input[type=tel], .ga-form select, .ga-form textarea { /* Campos subrayados; al enfocarlos la línea engorda y pasa a un degradado principal → acento. */
width: 100%; padding: 13px 15px; border-radius: calc(var(--ga-radius) * .6); border: 1.5px solid var(--ga-line); .ga-form :is(input[type=text], input[type=email], input[type=tel], select, textarea) {
background: var(--ga-cream); font: 400 1rem var(--ga-sans); color: var(--ga-ink); text-transform: none; letter-spacing: 0; width: 100%; padding: 8px 0; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--ga-ink) 28%, transparent); border-radius: 0;
background: transparent; font: 400 1.05rem/1.4 var(--ga-sans); color: var(--ga-ink); text-transform: none; letter-spacing: 0;
transition: border-color .2s;
} }
.ga-form input:focus, .ga-form select:focus, .ga-form textarea:focus { border-color: var(--ga-green); outline: none; box-shadow: 0 0 0 3px var(--ga-green-soft); background: #fff; } .ga-form :is(input[type=text], input[type=email], input[type=tel], select, textarea):hover { border-bottom-color: color-mix(in srgb, var(--ga-ink) 50%, transparent); }
.ga-form .ga-form__check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--ga-ink); } .ga-form :is(input[type=text], input[type=email], input[type=tel], select, textarea):focus {
.ga-form .ga-form__check input { margin-top: 5px; } outline: none; padding-bottom: 7px; border-bottom-width: 3px;
.ga-form button { justify-self: start; background: var(--ga-green); border-color: var(--ga-green); color: var(--ga-on-primary); } border-image: linear-gradient(to right, var(--ga-green), var(--ga-red)) 1;
}
.ga-form :is(input, select, textarea):user-invalid { border-bottom-color: var(--ga-red-dark); }
.ga-form textarea { resize: vertical; min-height: 3.2em; }
.ga-form select { appearance: none; padding-right: 28px; cursor: pointer; }
/* Etiqueta flotante: dentro del campo mientras está vacío; sube al escribir o enfocar. */
.ga-form .ga-field { position: relative; display: block; padding-top: 22px; font: inherit; letter-spacing: 0; text-transform: none; }
.ga-form .ga-field[hidden] { display: none; }
.ga-field > span {
position: absolute; top: 0; left: 0; pointer-events: none;
font: 700 .8rem/1.4 var(--ga-sans); color: var(--ga-green-dark);
transition: top .2s, font-size .2s, color .2s;
}
.ga-field > :placeholder-shown:not(:focus) + span { top: 31px; font-size: 1.05rem; font-weight: 400; color: var(--ga-muted); }
.ga-field > :focus + span { color: var(--ga-green); }
.ga-field ::placeholder { color: transparent; transition: color .2s; }
.ga-field :focus::placeholder { color: color-mix(in srgb, var(--ga-ink) 45%, transparent); }
.ga-field--select::after { content: ""; position: absolute; right: 6px; bottom: 19px; width: 7px; height: 7px; border-right: 2px solid var(--ga-green); border-bottom: 2px solid var(--ga-green); transform: rotate(45deg); pointer-events: none; }
/* Casilla con una marca «a mano» que se dibuja al marcarla. */
.ga-form .ga-form__check { position: relative; display: flex; gap: 6px; align-items: flex-start; font-weight: 400; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--ga-ink); cursor: pointer; }
.ga-form__check input { position: absolute; left: 12px; top: 8px; width: 1px; height: 1px; margin: 0; opacity: 0; }
.ga-check { flex: none; width: 46px; height: 46px; margin: -10px -4px -12px -14px; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ga-check rect { fill: #fff; stroke: color-mix(in srgb, var(--ga-ink) 38%, transparent); stroke-width: 4; transition: stroke .2s; }
.ga-check path { stroke: var(--ga-green); stroke-width: 6; stroke-dasharray: 400; stroke-dashoffset: 400; opacity: 0; transition: stroke-dashoffset .5s, opacity .1s; }
.ga-form__check:hover .ga-check rect { stroke: var(--ga-green); }
.ga-form__check input:focus-visible + .ga-check rect { stroke: var(--ga-red-dark); stroke-width: 6; }
.ga-form__check input:user-invalid + .ga-check rect { stroke: var(--ga-red-dark); }
.ga-form__check input:checked + .ga-check rect { stroke: var(--ga-green); }
.ga-form__check input:checked + .ga-check path { stroke-dashoffset: 0; opacity: 1; }
/* Interruptor (marcado con ga_toggle_ui()): pista oscura; al activarse aparecen una rejilla, un brillo y un
ecualizador, y el botón se desliza, se enciende con el color de acento y late. */
.ga-toggle {
--w: 64px; --h: 34px; --t: .4s cubic-bezier(.25, 1, .5, 1);
position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none;
}
.ga-form .ga-toggle { display: inline-flex; font-weight: 600; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--ga-ink); }
.ga-toggle > input { position: absolute; left: 8px; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; }
.ga-toggle__switch { position: relative; flex: none; width: var(--w); height: var(--h); border-radius: 999px; }
.ga-toggle__track {
position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
display: flex; align-items: flex-end; gap: 2px; padding: 0 0 8px 12px;
background: linear-gradient(-45deg, rgba(0, 0, 0, .35) 0%, rgba(255, 255, 255, .05) 50%, rgba(0, 0, 0, .35) 100%), var(--ga-green-dark);
box-shadow: 0 2px 10px color-mix(in srgb, var(--ga-green-dark) 45%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.ga-toggle__track::before, .ga-toggle__track::after { content: ""; position: absolute; opacity: 0; transition: opacity var(--t); }
.ga-toggle__track::before {
inset: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .08) 1px, transparent 1px);
background-size: 5px 5px;
}
.ga-toggle__track::after { inset: 1px; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--ga-red) 28%, transparent), transparent); }
.ga-toggle__track i { position: relative; z-index: 1; width: 2px; height: 3px; border-radius: 1px; background: var(--ga-red); opacity: 0; transition: opacity var(--t); }
.ga-toggle__thumb {
position: absolute; z-index: 1; top: 4px; left: 4px; width: calc(var(--h) - 8px); height: calc(var(--h) - 8px);
display: grid; place-items: center; border-radius: 50%;
background: color-mix(in srgb, var(--ga-green) 40%, #9c939a); border: 1px solid rgba(255, 255, 255, .12);
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
transition: transform var(--t), scale var(--t), background var(--t), box-shadow var(--t), border-color var(--t);
}
.ga-toggle__thumb::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, .2), transparent); }
.ga-toggle__icon { position: relative; width: 10px; height: 2px; border-radius: 2px; background: var(--ga-green-dark); transition: all var(--t); }
.ga-toggle__icon::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--ga-on-red); opacity: 0; transform: scale(0); }
.ga-toggle:hover .ga-toggle__thumb { scale: 1.06; }
.ga-toggle > input:focus-visible + .ga-toggle__switch { outline: 3px solid var(--ga-red); outline-offset: 3px; }
.ga-toggle > input:checked + .ga-toggle__switch .ga-toggle__thumb {
transform: translateX(calc(var(--w) - var(--h)));
background: var(--ga-red); border-color: color-mix(in srgb, var(--ga-red) 40%, transparent);
box-shadow: 0 0 15px color-mix(in srgb, var(--ga-red) 60%, transparent);
}
.ga-toggle > input:checked + .ga-toggle__switch .ga-toggle__icon { width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ga-on-red); }
.ga-toggle > input:checked + .ga-toggle__switch .ga-toggle__icon::after { animation: ga-pulse 1.5s infinite; }
.ga-toggle > input:checked + .ga-toggle__switch .ga-toggle__track::before,
.ga-toggle > input:checked + .ga-toggle__switch .ga-toggle__track::after,
.ga-toggle > input:checked + .ga-toggle__switch .ga-toggle__track i { opacity: .9; }
.ga-toggle > input:checked + .ga-toggle__switch .ga-toggle__track i { animation: ga-eq .9s infinite; }
.ga-toggle > input:checked + .ga-toggle__switch .ga-toggle__track i:nth-child(2) { animation-duration: .8s; animation-delay: .1s; }
.ga-toggle > input:checked + .ga-toggle__switch .ga-toggle__track i:nth-child(3) { animation-duration: 1.1s; animation-delay: .2s; }
.ga-toggle > input:checked + .ga-toggle__switch .ga-toggle__track i:nth-child(4) { animation-duration: .7s; animation-delay: .1s; }
.ga-toggle > input:checked + .ga-toggle__switch .ga-toggle__track i:nth-child(5) { animation-delay: .15s; }
@keyframes ga-pulse { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.5); opacity: .2; } }
@keyframes ga-eq { 0%, 100% { height: 3px; } 50% { height: 9px; } }
.ga-form button { --ga-btn-line: var(--ga-red); justify-self: start; background: var(--ga-green); border-color: var(--ga-green); color: var(--ga-on-primary); }
.ga-form button:hover { background: var(--ga-green-dark); border-color: var(--ga-green-dark); color: var(--ga-on-primary); } .ga-form button:hover { background: var(--ga-green-dark); border-color: var(--ga-green-dark); color: var(--ga-on-primary); }
.ga-hp { position: absolute; left: -9999px; } .ga-hp { position: absolute; left: -9999px; }
.ga-notice { padding: 16px 20px; border-radius: calc(var(--ga-radius) * .7); margin-bottom: 16px; } .ga-notice { padding: 16px 20px; border-radius: calc(var(--ga-radius) * .7); margin-bottom: 16px; }
@@ -672,7 +861,8 @@ body { overflow-x: clip; }
.is-style-ga-arena { background: var(--ga-sand); } .is-style-ga-arena { background: var(--ga-sand); }
.is-style-ga-verde { background: var(--ga-green-dark); color: var(--ga-on-dark); } .is-style-ga-verde { background: var(--ga-green-dark); color: var(--ga-on-dark); }
.is-style-ga-verde :is(h1, h2, h3, h4, a:not(.wp-block-button__link)) { color: #fff; } .is-style-ga-verde :is(h1, h2, h3, h4, a:not(.wp-block-button__link)) { color: #fff; }
.is-style-ga-verde .is-style-outline .wp-block-button__link { color: #fff; border-color: #fff; } .is-style-ga-verde .is-style-outline .wp-block-button__link { --ga-btn-line: #fff; color: #fff; border-color: rgba(255, 255, 255, .35); }
.is-style-ga-verde .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.is-style-ga-tarjeta { background: #fff; border: 1px solid var(--ga-line); border-radius: var(--ga-radius); padding: 28px !important; box-shadow: var(--ga-shadow); } .is-style-ga-tarjeta { background: #fff; border: 1px solid var(--ga-line); border-radius: var(--ga-radius); padding: 28px !important; box-shadow: var(--ga-shadow); }
.is-style-ga-aviso { background: var(--ga-red-soft); border-left: 6px solid var(--ga-red); border-radius: var(--ga-radius); padding: 28px !important; } .is-style-ga-aviso { background: var(--ga-red-soft); border-left: 6px solid var(--ga-red); border-radius: var(--ga-radius); padding: 28px !important; }
.is-style-ga-tarjeta > :last-child, .is-style-ga-aviso > :last-child { margin-bottom: 0; } .is-style-ga-tarjeta > :last-child, .is-style-ga-aviso > :last-child { margin-bottom: 0; }
@@ -706,6 +896,7 @@ ol.is-style-ga-pasos li::before {
Pie Pie
========================================================================= */ ========================================================================= */
.ga-footer { border-top: 1px solid rgba(255, 255, 255, .08); background: var(--ga-footer-bg); color: color-mix(in srgb, #fff 72%, var(--ga-footer-bg)); padding: 72px 0 28px; font-size: .95rem; } .ga-footer { border-top: 1px solid rgba(255, 255, 255, .08); background: var(--ga-footer-bg); color: color-mix(in srgb, #fff 72%, var(--ga-footer-bg)); padding: 72px 0 28px; font-size: .95rem; }
.ga-footer:has(.ga-footer__reveal) { padding-bottom: 0; }
.ga-footer a { color: #fff; text-decoration: none; } .ga-footer a { color: #fff; text-decoration: none; }
.ga-footer a:hover { text-decoration: underline; color: #fff; } .ga-footer a:hover { text-decoration: underline; color: #fff; }
.ga-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 36px; } .ga-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 36px; }
@@ -722,6 +913,23 @@ ol.is-style-ga-pasos li::before {
.ga-footer__bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .85rem; } .ga-footer__bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .85rem; }
.ga-footer__bottom ul { display: flex; gap: 18px; } .ga-footer__bottom ul { display: flex; gap: 18px; }
.ga-footer__bottom li { margin: 0; } .ga-footer__bottom li { margin: 0; }
/* Nombre gigante en bajorrelieve. La franja es fija y su contenedor la recorta (clip-path),
así que al llegar al final parece que la página se levanta y lo descubre. */
.ga-footer__reveal {
--ga-wm: min(200px, calc(118vw / var(--ga-chars, 8)));
position: relative; clip-path: inset(0); height: calc(var(--ga-wm) * 1.25 + 24px); margin-top: 28px;
}
.ga-footer__band {
position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--ga-wm) * 1.25 + 24px);
display: flex; align-items: center; justify-content: center; padding-bottom: 12px; overflow: hidden;
background: color-mix(in srgb, var(--ga-footer-bg) 90%, #000);
}
.ga-footer__wordmark {
font: var(--ga-heading-weight) var(--ga-wm)/1 var(--ga-serif); letter-spacing: .02em; text-transform: uppercase;
white-space: nowrap; user-select: none;
color: color-mix(in srgb, var(--ga-footer-bg) 70%, #000);
text-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 -1px 1px rgba(0, 0, 0, .55);
}
@media (max-width: 1080px) { .ga-footer__grid { grid-template-columns: repeat(3, 1fr); } .ga-footer__about { grid-column: 1 / -1; } } @media (max-width: 1080px) { .ga-footer__grid { grid-template-columns: repeat(3, 1fr); } .ga-footer__about { grid-column: 1 / -1; } }
@media (max-width: 760px) { .ga-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .ga-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ga-footer__grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .ga-footer__grid { grid-template-columns: 1fr; } }