Correction of the display of the site header on mobile browsers

Good day, colleagues. Due to issues with the designer, we needed to start the redesign of the pages yesterday. I am attaching the layout in Figma of the pages that are ready - Figma Ready now: Main, Catalog, Product Card. What needs to be drawn: Personal Account, Cart, Order Placement, Quality and Control, Certificates, Blog, and internal blog page. I ask those who have really studied: the layouts that are already ready, the technical specifications, and prototypes — to write a control response with the technical specifications. Technical specifications - Click Prototypes - Click

It is necessary to professionally design an online store on the Khoroshop platform, making it modern, convenient, and visually appealing. Requirements: Design the main page in a unified corporate style. Set up beautiful banners, categories, and product blocks. Improve the visual design of product and category cards. Create convenient navigation and structure for the main page. Set up attractive displays for promotions, new arrivals, popular products, and brands. Optimize the site's display on mobile devices. Propose improvements for UX/UI if necessary. Utilize the capabilities of the Khoroshop platform without compromising site loading speed. Advantages: Experience in designing stores on the Khoroshop platform. Portfolio of completed projects. Understanding of modern UX/UI and e-commerce principles. Knowledge of SEO requirements when designing the site. When responding, please send: links to stores you have designed on Khoroshop; a brief description of completed works; cost and timeline for project completion.

Need a layout designer/web designer for a visual update of the website. No need to change functionality — only the appearance (HTML/CSS, images). What is currently available: A working gaming website (control panel for a private Mu Online server) on PHP, custom engine, without frameworks. Templates — regular HTML files with placeholders like $TITLE$, $USER_USER$, etc., which the engine fills with data upon loading. Styles — regular CSS, scripts — jQuery, without bundlers (Webpack/Vite) and preprocessors (SASS/LESS). The site consists of 2 functional sections: public part (for non-logged-in users — server description, news, top) and internal part (player's personal account — character stats, guilds, city, shop, etc.). Switching between them is at the content level, not separate pages. What needs to be done: Visually design the public part from scratch based on a reference (style mutts.lt, there is a ready AI concept, but it is too bright, it needs to be brought to the overall palette of the site). Update the visuals of existing pages in the internal part (personal account, city, guilds, etc.) based on a reference, while preserving all current data structure and functionality. Important: Placeholders of the engine ($...$) cannot be touched — only the markup and styles around them. All current logic (calculations, forms, AJAX requests) remains as is — it will be transferred to the new layout without changes. Access to the site files and test account will be provided after the work starts. I will attach to the order: design reference (site.png), screenshots of the current site appearance.

1. General Information about the Project Client: family amusement park in Germany (full name and domain revealed to the contractor after the project starts) Project Type: complete redesign and rebuild of the website from scratch Current Website: WordPress/Elementor, outdated, requires complete replacement Target Audience: families with children aged 2 to 12 years, region of Germany with several large cities nearby (15 to 20 minutes by car) Website Language: primary German (DE), additionally English (EN), separate language version CMS: at the discretion of the developer, WordPress with a custom theme, Webflow, or headless CMS. Do not use Elementor. Domain: existing, transferred without replacement Deadline: to be agreed upon with the client 2. Goals and Key KPIs The new website must fulfill three strategic functions: Convey the atmosphere of the park as an immersive adventure, not a list of services, but an immersion into a themed world. Maximize conversion: the website visitor should make a booking in less than 3 clicks from any page. Ensure flawless mobile UX, with over 60% of traffic expected from mobile devices. KPI #1: time to first click "Book" no more than 10 seconds from the moment the homepage loads KPI #2: Page Speed Score (Google PageSpeed Insights) at least 85 on mobile, at least 90 on desktop KPI #3: bounce rate less than 45% KPI #4: correct display in all modern browsers (Chrome, Firefox, Safari, Edge) and on iOS/Android 3. Scope of Work 3.1 Pages and Sections Minimum set of pages: Homepage: Hero section, announcement of live shows on weekends, top 5 attractions, Google reviews, CTA block Attraction catalog with age filter (0 to 3 / 3 to 6 / 6 to 12 years), cards with photos and videos Birthday packages, description plus configurator Current promotions and seasonal events, each with its own visual card Prices, table plus online booking widget (integration with external booking system) Restaurant, menu, and atmosphere Photo gallery plus embedded Instagram feed About the park, rules, FAQ (without duplicating rules) Contacts, Google Maps, contact form, working hours, clickable phone and email Mirror of all pages in English 3.2 What Needs to Be Removed from the Current Website All texts about COVID-19 restrictions (2021 to 2022), including the footer FAQ with questions about website development costs (third-party content) Outdated copyright year, replace with the current one Non-working Elementor popup buttons Outdated notifications about reopening after restrictions Duplication of park rules in the FAQ section 4. Functional Requirements P1 = critical for launch, P2 = desirable in v1.0, P3 = possible enhancements later 4.1 Hero Section (Homepage) P1, Fullscreen Video Hero: autoplay video without sound (muted, loop), 100vw by 100vh. Sound enabled on click. Overlay text slogan and CTA button. P1, text layer over video: H1 title, subtitle plus "Book" and "Learn More" buttons. Font readable on any background. P1, Sticky Navigation: navigation bar fixed at the top when scrolling, background changes from transparent to dark when scrolling. P1, Sticky CTA Button: "Book" button always visible, in the header on desktop, on mobile a fixed bar at the bottom of the screen. P2, Scroll animations: elements appear with CSS animation (fade in plus slide up) when scrolling. Use Intersection Observer or AOS.js library. No heavy 3D libraries. 4.2 Attractions P1, attraction cards: photo/video, name, brief description, age restriction icon, "More Details" button P1, age filter: client-side filter without page reload, implementation with CSS classes plus vanilla JS or Vue/React component P1, detailed attraction page: own URL, large photo/video, full description, height/age restrictions, booking button P2, short form video: 15 to 30 seconds clip for each attraction, autoplay on hover on desktop or tap on mobile 4.3 Booking System P1, integration with external booking system: widget embedded inline (iframe or JS embed) on prices and birthday pages, without opening in a new tab P1, multi-step booking flow: step-by-step wizard, type of visit, date/time, number of guests, confirmation, mandatory progress bar P1, explanation of time slots: info block next to time selection P2, live availability of slots: API request to the booking system, displaying occupied/free slots in real-time 4.4 Birthday Configurator P1, multi-step configurator: age of the birthday person, number of children, package selection, additional options, date selection, request form or direct booking P1, dynamic price calculation: updates in real-time when parameters change, without page reload P2, final summary: summary card of selection on the final step with "Request" and "Book Directly" buttons 4.5 Trust and Social Proof P1, Google Reviews widget: at least 5 reviews, average rating, stars, placed on the homepage above the booking CTA block P1, Instagram feed: embedded feed of the last 9 to 12 posts via official API or widget, link to the account P2, visitor counter: animated counter 4.6 Additional Functional Blocks P1, live status "currently open/closed": automatic marking based on working hours P1, clickable contacts: phone and email as active links, mandatory in the header and on the contact page P2, interactive park map: SVG or image map with clickable attraction zones P2, load tracker: visual indicator of expected park load P2, countdown to event: countdown widget to the nearest seasonal event P3, separate section for evening events: page or section with its own visual style and booking button 5. Non-Functional Requirements 5.1 Performance LCP no more than 2.5 seconds on mobile (3G fast) CLS less than 0.1 FID/INP less than 100 ms Google PageSpeed Score at least 85 mobile, at least 90 desktop Images: WebP format plus fallback JPEG, lazy loading, srcset Video: streaming via CDN or YouTube/Vimeo embed, do not store heavy MP4 on hosting 5.2 SEO Schema.org: LocalBusiness plus OpeningHoursSpecification plus Event Meta tags: unique title (no more than 60 characters) and description (no more than 155 characters) on each page Hreflang for language switcher Canonical URL on each page Sitemap.xml automatically generated Configured robots.txt 5.3 Accessibility WCAG 2.1, level AA as the minimum standard Alt attributes mandatory for all images Text/background contrast of at least 4.5 to 1 Full keyboard navigation ARIA attributes on all interactive elements 5.4 Security HTTPS mandatory, redirect from HTTP DSGVO/GDPR: cookie banner (Consent Management), current privacy policy CSRF protection, honeypot or reCAPTCHA v3 on all forms All dependencies up to date, without known vulnerabilities 5.5 CMS and Editability Texts, prices, working hours, photos editable via CMS without involving a developer Creation/archiving of promotions and events through the CMS interface Automatic updating of Instagram feed via API Video tutorial (10 to 15 minutes) on working with the CMS, mandatory deliverable 6. Design System 6.1 Color Palette: primary deep green, secondary medium forest green, accent red for CTA, light green for card backgrounds, beige for textural accents, dark for main text, white 6.2 Typography: expressive display font for headings (in the spirit of adventure), readable neutral sans serif for main text, minimum size 16px body, 14px caption, line height 1.5 to 1.7 6.3 Images and Media: only real photos, do not use stock photos, WebP format, minimum 1920px for hero, 800px for cards, hero video no longer than 30 to 60 seconds in loop version, all images with publication rights 6.4 Animations: hover effects smooth (scale 1.03 on cards), scroll animations fade in plus translateY, only transform and opacity for GPU acceleration 7. Expected Results Design layouts in Figma: desktop plus mobile view of all pages (desktop 1440px, mobile 375px) Responsive layout: breakpoints 375 / 768 / 1024 / 1440px, mobile first approach Ready website on staging domain for acceptance, after approval deploy to the live domain CMS setup: all editable areas configured, test-filled Video tutorial (10 to 15 minutes) on content management Basic SEO setup: meta tags, Schema, Sitemap, connection to Google Search Console Installation of Google Analytics 4 plus Google Tag Manager, event setup (click CTA, form submit, page_view) Cross-browser and cross-device testing, PageSpeed Insights report before delivery Transfer of source code (Git repository) to the client after final payment 8. Acceptance Criteria All P1 requirements implemented and tested PageSpeed Score at least 85 mobile, confirmed by screenshot Correct display on iPhone (Safari), Android (Chrome), iPad, MacBook, Windows (Chrome, Edge, Firefox) Booking form successfully submits request and sends confirmation Google Reviews load correctly Instagram feed updates automatically All links work, no 404 errors Cookie banner complies with DSGVO, GDPR Content in CMS is editable without involving a developer

General Scope of Work 80 product items on the website https://pro-aptechka.com.ua/ Data sources: Prom.ua, Rozetka or photos provided by us Access to the OpenCart admin panel will be provided️ Working with ImagesPhoto Requirements: Format: JPEG Quantity: 10-15 pcs per product (from the donor site or photos provided by us) Quality: lossless quality, minimal file size Orientation: correct Important: folder name without special characters * + " № / , etc.Sorting: Main photo — the best overall view Next — sequential reveal of the product from different angles Details, elements, featuresAdditionally: Retouching/processing — if the photos are "raw", professional processing is needed (discussed separately with additional payment. If you can create beautiful selling photos - provide samples - additional payment is negotiable) Video — a link from YouTube is added (if available) Filling Product FieldsMain Text Fields: FieldRequirementsProduct NameClear, informative, up to 110 charactersHTML tag H1Page titleMeta tag TitleSEO titleMeta tag DescriptionSEO descriptionMeta tag KeywordsKeywordsDescriptionDetailed product description (a ready prompt is available)Product TagsComma-separated Trade Data: FieldSourceProduct CodeFrom the donor site or fileSKU= Product CodePriceFrom the donor site or file QuantityAvailabilityDimensions (L x W x H) in cmFrom specificationsWeight (kg)From specificationsConnections: Manufacturer — identify and link Category — correct placement in the site structure Recommended Products — selection of similar itemsCharacteristics: Identify top characteristics for each product Find correct type/name of characteristic in the system Technical MomentsSEO URL: Filled automatically in OpenCart Mandatory check — whether it has been formed correctlyFinal Check: All photos added and displayed Video connected (if available) All fields filled in correctly