# Luma Dental Studio — Theme 3

Theme 3 is a polished, responsive dental and outpatient-healthcare website concept built with plain HTML, CSS, and JavaScript. It has no framework, package manager, database, or build step.

Luma Dental Studio is a fictional, customizable demo brand. All contact information, reviews, statistics, patient stories, credentials, licenses, insurance affiliations, access details, hours, services, financing statements, clinical statements, and availability claims are placeholders. They are visibly labeled in the website and must be verified or replaced before publication.

## Preview the website

Double-click `index.html` to open it in a browser, or upload the complete folder to a static website host.

For the most accurate local preview, serve the folder with any simple static server. The site itself does not require a server once deployed.

## Fast customization

### Business name, phone, email, address, hours, map, and links

Open `script.js` and edit the `CONFIG` object at the very top:

- `businessName` — complete practice name
- `shortName` — short logo name
- `phoneDisplay` and `phoneLink`
- `email`
- `addressHtml`
- `mapUrl`
- `hoursHtml`
- `serviceAreaHtml`
- `privacyUrl`
- `accessibilityUrl`

Repeated details throughout the page update from this one object. Also update the page `<title>` and meta description near the top of `index.html`.

### Brand colors and typography

Open `styles.css` and edit the variables in the first `:root` block. The most important tokens are:

- `--ink` and `--ink-deep` — primary clinical blue-green
- `--blue`, `--blue-soft`, and `--mist` — supporting cool palette
- `--coral` and `--coral-deep` — conversion accent
- `--cream` and `--porcelain` — warm surface colors
- `--serif` and `--sans` — heading and body fonts

The current Google Fonts are linked in `index.html`. For a fully self-hosted implementation, replace them with licensed local font files and update the font variables.

### Services and treatments

Search `index.html` for `service-card`. Each service includes a heading, overview, sample treatment list, and call-to-action. Replace them with services the practice is qualified and licensed to provide. Also update:

- the treatment options in the appointment form
- FAQ answers related to services
- footer service links
- all starred or placeholder clinical language

Avoid making outcome guarantees. Have a licensed clinician and appropriate legal/compliance reviewer approve all clinical advertising copy.

### Insurance, payment, and financing

Search `index.html` for `insurance-card`. Replace the example plan names and policies with current, documented information. Confirm network participation for each plan and consider language that asks patients to verify benefits directly with their carrier.

If financing is offered, add the actual provider, eligibility language, APR/term disclosures, and links required by the provider and applicable law. The current financing sentence is placeholder language, not an offer of credit.

### Reviews, statistics, credentials, and licensing

Every demo item is labeled in the page. Before publication:

- replace fictional reviews with reviews the practice has permission to reproduce
- link to original review sources when appropriate
- substantiate every statistic and keep supporting records
- replace the fictional clinician, biography, education, memberships, and focus areas
- verify professional licenses and affiliations directly with the issuing organizations
- replace `License #DEMO-00000` with accurate, jurisdiction-appropriate disclosure—or remove it if not required
- ensure testimonials and any material connections are disclosed as required

Never remove the placeholder labels while leaving placeholder content in place.

### Patient story and before/after area

The case study is intentionally an abstract, clearly labeled illustration. It is not a clinical photograph and the patient, quote, timeline, and plan are fictional.

If replacing it with a real case:

- obtain documented patient authorization that specifically covers marketing use
- avoid identifying information that is not authorized
- use consistent lighting, angle, scale, color, and editing across clinical images
- do not retouch results in a misleading way
- state that results vary and that the example does not guarantee an outcome
- follow dental board, advertising, privacy, and professional rules that apply in the practice’s jurisdiction

### Photography

The project-local hero photography is in `assets/`:

- `luma-hero.jpg` — optimized website image used by the page
- `luma-hero-original.png` — original high-quality generated source

Replace the optimized file with a wide image using the same filename, or change `.hero-image` in `styles.css`. Keep important subjects toward the right so the responsive crop works well. Add accurate alternative text in `index.html` when the subject changes.

The included image was created specifically for this concept with OpenAI image generation. Final generation brief: a premium, natural editorial photograph of a calm dentist speaking with an adult patient in a bright contemporary clinic; subjects on the right, clear negative space on the left; porcelain white, mineral blue, and warm apricot palette; no logos, text, procedures, needles, blood, X-rays, or exaggerated results.

## Appointment form and HIPAA warning

The appointment form is a frontend demonstration only. It validates fields and shows an on-page success state, but it does not transmit or store data.

Do not connect the form to ordinary email, generic form collectors, spreadsheets, analytics session replay, or an unreviewed CRM when collecting patient information.

Before enabling live submissions:

1. Choose a secure workflow that is appropriate for protected health information and supports the practice’s HIPAA obligations, including a Business Associate Agreement where required.
2. Minimize what the form collects. Keep clinical details out of a general appointment request unless they are truly necessary.
3. Add the practice’s approved Notice of Privacy Practices, website privacy policy, consent language, data-retention policy, breach procedures, and accessibility statement.
4. Review hosting, logs, analytics, backups, access controls, encryption, integrations, and vendors with qualified privacy/security advisors.
5. Test the complete live workflow, including failure states, notification routing, response times, and deletion/retention behavior.

The current JavaScript deliberately resets the form and confirms that nothing was sent.

## Accessibility and interaction notes

The concept includes:

- skip navigation
- keyboard-visible focus states
- semantic headings and landmarks
- labeled form controls and inline validation
- accessible mobile-navigation state
- accessible FAQ buttons with expanded/collapsed state
- live form status messaging
- reduced-motion support
- large mobile tap targets
- persistent mobile call and appointment actions

Before launch, test the final customized version with keyboard-only navigation, browser zoom, multiple screen sizes, automated accessibility tools, and representative screen readers. Recheck contrast if brand colors change.

## Pre-publication checklist

- [ ] Replace the fictional Luma brand and all demo contact details.
- [ ] Replace or verify every visibly marked placeholder.
- [ ] Confirm services, clinical descriptions, claims, and emergency instructions with a licensed clinician.
- [ ] Verify licenses, credentials, memberships, and insurance network participation.
- [ ] Replace reviews and statistics with authorized, supportable content.
- [ ] Replace the fictional patient case or remove the section.
- [ ] Replace the demo map, address, service area, hours, and accessibility statements.
- [ ] Add real privacy, accessibility, terms, social, and required legal links.
- [ ] Connect only a properly reviewed secure scheduling/form workflow.
- [ ] Complete HIPAA, privacy, security, accessibility, dental-advertising, and local legal review.
- [ ] Test phone, email, map, navigation, form, and all links on desktop and mobile.
- [ ] Optimize replacement images and confirm permission to use them.
- [ ] Update the title, description, favicon, analytics, and search/social metadata.

## Included files

- `index.html` — complete page structure and content
- `styles.css` — design system, layout, animation, and responsive styles
- `script.js` — configuration, navigation, FAQ, form validation, counters, and reveal interactions
- `README.md` — customization, compliance, and publishing guide
- `assets/luma-hero.jpg` — optimized local hero image
- `assets/luma-hero-original.png` — original image source

## ZIP package

`Luma-Dental-Theme-3.zip` contains the editable website source and local imagery. Regenerate the ZIP after making changes so the archive stays in sync with the folder.