# OnlineCoinFlips.com — Global Header Development Prompt Act as a senior WordPress frontend developer, UI/UX designer, accessibility specialist, and vanilla JavaScript engineer. Create a complete, premium, modern, responsive, accessible, and production-ready global header for **OnlineCoinFlips.com**. ## Project Context - Website: OnlineCoinFlips.com - Homepage: https://onlinecoinflips.com/ - Niche: Online coin flipping and heads-or-tails decision-making - Primary SEO keyword: coin flip online - CMS: WordPress - Theme: Divi - Integration: WP Coder - Technologies: HTML5, CSS3, Bootstrap-compatible markup, and vanilla JavaScript - Icons: Boxicons exclusively - Typography: Inter - Maximum inner width: 1350px ## Brand System Use the official palette: - Navy: `#464B71` — logo area, navigation, text, and primary structure - Ocean Blue: `#118AB2` — CTA, active links, and interactive accents - Mint: `#7CD5C7` — active indicators and subtle highlights - Soft White: `#F2F2ED` — light surfaces and backgrounds - White may be used for the main header surface Maintain accessible contrast for all text, buttons, icons, focus states, and active states. The design concept is: **“Simple Navigation, Instant Decisions.”** The result should feel lightweight, polished, approachable, and purpose-built for a coin-flipping utility. Avoid generic corporate styling, oversized gradients, excessive decoration, glowing effects, and distracting animation. ## Header Structure Build one global header containing: - Left: linked website logo - Center: desktop navigation - Right: primary CTA Desktop layout: **Logo | Navigation | CTA** Vertically center all elements and maintain balanced spacing. The outer header may span the viewport, but its inner container must have a maximum width of `1350px` with responsive horizontal padding. Use the unique root wrapper: `#ocf-global-header` Do not create multiple header instances. ## Logo Display the actual website logo using an editable image `src` placeholder. This is the only permitted placeholder. Requirements: - Link to `https://onlinecoinflips.com/` - Alternative text: `OnlineCoinFlips.com` - Preserve the natural aspect ratio - Do not stretch or distort the image - Do not substitute a fictional logo, generic icon, or placeholder text Recommended limits: - Desktop width: approximately 190–220px - Desktop height: approximately 48–55px - Mobile width: approximately 150–180px ## Navigation Use this exact order on desktop and mobile: 1. Home 2. Features 3. About 4. Pricing 5. Blog 6. Contact 7. FAQs 8. Flip a Coin CTA Use these exact destinations: - Home: `https://onlinecoinflips.com/` - Features: `https://onlinecoinflips.com/features` - About: `https://onlinecoinflips.com/about` - Pricing: `https://onlinecoinflips.com/pricing` - Blog: `https://onlinecoinflips.com/blog` - Contact: `https://onlinecoinflips.com/contact` - FAQs: `https://onlinecoinflips.com/faqs` Do not add, remove, reorder, or randomly shuffle the links. Do not create dropdown menus. Desktop navigation should use: - Inter - Approximately 14–15px font size - Medium font weight - Navy text - Comfortable spacing - Subtle hover transitions - Visible keyboard focus styles - A restrained underline or bottom indicator for the active page ## Primary CTA CTA text: **Flip a Coin** Destination: `https://onlinecoinflips.com/` Place it immediately after FAQs. Style it with: - Ocean-blue background - Accessible contrasting text - Approximately 10–12px border radius - Comfortable padding - Medium or semibold typography - A valid Boxicons coin icon such as `bx-coin-stack` - Subtle hover elevation - Visible keyboard focus - Restrained transitions On mobile, place the CTA after FAQs inside the expanded menu and make it prominent and easy to tap. Do not create another coin-flipping tool or invent an unverified anchor ID. ## Active-Page Detection Automatically identify the active page with vanilla JavaScript. Requirements: - Use `window.location.pathname` - Normalize trailing slashes - Handle `/` as the homepage - Use exact matching for the established navigation paths - Do not mark Home active on unrelated pages - Keep Blog active on article pages only when the site’s URL structure reliably identifies them as blog content - Apply `aria-current="page"` to the active link - Apply the active state on page load - Use ocean-blue text plus a mint underline or indicator - Do not communicate the active state through color alone ## Mobile Navigation At the responsive breakpoint, replace the desktop menu with: **Logo | Hamburger button** Use a real button and Boxicons exclusively: - Closed icon: `bx-menu` - Open icon: `bx-x` The mobile menu must: 1. Open when the toggle is activated. 2. Close when the toggle is activated again. 3. Close when a navigation link is selected. 4. Close when Escape is pressed. 5. Close when the user clicks outside the menu. 6. Close when the viewport returns to desktop width. 7. Avoid duplicate event listeners. 8. Preserve keyboard navigation. 9. Preserve the active-page indicator. 10. Restore focus to the toggle when appropriate. Provide: - `aria-label` - `aria-expanded` - `aria-controls` - Visible focus styles - Correct hidden-state behavior - No focusable hidden controls - No keyboard traps Use a standard disclosure menu unless a modal overlay is genuinely necessary. Do not add focus trapping to a normal disclosure panel. Use a lightweight fade, slide, or expansion transition and respect `prefers-reduced-motion`. The mobile menu should use: - White or soft-white background - Navy navigation text - Ocean-blue active states - Subtle dividers - Comfortable vertical spacing - Rounded panel corners where appropriate - CTA after FAQs - Reliable stacking above page content ## Responsive Behavior Large desktop, 1200px and wider: - Logo on the left - Seven centered navigation links - CTA on the right Small desktop and tablet: - Switch to the hamburger layout when the complete navigation no longer fits comfortably - Do not compress all seven links into an overcrowded row Mobile, 320px–767px: - Left-aligned logo - Right-aligned hamburger - Collapsible navigation - Prominent mobile CTA - No horizontal overflow - No clipped or overlapping content - Comfortable touch targets Verify behavior at: - 320px - 375px - 414px - 768px - 1024px - 1280px - 1440px ## Header Positioning The header must work naturally within WordPress and Divi. Do not introduce a second sticky-header system when Divi already controls sticky positioning. If custom sticky behavior is implemented: - Scope it to `#ocf-global-header` - Respect the WordPress admin bar - Keep header height stable - Prevent page-content overlap and layout shifts - Avoid unnecessary scroll listeners A subtle shadow or surface adjustment after scrolling is acceptable if implemented efficiently. Do not automatically hide the header while scrolling. ## WordPress, Divi, and WP Coder Isolation Suggested classes include: - `ocf-header-inner` - `ocf-header-logo` - `ocf-header-nav` - `ocf-header-menu` - `ocf-header-link` - `ocf-header-cta` - `ocf-header-toggle` - `ocf-header-mobile` - `ocf-header-active` Scope every custom selector beneath: `#ocf-global-header` Never use unscoped selectors targeting: - `body` - `html` - `header` - `nav` - `a` - `button` - `img` - `.container` - `.row` - `.btn` - `.menu` - `.et_pb_menu` - `.et-l` - `.mobile_menu_bar` Do not override Divi’s global typography, navigation, buttons, responsive rules, or default WordPress elements. Use an isolated IIFE or equivalent JavaScript pattern: - No global variables - No unnecessary dependencies - No duplicate listeners - No unsafe global event behavior - Scope DOM queries to `#ocf-global-header` - Handle missing elements safely - Prevent repeated initialization - Do not interfere with Divi scripts - Do not use `document.currentScript` or `previousElementSibling` to locate the root - Do not override `window.dispatch` or `Event.prototype` Place the header in the WordPress/Divi global header area. Do not insert it as an additional page-level header. If the default Divi header remains enabled, configure the theme layout so only the intended global header appears. Do not hide Divi or WordPress elements through unsafe global CSS. ## Icons and Typography Use Boxicons exclusively. Do not use Font Awesome, Bootstrap Icons, inline icon substitutes, or another icon library. Do not load Boxicons more than once if the site already provides it. Use Inter throughout the component without duplicating an existing font load. Recommended dimensions: - Desktop navigation: 14–15px - CTA: 14–15px - Mobile links: 16px - Desktop header height: approximately 76–88px - Mobile header height: approximately 64–72px Allow the exact dimensions to adapt to the logo and available space. ## Accessibility Ensure: - Semantic header and navigation markup - Accessible logo link - Meaningful logo alternative text - Keyboard-operable controls - Correct ARIA attributes - Correct `aria-current="page"` handling - Visible focus indicators - Accessible contrast - Escape-key support - Focus restoration - Reduced-motion support - No keyboard traps - No hidden focusable navigation when the mobile menu is closed - Mouse, touch, and keyboard compatibility ## Performance Keep the component lightweight: - Use Flexbox or CSS Grid - Use vanilla JavaScript only - Avoid duplicate Bootstrap, Boxicons, and font loads - Avoid unnecessary DOM manipulation - Avoid unnecessary scroll listeners - Use efficient mobile transitions - Prevent layout shifts - Reserve appropriate logo dimensions - Do not create multiple header instances ## Content Restrictions Do not include: - Placeholder navigation links - Broken or invented URLs - Fictional social links - Reviews or testimonials - Ratings - Trust badges - Fabricated statistics or claims - Dropdown menus - Dummy buttons - Nonfunctional controls - Duplicate headers - Lorem ipsum - Unfinished content - Placeholders other than the editable logo image source ## Required Verification Before delivery, verify that: 1. The logo exists, has an editable source, and links to the homepage. 2. Navigation order is exactly Home, Features, About, Pricing, Blog, Contact, FAQs. 3. The Flip a Coin CTA appears immediately after FAQs. 4. Every URL is correct. 5. Desktop alignment remains balanced. 6. The mobile menu opens and closes correctly. 7. Link selection closes the mobile menu. 8. Escape closes the mobile menu. 9. An outside click closes the mobile menu. 10. Desktop resizing closes and resets the mobile menu. 11. Active-page detection works correctly. 12. `aria-current="page"` is applied only to the correct link. 13. All controls are keyboard-accessible. 14. Boxicons are used exclusively. 15. Inter and the official colors are used. 16. The inner maximum width is 1350px. 17. All CSS is isolated beneath `#ocf-global-header`. 18. JavaScript is isolated and safely initialized. 19. No global Divi or WordPress elements are modified. 20. The component does not duplicate the Divi header. 21. The layout works from 320px through large desktops. 22. No horizontal overflow occurs. 23. Reduced-motion preferences are respected. 24. The implementation is accessible, lightweight, polished, and publication-ready. ## Delivery Requirements When implementation is requested, return the entire header as one self-contained HTML/CSS/vanilla JavaScript solution suitable for the WordPress/Divi global header area through WP Coder. The implementation must use: - The official brand colors - Inter - An editable logo image source - The exact required navigation order and URLs - The Flip a Coin CTA immediately after FAQs - A fully functional mobile disclosure menu - Automatic active-page highlighting - Boxicons exclusively - A 1350px maximum inner width - CSS and JavaScript scoped to `#ocf-global-header` Do not generate the implementation until coding is explicitly requested.
The instructions conflict: the main request repeatedly requires a development prompt with no code, while the appended automation requires exactly three code blocks containing HTML, CSS, and JavaScript. Please choose one: 1. Development prompt only, with no code. 2. Production implementation in exactly three `html`, `css`, and `js` blocks.