Atelier Mauve — Hair Salon & Colour Studio Website (7 Pages)

7 pages, each a complete, self-contained HTML page — a fashion-magazine hair salon design: a cover-style hero with a giant Instrument Serif masthead, issue line, cover lines and one tall photo; section openers with huge outlined section numbers; a column grid with drop caps, pull quotes, thin rules and page folios; ink black, cream and mauve, with copper, honey, ash, rose-gold and espresso used only in hair-strand swatches; Outfit for body text. 1. Home (index.html) — magazine-cover hero, cover-line marquee, editor's letter, a swatch ring that fans out, four departments, blow-dry feature, starting prices by stylist level, reviews, visit details and patch-test note. 2. Services & Prices (services.html) — a tabbed price menu (Cut & Style, Colour, Texture & Care, Occasion) with New Talent / Senior / Master columns, a note that colour prices depend on hair length and density, a level explainer and add-ons. 3. Colour (colour.html) — "find your colour service" tabs (balayage, highlights, all-over colour, gloss & toner, colour correction), a before/after gloss slider, the 1–10 level ribbon, upkeep meters and the 48-hour allergy alert (patch) test. 4. Our Stylists (stylists.html) — six monogram stylist cards with level, specialties and a "Book with" link, stacking level cards and a careers section. 5. Lookbook (lookbook.html) — a filterable gallery of photos, strand swatches and cutting diagrams, inspiration tips and a colour-of-the-season feature. 6. Salon Policies & FAQ (policies.html) — six numbered policies and an eight-question FAQ (FAQPage markup). 7. Book (book.html) — booking request form, patch-test, hours and deposit notes, and next steps. ANIMATION. Headlines wipe in line by line, the swatch ring's strands fan out from the ring when scrolled into view, a slow marquee of cover lines scrolls under the hero, pull-quote rules draw themselves, upkeep meters fill, cutting diagrams draw themselves, level prices count up, level cards stack on scroll, and lookbook items fade in when you filter. Everything is visible without JavaScript, and visitors who ask for reduced motion see a still page. SWATCHES. The hair-strand swatches are inline SVG. Each strand's colour comes from a class (am-sw--copper, am-sw--honey, am-sw--ash, am-sw--rose, am-sw--espresso, am-sw--chestnut, am-sw--black, am-sw--platinum), and the lighter ribbons from am-rb--honey, am-rb--platinum, am-rb--copper or am-rb--rose. The shades themselves are the --sw-* tokens in :root. In the swatch ring, each card's fan angle is its --r value. PRICE MENU & COLOUR FINDER. Both are tabs: each tab link matches the panel in the same position. Edit the prices in the tables directly. A dash means that stylist level doesn't offer the service. BEFORE/AFTER SLIDER. The sample uses one photo twice, with a warm colour filter on the "before" side to show what a gloss does. Replace both images with your own before and after photos of the same client, then delete the two filter rules under ".am-compare" in the style block. LOOKBOOK FILTER. Each item's data-tags attribute lists the filters it belongs to (colour, cut, styling, salon); each filter chip's data-filter must match one of those words. BOOKING LINKS. "Book with [stylist]" and "Ask about [service]" links add ?stylist= or ?service= to book.html, and the form pre-selects the option whose data-key matches. Keep the data-key values in sync if you rename stylists or services. FONTS. Instrument Serif (with italic) and Outfit load from Google Fonts via @font-face in each page's style block, with serif and sans-serif fallbacks. SEO. Each page opens with a labeled block (title, meta description, canonical link, Open Graph tags and JSON-LD — HairSalon, CollectionPage, AboutPage, FAQPage or ContactPage). Copy it into your real <head> when you deploy, and update the domain, address, hours and rating. FORMS. The booking request form posts nowhere and ships no backend — set its action attribute to your booking system or form service before publishing. EDITING. Change colours and fonts site-wide in the editor's Theme panel; edit the header or footer once and use "Apply to all pages"; sections can be moved, duplicated, hidden or deleted; use the Tablet and Mobile views for device-specific tweaks. CLAIMS & SAMPLE CONTENT. The salon name, address, phone, email, hours, stylists, prices, deposit amounts, policies, rating and reviews are fictional placeholders. Replace them with your own real details. All prices are sample "from" prices. The patch-test wording is general salon information, not medical advice — check it against the instructions of the colour brands you use and any state board of cosmetology rules. IMAGES. All photography is real Unsplash stock, self-hosted under /content-images: salon interiors, tools, and stylists' hands with clients seen from behind, so no photo shows a face. Stylists are shown as monogram cards — swap in your own team portraits if you like. Swatches and cutting diagrams are inline SVG art.