# 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.
# OnlineCoinFlips.com Privacy Policy Page — Development Specification and Final Content Brief

Create a professional, modern, accessible, SEO-friendly Privacy Policy page for **OnlineCoinFlips.com** at:

**https://onlinecoinflips.com/privacy**

Do not generate HTML, CSS, or JavaScript during this phase. This document defines the approved page structure, content, design, behavior, and operational facts that must be confirmed before publication.

## 1. SEO Configuration

- **Focus keyword:** privacy policy
- **SEO title:** Privacy Policy | OnlineCoinFlips.com
- **Meta description:** Read the privacy policy for OnlineCoinFlips.com to learn about website information handling, contact inquiries, cookies, third-party services, and privacy questions.
- **H1:** Privacy Policy
- **Canonical URL:** https://onlinecoinflips.com/privacy

Do not add legal or privacy-policy structured data unless a supported schema is deliberately selected and accurately implemented.

## 2. Design and Technical Direction

Use a premium editorial legal-document presentation with:

- Soft-white `#F2F2ED` page background.
- White elevated content surfaces.
- Navy `#464B71` headings and important legal text.
- Ocean blue `#118AB2` links and interactive accents.
- Mint `#7CD5C7` restrained decorative details.
- Inter typography.
- Maximum inner width of 1350px.
- Rounded corners, thin dividers, and subtle shadows.
- Boxicons exclusively where icons materially improve navigation.
- Exactly one H1 and a logical H2/H3 hierarchy.

The implementation must be compatible with WordPress, Divi, and WP Coder. When coding is authorized, deliver one self-contained implementation with HTML, strictly scoped CSS, and isolated vanilla JavaScript under the exact wrapper:

`#ocf-privacy-page`

Do not recreate the site header or footer.

## 3. Privacy Policy Introduction

**Eyebrow:**  
WEBSITE PRIVACY INFORMATION

# Privacy Policy

This Privacy Policy explains information relevant to privacy when visiting OnlineCoinFlips.com, using the website, or contacting us.

Please read the sections below to understand the information associated with website use and the ways you can contact us with privacy-related questions.

Do not display an effective date or “last updated” date until the site owner supplies and verifies the genuine publication or revision date.

## 4. Policy Overview

## About This Privacy Policy

OnlineCoinFlips.com provides an online coin-flipping experience. This Privacy Policy describes relevant information-handling practices associated with visiting the website and communicating with us.

It addresses information visitors may provide through the Contact page, information that may be generated through ordinary website operation, cookies and similar technologies where applicable, third-party services, privacy choices, and ways to submit privacy-related questions.

Some technical practices depend on the website’s hosting, logging, form, analytics, advertising, and integration configuration. Those practices must be confirmed before the final policy is published.

## 5. Interactive Table of Contents

## Privacy Policy Contents

Provide accessible anchor navigation to:

1. Information We Receive
2. How Information Is Used
3. Cookies and Similar Technologies
4. Third-Party Services
5. Data Sharing and Disclosure
6. Data Retention
7. Data Security
8. International Visitors
9. Your Privacy Rights and Choices
10. Children’s Privacy
11. Links to Other Websites
12. Changes to This Privacy Policy
13. Contact Us About Privacy

On desktop, use a two-column layout with a sticky Table of Contents that does not overlap the Divi header. On mobile, move the contents panel above the policy. Active-section highlighting may be included only if it works reliably with keyboard navigation and reduced-motion preferences.

## 6. Information We Receive

## Information We Receive

### Information You Provide Through Contact

Visitors may choose to contact OnlineCoinFlips.com through the Contact page. The contact form asks for a name, email address, subject, and message.

This information is used to understand the inquiry and support communication about it. Whether form submissions are also retained in WordPress depends on the website’s Contact Form 7 configuration and any associated storage extensions. The final policy must reflect that verified configuration.

Visitors should avoid including sensitive personal information that is unnecessary for their inquiry.

### Information Associated With Website Access

Websites can generate technical information through hosting systems, server logs, security tools, analytics services, or similar technologies. Depending on the services configured for OnlineCoinFlips.com, this may include information such as an IP address, browser or device details, request timestamps, requested pages, and technical diagnostic records.

Before publication, the site owner must verify which of these categories OnlineCoinFlips.com actually processes. The published policy must not present possible categories as confirmed collection.

### Information Related to Coin Flipping

OnlineCoinFlips.com provides a browser-based coin-flipping experience. The available project information does not establish whether individual flip results, histories, or related interactions are recorded.

The final policy must not claim that coin-flip results are stored, never stored, tracked, or associated with identifiable visitors unless the website’s implementation has been reviewed and confirms that statement.

## 7. How Information Is Used

## How Information Is Used

Information submitted through the Contact page may be used to:

- Understand and review an inquiry.
- Respond to questions when appropriate.
- Consider feedback provided by a visitor.
- Investigate a reported website or technical issue.
- Maintain records of relevant correspondence where appropriate.

Submitting the contact form does not, by itself, represent consent to receive promotional marketing.

Any use of information for analytics, advertising, performance measurement, security monitoring, fraud prevention, or marketing must be disclosed only when that use has been confirmed through a review of the live website and its service configuration.

## 8. Cookies and Similar Technologies

## Cookies and Similar Technologies

Cookies are small pieces of data that a website or an integrated service can ask a browser to store. Similar technologies may use browser storage, pixels, scripts, or other mechanisms to support website functions or recognize information about a browser or visit.

Websites may use these technologies for essential functionality, saved preferences, audience measurement, embedded content, or advertising. These are general categories and do not establish which technologies OnlineCoinFlips.com uses.

Before this policy is published, the live website must be reviewed to identify the cookies and similar technologies that are actually present, their purposes, their providers, and whether a consent mechanism is required.

Visitors can generally review, restrict, or remove cookies through their browser settings. Restricting browser storage may affect some website functions. Browser controls do not replace any consent mechanism that may be legally required for non-essential technologies.

Do not claim that OnlineCoinFlips.com is cookie-free or name analytics, advertising, or consent providers without evidence.

## 9. Third-Party Services

## Third-Party Services

OnlineCoinFlips.com may rely on external services to operate website features. Depending on the verified website configuration, relevant categories could include hosting, email delivery, analytics, advertising, embedded content, content delivery, or spam prevention.

When such services receive information, their handling of that information may also be governed by their own privacy terms and practices.

The published policy must identify material third-party services actually used by the website. It must not assume or name Google Analytics, Google AdSense, Cloudflare, reCAPTCHA, a hosting company, an email provider, or another service until its use has been confirmed.

## 10. Data Sharing and Disclosure

## Data Sharing and Disclosure

Information may be disclosed when necessary to operate the website, process communications, work with verified service providers, protect legitimate interests, or respond to legal obligations where applicable.

The final disclosure must reflect the website’s genuine operational relationships, including any parties involved in hosting, contact-form delivery, stored form submissions, technical monitoring, analytics, advertising, or spam prevention.

Do not publish absolute statements that OnlineCoinFlips.com never shares or sells information, that all information remains on its own servers, or that no third party can access information unless those statements have been operationally and legally verified.

## 11. Data Retention

## Data Retention

How long information remains available depends on the type of record and the systems through which it is processed. Potentially relevant records include contact emails, stored form submissions, server logs, analytics records, and other operational data.

The retention settings for these systems must be reviewed before publication. The final policy should describe the retention approach that OnlineCoinFlips.com can actually follow, taking account of operational needs and applicable legal requirements.

Do not promise a specific retention or deletion period until that schedule has been established and can be enforced.

## 12. Data Security

## Data Security

Online systems and communications can carry privacy and security risks. No method of transmission over the internet or method of electronic storage can guarantee absolute security.

Any description of safeguards used by OnlineCoinFlips.com must be based on controls that are genuinely implemented and maintained. The policy must not claim end-to-end encryption, certified infrastructure, independent audits, guaranteed protection, zero-risk processing, or verified legal compliance without supporting evidence.

## 13. International Visitors

## International Visitors

OnlineCoinFlips.com may be accessible to visitors in different countries. Privacy rights and legal obligations can vary according to a visitor’s location, the website operator’s location, and the circumstances in which information is processed.

The available project information does not establish the operator’s country, hosting location, data-center locations, international transfer destinations, or specific transfer safeguards. Location-specific transfer statements must be added only after those facts are confirmed.

## 14. Privacy Rights and Choices

## Your Privacy Rights and Choices

Depending on applicable law and the circumstances, individuals may have rights relating to their personal information. These can include asking for access, correction, deletion, or information about how personal information is handled; objecting to certain processing; or withdrawing consent where processing relies on consent.

These rights do not apply identically in every jurisdiction or situation. Requests may be subject to identity verification, legal exceptions, record-keeping obligations, and other applicable requirements.

Privacy-related requests can be sent to:

**Email:** [support@onlinecoinflips.com](mailto:support@onlinecoinflips.com)

Do not promise immediate deletion, universal fulfillment, a fixed response deadline, or access to an automated privacy dashboard.

## 15. Children’s Privacy

## Children’s Privacy

OnlineCoinFlips.com is a general online coin-flipping utility. The available project information does not establish a minimum user age, an age-verification process, children’s accounts, or a parental-consent mechanism.

If the website operator intends to restrict use by age or believes the service is directed to a particular age group, that operational policy and the applicable legal requirements must be established before an age-specific statement is published.

Questions concerning a child’s information may be submitted to [support@onlinecoinflips.com](mailto:support@onlinecoinflips.com).

## 16. External Websites

## Links to Other Websites

OnlineCoinFlips.com may provide links to websites it does not operate. External websites can maintain their own privacy policies, technologies, and information-handling practices.

OnlineCoinFlips.com does not control the privacy practices of independent external websites. Visitors should review the privacy information provided by a third-party website when they choose to visit it.

## 17. Policy Changes

## Changes to This Privacy Policy

This Privacy Policy may be revised when website practices, services, or applicable requirements change. A genuine revision date may be displayed when the policy has actually been updated.

Do not update the displayed policy date automatically on each page load. Do not promise advance email notices, individual notifications, automated alerts, or a fixed notification period unless such a process has been established.

## 18. Privacy Contact Panel

## Contact Us About Privacy

If you have questions about this Privacy Policy or would like to make a privacy-related inquiry, you can contact OnlineCoinFlips.com using the details below.

**Website:** OnlineCoinFlips.com  
**Email:** [support@onlinecoinflips.com](mailto:support@onlinecoinflips.com)  
**Contact page:** [Contact OnlineCoinFlips.com](https://onlinecoinflips.com/contact)

**CTA:** Contact Us  
**Destination:** https://onlinecoinflips.com/contact

Present this information in a white elevated panel with a navy heading, mint accent, appropriate Boxicon, ocean-blue button, rounded corners, and a restrained shadow. Do not add an address, telephone number, or response-time guarantee.

## 19. Final Navigation CTA

## Continue Exploring OnlineCoinFlips.com

Return to the homepage to use the coin-flipping tool or explore more information about the website.

**Primary CTA:** Flip a Coin Online  
**Destination:** https://onlinecoinflips.com/

**Secondary CTA:** About Us  
**Destination:** https://onlinecoinflips.com/about

Use a compact navy panel with white text, restrained mint decoration, and accessible CTA contrast. Do not reproduce the coin-flipping interface on the Privacy Policy page.

## 20. Required Operational Decisions Before Publication

The site owner or authorized technical administrator must confirm:

1. Whether Contact Form 7 submissions are stored in WordPress or another database.
2. How contact emails and any stored form submissions are retained.
3. Which technical data the hosting environment and server logs record.
4. The retention settings for server and security logs.
5. Whether coin-flip interactions or results are recorded.
6. Which cookies, local-storage entries, pixels, and comparable technologies are present.
7. Whether analytics services are enabled and, if so, which provider and settings apply.
8. Whether advertising services are enabled and, if so, which provider and settings apply.
9. Whether embedded media, content-delivery, or spam-prevention services are used.
10. The hosting, email-delivery, and other material processors involved in website operation.
11. Whether personal information is sold, shared for targeted advertising, or otherwise disclosed in ways requiring specific notices or opt-out rights.
12. The website operator’s legal identity and relevant jurisdiction.
13. The hosting and processing locations relevant to international-transfer disclosures.
14. Any actual security controls appropriate to mention.
15. The intended audience and any genuine age-related restriction.
16. The enforceable retention policy for each relevant category of information.
17. The genuine publication or revision date.

These confirmations must be reconciled into the final wording before the policy is treated as publication-ready. The page’s visual and technical readiness must not be represented as legal verification.