feat: Enhance gallery functionality with lightbox feature and improve icon sprite accessibility

- Added a lightbox feature for gallery images, allowing users to view photos in a modal with navigation controls. - Updated the SVG sprite to include inline styles for better accessibility. - Increased CSS specificity by doubling the `.vc-app` class to ensure styles override Astra theme defaults. - Introduced new shortcodes for bus tours, about section, and articles in the VC_Sections class. - Improved the handling of featured images in the single tour template for sharper display. - Updated version number to 1.8.15.
2026-09-23 17:26:56 +03:30
parent b0e302be15
commit d5686ed14b
19 changed files with 1700 additions and 684 deletions
--- a/astra-child-hoponhopoff/assets/chrome.css
+++ b/astra-child-hoponhopoff/assets/chrome.css
@@ -421,6 +421,7 @@
 }

 .hoho .ring-badge--top .ring-badge__text {
+  fill: #808080;
  font-size: 0.625rem;
  letter-spacing: 0.02em;
 }
@@ -546,15 +547,26 @@
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
-  transform: translateY(-0.375rem);
-  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
+  transform: translateY(-0.4rem) scale(0.97);
+  transform-origin: top center;
+  /* Exit: fade/slide out, then flip visibility only once the fade is done, so
+     the close animates instead of snapping. */
+  transition:
+    opacity 0.16s var(--ease),
+    transform 0.16s var(--ease),
+    visibility 0s linear 0.16s;
 }

 .hoho .nav__item--has-menu:hover .nav__submenu,
 .hoho .nav__toggle[aria-expanded="true"]+.nav__submenu {
  opacity: 1;
  visibility: visible;
-  transform: translateY(0);
+  transform: translateY(0) scale(1);
+  /* Enter: a slightly longer, soft ease-out so it settles in gently. */
+  transition:
+    opacity 0.24s var(--ease),
+    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
+    visibility 0s;
 }

 .hoho .nav__submenu a {
@@ -1868,14 +1880,24 @@
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
-    transform: translateY(-0.5rem);
-    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
+    transform: translateY(-0.6rem) scale(0.98);
+    transform-origin: top right;
+    /* Exit: fade/slide up, then hide once the fade completes. */
+    transition:
+      opacity 0.18s var(--ease),
+      transform 0.18s var(--ease),
+      visibility 0s linear 0.18s;
  }

 .hoho .nav.is-open {
    opacity: 1;
    visibility: visible;
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
+    /* Enter: soft ease-out settle. */
+    transition:
+      opacity 0.26s var(--ease),
+      transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+      visibility 0s;
  }

 .hoho .nav__list {
--- a/astra-child-hoponhopoff/assets/sprite.svg
+++ b/astra-child-hoponhopoff/assets/sprite.svg
@@ -1,4 +1,4 @@
-  <svg class="sprite" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
+  <svg class="sprite" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden">
    <defs>
      <path id="ringPathScroll" fill="none" d="M50,50 m-39,0 a39,39 0 1,1 78,0 a39,39 0 1,1 -78,0" />
    </defs>
--- a/astra-child-hoponhopoff/functions.php
+++ b/astra-child-hoponhopoff/functions.php
@@ -23,10 +23,10 @@ add_action( 'wp_enqueue_scripts', function () {
 	if ( wp_style_is( 'astra-theme-css', 'registered' ) ) {
 		$deps[] = 'astra-theme-css';
 	}
-	wp_enqueue_style( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.css', $deps, '1.0.2' );
+	wp_enqueue_style( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.css', $deps, '1.0.8' );

 	// Header interactions: burger, submenu, sticky, back-to-top, search toggle.
-	wp_enqueue_script( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.js', array(), '1.0.2', true );
+	wp_enqueue_script( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.js', array(), '1.0.8', true );

 	wp_add_inline_style(
 		'hoho-chrome',
@@ -40,9 +40,17 @@ add_action( 'wp_enqueue_scripts', function () {
 				'.hoho,.hoho h1,.hoho h2,.hoho h3,.hoho p,.hoho a,.hoho span,.hoho li,.hoho button,.hoho input{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}',
 				// Normalize: stop Astra decorating header/footer links & lists.
 				'.hoho a,.hoho.hoho a{text-decoration:none!important;box-shadow:none!important;}',
-				'.hoho a:not(.btn){color:inherit;}',
+				// …but not ring-badges: they set their own colour on the <a>, and this
+				// inherit rule out-specifies .ring-badge--top, turning the footer
+				// "back to top" text white (inherited) on the light area above it.
+				'.hoho a:not(.btn):not(.ring-badge){color:inherit;}',
 				'.hoho :is(ul,ol){list-style:none!important;margin:0!important;padding:0!important;}',
 				'.hoho li{margin:0!important;}',
+				// Let the footer\'s decorative bits (back-to-top ring, support tab)
+				// spill vertically, but keep the horizontal axis clipped so nothing
+				// causes a mobile sideways scroll. overflow-x:clip (unlike hidden)
+				// does not force overflow-y to auto, so the y-axis stays visible.
+				'.hoho,.hoho .footer{overflow-x:clip;overflow-y:visible;}',
 				// Icon buttons: Astra gives <button> a filled background + its own
 				// colour, which turned the header search icon into an empty dark
 				// circle. Reset them (real .btn buttons keep their styling).
@@ -51,9 +59,11 @@ add_action( 'wp_enqueue_scripts', function () {
 				'.hoho button:not(.btn):not(.burger){background:transparent;border:0;color:inherit;}',
 				// Expanding header search field.
 				'.hoho .header__search{display:flex;align-items:center;gap:.25rem;}',
-				'.hoho .header__search-input{width:0;min-width:0;padding:0;border:0;outline:0;opacity:0;height:var(--control-h);border-radius:var(--r-pill);background:rgba(255,255,255,.15);color:#fff;transition:width .25s var(--ease),opacity .2s var(--ease),padding .25s var(--ease);}',
+				// !important beats Astra's input[type=search] styling, which forces a
+				// white field background (and, with a white placeholder, hid the text).
+				'.hoho .header__search-input{width:0;min-width:0;padding:0;border:0!important;outline:0;opacity:0;height:var(--control-h);border-radius:var(--r-pill)!important;background:rgba(255,255,255,.15)!important;color:#fff!important;box-shadow:none!important;transition:width .25s var(--ease),opacity .2s var(--ease),padding .25s var(--ease);}',
 				'.hoho .header__search.is-open .header__search-input{width:min(52vw,15rem);padding:0 1rem;opacity:1;}',
-				'.hoho .header__search-input::placeholder{color:rgba(255,255,255,.7);}',
+				'.hoho .header__search-input::placeholder{color:rgba(255,255,255,.7)!important;opacity:1;}',
 			)
 		)
 	);
@@ -105,9 +115,11 @@ add_action( 'wp', function () {
 	}
 	add_action( 'astra_header', 'hoho_render_header' );

-	if ( function_exists( 'astra_footer_markup' ) ) {
-		remove_action( 'astra_footer', 'astra_footer_markup' );
-	}
+	// Astra renders its footer via the Footer Builder (a class method on the
+	// `astra_footer` hook), so removing the legacy astra_footer_markup() alone
+	// left a second, default footer. Clear every callback on the hook, then add
+	// ours — a clean, full replacement regardless of classic vs builder footer.
+	remove_all_actions( 'astra_footer' );
 	add_action( 'astra_footer', 'hoho_render_footer' );
 } );

@@ -146,7 +158,10 @@ function hoho_logo() {
 * Small helper: inline-icon markup referencing the sprite.
 */
 function hoho_icon( $name, $extra = '' ) {
-	$name  = preg_replace( '/[^a-z0-9\-]/', '', 'i-' . ltrim( (string) $name, 'i-' ) );
+	// Strip an existing "i-" prefix (once), then re-add it. ltrim() with a
+	// charlist would eat any leading i/-, turning "instagram" into "nstagram".
+	$slug  = preg_replace( '/^i-/', '', (string) $name );
+	$name  = preg_replace( '/[^a-z0-9\-]/', '', 'i-' . $slug );
 	$class = 'icon' . ( $extra ? ' ' . $extra : '' );
 	return '<svg class="' . esc_attr( $class ) . '" aria-hidden="true"><use href="#' . esc_attr( $name ) . '"></use></svg>';
 }
--- a/astra-child-hoponhopoff/inc/footer.php
+++ b/astra-child-hoponhopoff/inc/footer.php
@@ -39,7 +39,10 @@ $hoho_footer_col = function ( $location ) {
 	<footer class="footer" id="footer">
 		<a class="ring-badge ring-badge--top" href="#top" aria-label="<?php echo esc_attr__( 'Back to top', 'hoponhopoff' ); ?>">
 			<svg class="ring-badge__ring" viewBox="0 0 100 100" aria-hidden="true">
-				<text class="ring-badge__text"><textPath href="#ringPathScroll" startOffset="0">BACK TO TOP · BACK TO TOP · </textPath></text>
+				<text class="ring-badge__text" text-anchor="middle">
+					<textPath href="#ringPathScroll" startOffset="25%"><?php echo esc_html__( 'BACK TO TOP', 'hoponhopoff' ); ?></textPath>
+					<textPath href="#ringPathScroll" startOffset="75%"><?php echo esc_html__( 'BACK TO TOP', 'hoponhopoff' ); ?></textPath>
+				</text>
 			</svg>
 			<span class="ring-badge__dot"><svg class="icon" aria-hidden="true"><use href="#i-arrow-up"></use></svg></span>
 		</a>
--- a/astra-child-hoponhopoff/style.css
+++ b/astra-child-hoponhopoff/style.css
@@ -4,7 +4,7 @@ Theme URI: https://git.kaamyab.dev/vargha/TourWebsite
 Description: Astra child theme that replaces the Astra header and footer with the "Hop On Hop Off" design. Pairs with the Viator Collector plugin.
 Author: Amir Bagheri
 Template: astra
-Version: 1.0.2
+Version: 1.0.8
 Text Domain: hoponhopoff
 */