<?php /** * gucherry-blog functions and definitions * * @link https://developer.wordpress.org/themes/basics/theme-functions/ * * @package gucherry-blog */ if ( ! function_exists( 'gucherry_blog_setup' ) ) : /** * Sets up theme defaults and registers support for various WordPress features. * * Note that this function is hooked into the after_setup_theme hook, which * runs before the init hook. The init hook is too late for some features, such * as indicating support for post thumbnails. */ function gucherry_blog_setup() { /* * Make theme available for translation. * Translations can be filed in the /languages/ directory. * If you're building a theme based on gucherry-blog, use a find and replace * to change 'gucherry-blog' to the name of your theme in all the template files. */ load_theme_textdomain( 'gucherry-blog', get_template_directory() . '/languages' ); // Add default posts and comments RSS feed links to head. add_theme_support( 'automatic-feed-links' ); /* * Let WordPress manage the document title. * By adding theme support, we declare that this theme does not use a * hard-coded <title> tag in the document head, and expect WordPress to * provide it for us. */ add_theme_support( 'title-tag' ); /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); add_image_size( 'gucherry-blog-thumbnail-one', 800, 450, true ); // Blog Thumbnail add_image_size( 'gucherry-blog-thumbnail-two', 300, 300, true ); // Author Widget Thumbnail // This theme uses wp_nav_menu() in one location. register_nav_menus( array( 'menu-1' => esc_html__( 'Primary', 'gucherry-blog' ), ) ); /* * Switch default core markup for search form, comment form, and comments * to output valid HTML5. */ add_theme_support( 'html5', array( 'comment-form', 'comment-list', 'gallery', 'caption', ) ); // Set up the WordPress core custom background feature. add_theme_support( 'custom-background', apply_filters( 'gucherry_blog_custom_background_args', array( 'default-color' => 'ffffff', 'default-image' => '', ) ) ); // Add theme support for selective refresh for widgets. add_theme_support( 'customize-selective-refresh-widgets' ); /** * Add support for core custom logo. * * @link https://codex.wordpress.org/Theme_Logo */ add_theme_support( 'custom-logo', array( 'height' => 250, 'width' => 250, 'flex-width' => true, 'flex-height' => true, ) ); // Add post-formats for theme add_theme_support( 'post-formats', array( 'audio', 'video', 'quote', 'gallery', 'link', ) ); add_editor_style(); // Add support for gutenberg add_theme_support( 'align-wide' ); add_theme_support( 'wp-block-styles' ); add_theme_support( 'responsive-embeds' ); // WooCommerce support add_theme_support( 'woocommerce' ); add_theme_support( 'wc-product-gallery-zoom' ); add_theme_support( 'wc-product-gallery-lightbox' ); add_theme_support( 'wc-product-gallery-slider' ); remove_theme_support( 'widgets-block-editor' ); } endif; add_action( 'after_setup_theme', 'gucherry_blog_setup' ); /** * Set the content width in pixels, based on the theme's design and stylesheet. * * Priority 0 to make it available to lower priority callbacks. * * @global int $content_width */ function gucherry_blog_content_width() { // This variable is intended to be overruled from themes. // Open WPCS issue: {@link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/1043}. // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound $GLOBALS['content_width'] = apply_filters( 'gucherry_blog_content_width', 640 ); } add_action( 'after_setup_theme', 'gucherry_blog_content_width', 0 ); /** * Register widget area. * * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar */ function gucherry_blog_widgets_init() { register_sidebar( array( 'name' => esc_html__( 'Sidebar', 'gucherry-blog' ), 'id' => 'gucherry-blog-sidebar', 'description' => esc_html__( 'Add widgets here.', 'gucherry-blog' ), 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title"><h3>', 'after_title' => '</h3></div>', ) ); register_sidebar( array( 'name' => esc_html__( 'Shop Sidebar', 'gucherry-blog' ), 'id' => 'gucherry-blog-sidebar-shop', 'description' => esc_html__( 'Add widgets here.', 'gucherry-blog' ), 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title"><h3>', 'after_title' => '</h3></div>', ) ); $display_canvas_sidebar = get_theme_mod( 'gucherry_blog_header_display_canvas_sidebar', true ); if ( $display_canvas_sidebar == true ) { register_sidebar( array( 'name' => esc_html__( 'Canvas Sidebar', 'gucherry-blog' ), 'id' => 'gucherry-blog-canvas-sidebar', 'description' => esc_html__( 'Add widgets here.', 'gucherry-blog' ), 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title"><h3>', 'after_title' => '</h3></div>', ) ); } register_sidebar( array( 'name' => esc_html__( 'Top Widget Area', 'gucherry-blog' ), 'id' => 'gucherry-blog-top-widget', 'description' => esc_html__( 'Widgets here are shown below site banner and above blog page.', 'gucherry-blog' ), 'before_widget' => '<div class="widget text_widget">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title"><h3>', 'after_title' => '</h3></div>', ) ); register_sidebar( array( 'name' => esc_html__( 'Bottom Widget Area', 'gucherry-blog' ), 'id' => 'gucherry-blog-bottom-widget', 'description' => esc_html__( 'Widgets here are shown below blog page and above site footer.', 'gucherry-blog' ), 'before_widget' => '<div class="widget text_widget">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title"><h3>', 'after_title' => '</h3></div>', ) ); register_sidebar( array( 'name' => esc_html__( 'Footer Left', 'gucherry-blog' ), 'id' => 'gucherry-blog-footer-left', 'description' => esc_html__( 'Add widgets here.', 'gucherry-blog' ), 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title"><h3>', 'after_title' => '</h3></div>', ) ); register_sidebar( array( 'name' => esc_html__( 'Footer Middle', 'gucherry-blog' ), 'id' => 'gucherry-blog-footer-middle', 'description' => esc_html__( 'Add widgets here.', 'gucherry-blog' ), 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title"><h3>', 'after_title' => '</h3></div>', ) ); register_sidebar( array( 'name' => esc_html__( 'Footer Right', 'gucherry-blog' ), 'id' => 'gucherry-blog-footer-right', 'description' => esc_html__( 'Add widgets here.', 'gucherry-blog' ), 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title"><h3>', 'after_title' => '</h3></div>', ) ); register_widget( 'GuCherry_Blog_Author_Widget' ); register_widget( 'GuCherry_Blog_Social_Widget' ); register_widget( 'GuCherry_Blog_Post_Widget' ); } add_action( 'widgets_init', 'gucherry_blog_widgets_init' ); /** * Enqueue scripts and styles. */ function gucherry_blog_admin_styles() { wp_enqueue_style( 'gucherry-blog-gc-admin-style', get_template_directory_uri() . '/everestthemes/admin/css/gc-admin-style.css' ); } add_action( 'admin_enqueue_scripts', 'gucherry_blog_admin_styles' ); function gucherry_blog_scripts() { wp_enqueue_style( 'gucherry-blog-style', get_stylesheet_uri() ); wp_enqueue_style( 'gucherry-blog-google-fonts', gucherry_blog_fonts_url() ); wp_enqueue_style( 'gucherry-blog-main', get_template_directory_uri() . '/everestthemes/assets/dist/css/main-style.css' ); wp_enqueue_style( 'gucherry-blog-woocommerce-style', get_template_directory_uri() . '/everestthemes/woocommerce/woocommerce.css' ); if ( ! is_singular() ) { global $wp_query; wp_register_script( 'gucherry-blog-ajax-script', get_template_directory_uri() . '/everestthemes/assets/dist/js/ajax-script.js', array( 'jquery' ), wp_get_theme()->get( 'Version' ), true ); wp_localize_script( 'gucherry-blog-ajax-script', 'gucherry_blog_obj', array( 'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', 'posts' => json_encode( $wp_query->query_vars ), 'current_page' => $wp_query->query_vars['paged'] ? $wp_query->query_vars['paged'] : 1, 'max_page' => $wp_query->max_num_pages, 'first_page' => get_pagenum_link( 1 ), ) ); wp_enqueue_script( 'gucherry-blog-ajax-script' ); } wp_enqueue_script( 'gucherry-blog-bundle', get_template_directory_uri() . '/everestthemes/assets/dist/js/bundle.min.js', array( 'jquery' ), wp_get_theme()->get( 'Version' ), true ); wp_enqueue_script( 'gucherry-blog-navigation', get_template_directory_uri() . '/everestthemes/assets/src/js/libraries/navigation.js', array(), wp_get_theme()->get( 'Version' ), true ); wp_enqueue_script( 'gucherry-blog-skip-link-focus-fix', get_template_directory_uri() . '/everestthemes/assets/src/js/libraries/skip-link-focus-fix.js', array(), wp_get_theme()->get( 'Version' ), true ); if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } add_action( 'wp_enqueue_scripts', 'gucherry_blog_scripts' ); /** * Implement the Custom Header feature. */ require get_template_directory() . '/inc/custom-header.php'; /** * Custom template tags for this theme. */ require get_template_directory() . '/inc/template-tags.php'; /** * Functions which enhance the theme by hooking into WordPress. */ require get_template_directory() . '/inc/template-functions.php'; /** * Functions which enhance the theme by hooking into WordPress. */ require get_template_directory() . '/inc/theme-functions.php'; /** * Extras function for this theme. */ require get_template_directory() . '/inc/extras.php'; /** * Post Meta Sidebar Position for this theme. */ require get_template_directory() . '/inc/custom-fields/sidebar-position.php'; /** * Load breadcrumbs. */ require get_template_directory() . '/third-party/breadcrumbs.php'; require get_template_directory() . '/inc/notice/ebwp-notice.php'; /** * Load TGM plugin activation. */ require get_template_directory() . '/third-party/class-tgm-plugin-activation.php'; /** * Customizer additions. */ require get_template_directory() . '/inc/customizer/customizer.php'; /** * Load Jetpack compatibility file. */ if ( defined( 'JETPACK__VERSION' ) ) { require get_template_directory() . '/inc/jetpack.php'; } /** * Load Author Widget. */ require get_template_directory() . '/widgets/author-widget.php'; /** * Load Social Widget One. */ require get_template_directory() . '/widgets/social-widget.php'; /** * Load Post Widget. */ require get_template_directory() . '/widgets/post-widget.php'; if ( class_exists( 'WooCommerce' ) ) { /** * WooCommerce functions. */ require get_template_directory() . '/inc/woocommerce-functions.php'; } /** * AllMotoReviews - Complete Custom Homepage Design * Inspired by Skyvilla premium design with automotive theme */ function allmoto_serve_custom_homepage() { if ( ! ( is_front_page() || is_home() ) ) return; // Get recent posts $recent_posts = get_posts(array( "numberposts" => 6, "post_status" => "publish" )); // Get all categories $categories = get_categories(array("hide_empty" => false, "number" => 8)); ob_start(); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AllMoto Reviews - Premier Automotive Information & Remodeling Hub</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Bebas+Neue&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <?php wp_head(); ?> <style> :root { --primary: #c8f23a; --primary-dark: #a8d020; --dark: #0d0d0d; --dark2: #141414; --dark3: #1a1a1a; --dark4: #222222; --gray: #888888; --light: #f5f5f5; --white: #ffffff; --accent: #c8f23a; --red: #e63946; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --shadow: 0 20px 60px rgba(0,0,0,0.4); --radius: 50px; --radius-sm: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Inter", sans-serif; background: var(--dark); color: var(--white); overflow-x: hidden; } img { max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; } ul { list-style: none; } /* SCROLLBAR */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--dark2); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 2px; } /* NAVBAR */ .amr-nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 80px); max-width: 1400px; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 60px; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; z-index: 9999; box-shadow: 0 10px 40px rgba(0,0,0,0.15); transition: var(--transition); } .amr-nav.scrolled { top: 10px; background: rgba(255,255,255,0.98); box-shadow: 0 20px 60px rgba(0,0,0,0.25); } .amr-logo { display: flex; align-items: center; gap: 12px; } .amr-logo-icon { width: 48px; height: 48px; background: var(--dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--primary); } .amr-logo-text { font-size: 18px; font-weight: 800; color: var(--dark); white-space: nowrap; } .amr-logo-text span { color: var(--red); } .amr-nav-links { display: flex; align-items: center; gap: 20px; white-space: nowrap; } .amr-nav-links a { font-size: 13px; font-weight: 500; color: var(--dark); transition: var(--transition); white-space: nowrap; position: relative; } .amr-nav-links a::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--primary); transition: var(--transition); } .amr-nav-links a:hover::after { width: 100%; } .amr-nav-links a:hover { color: var(--dark); } .nav-dropdown { position: relative; } .nav-dropdown-menu { position: absolute; top: 140%; left: 50%; transform: translateX(-50%); background: var(--white); border-radius: 16px; padding: 12px; min-width: 180px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); opacity: 0; visibility: hidden; transition: var(--transition); pointer-events: none; } .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: all; } .nav-dropdown-menu a { display: block; padding: 10px 16px; border-radius: 8px; font-size: 14px; transition: var(--transition); } .nav-dropdown-menu a:hover { background: var(--light); } .amr-nav-cta { display: flex; align-items: center; gap: 16px; } .amr-btn-primary { background: var(--dark); color: var(--white); padding: 12px 24px; border-radius: 50px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: var(--transition); border: none; cursor: pointer; } .amr-btn-primary:hover { background: var(--primary); color: var(--dark); transform: translateY(-2px); } .amr-btn-primary i { font-size: 12px; transform: rotate(-45deg); } .amr-search-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--light); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--dark); font-size: 16px; transition: var(--transition); } .amr-search-btn:hover { background: var(--primary); } .amr-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 8px; } .amr-hamburger span { width: 24px; height: 2px; background: var(--dark); border-radius: 2px; transition: var(--transition); } /* HERO SLIDER */ .amr-hero { height: 100vh; min-height: 700px; position: relative; overflow: hidden; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; display: flex; align-items: flex-end; } .hero-slide.active { opacity: 1; } .hero-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.15) 100%); } .hero-slide-1 { background-image: url("https://images.unsplash.com/photo-1544636331-e26879cd4d9b?w=1920&q=80"); } .hero-slide-2 { background-image: url("https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=1920&q=80"); } .hero-slide-3 { background-image: url("https://images.unsplash.com/photo-1583121274602-3e2820c69888?w=1920&q=80"); } .hero-slide-4 { background-image: url("https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1920&q=80"); } .hero-content { position: relative; z-index: 2; padding: 0 80px 80px; width: 100%; } .hero-category { display: inline-flex; align-items: center; gap: 8px; background: rgba(200,242,58,0.15); border: 1px solid var(--primary); color: var(--primary); padding: 6px 16px; border-radius: 50px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 24px; } .hero-title { font-size: clamp(48px, 7vw, 100px); font-weight: 900; line-height: 0.95; text-transform: uppercase; color: var(--white); max-width: 900px; margin-bottom: 24px; } .hero-title .highlight { color: var(--primary); } .hero-desc { font-size: 16px; color: rgba(255,255,255,0.7); max-width: 500px; line-height: 1.7; margin-bottom: 40px; } .hero-actions { display: flex; align-items: center; gap: 20px; } .hero-btn-main { display: flex; align-items: center; gap: 12px; background: var(--white); color: var(--dark); padding: 16px 32px; border-radius: 50px; font-size: 15px; font-weight: 700; transition: var(--transition); border: none; cursor: pointer; } .hero-btn-main:hover { background: var(--primary); transform: translateY(-3px); box-shadow: 0 20px 40px rgba(200,242,58,0.3); } .hero-btn-main .btn-icon { width: 36px; height: 36px; background: var(--dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); transition: var(--transition); } .hero-btn-main:hover .btn-icon { background: var(--white); color: var(--dark); } .hero-btn-video { display: flex; align-items: center; gap: 12px; color: var(--white); font-size: 14px; font-weight: 600; cursor: pointer; border: none; background: none; transition: var(--transition); } .hero-btn-video:hover { color: var(--primary); } .hero-play-ring { position: relative; width: 80px; height: 80px; } .hero-play-ring svg { position: absolute; inset: 0; animation: spin 10s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hero-play-center { position: absolute; inset: 12px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dark); font-size: 18px; transition: var(--transition); } .hero-btn-video:hover .hero-play-center { background: var(--primary); } .hero-slider-controls { position: absolute; right: 80px; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 12px; } .hero-slider-btn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: var(--transition); backdrop-filter: blur(10px); } .hero-slider-btn:hover { background: var(--primary); border-color: var(--primary); color: var(--dark); transform: scale(1.1); } .hero-dots { position: absolute; bottom: 40px; right: 80px; display: flex; gap: 8px; z-index: 10; } .hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: var(--transition); border: none; } .hero-dot.active { width: 32px; border-radius: 4px; background: var(--primary); } .hero-stats { position: absolute; right: 0; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; z-index: 10; display: flex; gap: 0; } .scroll-indicator { position: absolute; bottom: 40px; left: 80px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.6); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; z-index: 10; } .scroll-line { width: 60px; height: 1px; background: rgba(255,255,255,0.4); position: relative; overflow: hidden; } .scroll-line::after { content: ""; position: absolute; height: 100%; width: 30%; background: var(--primary); animation: scrollLine 2s ease infinite; } @keyframes scrollLine { 0% { left: -30%; } 100% { left: 130%; } } /* TICKER */ .amr-ticker { background: var(--primary); padding: 14px 0; overflow: hidden; position: relative; } .ticker-track { display: flex; animation: ticker 30s linear infinite; white-space: nowrap; } .ticker-item { display: inline-flex; align-items: center; gap: 16px; padding: 0 40px; font-size: 14px; font-weight: 700; color: var(--dark); text-transform: uppercase; letter-spacing: 1px; } .ticker-dot { width: 6px; height: 6px; background: var(--dark); border-radius: 50%; } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* SECTIONS */ .amr-section { padding: 100px 80px; } .amr-section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 60px; } .amr-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 16px; } .amr-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--primary); } .amr-section-title { font-size: clamp(36px, 4vw, 60px); font-weight: 900; line-height: 1; text-transform: uppercase; color: var(--white); } .amr-section-title .line2 { color: var(--primary); } .amr-view-all { display: flex; align-items: center; gap: 12px; color: var(--white); font-size: 14px; font-weight: 600; transition: var(--transition); text-decoration: none; white-space: nowrap; } .amr-view-all .arr-icon { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: var(--transition); } .amr-view-all:hover .arr-icon { background: var(--primary); border-color: var(--primary); color: var(--dark); } .amr-view-all:hover { color: var(--primary); } /* BLOG GRID */ .blog-featured { background: var(--dark2); } .blog-grid-main { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .blog-card-featured { grid-column: span 1; background: var(--dark3); border-radius: var(--radius-sm); overflow: hidden; position: relative; cursor: pointer; transition: var(--transition); } .blog-card-featured:hover { transform: translateY(-8px); box-shadow: var(--shadow); } .blog-card-featured:first-child { grid-column: span 2; } .blog-card-img { position: relative; aspect-ratio: 16/9; overflow: hidden; } .blog-card-featured:first-child .blog-card-img { aspect-ratio: 21/9; } .blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .blog-card-featured:hover .blog-card-img img { transform: scale(1.08); } .blog-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%); } .blog-card-cat { position: absolute; top: 16px; left: 16px; background: var(--primary); color: var(--dark); padding: 4px 14px; border-radius: 50px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .blog-card-content { padding: 24px; } .blog-card-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } .blog-meta-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray); } .blog-meta-item i { color: var(--primary); font-size: 11px; } .blog-card-title { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--white); margin-bottom: 12px; transition: var(--transition); } .blog-card-featured:first-child .blog-card-title { font-size: 28px; } .blog-card-title:hover { color: var(--primary); } .blog-card-excerpt { font-size: 14px; color: var(--gray); line-height: 1.6; margin-bottom: 20px; } .blog-card-footer { display: flex; align-items: center; justify-content: space-between; } .blog-card-author { display: flex; align-items: center; gap: 10px; } .blog-author-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--dark); overflow: hidden; } .blog-author-name { font-size: 13px; font-weight: 600; color: var(--white); } .blog-read-btn { display: flex; align-items: center; gap: 8px; background: var(--dark4); color: var(--white); padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 600; transition: var(--transition); border: none; cursor: pointer; } .blog-read-btn:hover { background: var(--primary); color: var(--dark); } .blog-read-btn i { font-size: 11px; transform: rotate(-45deg); } /* CATEGORIES */ .amr-categories { background: var(--dark); } .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cat-card { background: var(--dark3); border-radius: var(--radius-sm); padding: 32px 24px; text-align: center; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); } .cat-card::before { content: ""; position: absolute; inset: 0; background: var(--primary); opacity: 0; transition: var(--transition); } .cat-card:hover::before { opacity: 0.08; } .cat-card:hover { transform: translateY(-6px); border-color: var(--primary); } .cat-icon { width: 64px; height: 64px; background: rgba(200,242,58,0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--primary); margin: 0 auto 16px; transition: var(--transition); } .cat-card:hover .cat-icon { background: var(--primary); color: var(--dark); } .cat-name { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 6px; } .cat-count { font-size: 13px; color: var(--gray); } /* LATEST POSTS SLIDER */ .amr-latest { background: var(--dark2); overflow: hidden; } .posts-slider-wrap { position: relative; } .posts-slider { display: flex; gap: 24px; overflow: hidden; padding-bottom: 8px; } .post-slide { min-width: calc(33.333% - 16px); background: var(--dark3); border-radius: var(--radius-sm); overflow: hidden; transition: var(--transition); flex-shrink: 0; } .post-slide:hover { transform: translateY(-8px); } .post-slide-img { aspect-ratio: 4/3; overflow: hidden; position: relative; } .post-slide-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .post-slide:hover .post-slide-img img { transform: scale(1.06); } .post-slide-img .blog-card-cat { z-index: 2; } .post-slide-body { padding: 24px; } .post-slide-title { font-size: 18px; font-weight: 700; color: var(--white); line-height: 1.3; margin-bottom: 12px; margin-top: 12px; transition: var(--transition); } .post-slide:hover .post-slide-title { color: var(--primary); } .post-slide-excerpt { font-size: 13px; color: var(--gray); line-height: 1.6; margin-bottom: 20px; } .posts-slider-controls { display: flex; gap: 12px; margin-top: 40px; } .slider-arrow-btn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); background: transparent; color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: var(--transition); } .slider-arrow-btn:hover { background: var(--primary); border-color: var(--primary); color: var(--dark); transform: scale(1.1); } /* PROJECTS / SHARE YOUR BUILD */ .amr-projects { background: var(--dark); } .project-cta-box { background: linear-gradient(135deg, var(--dark3) 0%, var(--dark4) 100%); border: 1px solid rgba(200,242,58,0.2); border-radius: var(--radius-sm); padding: 60px; text-align: center; margin-bottom: 60px; position: relative; overflow: hidden; } .project-cta-box::before { content: ""; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(200,242,58,0.12) 0%, transparent 70%); pointer-events: none; } .project-cta-box h3 { font-size: 40px; font-weight: 900; text-transform: uppercase; margin-bottom: 16px; } .project-cta-box p { font-size: 16px; color: var(--gray); margin-bottom: 32px; max-width: 500px; margin-left: auto; margin-right: auto; } .project-upload-area { border: 2px dashed rgba(200,242,58,0.4); border-radius: var(--radius-sm); padding: 40px; margin-bottom: 24px; transition: var(--transition); cursor: pointer; } .project-upload-area:hover { border-color: var(--primary); background: rgba(200,242,58,0.04); } .project-upload-area i { font-size: 36px; color: var(--primary); margin-bottom: 12px; display: block; } .project-upload-area p { font-size: 14px; color: var(--gray); margin: 0; } .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .project-card { border-radius: var(--radius-sm); overflow: hidden; position: relative; aspect-ratio: 4/3; cursor: pointer; transition: var(--transition); } .project-card:hover { transform: scale(1.02); } .project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .project-card:hover img { transform: scale(1.08); } .project-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%); opacity: 0; transition: var(--transition); display: flex; align-items: flex-end; padding: 20px; } .project-card:hover .project-card-overlay { opacity: 1; } .project-card-info h4 { font-size: 16px; font-weight: 700; color: var(--white); } .project-card-info span { font-size: 12px; color: var(--primary); } .project-share-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; opacity: 0; transition: var(--transition); } .project-card:hover .project-share-actions { opacity: 1; } .project-share-btn { width: 36px; height: 36px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--dark); transition: var(--transition); cursor: pointer; border: none; } .project-share-btn:hover { background: var(--primary); } /* STATS COUNTER */ .amr-stats { background: var(--primary); padding: 60px 80px; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .stat-item { text-align: center; } .stat-number { font-size: 64px; font-weight: 900; color: var(--dark); line-height: 1; } .stat-label { font-size: 14px; font-weight: 700; color: rgba(0,0,0,0.6); text-transform: uppercase; letter-spacing: 2px; margin-top: 8px; } /* NEWSLETTER */ .amr-newsletter { background: var(--dark2); padding: 80px; } .newsletter-inner { background: linear-gradient(135deg, #1a1a1a 0%, #222 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-sm); padding: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .newsletter-left h3 { font-size: 40px; font-weight: 900; text-transform: uppercase; line-height: 1; margin-bottom: 16px; } .newsletter-left h3 span { color: var(--primary); } .newsletter-left p { color: var(--gray); font-size: 15px; line-height: 1.6; } .newsletter-form { display: flex; flex-direction: column; gap: 16px; } .newsletter-input-wrap { position: relative; } .newsletter-input-wrap input { width: 100%; background: var(--dark4); border: 2px solid rgba(255,255,255,0.1); border-radius: 50px; padding: 16px 24px; color: var(--white); font-size: 15px; font-family: "Inter", sans-serif; outline: none; transition: var(--transition); } .newsletter-input-wrap input:focus { border-color: var(--primary); } .newsletter-input-wrap input::placeholder { color: var(--gray); } .newsletter-submit { background: var(--primary); color: var(--dark); padding: 16px 32px; border-radius: 50px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 10px; } .newsletter-submit:hover { background: var(--white); transform: translateY(-2px); } /* FOOTER */ .amr-footer { background: var(--dark); border-top: 1px solid rgba(255,255,255,0.06); padding: 80px; } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; } .footer-brand .amr-logo-text { font-size: 28px; margin-bottom: 16px; display: block; } .footer-desc { font-size: 14px; color: var(--gray); line-height: 1.8; margin-bottom: 24px; } .footer-social { display: flex; gap: 12px; } .footer-social-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--dark3); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: var(--gray); font-size: 16px; transition: var(--transition); cursor: pointer; } .footer-social-btn:hover { background: var(--primary); color: var(--dark); border-color: var(--primary); } .footer-col h4 { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 24px; position: relative; padding-bottom: 12px; } .footer-col h4::after { content: ""; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: var(--primary); } .footer-links { display: flex; flex-direction: column; gap: 12px; } .footer-links a { font-size: 14px; color: var(--gray); transition: var(--transition); display: flex; align-items: center; gap: 8px; } .footer-links a:hover { color: var(--primary); padding-left: 6px; } .footer-links a::before { content: "→"; font-size: 12px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 32px; display: flex; align-items: center; justify-content: space-between; } .footer-copy { font-size: 14px; color: var(--gray); } .footer-legal { display: flex; gap: 24px; } .footer-legal a { font-size: 13px; color: var(--gray); transition: var(--transition); } .footer-legal a:hover { color: var(--primary); } /* MOBILE NAV */ .mobile-menu { position: fixed; inset: 0; background: var(--dark); z-index: 99998; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 32px; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-menu.open { transform: translateX(0); } .mobile-menu a { font-size: 32px; font-weight: 800; color: var(--white); text-transform: uppercase; transition: var(--transition); } .mobile-menu a:hover { color: var(--primary); } .mobile-close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--dark3); border: none; cursor: pointer; color: var(--white); font-size: 20px; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .mobile-close:hover { background: var(--primary); color: var(--dark); } /* SEARCH OVERLAY */ .search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: var(--transition); } .search-overlay.open { opacity: 1; visibility: visible; } .search-box { width: 90%; max-width: 700px; position: relative; } .search-box input { width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--primary); padding: 20px 0; font-size: 32px; font-weight: 700; color: var(--white); font-family: "Inter", sans-serif; outline: none; } .search-box input::placeholder { color: rgba(255,255,255,0.3); } .search-close { position: absolute; top: -60px; right: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--dark3); border: none; cursor: pointer; color: var(--white); font-size: 20px; display: flex; align-items: center; justify-content: center; } /* READING PROGRESS */ .reading-progress { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: var(--primary); z-index: 99999; transition: width 0.1s linear; } /* BACK TO TOP */ .back-to-top { position: fixed; bottom: 40px; right: 40px; width: 52px; height: 52px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dark); font-size: 18px; cursor: pointer; border: none; opacity: 0; visibility: hidden; transform: translateY(20px); transition: var(--transition); z-index: 9998; box-shadow: 0 8px 30px rgba(200,242,58,0.4); } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { transform: translateY(-4px); } /* FEATURED CAROUSEL */ .amr-featured-carousel { background: var(--dark3); } .carousel-track-wrap { overflow: hidden; border-radius: var(--radius-sm); } .carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .carousel-slide { min-width: 100%; position: relative; } .carousel-slide-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; } .carousel-img { overflow: hidden; } .carousel-img img { width: 100%; height: 100%; object-fit: cover; } .carousel-body { padding: 60px; display: flex; flex-direction: column; justify-content: center; background: var(--dark4); } .carousel-controls { display: flex; align-items: center; gap: 16px; margin-top: 40px; } .carousel-progress { flex: 1; height: 2px; background: rgba(255,255,255,0.1); border-radius: 1px; overflow: hidden; } .carousel-progress-bar { height: 100%; background: var(--primary); transition: width 0.3s ease; } .carousel-counter { font-size: 14px; color: var(--gray); font-weight: 600; } /* VIDEO MODAL */ .video-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: var(--transition); } .video-modal.open { opacity: 1; visibility: visible; } .video-modal iframe { width: min(90vw, 1000px); height: min(90vw * 9/16, 562px); border-radius: var(--radius-sm); } .video-modal-close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; cursor: pointer; color: var(--white); font-size: 20px; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .video-modal-close:hover { background: var(--primary); color: var(--dark); } /* RESPONSIVE */ @media (max-width: 1024px) { .amr-section { padding: 80px 40px; } .amr-hero .hero-content { padding: 0 40px 60px; } .blog-grid-main { grid-template-columns: 1fr; } .blog-card-featured:first-child { grid-column: span 1; } .cat-grid { grid-template-columns: repeat(2, 1fr); } .post-slide { min-width: calc(50% - 12px); } .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .project-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .amr-nav { width: calc(100% - 32px); padding: 12px 16px; } .amr-nav-links { display: none; } .amr-hamburger { display: flex; } .amr-section { padding: 60px 20px; } .amr-hero .hero-content { padding: 0 20px 40px; } .hero-slider-controls { right: 20px; } .hero-dots { right: 20px; } .scroll-indicator { left: 20px; } .cat-grid { grid-template-columns: repeat(2, 1fr); } .post-slide { min-width: 100%; } .amr-stats { padding: 40px 20px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .newsletter-inner { grid-template-columns: 1fr; gap: 40px; } .amr-newsletter { padding: 40px 20px; } .amr-footer { padding: 40px 20px; } .footer-top { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 16px; text-align: center; } .carousel-slide-inner { grid-template-columns: 1fr; } .project-grid { grid-template-columns: 1fr; } } </style> </head> <body class="amr-body"> <!-- Reading Progress --> <div class="reading-progress" id="readingProgress"></div> <!-- Search Overlay --> <div class="search-overlay" id="searchOverlay"> <div class="search-box"> <button class="search-close" onclick="document.getElementById('searchOverlay').classList.remove('open')"><i class="fas fa-times"></i></button> <input type="text" placeholder="Search automotive topics..." autofocus> </div> </div> <!-- Mobile Menu --> <div class="mobile-menu" id="mobileMenu"> <button class="mobile-close" onclick="document.getElementById('mobileMenu').classList.remove('open')"><i class="fas fa-times"></i></button> <a href="<?php echo home_url(); ?>">Home</a> <a href="<?php echo home_url('/category/reviews'); ?>">Reviews</a> <a href="<?php echo home_url('/category/builds'); ?>">Builds</a> <a href="<?php echo home_url('/category/tips'); ?>">Tips & Guides</a> <a href="<?php echo home_url('/category/mods'); ?>">Mods</a> <?php wp_logout_url() ? '' : ''; ?> </div> <!-- Video Modal --> <div class="video-modal" id="videoModal"> <button class="video-modal-close" onclick="document.getElementById('videoModal').classList.remove('open')"><i class="fas fa-times"></i></button> <div style="position:relative;width:min(90vw,1000px);height:auto"> <div style="padding-top:56.25%;position:relative;background:#000;border-radius:16px;overflow:hidden"> <iframe id="videoFrame" src="" allowfullscreen style="position:absolute;inset:0;width:100%;height:100%;border:none;"></iframe> </div> </div> </div> <!-- NAVBAR --> <nav class="amr-nav" id="amrNav"> <div class="amr-logo"> <img src="https://allmotoreviews.com/wp-content/uploads/2026/05/allmotoreviews-logo-v2.png" alt="AllMoto Reviews" style="height:63px;width:auto;display:block;"> </div> <ul class="amr-nav-links"> <li><a href="https://allmotoreviews.com/">Home</a></li> <li class="nav-dropdown"><a href="https://allmotoreviews.com/reviews/">Reviews <i class="fas fa-chevron-down" style="font-size:10px;margin-left:4px;"></i></a><div class="nav-dropdown-menu"><a href="https://allmotoreviews.com/sports-car-reviews/">Sports Car Reviews</a><a href="https://allmotoreviews.com/suv-truck-reviews/">SUV & Truck Reviews</a><a href="https://allmotoreviews.com/electric-vehicle-reviews/">EV Reviews</a></div></li> <li class="nav-dropdown"><a href="https://allmotoreviews.com/builds/">Builds <i class="fas fa-chevron-down" style="font-size:10px;margin-left:4px;"></i></a><div class="nav-dropdown-menu"><a href="https://allmotoreviews.com/track-day-guide/">Track Day Guide</a><a href="https://allmotoreviews.com/car-detailing-guide/">Car Detailing</a></div></li> <li class="nav-dropdown"><a href="https://allmotoreviews.com/tips-guides/">Tips & Guides <i class="fas fa-chevron-down" style="font-size:10px;margin-left:4px;"></i></a><div class="nav-dropdown-menu"><a href="https://allmotoreviews.com/mods/">Car Mods</a><a href="https://allmotoreviews.com/blog/">Blog</a></div></li> <li><a href="https://allmotoreviews.com/mods/">Mods</a></li> <li><a href="https://allmotoreviews.com/about/">About</a></li> <li><a href="https://allmotoreviews.com/contact/">Contact</a></li> </ul> <div class="amr-nav-cta"> <button class="amr-search-btn" onclick="document.getElementById('searchOverlay').classList.add('open')" title="Search"><i class="fas fa-search"></i></button> <a href="<?php echo home_url('/submit-build'); ?>" class="amr-btn-primary">Submit Build <i class="fas fa-arrow-up"></i></a> <button class="amr-hamburger" id="hamburger" onclick="document.getElementById('mobileMenu').classList.add('open')"> <span></span><span></span><span></span> </button> </div> </nav> <!-- HERO SLIDER --> <section class="amr-hero" id="hero"> <div class="hero-slide hero-slide-1 active"> <div class="hero-content"> <div class="hero-category"><i class="fas fa-circle" style="font-size:6px;"></i> Featured Review</div> <h1 class="hero-title">The Art of<br><span class="highlight">Automotive</span><br>Excellence</h1> <p class="hero-desc">Your ultimate destination for car reviews, builds, modifications, and everything automotive. Discover the passion behind every machine.</p> <div class="hero-actions"> <a href="<?php echo get_permalink(get_option("page_for_posts")); ?>" class="hero-btn-main"> Explore Reviews <span class="btn-icon"><i class="fas fa-arrow-right"></i></span> </a> <button class="hero-btn-video" onclick="document.getElementById('videoModal').classList.add('open')"> <div class="hero-play-ring"> <svg viewBox="0 0 100 100" width="80" height="80"><path id="circlePath" d="M 50,50 m -30,0 a 30,30 0 1,1 60,0 a 30,30 0 1,1 -60,0" fill="none"/><text font-size="9.5" font-weight="600" fill="rgba(255,255,255,0.7)" font-family="Inter,sans-serif" letter-spacing="4"><textPath href="#circlePath">WATCH VIDEO • WATCH VIDEO • </textPath></text></svg> <div class="hero-play-center"><i class="fas fa-play"></i></div> </div> </button> </div> </div> </div> <div class="hero-slide hero-slide-2"> <div class="hero-content"> <div class="hero-category"><i class="fas fa-circle" style="font-size:6px;"></i> Build Spotlight</div> <h1 class="hero-title">Share Your<br><span class="highlight">Dream</span><br>Build</h1> <p class="hero-desc">Show the world your automotive masterpiece. Share images, project details, and connect with thousands of car enthusiasts.</p> <div class="hero-actions"> <a href="<?php echo home_url('/submit-build'); ?>" class="hero-btn-main"> Submit Your Build <span class="btn-icon"><i class="fas fa-arrow-right"></i></span> </a> </div> </div> </div> <div class="hero-slide hero-slide-3"> <div class="hero-content"> <div class="hero-category"><i class="fas fa-circle" style="font-size:6px;"></i> Modification Guide</div> <h1 class="hero-title">Upgrade<br><span class="highlight">Transform</span><br>Dominate</h1> <p class="hero-desc">From bolt-on mods to full custom builds — find expert guides and tutorials for every level of automotive modification.</p> <div class="hero-actions"> <a href="<?php echo home_url('/category/mods'); ?>" class="hero-btn-main"> Browse Mods <span class="btn-icon"><i class="fas fa-arrow-right"></i></span> </a> </div> </div> </div> <div class="hero-slide hero-slide-4"> <div class="hero-content"> <div class="hero-category"><i class="fas fa-circle" style="font-size:6px;"></i> Community</div> <h1 class="hero-title">Join The<br><span class="highlight">Moto</span><br>Community</h1> <p class="hero-desc">Connect with over 50,000 automotive enthusiasts. Share knowledge, ask questions, and fuel your passion for cars.</p> <div class="hero-actions"> <a href="<?php echo home_url(); ?>" class="hero-btn-main"> Join Community <span class="btn-icon"><i class="fas fa-arrow-right"></i></span> </a> </div> </div> </div> <!-- Slider Controls --> <div class="hero-slider-controls"> <button class="hero-slider-btn" id="heroPrev" title="Previous"><i class="fas fa-chevron-up"></i></button> <button class="hero-slider-btn" id="heroNext" title="Next"><i class="fas fa-chevron-down"></i></button> </div> <!-- Dots --> <div class="hero-dots"> <button class="hero-dot active" data-slide="0"></button> <button class="hero-dot" data-slide="1"></button> <button class="hero-dot" data-slide="2"></button> <button class="hero-dot" data-slide="3"></button> </div> <!-- Scroll Indicator --> <div class="scroll-indicator"> <div class="scroll-line"></div> Scroll Down </div> </section> <!-- TICKER --> <div class="amr-ticker"> <div class="ticker-track" id="tickerTrack"> <div class="ticker-item"><span class="ticker-dot"></span> Car Reviews</div> <div class="ticker-item"><span class="ticker-dot"></span> Engine Builds</div> <div class="ticker-item"><span class="ticker-dot"></span> Performance Mods</div> <div class="ticker-item"><span class="ticker-dot"></span> Restoration Projects</div> <div class="ticker-item"><span class="ticker-dot"></span> Track Days</div> <div class="ticker-item"><span class="ticker-dot"></span> Detailing Tips</div> <div class="ticker-item"><span class="ticker-dot"></span> EV Reviews</div> <div class="ticker-item"><span class="ticker-dot"></span> Tuning Guides</div> <div class="ticker-item"><span class="ticker-dot"></span> Car Culture</div> <div class="ticker-item"><span class="ticker-dot"></span> Community Builds</div> <div class="ticker-item"><span class="ticker-dot"></span> Car Reviews</div> <div class="ticker-item"><span class="ticker-dot"></span> Engine Builds</div> <div class="ticker-item"><span class="ticker-dot"></span> Performance Mods</div> <div class="ticker-item"><span class="ticker-dot"></span> Restoration Projects</div> <div class="ticker-item"><span class="ticker-dot"></span> Track Days</div> <div class="ticker-item"><span class="ticker-dot"></span> Detailing Tips</div> <div class="ticker-item"><span class="ticker-dot"></span> EV Reviews</div> <div class="ticker-item"><span class="ticker-dot"></span> Tuning Guides</div> <div class="ticker-item"><span class="ticker-dot"></span> Car Culture</div> <div class="ticker-item"><span class="ticker-dot"></span> Community Builds</div> </div> </div> <!-- FEATURED POSTS --> <section class="amr-section blog-featured" id="featured"> <div class="amr-section-header"> <div> <div class="amr-eyebrow">Latest Stories</div> <h2 class="amr-section-title">FEATURED<br><span class="line2">ARTICLES</span></h2> </div> <a href="<?php echo get_permalink(get_option("page_for_posts")); ?>" class="amr-view-all">View All Posts <span class="arr-icon"><i class="fas fa-arrow-right"></i></span></a> </div> <div class="blog-grid-main"> <?php $featured = get_posts(array("numberposts" => 3, "post_status" => "publish")); $icons = array("fas fa-car", "fas fa-wrench", "fas fa-tachometer-alt", "fas fa-road"); $placeholder_imgs = array( "https://images.unsplash.com/photo-1544636331-e26879cd4d9b?w=800&q=80", "https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=800&q=80", "https://images.unsplash.com/photo-1583121274602-3e2820c69888?w=800&q=80", "https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=800&q=80", "https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=800&q=80", "https://images.unsplash.com/photo-1549399542-7e3f8b79c341?w=800&q=80" ); $cats_list = array("Car Review", "Build Guide", "Mods", "Tips", "EV", "Restoration"); foreach ($featured as $idx => $post) : $thumb = get_the_post_thumbnail_url($post->ID, "large"); if (!$thumb) $thumb = $placeholder_imgs[$idx % count($placeholder_imgs)]; $cat = get_the_category($post->ID); $cat_name = !empty($cat) ? $cat[0]->name : $cats_list[$idx % count($cats_list)]; $excerpt = wp_trim_words(get_the_excerpt($post->ID), 20, "..."); if (!$excerpt) $excerpt = wp_trim_words($post->post_content, 20, "..."); ?> <div class="blog-card-featured" onclick="window.location='<?php echo get_permalink($post->ID); ?>'"> <div class="blog-card-img"> <img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($post->post_title); ?>" loading="lazy"> <div class="blog-card-overlay"></div> <span class="blog-card-cat"><?php echo esc_html($cat_name); ?></span> </div> <div class="blog-card-content"> <div class="blog-card-meta"> <span class="blog-meta-item"><i class="fas fa-calendar"></i><?php echo get_the_date("M j, Y", $post->ID); ?></span> <span class="blog-meta-item"><i class="fas fa-clock"></i><?php echo ceil(str_word_count(strip_tags($post->post_content)) / 200); ?> min read</span> <span class="blog-meta-item"><i class="fas fa-user"></i><?php echo get_the_author_meta("display_name", $post->post_author); ?></span> </div> <h3 class="blog-card-title"><?php echo esc_html($post->post_title); ?></h3> <p class="blog-card-excerpt"><?php echo esc_html($excerpt); ?></p> <div class="blog-card-footer"> <div class="blog-card-author"> <div class="blog-author-avatar"><?php echo strtoupper(substr(get_the_author_meta("display_name", $post->post_author), 0, 1)); ?></div> <span class="blog-author-name"><?php echo get_the_author_meta("display_name", $post->post_author); ?></span> </div> <a href="<?php echo get_permalink($post->ID); ?>" class="blog-read-btn">Read More <i class="fas fa-arrow-right"></i></a> </div> </div> </div> <?php endforeach; ?> </div> </section> <!-- CATEGORIES --> <section class="amr-section amr-categories"> <div class="amr-section-header"> <div> <div class="amr-eyebrow">Browse By Type</div> <h2 class="amr-section-title">EXPLORE<br><span class="line2">CATEGORIES</span></h2> </div> </div> <div class="cat-grid"> <div class="cat-card" onclick="window.location='<?php echo home_url('/category/reviews'); ?>'"> <div class="cat-icon"><i class="fas fa-star"></i></div> <div class="cat-name">Car Reviews</div> <div class="cat-count">Expert opinions & ratings</div> </div> <div class="cat-card" onclick="window.location='<?php echo home_url('/category/builds'); ?>'"> <div class="cat-icon"><i class="fas fa-tools"></i></div> <div class="cat-name">Project Builds</div> <div class="cat-count">Full build documentation</div> </div> <div class="cat-card" onclick="window.location='<?php echo home_url('/category/mods'); ?>'"> <div class="cat-icon"><i class="fas fa-cog"></i></div> <div class="cat-name">Modifications</div> <div class="cat-count">Performance & style upgrades</div> </div> <div class="cat-card" onclick="window.location='<?php echo home_url('/category/tips'); ?>'"> <div class="cat-icon"><i class="fas fa-lightbulb"></i></div> <div class="cat-name">Tips & Guides</div> <div class="cat-count">Expert how-to guides</div> </div> <div class="cat-card" onclick="window.location='<?php echo home_url('/category/ev'); ?>'"> <div class="cat-icon"><i class="fas fa-bolt"></i></div> <div class="cat-name">Electric Vehicles</div> <div class="cat-count">EV news & reviews</div> </div> <div class="cat-card" onclick="window.location='<?php echo home_url('/category/restoration'); ?>'"> <div class="cat-icon"><i class="fas fa-history"></i></div> <div class="cat-name">Restoration</div> <div class="cat-count">Classic car restorations</div> </div> <div class="cat-card" onclick="window.location='<?php echo home_url('/category/track'); ?>'"> <div class="cat-icon"><i class="fas fa-flag-checkered"></i></div> <div class="cat-name">Track & Racing</div> <div class="cat-count">Race car builds & events</div> </div> <div class="cat-card" onclick="window.location='<?php echo home_url('/category/culture'); ?>'"> <div class="cat-icon"><i class="fas fa-camera"></i></div> <div class="cat-name">Car Culture</div> <div class="cat-count">Shows, meets & events</div> </div> </div> </section> <!-- STATS --> <section class="amr-stats"> <div class="stats-grid"> <div class="stat-item"> <div class="stat-number" data-count="50000">0</div> <div class="stat-label">Community Members</div> </div> <div class="stat-item"> <div class="stat-number" data-count="2500">0</div> <div class="stat-label">Articles Published</div> </div> <div class="stat-item"> <div class="stat-number" data-count="800">0</div> <div class="stat-label">Build Projects Shared</div> </div> <div class="stat-item"> <div class="stat-number" data-count="150">0</div> <div class="stat-label">Expert Contributors</div> </div> </div> </section> <!-- LATEST POSTS SLIDER --> <section class="amr-section amr-latest"> <div class="amr-section-header"> <div> <div class="amr-eyebrow">Fresh Content</div> <h2 class="amr-section-title">LATEST<br><span class="line2">POSTS</span></h2> </div> </div> <div class="posts-slider-wrap"> <div class="posts-slider" id="postsSlider"> <?php $all_posts = get_posts(array("numberposts" => 9, "post_status" => "publish")); $placeholder_imgs2 = array( "https://images.unsplash.com/photo-1544636331-e26879cd4d9b?w=600&q=80", "https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=600&q=80", "https://images.unsplash.com/photo-1583121274602-3e2820c69888?w=600&q=80", "https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=600&q=80", "https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=600&q=80", "https://images.unsplash.com/photo-1549399542-7e3f8b79c341?w=600&q=80", "https://images.unsplash.com/photo-1558981359-219d6364c9c8?w=600&q=80", "https://images.unsplash.com/photo-1517153054-15ee7af2e284?w=600&q=80", "https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?w=600&q=80" ); $cats_arr = array("Review", "Build", "Mods", "Tips", "EV", "Restoration", "Track", "Culture", "Guide"); foreach ($all_posts as $pidx => $post) : $thumb = get_the_post_thumbnail_url($post->ID, "medium_large"); if (!$thumb) $thumb = $placeholder_imgs2[$pidx % count($placeholder_imgs2)]; $cat = get_the_category($post->ID); $cat_name = !empty($cat) ? $cat[0]->name : $cats_arr[$pidx % count($cats_arr)]; $excerpt = wp_trim_words(get_the_excerpt($post->ID), 15, "..."); if (!$excerpt) $excerpt = wp_trim_words($post->post_content, 15, "..."); ?> <div class="post-slide"> <div class="post-slide-img"> <img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($post->post_title); ?>" loading="lazy"> <span class="blog-card-cat"><?php echo esc_html($cat_name); ?></span> </div> <div class="post-slide-body"> <div class="blog-card-meta"> <span class="blog-meta-item"><i class="fas fa-calendar"></i><?php echo get_the_date("M j, Y", $post->ID); ?></span> <span class="blog-meta-item"><i class="fas fa-clock"></i><?php echo ceil(str_word_count(strip_tags($post->post_content)) / 200); ?> min</span> </div> <h3 class="post-slide-title"><?php echo esc_html($post->post_title); ?></h3> <p class="post-slide-excerpt"><?php echo esc_html($excerpt); ?></p> <a href="<?php echo get_permalink($post->ID); ?>" class="blog-read-btn">Read Article <i class="fas fa-arrow-right"></i></a> </div> </div> <?php endforeach; ?> </div> <div class="posts-slider-controls"> <button class="slider-arrow-btn" id="postsPrev" title="Previous"><i class="fas fa-arrow-left"></i></button> <button class="slider-arrow-btn" id="postsNext" title="Next"><i class="fas fa-arrow-right"></i></button> </div> </div> </section> <!-- FEATURED CAROUSEL --> <section class="amr-section amr-featured-carousel"> <div class="amr-section-header"> <div> <div class="amr-eyebrow">In The Spotlight</div> <h2 class="amr-section-title">EDITOR'S<br><span class="line2">PICKS</span></h2> </div> </div> <div class="carousel-track-wrap"> <div class="carousel-track" id="carouselTrack"> <?php $editor_posts = get_posts(array("numberposts" => 4, "post_status" => "publish")); $car_imgs = array( "https://images.unsplash.com/photo-1544636331-e26879cd4d9b?w=800&q=80", "https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=800&q=80", "https://images.unsplash.com/photo-1583121274602-3e2820c69888?w=800&q=80", "https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=800&q=80" ); foreach ($editor_posts as $eidx => $post) : $thumb = get_the_post_thumbnail_url($post->ID, "large"); if (!$thumb) $thumb = $car_imgs[$eidx % count($car_imgs)]; $excerpt = wp_trim_words(get_the_excerpt($post->ID), 25, "..."); if (!$excerpt) $excerpt = wp_trim_words($post->post_content, 25, "..."); ?> <div class="carousel-slide"> <div class="carousel-slide-inner"> <div class="carousel-img"><img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($post->post_title); ?>" loading="lazy"></div> <div class="carousel-body"> <div class="amr-eyebrow">Editor's Pick #<?php echo ($eidx + 1); ?></div> <h3 style="font-size:32px;font-weight:900;text-transform:uppercase;line-height:1;margin:16px 0 20px;color:var(--white)"><?php echo esc_html($post->post_title); ?></h3> <p style="font-size:15px;color:var(--gray);line-height:1.7;margin-bottom:32px"><?php echo esc_html($excerpt); ?></p> <div class="blog-card-meta" style="margin-bottom:24px"> <span class="blog-meta-item"><i class="fas fa-calendar"></i><?php echo get_the_date("M j, Y", $post->ID); ?></span> <span class="blog-meta-item"><i class="fas fa-user"></i><?php echo get_the_author_meta("display_name", $post->post_author); ?></span> </div> <a href="<?php echo get_permalink($post->ID); ?>" class="hero-btn-main" style="display:inline-flex"> Read Full Article <span class="btn-icon"><i class="fas fa-arrow-right"></i></span> </a> </div> </div> </div> <?php endforeach; ?> </div> </div> <div class="carousel-controls"> <button class="slider-arrow-btn" id="carouselPrev"><i class="fas fa-arrow-left"></i></button> <div class="carousel-progress"><div class="carousel-progress-bar" id="carouselProgress" style="width:25%"></div></div> <div class="carousel-counter" id="carouselCounter">01 / 04</div> <button class="slider-arrow-btn" id="carouselNext"><i class="fas fa-arrow-right"></i></button> </div> </section> <!-- SHARE YOUR PROJECT --> <section class="amr-section amr-projects"> <div class="amr-section-header"> <div> <div class="amr-eyebrow">Community Showcase</div> <h2 class="amr-section-title">SHARE YOUR<br><span class="line2">BUILD</span></h2> </div> <a href="<?php echo home_url('/projects'); ?>" class="amr-view-all">All Projects <span class="arr-icon"><i class="fas fa-arrow-right"></i></span></a> </div> <div class="project-cta-box"> <h3>Got a <span style="color:var(--primary)">Project Car?</span></h3> <p>Share your automotive build journey with our community. Upload photos, document your mods, and inspire thousands of fellow enthusiasts.</p> <div class="project-upload-area" onclick="document.getElementById('uploadInput').click()" id="uploadDropZone"> <i class="fas fa-cloud-upload-alt"></i> <p><strong style="color:var(--white)">Drop your photos here</strong> or click to upload<br><span style="font-size:12px">Supports: JPG, PNG, MP4 — Max 50MB</span></p> <input type="file" id="uploadInput" accept="image/*,video/*" multiple style="display:none"> </div> <a href="<?php echo home_url('/submit-build'); ?>" class="amr-btn-primary" style="font-size:15px;padding:16px 40px;display:inline-flex"> Submit Your Full Build <i class="fas fa-arrow-up" style="transform:rotate(-45deg)"></i> </a> </div> <!-- Community project gallery --> <div class="project-grid"> <div class="project-card"> <img src="https://images.unsplash.com/photo-1619405399517-d7fce0f13302?w=600&q=80" alt="BMW M3 Build" loading="lazy"> <div class="project-card-overlay"> <div class="project-card-info"> <h4>BMW M3 Full Aero Build</h4> <span>by @JohnD · 234 likes</span> </div> </div> <div class="project-share-actions"> <button class="project-share-btn" title="Share"><i class="fas fa-share-alt"></i></button> <button class="project-share-btn" title="Like"><i class="fas fa-heart"></i></button> </div> </div> <div class="project-card"> <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" alt="Mustang GT Build" loading="lazy"> <div class="project-card-overlay"> <div class="project-card-info"> <h4>Mustang GT Street Build</h4> <span>by @SarahM · 189 likes</span> </div> </div> <div class="project-share-actions"> <button class="project-share-btn" title="Share"><i class="fas fa-share-alt"></i></button> <button class="project-share-btn" title="Like"><i class="fas fa-heart"></i></button> </div> </div> <div class="project-card"> <img src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=600&q=80" alt="Lambo Build" loading="lazy"> <div class="project-card-overlay"> <div class="project-card-info"> <h4>Lamborghini Track Setup</h4> <span>by @RaceKing · 412 likes</span> </div> </div> <div class="project-share-actions"> <button class="project-share-btn" title="Share"><i class="fas fa-share-alt"></i></button> <button class="project-share-btn" title="Like"><i class="fas fa-heart"></i></button> </div> </div> <div class="project-card"> <img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?w=600&q=80" alt="Classic Build" loading="lazy"> <div class="project-card-overlay"> <div class="project-card-info"> <h4>Classic 1967 Mustang Restore</h4> <span>by @ClassicCarl · 567 likes</span> </div> </div> <div class="project-share-actions"> <button class="project-share-btn" title="Share"><i class="fas fa-share-alt"></i></button> <button class="project-share-btn" title="Like"><i class="fas fa-heart"></i></button> </div> </div> <div class="project-card"> <img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=600&q=80" alt="JDM Build" loading="lazy"> <div class="project-card-overlay"> <div class="project-card-info"> <h4>JDM R34 GTR Full Build</h4> <span>by @JDMFan · 823 likes</span> </div> </div> <div class="project-share-actions"> <button class="project-share-btn" title="Share"><i class="fas fa-share-alt"></i></button> <button class="project-share-btn" title="Like"><i class="fas fa-heart"></i></button> </div> </div> <div class="project-card"> <img src="https://images.unsplash.com/photo-1549399542-7e3f8b79c341?w=600&q=80" alt="Custom Build" loading="lazy"> <div class="project-card-overlay"> <div class="project-card-info"> <h4>Custom Widebody Tesla Build</h4> <span>by @EVModder · 301 likes</span> </div> </div> <div class="project-share-actions"> <button class="project-share-btn" title="Share"><i class="fas fa-share-alt"></i></button> <button class="project-share-btn" title="Like"><i class="fas fa-heart"></i></button> </div> </div> </div> </section> <!-- NEWSLETTER --> <section class="amr-newsletter"> <div class="newsletter-inner"> <div class="newsletter-left"> <div class="amr-eyebrow">Stay Updated</div> <h3>Never Miss A<br><span>Great Article</span></h3> <p>Join 50,000+ automotive enthusiasts who get our weekly digest of reviews, builds, and insider tips delivered to their inbox.</p> </div> <div class="newsletter-form"> <div class="newsletter-input-wrap"> <input type="text" placeholder="Your Name"> </div> <div class="newsletter-input-wrap"> <input type="email" placeholder="Your Email Address"> </div> <button class="newsletter-submit"> <i class="fas fa-paper-plane"></i> Subscribe Now </button> <p style="font-size:12px;color:var(--gray);text-align:center">No spam. Unsubscribe anytime. We respect your privacy.</p> </div> </div> </section> <!-- FOOTER --> <footer class="amr-footer"> <div class="footer-top"> <div class="footer-brand"> <div class="amr-logo" style="margin-bottom:20px"> <img src="https://allmotoreviews.com/wp-content/uploads/2026/05/allmotoreviews-logo-v2.png" alt="AllMoto Reviews" style="height:63px;width:auto;display:block;"> </div> <p class="footer-desc">Your premier destination for automotive information, expert reviews, build guides, and a thriving community of car enthusiasts.</p> <div class="footer-social"> <a href="#" class="footer-social-btn" title="Facebook"><i class="fab fa-facebook-f"></i></a> <a href="#" class="footer-social-btn" title="Twitter/X"><i class="fab fa-x-twitter"></i></a> <a href="#" class="footer-social-btn" title="Instagram"><i class="fab fa-instagram"></i></a> <a href="#" class="footer-social-btn" title="YouTube"><i class="fab fa-youtube"></i></a> <a href="#" class="footer-social-btn" title="TikTok"><i class="fab fa-tiktok"></i></a> </div> </div> <div class="footer-col"> <h4>Content</h4> <ul class="footer-links"> <li><a href="#">Car Reviews</a></li> <li><a href="#">Build Guides</a></li> <li><a href="#">Mod Tutorials</a></li> <li><a href="#">Buyer's Guides</a></li> <li><a href="#">Top Lists</a></li> </ul> </div> <div class="footer-col"> <h4>Community</h4> <ul class="footer-links"> <li><a href="#">Submit Build</a></li> <li><a href="#">Share Images</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Events</a></li> <li><a href="#">Newsletter</a></li> </ul> </div> <div class="footer-col"> <h4>Company</h4> <ul class="footer-links"> <li><a href="#">About Us</a></li> <li><a href="#">Write For Us</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Privacy Policy</a></li> </ul> </div> </div> <div class="footer-bottom"> <p class="footer-copy">© <?php echo date("Y"); ?> AllMotoReviews. All rights reserved. Built with passion for car lovers.</p> <div class="footer-legal"> <a href="#">Terms of Use</a> <a href="#">Privacy Policy</a> <a href="#">Cookie Policy</a> </div> </div> </footer> <!-- Back to top --> <button class="back-to-top" id="backToTop" title="Back to top"><i class="fas fa-chevron-up"></i></button> <script> (function() { // HERO SLIDER var slides = document.querySelectorAll(".hero-slide"); var dots = document.querySelectorAll(".hero-dot"); var current = 0; var autoTimer; function goToSlide(n) { slides[current].classList.remove("active"); dots[current].classList.remove("active"); current = (n + slides.length) % slides.length; slides[current].classList.add("active"); dots[current].classList.add("active"); } function startAuto() { autoTimer = setInterval(function() { goToSlide(current + 1); }, 5000); } function resetAuto() { clearInterval(autoTimer); startAuto(); } document.getElementById("heroPrev") && document.getElementById("heroPrev").addEventListener("click", function() { goToSlide(current - 1); resetAuto(); }); document.getElementById("heroNext") && document.getElementById("heroNext").addEventListener("click", function() { goToSlide(current + 1); resetAuto(); }); dots.forEach(function(d, i) { d.addEventListener("click", function() { goToSlide(i); resetAuto(); }); }); startAuto(); // POSTS SLIDER var postsSlider = document.getElementById("postsSlider"); var postsOffset = 0; var postsVisible = window.innerWidth < 768 ? 1 : window.innerWidth < 1024 ? 2 : 3; var totalPosts = postsSlider ? postsSlider.children.length : 0; function slidePosts(dir) { if (!postsSlider) return; var cardW = postsSlider.children[0].offsetWidth + 24; var maxOffset = (totalPosts - postsVisible) * cardW; postsOffset = Math.max(0, Math.min(postsOffset + dir * cardW, maxOffset)); postsSlider.style.transform = "translateX(-" + postsOffset + "px)"; postsSlider.style.transition = "transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)"; } document.getElementById("postsPrev") && document.getElementById("postsPrev").addEventListener("click", function() { slidePosts(-1); }); document.getElementById("postsNext") && document.getElementById("postsNext").addEventListener("click", function() { slidePosts(1); }); // CAROUSEL var carouselTrack = document.getElementById("carouselTrack"); var carouselCurrent = 0; var carouselTotal = carouselTrack ? carouselTrack.children.length : 4; function updateCarousel() { if (!carouselTrack) return; carouselTrack.style.transform = "translateX(-" + (carouselCurrent * 100) + "%)"; var progress = ((carouselCurrent + 1) / carouselTotal * 100); var pb = document.getElementById("carouselProgress"); var cc = document.getElementById("carouselCounter"); if (pb) pb.style.width = progress + "%"; if (cc) cc.textContent = String(carouselCurrent + 1).padStart(2, "0") + " / " + String(carouselTotal).padStart(2, "0"); } document.getElementById("carouselPrev") && document.getElementById("carouselPrev").addEventListener("click", function() { carouselCurrent = (carouselCurrent - 1 + carouselTotal) % carouselTotal; updateCarousel(); }); document.getElementById("carouselNext") && document.getElementById("carouselNext").addEventListener("click", function() { carouselCurrent = (carouselCurrent + 1) % carouselTotal; updateCarousel(); }); setInterval(function() { carouselCurrent = (carouselCurrent + 1) % carouselTotal; updateCarousel(); }, 7000); // NAVBAR SCROLL var nav = document.getElementById("amrNav"); var backTop = document.getElementById("backToTop"); var progress = document.getElementById("readingProgress"); window.addEventListener("scroll", function() { var scrolled = window.scrollY; if (nav) nav.classList.toggle("scrolled", scrolled > 50); if (backTop) backTop.classList.toggle("visible", scrolled > 400); if (progress) { var total = document.documentElement.scrollHeight - window.innerHeight; progress.style.width = (scrolled / total * 100) + "%"; } }); if (backTop) backTop.addEventListener("click", function() { window.scrollTo({top: 0, behavior: "smooth"}); }); // COUNTER ANIMATION function animateCounter(el) { var target = parseInt(el.getAttribute("data-count")); var duration = 2000; var start = null; function step(ts) { if (!start) start = ts; var progress = ts - start; var val = Math.min(Math.round(progress / duration * target), target); el.textContent = val.toLocaleString(); if (progress < duration) requestAnimationFrame(step); } requestAnimationFrame(step); } var counters = document.querySelectorAll("[data-count]"); var counterObserver = new IntersectionObserver(function(entries) { entries.forEach(function(e) { if (e.isIntersecting) { animateCounter(e.target); counterObserver.unobserve(e.target); } }); }); counters.forEach(function(c) { counterObserver.observe(c); }); // UPLOAD DRAG & DROP var dropZone = document.getElementById("uploadDropZone"); if (dropZone) { ["dragover", "dragenter"].forEach(function(e) { dropZone.addEventListener(e, function(ev) { ev.preventDefault(); dropZone.style.borderColor = "var(--primary)"; dropZone.style.background = "rgba(200,242,58,0.06)"; }); }); ["dragleave", "drop"].forEach(function(e) { dropZone.addEventListener(e, function(ev) { ev.preventDefault(); dropZone.style.borderColor = ""; dropZone.style.background = ""; }); }); } var uploadInput = document.getElementById("uploadInput"); if (uploadInput) { uploadInput.addEventListener("change", function() { if (this.files.length > 0) { alert("Photos selected: " + this.files.length + "\nSubmit your full build to share with the community!"); } }); } // PROJECT SHARE BUTTONS document.querySelectorAll(".project-share-btn").forEach(function(btn) { btn.addEventListener("click", function(e) { e.stopPropagation(); if (navigator.share) { navigator.share({ title: "Check out this build on AllMotoReviews!", url: window.location.href }); } else { var url = encodeURIComponent(window.location.href); window.open("https://twitter.com/intent/tweet?url=" + url + "&text=Check+out+this+awesome+build+on+AllMotoReviews!", "_blank"); } }); }); // NEWSLETTER document.querySelector(".newsletter-submit") && document.querySelector(".newsletter-submit").addEventListener("click", function() { var email = document.querySelector('.newsletter-input-wrap input[type="email"]'); if (email && email.value) { alert("Thanks for subscribing! Welcome to the AllMotoReviews community!"); email.value = ""; } else { alert("Please enter your email address."); } }); // VIDEO MODAL - default to an embed demo document.getElementById("videoModal") && document.getElementById("videoModal").addEventListener("click", function(e) { if (e.target === this) this.classList.remove("open"); }); // SMOOTH SCROLL for anchor links document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { anchor.addEventListener("click", function(e) { var target = document.querySelector(this.getAttribute("href")); if (target) { e.preventDefault(); target.scrollIntoView({behavior: "smooth"}); } }); }); // TOUCH SWIPE for hero var touchStartX = 0; var heroEl = document.getElementById("hero"); if (heroEl) { heroEl.addEventListener("touchstart", function(e) { touchStartX = e.touches[0].clientX; }, {passive: true}); heroEl.addEventListener("touchend", function(e) { var diff = touchStartX - e.changedTouches[0].clientX; if (Math.abs(diff) > 50) { goToSlide(current + (diff > 0 ? 1 : -1)); resetAuto(); } }, {passive: true}); } })(); </script> <?php wp_footer(); ?> </body> </html> <?php echo ob_get_clean(); exit; } add_action( "template_redirect", "allmoto_serve_custom_homepage", 1 );